Html基础语法 | Tropical Cat

Html

软件语言

发布日期: 2019-01-08 文章字数: 3.8k 阅读时长: 16 分阅读次数:

Html是一种超文本标记语言( hypertext markup language )，超链接（实现页面跳转）；

html标准结构：

<!doctype html> //声明文档类型，由渲染引擎解析
<html>  //根标签
    <head>  //头部标签，里面的内容是给浏览器/搜索引擎看的
        <title></title> //标题标签
    </head>

    <body>  //主体标签，给用户、浏览者看
    </body>
</html>

html和htm是一样的，后缀名不能决定文件格式，只能决定文件打开方式；
html标签分类：

单标签 <!doctype html>
双标签<html></html>、<body></body>、<title></title>

html标签关系：

包含（嵌套）：<head><title></title><head>父子关系
并列关系：<head></head><body></body>兄弟姐妹关系

简单标签

1、单标签

注释标签：ctrl + /
换行标签：<br/>在html5中可以省略/
水平线标签：<hr />

2、双标签

标题标签<h1></h1>取值是 h1-h6，一个页面中只能有一个h1。
段落标签：<p>段落内容</p>特点：上下自动生成空白行；<br/>换行不会生成空白行；
文本标签：<font size="16" color="red" >文本内容</font>早期做网站时候使用；

3、文本格式化标签：

加粗：<strong></strong>,<b></b>,作中建议使用strong；
倾斜：<em></em>，<i></i>,工作中建议使用em；
删除线：<del></del>,<s><s/>，工作中建议使用del；
下划线：<ins></ins>,<u></u>,工作中建议使用ins。
建议使用的都是更具语义化，可读性更强。

4、图片标签

<img src="" alt="" title="提示文本" width="" height=""/>

src: 图片的来源，必写属性；
当鼠标放在图片上时显示 title 的内容；
当图片加载失败时显示 alt 的内容;
如果不设置图片宽高,显示图片默认大小，如果只设置其中一个，会进行等比例缩放，如果两个都设置就会按照设置的大小进行展示。

5、a标签(超链接)

<a href="" title="" target="">登录</a>

href 存放目标页面的url，为必写属性；
鼠标放在超链接上显示 title 的内容；
target为页面打开的方式，默认在原页面打开_self，如果设置值为
_black，就会打开一个新的页面进行展示。

锚链接

首先定义一个锚点：在标签中添加一个id属性；
超链接到锚点:<a href="#id属性名">跳转</a>

绝对路径和相对路径

相对路径：相对于文件自身出发

文件(html文档)和图片在同一个目录(文件夹)，直接写文件名；
如果图片在下一级目录里，src就为文件夹名+/+图片名称；
如果图片在上一级目录里，scr就是 ../ + 图片名

绝对路径

电脑上绝对路径：从电脑盘符开始，如F:\Documents\学习\前端学习\mage.png；

空链、压缩包下载、超链接的优化写法、特殊字符：

空链：当不知道跳转链接时候使用：<a href="#">空链</a>

压缩包下载，<a href="xxx/mage.rar">压缩包</a>，了解就行，工作中一般不会这样使用。

超链接的优化写法，让页面中所有的标签在点击时都打开新窗口：

<head>
  <base target="_blank">
</head>

特殊字符：

空格 空格符 &nbsp
< 小于号 &lt
> 大于号 &gt
& 和号 &amp
￥ 人民币 &yen
© 版权 &copy
® 注册商标 &reg
° 摄氏度 &deg
± 正负号 &plumn
× 乘号 &times
÷ 除号 &divide
² 平方（上标2） &sup2
³ 立方（上标3） &sup3

中级标签

1、列表标签

无序列表

<ul type="disc">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

type可以取三个值，square样式为小方块、circle样式为空心小圆点、disc为实心小圆点（默认样式）。

有序列表

<ol type="1" start="3">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

type可以更改标号样式，type可取的值为：1、a、A、i、I等，start设置从哪一个值开始依次往后排序。

定义列表

<dl>
  <dt>小标题</dt>
  <dd>解释标题<dd>
  <dd>解释标题<dd>
  <dd>解释标题<dd>
  <dd>解释标题<dd>
</dl>

2、音乐标签

<embed src="" hidden="true" />，hidden设置为true时，隐藏音乐播放器，比audio标签多一块黑色的背景。

跑马灯：页面自动滚动效果

<marquee height="80" weight="200" bgcolor="red" behavior="alternate" direction="down">...</marquee>
中间的内容可以是文字、图片，也可以是由程序生成的文字或图片；

