HTML

HTML 中共有 6 个标题标签, 从 h1 到 h6。其中 h1 最重要, 它仅次于 title 标签, 即当浏览器的搜索引擎检索完 title 标签后, 会立即检索 h1 标签。但是请注意, 一个页面最多只能有一个 h1 标签, 如果存在很多 h1 标签, 则该网站可能被当成垃圾网站（即浏览器检索时会自动忽略该网站）。网页中一般只使用 h1 到 h3 的标签。

空格问题

在 HTML 中, 再多的空格也会被解析成一个空格, 回车键也会被解析成一个空格。

hr

该标签会生成一条水平线。

<hr />

标签转译问题

html 中所有的标签都是字母开头的, 如果想要在页面显示 < 或 > 符号, 那么, 只有数字可以直接写, 如下：

<1>

以上代码中, 页面会显示 <1>, 而不会把它当成一个标签, 但是, 里面如果是字母, 则要使用 < 或 > 的形式

&lt;b&gt;

b

<b> 标签规定粗体文本。所有浏览器都支持 <b> 标签。

提示

根据 HTML5 规范, 在没有其他合适标签更合适时, 才应该把 <b> 标签作为最后的选项。HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题, 使用 <em> 标签来表示强调的文本, 应该使用 <strong> 标签来表示重要文本, 应该使用 <mark> 标签来表示标注的/突出显示的文本。

您也能够使用 CSS 的 font-weight 属性来设置粗体文本。

实体

  表示不换行的空格
© 表示版权符号

提示

HTML实体的更多信息请见 w3cschoolopen in new window

img

该标签的 alt 属性可以被搜索引擎搜索。也可以设置它的 width 和 height 属性, 当只设置其中的一个时, 另一个属性也会按照原始比例缩放。

xhtml 语法规范

HTML 中不区分大小写, 但是, 建议使用小写
注释不能嵌套
HTML 标签的结构必须完成, 要么成对出现, 要么自结束
HTML 标签可以嵌套, 但是不能交叉嵌套
HTML 标签中的属性必须有值, 且值必须加引号（单和双都可）；个别属性除外

以上的规矩不一定都要遵守, 比如标签的自结束可以有以下两种写法：

<br /><!--xhtml中的规范-->
<br><!--H5 中的规范-->

内联框架

在一个页面中要引入另一个页面, 我们可以使用内联框架, 但是不推荐使用, 因为内联框架中的内容不会被搜索引擎检索。

<iframe src="demo02.html"></iframe>

a

target 属性用来指定打开超链接的位置, 该属性的取值如下：

_self
在当前窗口中打开, 默认就是_self
当然, target 属性也可以设置为内联框架中打开, 其值就是内联框架的 name 属性值。也可以使用 a 标签来发送邮件, 它会默认打开计算机的邮件客户端。
```
<a href="mailto:1249954968@qq.com">发送邮件</a>
```

提示

a 标签的更多信息请见 w3cschoolopen in new window

center

对其所包括的文本进行水平居中。不推荐使用, 请使用 CSS 样式来居中文本！

span

通常用此标签来为文字设置样式。

em

该标签一般用来强调着重点, 该标签默认显示为斜体。

i

该标签默认显示为斜体, 没有任何语义；通常用来设置 icon。

strong

通常用来表示内容的重要性, 该标签默认显示为粗体。

small

<p>
    pTag
    <small>smallTag</small>
</p>

cite

用来设置引用, 网页中的所有加书名号的文字都可以用它来包裹, 它表示参考的内容；有斜体的样式。

<p>
  <cite>《JavaScript权威指南》</cite>
  是一本前端红宝书
</p>

效果如下:

《JavaScript权威指南》是一本前端红宝书

q

用来设置引用, 引用别人的文章或话等。它会给文字加上双引号, 实际上是用伪元素来给前后添加的引号；它是一个行内元素。

<q>With more power, With more responsibility</q>

效果如下:
With more power, With more responsibility

blockquote

它也是一个引用, 只不过它是一个块元素, 而且不会给文字加引号。

<blockquote>学而时习之, 不亦说乎</blockquote>

sub、sup

sub 表示下标, sup 表示上标。

<p>H<sub>2</sub>O</p>
<p>X<sup>2</sup></p>

del

<p>17.00 <small><del>30.00</del></small></p>

ins

它表示插入的内容, 有下划线。

<p><ins>插入的内容</ins></p>

code

该标签中的内容表示一个代码片段, 如博客中的代码。可以和 pre 标签一起使用。

<code>
  window.onload = function(){
    alter("hello world!")
  };
</code>

pre

它会将标签中的内容以原格式输出。

<pre>
  window.onload = function(){
    alter("hello world!")
  };
</pre>

ul

通过它的 type 属性可以设置列表前面的样式, 但是不建议使用, 请使用 CSS 代替。它和 li 都是块元素。

提示

ul 标签的更多信息请见 w3cschoolopen in new window

ol

通过它的 type 属性可以设置列表前面的样式, 它和 li 都是块元素。type 可取的一些值如下（它规定在列表中使用的标记类型）:

