关于 HTML

  1. HTML: Hyper Text Markup Language(超文本标记语言)
  2. 标记语言是一套标记标签(markup tag),HTML 使用标记标签来描述网页。
  3. 标签对中的第一个标签是开始标签,第二个标签是结束标签,也称为开放标签闭合标签
  4. HTML 文档包含 HTML 标签纯文本。HTML 文档 = 网页。
  5. HTML5 是当前最新的 HTML 标准。与其他标准不同的是,它是一个 “活的标准”,以后 HTML 的新内容都会添加到这个标准中,所以,不会再有 HTML6、7、8。在不久的将来,当 HTML5 完全普及之后,人们所说的 HTML 就完全指代的是 HTML5 了。

HTML 元素

关于元素

  1. HTML 元素由三部分构成:标签内容属性。以开始标签起始,以结束标签终止。标签、属性名及属性值用小写。
  2. 元素的内容是开始标签与结束标签之间的内容。
  3. 某些 HTML 元素具有空内容。
  4. 空元素在开始标签中就关闭(单标签)
  5. 大多数 HTML 元素可以嵌套,HTML 文档由嵌套的 HTML 元素构成。
  6. 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。所以无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。除非使用“计算机输出”标签。
  7. 大多数 HTML 元素被定义为块级元素或内联元素,块级元素在浏览器显示时,通常会以新行来开始(和结束),而内联元素在显示时通常不会以新行开始。

语义标签与物理样式标签

  • 语义标签:
    • 语义标签主要用于赋予一段文本一定的语义或上下文,它的样式仅仅是浏览器为了凸显出这段文本的语义而“顺便”附加给它的。不同的浏览器为同一个语义标签附加的样式可能不同。
    • 语义标签可以为浏览器、翻译系统以及搜索引擎提供有用的信息,还能提高浏览器解析速度。
  • 物理样式标签:
    • 物理样式标签仅仅是赋予一段文本某种样式,而不会赋予语义。所以它们完全可以、也最好使用 CSS 来代替。
    • 由于物理样式标签不会赋予语义,所以在浏览器、搜索引擎等看来,它们是冗余的。所以物理样式标签会降低浏览器解析速度。

举个栗子:<em></em> 标签只是表示强调,而不一定是斜体,只不过大多数浏览器用斜体来修饰 <em></em> 中的文本。而 <i></i> 就只是表示斜体,并没有表示强调的意思。从这儿就可以看出基于内容的样式和物理样式的差别。

HTML 文档基本架构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>             <!-- 声明文档类型 -->
<html lang="en"> <!-- lang 指定语言。en 为英文,zh 为中文 -->
<head> <!-- <head></head> 标签包含文档头部信息 -->
<meta charset="UTF-8"> <!-- 指定字符编码集 -->
<title>Document</title> <!-- 指定文档的标题 -->
</head>
<body> <!-- 文档主体内容全部包含在 <body></body> 标签中 -->
<!-- HTML -->
</body>
</html>

基本元素

  1. 标题 (heading):<h1></h1> - <h6></h6>。这些标签只用于标题,不要仅仅为了产生粗体或大号文本而使用标题标签(注意标签的语义)。

  2. 段落 (paragraph):<p></p>。该标签只用于声明一个段落,不要仅仅为了在一段文字前后加空行而使用段落标签(注意标签的语义)。

  3. 换行:<br/>

  4. 水平线:<hr/>

  5. 注释:<!-- -->。另外还有条件注释,如:

    1
    2
    3
    <!--[if IE 8]>
    .... some HTML here ....
    <![endif]-->

    该条件注释的作用是:定义只有 Internet Explorer 执行的 HTML 标签。