behavior设置滚动的方式，alternate表示在两端之间来回滚动，scroll表示一端滚动到另一端（会重复），slide表示由一端滚动到另一端（不会重复）；
direction设置滚动方向，down表示向下滚动，left向左，right向右，up向上；
loop表示滚动的次数，-1时无限滚动；
scrollamount设置滚动速度，值越大滚动速度越快；

几种HTML结构的快速搭建

html:xt + tab，过渡结构；
html:xs + tab，严格结构；
! + tab，html5标签结构

高级标签

1、meta标签

编码格式，在meta标签里面设置charset，英语用ascll、ansi；日文、韩文用Unicode；中文的用gbk、gbk2312；台湾big5（繁体字符）；utf-8支持180到200个国家语言，所以用utf-8基本能解析所有国家语言<meta charset="utf-8">；
关键字：给搜索引擎看，主要用于SEO，<meta name="keywords" content="阳光,帅气,有担当,进步">(逗号使用英语格式的)；
网页描述：在搜索的时候会出现的描述：<meta name="description" content="江苏是一个好地方，有山有人妹子水灵">；
网页重定向：<meta http-equiv="refresh" content="5;http://baidu.com">过5秒之后跳转到设定的页面;
告诉搜索引擎站点的作者：<meta name="author" content="姓名">（不常用）；
<meta name="robots" content="all/none/index/noindex/follow/nofollow">（不常用，了解）：
- all：文件将被检索，且页面上的链接可以被查询；
- none：文件将不被检索，且页面上的链接不可以被查询；
- index：文件将被检索；
- noindex：文件将不被检索，但页面上的链接可以被查询；
- follow：页面上的链接可以被查询；
- nofollow：文件将不被检索，页面上的链接可以被查询。

2、link标签

链接外部样式表文件<link rel="stylesheet" href="1.css">;
设置网站icon：<meta rel="icon" href="xxx.png">

3、表格标签

展示数据，是对网页重构（css+div）的一个有益补充；
属性：
- 边框属性：border；
- 表格大小会根据内容自动进行填充，也可以自己设定；
- 单元格之前的距离：cellspacing，默认值为2；
- 内容和边框的距离:cellpadding；
- 对齐方式：align，有三个值：left/right/center,如果给表格设为center，表格居中；如果给tr设置center，一行的内容居中；如果给td设置center，则某一列的内容居中，优先级：td > tr > table
  两行三列表格：创建表格可以用快捷方式table>tr*2>td*3

<table border="1" bordercolor="red" width="400" height="200" cellspacing="0" cellpadding="5" align="center" bgcolor="orange"> //表格
  <tr align="center">     //行
      <td>张珊</td>   //列
      <td>24</td>
      <td>工程师</td>
  </tr>

  <tr>
      <td align="center">张珊</td>
      <td>24</td>
      <td>工程师</td>
  </tr>
</table>

表格完整结构：表格拥有完整结构会对SEO更友好，但是没有的话也不要求，在thead等里面设置属性不管用，需要在对应的tr或者td中设置

<table>
  <thead>
      <tr>
          <td>标题</td>
          <td>标题</td>
          <td>标题</td>
      </tr>
  </thead>

  <tbody>
      <tr>
          <td>数据</td>
          <td>数据</td>
          <td>数据</td>
      </tr>
      <tr>
          <td>数据</td>
          <td>数据</td>
          <td>数据</td>
      </tr>
  </tbody>

  <tfoot>
      <tr>
          <td>数据</td>
          <td>数据</td>
          <td>数据</td>
      </tr>
      <tr>
          <td>数据</td>
          <td>数据</td>
          <td>数据</td>
      </tr>
  </tfoot>
</table>

给表格添加标题：

<table >
  <caption>表格名称</caption>
  <tr>
      <td>张珊</td>
      <td>24</td>
      <td>工程师</td>
  </tr>

  <tr>
      <td>张珊</td>
      <td>24</td>
      <td>工程师</td>
  </tr>
</table>

单元格合并，同一行的单元格合并：

<table >
<caption>表格名称</caption>
<tr>
    <td colspan="2">张珊</td>

    <td>工程师</td>
</tr>

<tr>
    <td>张珊</td>
    <td>24</td>
    <td>工程师</td>
</tr>
</table>

同一列单元格合并：

<table >
<caption>表格名称</caption>
<tr>
    <td>张珊</td>
    <td>24</td>
    <td rowspan=“2”>工程师</td>
</tr>

<tr>
    <td>张珊</td>
    <td>24</td>

</tr>
</table>

设置列标题：th,会将内容加粗，居中显示

<table >
  <caption>表格名称</caption>
  <tr>
      <th>一月份</th>
      <th>二月份</th>
      <th>三月份</th>
  </tr>

  <tr>
      <td>张珊</td>
      <td>24</td>
      <td>工程师</td>
  </tr>