提示

列表可以嵌套, 且 li 里面可以嵌套 ul 和 ol。

dl

它表示自定义列表, 它的子元素有 dt 和 dd。d1、dt、dd 都是块元素。

<dl>
  <dt>手机</dt>
  <dd>小米</dd>
  <dd>华为</dd>
  <dt>衣服</dt>
  <dd>长袖</dd>
  <dd>短袖</dd>
</dl>

提示

dl 也可以嵌套 ul 和 ol, dt 和 dd 也能嵌套其它列表。

table

使用 <table></table> 标签, 每一行使用 <tr></tr>, 单元格使用 <td></td>。表格被创建后默认是没有边框的。

form

使用表单时, 必须给里面的输入框设置 name 属性, 因为后台要通过它来取值。下拉列表 selection 的 name 要给 selection 设置, 而 value 要给 option 设置。可以使用 <optgroup> 给下拉列表进行分组：

<selection>
  <optgroup lable="蔬菜">
    <option>黄瓜</option>
  </optgroup>
</selection>

使用 <textarea> 设置文本域。使用 <label></label> 用来设置提示文字:

<form action="">
  <label for="username">用户名：</label>
  <input type="text" id="username"><br>
  <label for="password">密码：</label>
  <input type="password" id="password"><br>
  <input type="radio" id="r1"><label for="r1" name="rr">男</label>
  <input type="radio" id="r2"><label for="r2" name="rr">女</label>
</form>

使用 <fieldset> 来对表单项进行分组：

<form>
  <fieldset>
    <legend>基本信息</legend>
    <label for="username">用户名：</label>
    <input type="text" id="username"><br>
    <label for="password">密码：</label>
    <input type="password" id="password"><br>
  </fieldset>
  <fieldset>
    <legend>爱好</legend>
    <input type="radio" id="r1"><label for="r1" name="rr">男</label>
    <input type="radio" id="r2"><label for="r2" name="rr">女</label>
  </fieldset>
</form>

audio

<!-- 引入音频文件 -->
<!-- 该文件可以是一个网站中的文件 -->
<!-- 默认不会自动播放, 需要加上 controls -->
<!-- 使用 autoplay 来自动播放, 但是大部分浏览器不会自动播放-->
<!-- IE8 不支持 -->
<audio src="audio/羽肿 - Windy Hill.mp3" controls autoplay></audio>
<!-- 另一种引入方法 -->
<audio controls>
  <!-- 在 IE8 中给出提示 -->
  对不起, 您的浏览器不支持该音频播放器, 请升级浏览器。
  <!-- 以下中只会使用第一个能够使用的, 用来解决兼容性 -->
  <source src="audio/羽肿 - Windy Hill.mp3" type="">
  <source src="audio/羽肿 - Windy Hill.mp3" type="">
</audio>
<!-- 兼容IE8, 默认会自动播放 -->
<!-- 此标签必须制定width和height -->
<embed src="audio/羽肿 - Windy Hill.mp3" type="audio/mp3" width="300px" height="200px" />

<audio controls>
  <!-- 以下中只会使用第一个能够使用的, 用来解决兼容性 -->
  <source src="audio/羽肿 - Windy Hill.mp3" type=""/>
  <source src="audio/羽肿 - Windy Hill.mp3" type=""/>
  <embed src="audio/羽肿 - Windy Hill.mp3" type="audio/mp3" width="300px" height="200px" />
</audio>

video

<!-- 引入视频 -->
<video controls>
  <source src="" type=""/>
  <embed src="" type="">
</video>
<!-- 引入腾讯视频（复制通用代码） -->
<iframe frameborder="0"src="https://v.qq.com/txp/iframe/player.html?vid=y00247fi2c" allowFullScreen="true" width="600px"height="300px"></iframe>

其它更多标签

提示

请见 MDNopen in new window

思考

您真的知道 <html> 和 <body> 的区别吗？

对html与body的一些研究与理解open in new window

框架集

<frameset></frameset> 与内联框架不同, 它可以引用多个框架。有了 <frameset></frameset> 就不能有 <body></body> 标签。值得注意的是, 框架集已被弃用。

DOM 的嵌套规则

内联元素（行内元素）不能包含块元素, 它只能包含其它的内联元素
块级元素（包括 p 标签）不能放在 <p> 里面
有几个特殊的块级元素只能包含内联元素, 不能再包含块级元素, 这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt
li 内可以包含 div、ul、ol 等块元素
特殊的是, a 标签可以包含任何元素, 但是不能包含 a 标签

说明

H5 中已经没有块元素和行元素的说法了。

# HTML

# 标签

# head

# title

# body

# 文档声明

# 乱码问题

# meta

# 标题

# 空格问题

# hr

# 标签转译问题

# b

# 实体

# img

# xhtml 语法规范

# 内联框架

# a

# center

# span

# em

# i

# strong

# small

# cite

# q

# blockquote

# sub、sup

# del

# ins

# code

# pre

# ul

# ol

# dl

# table

# form

# audio

# video

# 其它更多标签

# 框架集

# DOM 的嵌套规则