HTML 头部信息

  1. <head></head> 是所有头部信息的容器,以下标签都可以添加到 head 部分:<title><base><link><meta><script> 以及 <style>

  2. <title></title> 指定文档的标题。

  3. <base /> 标签为页面上的所有链接规定默认地址或默认目标(target

    1
    2
    3
    4
    <head>
    <base target="_blank" />
    <!-- 指定页面上所有链接的默认打开目标是新窗口 -->
    </head>
  4. <link /> 定义文档与外部资源的关系,常用来连接样式表。

  5. <style></style> 为文档定义内部 CSS 样式。

  6. <script></script> 定义用于客户端的脚本(主要是 JavaScript 脚本)。

  7. <meta /> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

    • 使用 <meta> 元素规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据:样例
    • 使用 <meta> 重定向网址:样例
    • <link rel="canonical" href="网页链接">:主要是帮助搜索引擎制定规范的链接,解决网站内容重复收录而存在多个版本的问题。如果不采用 rel="canonical" 标签,可能会导致搜索引擎对两个相同的网页的收录和排名问题不知情,久而久之,当网站存在大量这样的网页的时候,可能导致网站因存在大量重复内容而被降权、不收录甚至被K。

超链接

1
<a href="链接地址" target="打开链接的方式">文本内容</a>
  1. a —— anchor(锚点)

  2. href 属性指定链接地址,链接地址可以是本地地址网址邮件地址href: hypertext reference

  3. 有时想添加一个 <a> 元素,但暂时还不知道要将它链接到哪儿,此时可以使用固定链接。把 <a> 元素的 href 属性的值替换为一个 #,别名 hash(哈希) 符号,将其变为一个固定链接。

  4. 有些浏览器可能会对路径长度做限制,所以路径长度最好不要超过255个字符。

  5. 注意:如果 href 的值为网址,网址最后的斜杠最好不要丢。因为假如这样书写链接:href="http://www.w3school.com.cn/html"就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/“。

  6. href 的值为本地地址或网址时,可以用 target 属性指定打开链接的方式。
    target="_blank" 标识在浏览器新标签中打开链接;
    如果页面被固定在某个框架之内,可以使用 target="_top" 跳出框架。

  7. 可以使用命名锚(anchor)实现页面内的跳转或跳转到指定页面的指定位置。
    首先在文档的某个位置写

    1
    <a name="label">锚(显示在页面上的文本,也可以为空)</a>

    然后在同一个文档中创建指向该锚的链接:

    1
    <a href="#label">跳转到锚的位置</a>

    name 也可以用 id 代替。
    命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。
    假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

    如果想要跳转到指定地址的指定锚:

    1
    <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
  8. 使用 href 还可以使用户发送电子邮件,以下是几种关键字:

    关键字
    用法:

    用法
    如果 `mailto` 后面同时有多个参数,第一个参数必须以 `?` 开头,后面的参数每一个都以 `&` 分隔。

图片

1
<img src="图片地址" alt="替换文本">
  1. 图片地址可以是相对路径、绝对路径,也可以是网址。
  2. alt 指定加载失败时的替换文本。
  3. 图片可以是 jpgjpegpnggif 格式的文件。
  4. <img/> 标签是个内联元素,但在很多时候表现的像块级元素。
  5. 浏览器请求页面时,先请求 html 文档并分析,如果发现该文档引用了图片,则会一张一张地请求图片并显示它,每个图片都需要一次请求。
  6. 图片大小虽然可以使用属性调整,但太大的图片会对网速产生压力,所以最好在制作图片时就将图片调整为合适大小。更好的方法是,为每个图片制作缩略图,在网页中放置缩略图,并使用 <a href="包含原图的网页"><img src="缩略图地址" alt=.../></a> 使缩略图链接到包含原图的网页。尽量不要用 href 直接链接到原图,而是链接到包含原图的网页,因为这样可以适量的提供一些上下文。
  7. <map></map>HTML map 标签
  8. <area/>HTML area 标签

列表

  1. 无序列表(ul, unordered list)

    1
    2
    3
    4
    5
    <ul>
    <li>文本</li>
    <li>文本</li>
    ......
    </ul>
  2. 有序列表(ol, ordered list)

    1
    2
    3
    4
    5
    <ol>
    <li>文本</li>
    <li>文本</li>
    ......
    </ol>
  3. 定义列表:定义列表不仅仅是一列项目,而是项目及其注释的组合。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。例子:定义列表

表格

  1. 定义一个表格:

    • 如何用 HTML 代码定义下面这个表格?

      班级 学生数 平均成绩
      一班 30 89
      二班 35 85
      三班 32 80
    • HTML 代码实现:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <table summary="本表记录三个班中每个班的学生人数和平均成绩">
      <caption>各班人数与平均成绩</caption>
      <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
      </tr>
      <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
      </tr>
      <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
      </tr>
      <tr>
      <td>三班</td>
      <td>32</td>
      <td>80</td>
      </tr>
      </table>
    • 解释:

      • <table></table> 表示这是一个表格。
      • 每个 <tr></tr> 标签为表格的一行。
      • <td></td> 标明一行中的每个元素。如果是 <th></th>,说明这是表格头部,表格头部的文本默认加粗并居中。
      • <th><td> 标签的 rowspancolspan 属性可指定单元格占的行数与列数,用于合并单元格。
      • 可以把 <th> 标签写在每一个 <tr> 的第一行中,这样就可以让表头在左侧。
      • 如果不加 <tbody></tbody>,table 表格加载完后才显示。加上 tbody, tbody 包含行的内容下载完就直接显示,不必等待表格全部加载完成再显示。所以如果表格很长,可以用 tbody 分段,一部分一部分地显示。相似的标签还有 <thead></thead><tfoot></tfoot><thead></thead> 包含表格头,<tbody></tbody> 包含表格主题,<tfoot></tfoot> 包含表格尾注。
      • 如果使用了 thead,tbody,tfoot 标签,不过它们的顺序如何,表格都会按照 thead -> tbody -> tfoot 的顺序显示。
      • 表格默认没有边框,可以用 CSS 添加。
      • <caption></caption> 包含的文本是表格的标题。
      • 为 table 标签添加 summary 属性可以显示表格摘要。
      • 更多有关表格的内容:HTML 表格

字符实体

  1. 在 HTML 中,某些字符是预留的,这些预留字符是不能使用的,比如 < 和 >,这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,必须在 HTML 源代码中使用字符实体(character entities)。

  2. 字符实体可以用 实体名实体编号 表示。实体名较容易记忆,但浏览器也许不支持所有的实体名,但对实体编号的支持却很好。

  3. 常用字符实体:

    显示结果 描述 实体名称 实体编号
    空格 &nbsp; &#160;
    < 小于号 &lt; &#60;
    > 大于号 &gt; &#62;
    & 和号 &amp; &#38;
    " 引号 &quot; &#34;
    ' 撇号 &apos; (IE不支持) &#39;
    分(cent) &cent; &#162;
    £ 镑(pound) &pound; &#163;
    ¥ 元(yen) &yen; &#165;
    欧元(euro) &euro; &#8364;
    § 小节 &sect; &#167;
    © 版权(copyright) &copy; &#169;
    ® 注册商标 &reg; &#174;
    商标 &trade; &#8482;
    × 乘号 &times; &#215;
    ÷ 除号 &divide; &#247;
  4. HTML 实体符号参考手册

文本格式化标签

  • 语义标签

    标签 描述
    <em></em> 定义着重文字(一般表现为斜体)
    <strong></strong> 定义加重语气(一般表现为粗体)
    <ins></ins> 定义插入字
    <del></del> 定义删除字
  • 物理样式标签

    标签 描述
    <i></i> 定义斜体字
    <b></b> 定义粗体文本
    <big></big> 定义大号字
    <small></small> 定义小号字
    <sub></sub> 定义下标字
    <sup></sup> 定义上标字

引用与术语定义

以下标签都是语义标签。

  1. <q></q>(quote):表示短引用。浏览器在解析代码时会自动为 q 标签包含的文本加上引号,这个样式也可以通过 CSS 修改。

  2. <blockquote></blockquote>:表示长引用。浏览器在解析时会自动对 blockquote 标签包含的文本两端缩进。

  3. <abbr></abbr>:用于表示缩略词。内容一般呈现斜体。

  4. <dfn></dfn>:表示定义。内容呈现斜体。dfn 标签一般会定义一个 title 属性,用于阐述 dfn 定义的内容。

  5. <address></address>:定义文档或文章的联系信息(作者/邮箱/地址)。内容呈斜体,大多数浏览器会在此元素前后添加折行。

  6. <cite></cite>:定义著作的标题。内容呈斜体。如:

    1
    <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

计算机代码元素

  1. <pre></pre>:定义预格式文本(代码中的空格、换行原样输出)。常用来定义计算机代码。

  2. <code></code>:定义单行代码。不保留空格和换行。

    1
    2
    3
    <code>
    var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
    </code>
  3. <var></var>:定义数学变量。

  4. <samp></samp>:定义计算机输出实例。

    1
    2
    3
    4
    <samp>
    demo.example.com login: Apr 12 09:10:17
    Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
    </samp>
  5. <kbd></kbd>:定义键盘输入。

    1
    2
    <p>To open a file, select:</p>
    <p><kbd>File | Open...</kbd></p>
  6. 通常,HTML 使用可变的字母尺寸,以及可变的字母间距。但在显示计算机代码示例时,并不需要如此。<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

表单及表单元素

表单可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。表单用 <form></form> 标签定义。所有表单控件(文本框、文本域、按钮、单选框、多选框等)都必须放在表单标签之间,否则用户输入的信息提交不到服务器上。

1
2
3
<form action="" method="post">
......
</form>

提交方式的选择

  • 如果表单提交是被动的(比如搜索引擎的查询),并且没有敏感信息时,使用 GET 方式提交。GET 方式提交的表单数据在地址栏中是可见的。GET 最适合少量数据的提交。浏览器会设定容量限制。
  • 如果表单正在更新数据,或者包含敏感信息(例如密码)或大量数据(如文件)时,用 POST 方式提交。用 POST 方式提交时,数据会被打包成数据包提交给服务器,不会显示在网页地址栏中,所以 POST 的安全性更佳。

input 控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form action="服务器文件" method="提交方式">    <!-- action 属性指定要将信息提交给哪个服务器文件, method 属性指定提交信息的方法(如:post,get)-->
<input type="text" name=""> <!-- 文本输入框 -->
<input type="password" name=""> <!-- 密码输入框, 输入的内容会用 * 代替-->
<input type="radio" name=""> <!-- 单选框 -->
<input type="checkbox" name=""> <!-- 多选框 -->
<input type="file" name=""> <!-- 选择文件按钮。使用这个控件时,form 的 method 必须为 post -->
<input type="submit" value="提交"> <!-- 提交按钮 -->
<input type="reset" value="重置"> <!-- 重置按钮 -->
<input type="button" value="点我"> <!-- 按钮 -->
<input type="number" name=""> <!-- 可以输入数字或通过按钮选择数字 -->
<input type="range" name="">
<input type="time" name="">
<input type="date" name="">
<input type="week" name="">
<input type="month" name="">
<input type="datetime" name="">
<input type="datetime-local" name="">
<input type="color" name="">
<input type="email" name="">
<input type="url" name="">
<input type="hidden" name="">
<input type="tel" name="">
<input type="search" name="">
<input type="image" src="" alt="">
</form>
  1. <input> 显示各种表单控件。type 指定控件类型。除了 submit, button 等控件外,其他控件必须指定 name 属性来为控件命名,以备后台脚本使用,如果没有指定 name,提交不会起作用。
  2. textpassword 等文本输入控件可以使用 placeholder(place holder: 占位符) 属性来指定提示文本(会以半透明的形式显示出来)
  3. radiocheckbox 等控件可以设置布尔属性 checked,表示该选项被默认选中。
  4. 注意:同一组的单选按钮,name 属性的值一定要相同才能起到单选的作用。
  5. 关于 value 属性:
    • 在不同控件中,value 属性的作用不同。
    • 如果是 submitbutton 控件,value 是显示在按钮上的文字。
    • 如果是 radiocheckbox 等控件,value 指定提交给后台脚本的值(如:value="1" 或者 value="2"),这些值必须预先设好。
    • 在其他控件中,value 是用户输入并提交给后台脚本的值,一般不用预先设置。如果预先设置,则相当于已经为用户填好的默认值。
  6. required 属性:可以用于任何表单元素,是一个布尔属性。它指定一个域是必填项,如果未填,无法提交。(Safari 浏览器不支持该属性)
  7. 所有表单控件都可以设置 disabled 属性,表示控件不可用。
  8. maxlength 属性指定最大能输入的字符数。
  9. size 属性规定输入字段的尺寸(以字符计)。
  10. 表单通常使用 CSS 表格布局。
  11. 所有 type 值及其说明
  12. 所有 input 控件属性及其说明

其他表单控件

  1. <label></label>:当用户单击选中该 label 标签时,浏览器会自动将焦点转到和标签相关的表单控件上(即自动选中和该 label 标签相关联的表单控件)。用 for 属性指定与该 label 标签相关联的标签,for 属性的值是其 id。如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form>
    <label for="male"></label>
    <input type="radio" name="gender" id="male" /> <!-- 点击 “男” 时光标会自动跳到该输入框上 -->
    <br/>
    <label for="female"></label>
    <input type="radio" name="gender" id="female" /> <!-- 点击 “女” 时光标会自动跳到该输入框上 -->
    <br/>
    <label for="email">输入你的邮箱地址</label>
    <input type="email" id="email" placeholder="Enter email"> <!-- 点击 “输入你的邮箱地址” 时光标会自动跳到该输入框上 -->
    </form>

    可以将 <input> 标签嵌套到 <label> 中,这样就不需要写 <label>for 属性了。如:

    1
    2
    3
    4
    <label>
    <input type="radio" name="man">
    man
    </label>
  2. <datalist></datalist> 标签为 HTML5 中新增的标签,它可以为 <input> 元素规定预定义选项列表,用户会在他们输入数据时看到预定义选项的下拉列表。<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。示例
    注:safari 和 IE9 之前的浏览器不支持该标签。

  3. <textarea></textarea>:定义文本域,可以输入多行。标签之间的文本为默认文本。使用 colsrows 属性可定义列数和行数。

  4. <button></button> 元素定义可点击的按钮:

    如果 type="button",点击该按钮,表单不会提交,也就不会刷新页面;如果 type="submit",会提交表单,然后刷新页面。

    1
    2
    <button type="button" onclick="alert('Hello World!')">Click Me!</button>
    <!-- onclick="alert('文本')" 指定点击按钮后浏览器弹窗显示的文字。<button>标签包含的文本显示在按钮上。 -->
    • TODO: <button></button><input type="button" value=""> 的区别。
  5. <select></select 标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <label>爱好:</label>
    <select>
    <optgroup label="组一">
    <option>学习</option>
    </optgroup>
    <optgroup label="组二">
    <option>运动</option>
    <option>旅游</option>
    </optgroup>
    </select>

    使用 select 可以定义一个下拉列表,每个 option 是一个选项。value 属性指定给服务器提交的值。如果为某个 option 添加布尔属性 selected,则该选项被默认选中,否则第一个选项被默认选中。如果为 select 标签添加布尔属性 multiple,表示可以多选,在浏览器中按 Ctrl+左键 多选。<optgroup></optgroup> 标签为选项分组,label 属性指定组名。

  6. 使用 <fieldset></fieldset> 标签可以组合表单元素。使用 <legend></legend> 可以为表单命名,例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <form action="action_page.php">
    <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit"></fieldset>
    </form>

HTML 框架

  1. 框架

  2. 内联框架:

    • 使用 <iframe></iframe> 实现内联框架,在网页中显示网页。语法:<iframe src="URL"></iframe>

      1
      2
      <iframe src="http://www.w3school.com.cn/" width="200" height="200" frameborder="0"></iframe>
      <!-- src 设置框架内显示的页面的地址;width 和 height 指定框架的宽高,单位默认为像素,也可用百分比;frameborder="0" 指定框架没有边框 -->
    • 可以将框架作为 a 标签的 target:

      1
      2
      3
      <iframe src="http://www.baidu.com/" name="iframe"></iframe>
      <p><a href="http://www.w3school.com.cn/" target="iframe">W3School.com.cn</a></p>
      <!-- 先为框架设置 name,然后将 a 标签的 target 设为框架的名字。此时点击超链接,新网页会在框架中打开 -->

HTML 容器及布局

  1. 常用的容器标签为 <div></div>(div — division(层)) 和 <span></span>。它们本身既不能赋予文本语义,也不能赋予文本某种样式,它们只是被用来划分文档结构或配合 CSS 来为某些文本赋予样式。

  2. 在 HTML 文档中,<div></div><span></span> 是不可或缺的,即使这样,也要尽可能少的使用它们,以防止标签冗余,降低解析速度。

  3. <div></div> 是块级元素。如果与 CSS 一同使用,div 元素可用于对大的内容块设置样式属性。另外还可以对文档进行整体布局。

  4. <span></span> 是内联元素。定义文档中的行内的小块或区域。常用于将包含在其中的文本显示出与其他文本不一样的效果。

  5. 实现布局有三种方式:使用 HTML 表格布局、使用 <div></div> 布局、使用 <header></header>, <nav></nav> 等在 HTML5 中新增的语义标签布局。

    • HTML 表格布局:在 CSS 还没有出现的时候,人们为了实现布局,只能使用 HTML 表格。但如今,HTML 表格布局已经不符合 HTML5 标准,因为 <table></table> 标签的初衷仅仅是为了定义表格,使用 <table></table> 标签布局只会使搜索引擎等对你的文档结构产生疑惑。

    • HTML4 布局时一般使用 div 标签。

    • Google 在分析大量网站布局后发现,用来布局的 div 标签的 id 通常是 header, nav, section, footer 等。所以在 HTML5 中新增了与这些 id 名相同的语义标签用于文档布局:

      标签 作用
      <header></header> 定义文档或节的页眉
      <main></main> 定义网页的主体部分
      <nav></nav> 定义导航链接
      <section></section> 定义文档主体
      <article></article> 定义独立的自包含文章
      <aside></aside> 定义内容之外的内容(比如侧栏)
      <footer></footer> 定义文档或节的页脚
      <details></details> 定义额外的细节
      <summary></summary> 定义 details 元素的标题

      这些标签是语义标签,可以为浏览器和搜索引擎提供有用的信息。

      IE8及更早版本、Safari 3及更早版本等较老的浏览器不支持 <header><nav> 等新元素。如果面向的用户有可能使用这些浏览器,就不要用这些新元素。如果面向的用户主要是移动用户,使用这些元素很棒(因为智能手机都支持这些元素)

  6. 布局样例

其他元素

  1. <time></time> 用于包含日期和时间,它有一个 datetime 属性,如果标签中的时间使用了官方 Internet 时间格式,可以不指定该属性;如果使用了其他格式,必须指定该属性,属性值为官方 Internet 时间格式。

  2. 视频元素(video)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <video controls
    autoplay
    loop
    preload="auto"
    width="播放器宽度"
    height="播放器高度"
    src="视频地址"
    poster="海报图片地址">
    </video>
    • controls: 是否显示控件

    • autoplay: 是否自动播放。如果是,视频在网页刚刚加载好时就开始播放。为了网页加载顺利,通常选择不写该属性

    • loop: 是否循环播放

    • controls, autoplay, loop 是布尔属性,写了相当于 true,不写相当于 false

    • preload: 控制视频如何加载。none 表示在用户点击播放之前不加载数据;metadata 表示点击播放之前下载视频元数据,但不下载视频内容;auto 表示由浏览器控制(浏览器会根据 autoplay、用户带宽等选择加载多少数据),通常设为 auto 或不写。

      video 元素的另一种写法:

      1
      2
      3
      4
      5
      6
      7
      <video controls autoplay>
      <source src="video.mp4" type="video/mp4" />
      <source src="video.webm" type="video/webm" />
      <source src="video.ogv" type="ogg" />
      <object>......</object>
      <p>Sorry, your browser doesn't support the video element.</p>
      </video>
    • <video></video> 标签中不再指定 src 属性,而是用 <source /> 标签指定 src。这样可以指定多个视频格式,以确保视频在多种浏览器中都可以播放。浏览器会先尝试播放第一个视频,如果无法播放,则播放下一个,以此类推。

    • <source> 标签中的 type 属性为浏览器提供关于视频格式的信息,为浏览器提供有关视频的信息,使浏览器快速判断视频是否可以播放。其实还可以指定一个 codecs 属性,如:codecs="vp8, vorbis",vp8 为视频编解码器,vorbis 为音频编解码器。可以为浏览器提供更多有关视频的信息,使浏览器对视频的分析更快速、准确。

    • 可以用 <object></object> 标签指定另一个视频播放器作为后路(如 Flash),如果浏览器不支持 HTML5 播放器,会使用 Flash 播放器播放视频。

    • 最后用 <p></p> 标签指定一段文本,当浏览器不支持以上任何格式,无法播放视频时,会显示这段文本。

    • 默认 HTML5 播放器只有一些很基本的功能,要自己定制播放器或实现高级功能需要使用 JavaScript。

    • 音频元素(audio):TODO
    • 更多元素:TODO
  3. 所有标签:标签列表(字母排序)标签列表(功能排序)

HTML 全局属性

全局属性即可以应用于任何标签的属性。

属性名 用途
class 规定元素的类名
id 规定元素的 id
style 规定元素的内联样式(inline style)
title 规定鼠标指向元素时的显示文本
  • id 是元素的唯一标识。一个HTML文档中,一个 id 只能使用一次。
  • id 和 class的命名规则:基本命名规则与 C/C++ 相同,但 id 可以以数字开头(class 不可以)
  • 所有全局属性:HTML 全局属性

HTML5 API 和 web 应用

  • TODO

良好的编码习惯

  1. 对于任何一个 HTML 标签,除了不得不指定的属性外(如:<img>href<input>type,所有全局属性等),所有为元素指定样式的属性都应该尽可能写在 CSS 中,以实现结构与表现分离。不要使用 HTML 标签自带的样式属性,如 alignbgcolor 等。
  2. 不要使用物理样式标签,如:<center></center><b></b> 等。
  3. 图像都加上替换文本(alt属性),有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
  4. 在标签中定义合理的提示内容(如 titlesummaryalt 等)可以方便搜索引擎的解析。
  5. 使用 HTML5 中新增的 <header></header><section></section> 等标签布局,可以为文档结构赋予语义,方便搜索引擎的解析。
  6. href 属性的值为网址时,最后的斜杠不要丢,因为假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"
  7. 如果要为站点设置背景图片,图片大小最好不要超过 10kb。