</table>

垂直方向对齐方式：valign=”top/middle/bottom”;
细线表格：设置border=”1”时，其实单元格之间的线的宽度是2。设置细线表格的思路：设置表格背景色，然后再设置cellspacing=”1”。

4、表单标签

输入信息，收集信息；
表达组成：提示信息、表单控件（输入框）、表单域；

<form action="xxx" method="get/post">
  用户名：<input type="text" name="username">
  密码：<input type="password" name="pwd">
  <input type="submit">
</form>

action:处理信息；
method：有两个值可取，get和post。get：通过地址栏提供（传输）信息，安全性差；post：通过xxx来处理信息，安全性相对较高。

5、文本输入框

<input type="text" maxlength="8" readonly="readonly" name="username" value="jiangjiang" placeholder="请输入用户名">

maxlength：设置输入的最大字符长度；
readonly：设置输入框为只读状态；
value：设置默认值；
placeholder：提示用户进行操作

<input type="text" maxlength="8" disable="disable" name="username">

disable：输入框没有激活；
name：给输入框设置名字，以便进行区分；

<input type="password" maxlength="8" disable="disable" name="username">

密码输入框：输入的信息会变成暗文，文本输入框的所有属性对密码输入框都有效；

单选框

<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女

一组单选按钮必须要设置同样的name，否则单选无效；
通过checked来设置默认选中项；

多选框

<input type="checkbox" name="hobby" checked="checked">喝酒
<input type="checkbox" name="hobby">抽烟
<input type="checkbox" name="hobby">烫头发

多行文本框
<textarea cols="30" rows="10"></textarea>

- cols：控制输入字符的长度；
- rows：控制输入的行数；

文件上传控件
<input type="file">
按钮

提交按钮：可以实现信息提交<input type="submit">;
普通按钮：不能提交，通常配合js使用<input type="button" value="普通按钮">；
图片按钮：可实现信息提交功能<input type="image" src="xxx.jpg">;
重置按钮：将信息重置到默认状态<input type="reset">

将表单信息分组

将表单内一组的内容放到<field></field>中，表单名称放到<legend></legend>中

<form action="xxx" method="get/post">
<fieldset>
    <legend>个人信息提交</legend>
    用户名：<input type="text" name="username">
    密码：<input type="password" name="pwd">
    <input type="submit">
</fieldset>
</form>

表单的其它控件

网址输入框：<input type="url">，会要求输入正确的网址格式，但是空也可以提- - 交，以后会用js进行判断；
日期控件：<input type="date">；
时间控件：<input type="time">；
邮件控件：<input type="email">,要求输入正确的邮件格式，但是空也可以提交；
数字控件：<input type="number" step="2">，有一个上下的小三角，可以步进，每次调整的值的大小为2；
滑块控件：<input type="range" step=20>

下拉列表

普通下拉列表

<select multiple="multiple">
  <option>下拉列表选项1</option>
  <option>下拉列表选项2</option>
  <option selected="selected">下拉列表选项2</option>
</select>

- multiple:设置多选；
- selected:设置默认选中项，如果不设置，默认选择第一个选项；

分组下拉列表：

<select>
  <optgroup label="江苏">
      <option>苏州</option>
      <option>无锡</option>
      <option>常州</option>
  </optgroup>
  <optgroup label="浙江">
      <option>杭州</option>
      <option>温州</option>
      <option>绍兴</option>
  </optgroup>
</select>

概述详细信息标签

<details>
    <summary>简介</summary>
    发动机卡拉的交罚款了打飞机考虑到九分裤了打手机发开发阶段
</details>

标签语义化

标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）；
标签语义化意义：

网页结构合理；
有利于SEO和搜索引擎简历良好沟通，有了良好的结构和语义，你的网页内容自然容易被搜索引擎抓取；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）；
便于团队开发和维护。

好的语义化的网站标准：去掉样式表文件之后，结构依然很清晰。

标签语义化的注意事项：

尽可能少的使用没有语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量使用p，因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：font、b、i、s、u等，改用css样式；
需要强调的文本，可以包含在strong或者em标签中，strong默认样式是加粗（不要用b），em是斜体（不用i）；

赏

转载请注明: Tropical Cat Html基础语法

Hexo+Github搭建网站

什么是Hexo?hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在Github和Heroku上，Hexo也是github的开源项目搭建步骤：1、获得域名而且Github托管网站，完全不需要备案

2019-01-21 软件框架

Github node.js hexo

本篇

Html基础语法

Html是一种超文本标记语言( hypertext markup language )，超链接（实现页面跳转）； html标准结构：<!doctype html> //声明文档类型，由渲染引擎解析 <html> //根标签

2019-01-08 软件语言