HTML标签

1. <a> - anchor - 定义超链接，用于从一个页面链接到另一个页面
2. <address> - address - 定义文档地址或文章的作者/拥有者的联系信息
3. <b> - bold - 规定粗体文本。 - 物理性标签 - 不使用了
4. <body> - body 元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
5. <br> - break - 换行符
6. <del> - delete - 中横线删除
7. <ins> - insert - 下划线修正
8. <div> - division - 容器，可定义文档中的分区或节（division/section）
9. <em> - emphasize - 把文本定义为强调的内容- 斜体
10. <strong> - strong - 把文本定义为语气更强的强调的内容 - 粗体
11. <h1 - h6> - header 1 to h3eader 6 - HTML 标题 - 粗体逐渐缩小
12. <hr> - horizontal rule - 水平分隔线，不使用了。
13. <head> - head rule - 用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
14. <html> - HyperText Markup Language - 此元素可告知浏览器其自身是一个 HTML 文档。
15. <sup> - superscripted - 可定义上标文本。
16. <sub> - subscript - 可定义下标文本。
17. <span> - span - 被用来组合文档中的内联元素，在一个文本内为了区别于其他文本而存在。
18. <ol> - order list - 定义有序列表。
- 1. <li> - list item 列表项
19. <ul> - unorder list - 定义无序列表。
- 1. <li> - list item 列表项
20. <dl> - definition list - 定义了定义列表。
- 1. <dt> - definition term - 定义列表项
- 2. <dd> - definition description - 定义列表项描述
21. <table> - table - 定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
- 1. <thead> - table header - 定义表格的页眉
- 2. <tbody> - table body - 用于对 HTML 表格中的主体内容进行分组。
- 3. <tfoot> - table foot - 用于对 HTML 表格中的表注（页脚）内容进行分组。
- 4. <caption> - caption - 定义表格标题，内容出现在表格上方外部
- 5. <tr> - table row - 定义表格行标签。
- 6. <th> - table header cell - 定义表头单元格标签样式：粗体
- 7. <td> - td table data cell - 定义表格数据单元格标签。
22. <form> - form - 定义供用户输入的 HTML 表单，用于向服务器传输数据。
23. <input> - input - 用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。
24. <label> - label - label的for属性值和input的id值相同时，点击label可以聚焦该input输入框
25. <textarea> - textarea - textarea标签定义多行的文本输入控件。文本区中可容纳无限数量的文本
26. <fieldset> - fieldset - fieldset可将表单内的相关元素分组
- 1. <legend> - legend - legend标签为 fieldset 元素定义标题。
27. <select> - select - select 元素可创建单选或多选菜单。
- 1. <option> - option - option 标签用于定义列表中的可用选项。
28. 内联元素、块级元素、内联块级元素总结
29. 标签分类（按功能）
30. 问题思考
- 1. 前端开发、HTML英文全称。
- 2. 内联、内联块、块级元素总结、区别、标签嵌套规则。
- 3. 为什么有些网址后缀地址是htm。
- 4. title标签写法。
- 5. keywords写法。
- 6. description写法。
- 7. html中的lang。
- 8. 物理性标签语义化标签区别。
- 9. 在一个元素中写一段话，为何中文会换行而英文不会换行。
- 10. MD5是什么。
- 11. iframe对比frameset优缺点、应用场景。

1. <a>

标签解释：标签定义超链接，用于从一个页面链接到另一个页面

标签全称：anchor

什么元素：inline element

默认样式：text-decoration: underline; 、color: -webkit-link;、属性规定添加到文本的修饰：定义文本下的一条线。、颜色：链接蓝色

标签作用：

1.超链接
2.打电话
3.发邮件
4.锚点
5.协议限定符

标签属性：

属性	值	描述
href	URL	规定指向页面的URL
target	5个值	规定在何处打开链接文档
	_self	默认值，在相同的框架中打开被链接文档
	_blank	在新窗口中打开链接文档
	_parent	在父框架集中打开被链接文档
	_top	在整个窗口中打开被链接文档
	framename	在指定的框架中打开被链接文档

标签语法：

  我是普通文本<a href="http://www.w3school.com.cn" target="_blank">、我是超链接，点击可以跳转</a>
  <a href="tel:10086"></a>
  <a href="mail:qwabc1024@163.com"></a>
  <a href="#box1"></a>
  <a href="javascript:;"></a>
  <div id="box1"></div>

语法效果：

2. <address>

标签解释：定义文档地址或文章的作者/拥有者的联系信息

标签全称：address

什么元素：block element

默认样式：font-style: italic; 字体样式：斜体

标签语法：

<address>北京市西城大道岭南路98号</address>

语法效果：

3. <b>

标签解释：标签规定粗体文本，物理性标签不使用了。

标签全称：bold

什么元素：inline element

默认样式：font-weight: bold; 字体粗细：粗体

注意事项：b标签和strong标签都可以对文本进行加粗，i标签和em标签同样也可以对文本进行倾斜，但是strong和em有强调的作用，有利于SEO（搜索引擎优化），所以日常工作中建议用strong和em标签

标签语法：

<p>这是普通文本 - <b>这是粗体文本</b>。</p>

语法效果：

4. <body>

标签解释：body 元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

标签全称：body

什么元素：block element

默认样式：margin: 8px; 外边距：8像素

标签语法：

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

语法效果：

5. <br>

标签解释：换行符

标签全称：break

标签语法：

<p>
To break<br />我被换行了
</p>

语法效果：

6. <del>

标签解释：中横线删除

标签全称：delete

什么元素：inline element

默认样式：text-decoration: line-through; 属性规定添加到文本的修饰：文本中横线删除

注意事项：请与标签配合使用，来描述文档中的更新和修正。

标签属性：

属性	值	描述
cite	URL	指向另外一个文档的 URL，此文档可解释文本被删除的原因。
datetime	YYYYMMDD	定义文本被删除的日期和时间。

标签语法：

呵呵<del>二十</del>

语法效果：

7. <ins>

标签解释：下划线修正

标签全称：insert

什么元素：inline element

默认样式：text-decoration: underline; 属性规定添加到文本的修饰：文本下底线

注意事项：请与一同使用，来描述文档中的更新和修正。

标签属性：

属性	值	描述
cite	URL	指向另外一个文档的 URL，此文档可解释文本被插入的原因。
datetime	YYYYMMDD	定义文本被插入的日期和时间。

标签语法：

呵呵<ins>ins</ins>

语法效果：

8. <div>

标签解释：容器，可定义文档中的分区或节（division/section）

标签全称：division

什么元素：block element

标签语法：

<div>div，我是一个容器</div>
<div>div，我是一个容器</div>

语法效果：

9. <em>

标签解释：把文本定义为强调的内容。

标签全称：emphasize

什么元素：inline element

默认样式：font-style: italic; 字体样式：斜体

注意事项：b标签和strong标签都可以对文本进行加粗，i标签和em标签同样也可以对文本进行倾斜，但是strong和em有强调的作用，有利于SEO（搜索引擎优化），所以日常工作中建议用strong和em标签

标签语法：

我是普通、<em>我是em是斜体</em>

语法效果：

10. <strong>

标签解释：把文本定义为语气更强的强调的内容。

标签全称：strong

什么元素：inline element

默认样式：font-weight: bold; 字体样式：粗体

注意事项：b标签和strong标签都可以对文本进行加粗，i标签和em标签同样也可以对文本进行倾斜，但是strong和em有强调的作用，有利于SEO（搜索引擎优化），所以日常工作中建议用strong和em标签

标签语法：

普通文本、<strong>我是strong</strong>

语法效果：

11. <h1 - h6>

标签解释：HTML 标题 - 粗体逐渐缩小

标签全称：header 1 to h3eader 6

什么元素：block element

默认样式：font-weight: bold; font-size: 2em 字体粗细：粗体、字体大小：相对父级字体2倍，父级没设置，直至找到浏览器默认字体大小逐渐缩小

标签语法：

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

语法效果：

12. <hr>

标签解释：水平分隔线，不使用了。

标签全称：horizontal rule

什么元素：block element

标签语法：

  呵呵
  <hr></hr>
  哈哈

语法效果：

13. <head>

标签解释：标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

标签全称：head

注意事项：下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>，其中<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

标签语法：

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

语法效果：

14. <html>

标签解释：此元素可告知浏览器其自身是一个 HTML 文档。

标签全称：HyperText Markup Language 超文本标记语言

标签语法：

<html>

<head>
    <title>文档的标题</title>
</head>

<body>
  这里是文档的主体 ... ...
  ...
</body>

</html>

语法效果：

15. <sup>

标签解释：可定义上标文本。包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

标签全称：superscripted

什么元素：inline element

默认样式：vertical-align: super; font-size: smaller; 垂直对齐方式：垂直对齐文本的上标，字体大小：设置为比父元素更小的尺寸。

标签语法：

  这段文本包含 <sup>上标</sup>

语法效果：

16. <sub>

标签解释：可定义下标文本。包含在 <sub> 标签和其结束标签 </sub>中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

标签全称：subscript

什么元素：inline element

默认样式：vertical-align: sub; font-size: smaller; 垂直对齐方式：垂直对齐文本的下标,字体大小：设置为比父元素更小的尺寸。

标签语法：

  这段文本包含 <sub>下标</sub>

语法效果：

17. <span>

标签解释：被用来组合文档中的内联元素，在一个文本内为了区别于其他文本而存在的。

标签全称：span

什么元素：inline element

标签语法：

  <p><span style="color:red;">some text.</span>some other text.</p>

语法效果：

18. <ol>

标签解释：定义有序列表。

ol标签全称：order list 有序列表

li标签全称：list item 列表项

什么元素：block element

默认样式：list-style-type: decimal; 设置列表项标记的类型: 标记是数字。

标签属性：

属性	值	描述
reversed	reversed	规定列表顺序为降序，允许负数。(9,8,7...)
start	number	规定有序列表的起始值，只支持数字。
type	1，A，a，I，i	规定在列表中使用的标记类型。

注意事项：在 HTML 4.01 中，ol 元素的 "compact"、"start" 以及 "type" 属性是不被赞成使用的。

注意事项：compact 属性规定列表呈现的效果比正常情况更小巧，这是通过减少行间距以及对列表进行缩进来实现的，CSS可代替：语法：

标签语法：

  <ol type="1" reversed start="-1">
    <li>有序列表</li>
    <li>列表项</li>
  </ol>

语法效果：

19. <ul>

标签解释：定义无序列表。

ul标签全称：unorder list 无序列表

li标签全称：list item 列表项

什么元素：block element

默认样式：list-style-type: disc; 设置列表项标记的类型: 默认。标记是实心圆。

标签属性：

属性	值	描述
type	disc（实心圆），square（实心方块），circle（空心圆）	规定列表的项目符号的类型。

注意事项：在 HTML 4.01 中，ul 元素的 "compact" 和 "type" 属性是不被赞成使用的。

注意事项：compact 属性规定列表呈现的效果比正常情况更小巧，这是通过减少行间距以及对列表进行缩进来实现的，CSS可代替：语法：

标签语法：

  <ul type="disc">
    <li>无序列表</li>
    <li>列表项</li>
  </ul>

语法效果：

20. <dl>

标签解释：定义了定义列表（definition list）。<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

dl标签全称、解释：definition list 定义列表

dt标签全称、解释：definition term 定义列表项

dd标签全称、解释：definition description 定义列表项描述

什么元素：block element

默认样式：dl: margin: 16px 0; , dd: margin: 0 0 0 40px;

标签语法：

  <dl>
    <dt>计算机</dt>
    <dd>用来计算的仪器 ... ...</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的装置 ... ...</dd>
  </dl>

语法效果：

21. <table>

标签解释：定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

thead标签全称、解释：table header 标签定义表格的页眉。该标签用于组合 HTML 表格的表头内容。

tbody标签全称、解释：table body 元素用于对 HTML 表格中的主体内容进行分组。

tfoot标签全称、解释：table foot 用于对 HTML 表格中的表注（页脚）内容进行分组。

table标签全称、解释：table 定义表格

caption标签全称、解释：定义表格标题

tr标签全称、解释：table row 定义表格行标签

th标签全称、解释：table header cell 定义表头单元格标签样式：粗体

td标签全称、解释：td table data cell 定义表格数据单元格标签

什么元素： table element

td标签属性：

属性	值	描述
colspan	number	规定单元格可横跨的列数, 单元格列合并。
rowspan	number	规定单元格可横跨的行数, 单元格行合并。

注意事项：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，编辑器里的排列就跟加载顺序没关系，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

详细描述：thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

注意事项：这里没有提到的表格属性、标签，全部可以使用CSS代替。

标签语法：

  <table border="1">
    <thead>
      <caption>定义表格标题</caption>
      <tr>
        <th colspan="3">表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="2">表单元格1</td>
        <td>表单元格2</td>
      </tr>
      <tr>
        <td>表单元格4</td>
        <td rowspan="2">表单元格5</td>
        <td>表单元格6</td>
      </tr>
      <tr>
        <td>表单元格7</td>
        <td>表单元格8</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>合计</td>
        <td>$180</td>
        <td>$180</td>
      </tr>
    </tfoot>
  </table>

语法效果图：

22. <form>

标签解释： form定义供用户输入的 HTML 表单，用于向服务器传输数据。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮、 label 元素等等。

标签全称：form 表单

什么元素：block element

标签属性：

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据。
method	get、post	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
target	5个值和a标签那个相同	规定在何处打开 action URL。

注意事项：

标签语法：

  <form action="/demo/demo_form.asp">
    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">
</form> 
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

语法效果：

23. <input>

标签解释： input用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

标签全称：input

什么元素：inline-block element

注意事项：请使用 label 元素为某个表单控件定义标签。

标签属性：

属性	值	描述
type	详细值列在下方表格	规定 input 元素的类型。
name	field_name	定义 input 元素的名称。
value	value	规定 input 元素的值。
maxlength	number	规定输入字段中的字符的最大长度。无论中英文
readonly	readonly	规定输入字段为只读。
disabled	disabled	当 input 元素加载时禁用此元素。
required	required	指示输入字段的值是必需的。
checked	checked	规定此 input 元素首次加载时应当被选中。
placeholder	text	例：请输入关键字

type属性值	描述
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
password	定义密码字段。该字段中的字符被掩码显示为星号或原点）。
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
radio	定义单选按钮。
checkbox	定义复选框。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。隐藏字段对于用户是不可见的，隐藏字段通常会存储一个默认值可用来提交表单和JS修改
image	定义图像形式的提交按钮。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。

注意事项：checked 属性与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

注意事项：readonly只读和disabled禁用区别，禁用后表单无法提交到后台地址，只读可以。

注意事项：请使用 label 元素为某个表单控件定义标签。

注意事项：单选和多选多个时name需要相同，radio靠value对应，checkbox也是。

input标签语法：

  <form action="/demo/demo_form.asp">
    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">
</form> 
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

input语法效果：

type属性text语法：

<form action="/example/html/form_action.asp" method="get">
  <p>Email: <input type="text" name="email" /></p>
  <p>Pin: <input type="text" name="pin" maxlength="18" /></p>
  <input type="submit" value="Submit" />
</form>

<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

type属性text效果：

type属性password语法：

<form action="/example/html/form_action.asp" method="get">
  Email: <input type="text" name="email" /><br />
  Password: <input type="password" name="pwd" maxlength="8" /><br />
  <input type="submit" value="Submit" />
</form>

<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

type属性password效果：

type属性button语法：

<script type="text/javascript">
  function msg()
  {
  alert("Hello world!");
  }
</script>
</head>
<body>

<form>
<input type="button" value="Click me" onclick="msg()" />
</form>

<p>如果点击上面的按钮，会启动一段 JavaScript。如果您希望学习更多有关 JavaScript 的知识，请访问我们的 JavaScript 教程。</p>

</body>

type属性button效果：

type属性radio语法：

<form action="/example/html/form_action.asp" method="get">
  <input type="radio" name="sex" value="male" /> Male<br />
  <input type="radio" name="sex" value="female" /> Female<br />
  <input type="submit" value="Submit" />
</form>

<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

type属性radio效果：

type属性checkbox语法：

<form action="/example/html/form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car<br />
<input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane<br />
<input type="submit" value="Submit" />
</form>

<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

type属性checkbox效果：

type属性reset语法：

<form action="/example/html/form_action.asp" method="get">
  Email: <input type="text" name="email" /><br />
  Pin: <input type="text" name="pin" maxlength="4" /><br />
  <input type="reset" value="Reset" />
  <input type="submit" value="Submit" />
</form>

<p>请单击重置按钮，可以清空表单。</p>
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

type属性reset效果：

type属性file语法：


<form>
<input type="file" name="pic" accept="image/gif" />
</form>

<p><b>注释：</b>出于安全方面的考虑，本例不允许用户上传文件。</p>

type属性file效果：

type属性hidden语法：

<form action="/example/html/form_action.asp" method="get">
  Email: <input type="text" name="email" /><br />
  <input type="hidden" name="country" value="China" />
  <input type="submit" value="Submit" />
</form>

<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

type属性hidden效果：

type属性image语法：


<form action="/example/html/form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="image" src="/i/eg_submit.jpg" alt="Submit" />
</form>

<p>请在这幅图像上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

<p>注释：如果 type 属性设置为 image，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。</p>

type属性image效果：

type属性submit语法：

<form action="/example/html/form_action.asp" method="get">
  <p>Email: <input type="text" name="email" /></p>
  <p>Pin: <input type="text" name="pin" maxlength="18" /></p>
  <input type="submit" value="Submit" />
</form>

<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

type属性submit效果：

24. <label>

标签解释： label的for属性值和input的id值相同时，点击label可以聚焦该input输入框

标签全称：label

什么元素：inline element

注意事项："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

标签属性：

属性	值	描述
for	id	规定 label 绑定到哪个表单元素。
form	formid	规定 label 字段所属的一个或多个表单。

标签语法：

 <form action="https://www.baidu.com/" method="get">
    <label for="username">用户名</label>
    <input type="text" id="username" name="username">
    <label for="password">密码</label>
    <input type="password" id="password" name="password">
    <input type="submit" value="登录">
 </form>

语法效果：

25. <textarea>

标签解释： textarea标签定义多行的文本输入控件。文本区中可容纳无限数量的文本

标签全称：textarea

什么元素：inline-block element

注意事项：配合from使用, textarea中间有换行和空格会正常显示出来

标签属性：参见w3school

<textarea  name="comment" form="usrform">请在此处输入文本...</textarea>

语法效果：

26. <fieldset> <legend>

fieldset标签解释： fieldset可将表单内的相关元素分组。

legend标签解释：legend标签为 fieldset 元素定义标题。

标签全称：fieldset、legend

什么元素：block element

注意事项：配合from使用, textarea中间有换行和空格会正常显示出来

标签属性：参见w3school

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

语法效果：

27. <select> <option>

select标签解释： select 元素可创建单选或多选菜单。

option标签解释： option 标签用于定义列表中的可用选项。

标签全称：select、option

什么元素：inline-block element

注意事项：尽量不用，可扩展性不高

标签属性：参见w3school

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

语法效果：

28. 标签总结：

inline element 内联元素: a/del/em/ins/label/span/strong/sub/sup

block element 块级元素: address/dd/div/dl/dt/fieldset/from/hx/legend/li/ol/p/table/ul

inline-block element 内联块元素: iframe/img/input/select/textarea

29. 标签分类（按功能）

a/del/em/ins/label/span/strong/sub/sup

1. 基础

标签	描述
<!DOCTYPE>	定义文档类型。
<html>	定义 HTML 文档。
<title>	定义文档的标题。
<body>	定义文档的主体。
<h1> to <h6>	定义 HTML 标题。
<p>	定义段落。
<br>	定义简单的折行。
<hr>	定义水平线。
<!--...-->	定义注释。

2. 格式

标签	描述
<address>	定义文档作者或拥有者的联系信息。
<del>	定义被删除文本。中横线
<ins>	定义被插入文本。下划线
<em>	定义强调文本。样式斜体
<strong>	定义语气更为强烈的强调文本。样式粗体
<i>	定义强调文本, 斜体，物理性标签，常用于图标。
<sub>	定义上标文本。
<sup>	定义下标文本。

3. 表单

标签	描述
<form>	定义供用户输入的 HTML 表单。
<input>	定义输入控件。
<textarea>	定义多行的文本输入控件。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<option>	定义选择列表中的选项。
<label>	定义 input 元素的标注。
<fieldset>	定义围绕表单中元素的边框。
<legend>	定义 fieldset 元素的标题。

4. 框架

标签	描述
<frame>	定义框架集的窗口或框架。
<frameset>	定义框架集。
<iframe>	定义内联框架。

5. 图像

标签	描述
<img>	定义图像。

5. 图像

标签	描述
<a>	定义锚。超链接
<link>	定义文档与外部资源的关系。

6. 列表

标签	描述
<ul>	定义无序列表。
<ol>	定义有序列表。
<li>	定义列表的项目。
<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<dd>	定义定义列表中项目的描述。

7. 表格

标签	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<thead>	定义表格中的表头内容。
<tbody>	定义表格中的主体内容。
<tfoot>	定义表格中的表注内容（脚注）。

8. 样式/节

标签	描述
<style>	定义文档的样式信息。
<div>	定义文档中的节。
<span>	定义文档中的节。

9. 元信息

标签	描述
<head>	定义关于文档的信息。
<meta>	定义关于 HTML 文档的元信息。

10. 编程

标签	描述
<script>	定义客户端脚本。

30. 问题思考：

1. 前端开发、HTML英文全称

2. 内联、内联块、块级元素总结、区别、标签嵌套规则

3. 为什么有些网址后缀地址是htm

4. title写法

5. keywords写法

6. description写法

7. html中的lang

8. 物理性标签语义化标签区别

9. 在一个元素中写一段话，为何中文会换行而英文不会换行

10. MD5是什么：

一种消息摘要的加密算法，他是第五个版本，同时也叫不可逆加密算法，不可逆指的是加密后无法在解密，这种加密方式是不需要密钥的。

11. iframe对比frameset优缺点、应用场景

页面框架 frameset

内联框架 iframe inlineblock element 不重新加载整个页面，只加载内部的iframe,减少了HTTP请求。

对搜索引擎不友好滚动条体系混乱不再一个体系中，外界无法监控数据是否是加载完成了。

2020.11.23

HTML标签总结

HTML标签

目录

标签解释：标签定义超链接，用于从一个页面链接到另一个页面

标签全称：anchor

什么元素：inline element

默认样式：text-decoration: underline; 、color: -webkit-link;、属性规定添加到文本的修饰：定义文本下的一条线。、颜色：链接蓝色

标签作用：

标签属性：

标签语法：

语法效果：

标签解释：定义文档地址或文章的作者/拥有者的联系信息

标签全称：address

什么元素：block element

默认样式：font-style: italic; 字体样式：斜体

标签语法：

语法效果：

标签解释：标签规定粗体文本，物理性标签不使用了。

标签全称：bold

什么元素：inline element

默认样式：font-weight: bold; 字体粗细：粗体

注意事项：b标签和strong标签都可以对文本进行加粗，i标签和em标签同样也可以对文本进行倾斜，但是strong和em有强调的作用，有利于SEO（搜索引擎优化），所以日常工作中建议用strong和em标签

标签语法：

语法效果：

标签解释：body 元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

标签全称：body

什么元素：block element

默认样式：margin: 8px; 外边距：8像素

标签语法：

语法效果：

标签解释：换行符

标签全称：break

标签语法：

语法效果：

标签解释：中横线删除

标签全称：delete

什么元素：inline element

默认样式：text-decoration: line-through; 属性规定添加到文本的修饰：文本中横线删除

注意事项：请与 标签配合使用，来描述文档中的更新和修正。

标签属性：

标签语法：

语法效果：

标签解释：下划线修正

标签全称：insert

什么元素：inline element

默认样式：text-decoration: underline; 属性规定添加到文本的修饰：文本下底线

注意事项：请与 一同使用，来描述文档中的更新和修正。

标签属性：

标签语法：

语法效果：

标签解释：容器，可定义文档中的分区或节（division/section）

标签全称：division

什么元素：block element

标签语法：

语法效果：

标签解释：把文本定义为强调的内容。

标签全称：emphasize

什么元素：inline element

默认样式：font-style: italic; 字体样式：斜体

注意事项：b标签和strong标签都可以对文本进行加粗，i标签和em标签同样也可以对文本进行倾斜，但是strong和em有强调的作用，有利于SEO（搜索引擎优化），所以日常工作中建议用strong和em标签

标签语法：

语法效果：

标签解释：把文本定义为语气更强的强调的内容。

标签全称：strong

什么元素：inline element

默认样式：font-weight: bold; 字体样式：粗体

注意事项：b标签和strong标签都可以对文本进行加粗，i标签和em标签同样也可以对文本进行倾斜，但是strong和em有强调的作用，有利于SEO（搜索引擎优化），所以日常工作中建议用strong和em标签

标签语法：

语法效果：

标签解释：HTML 标题 - 粗体逐渐缩小

标签全称：header 1 to h3eader 6

什么元素：block element

默认样式：font-weight: bold; font-size: 2em 字体粗细：粗体、 字体大小：相对父级字体2倍，父级没设置，直至找到浏览器默认字体大小 逐渐缩小

标签语法：

语法效果：

标签解释：水平分隔线，不使用了。

标签全称：horizontal rule

什么元素：block element

标签语法：

语法效果：

注意事项：请与标签配合使用，来描述文档中的更新和修正。

注意事项：请与一同使用，来描述文档中的更新和修正。

默认样式：font-weight: bold; font-size: 2em 字体粗细：粗体、字体大小：相对父级字体2倍，父级没设置，直至找到浏览器默认字体大小逐渐缩小

标签解释：标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

默认样式：vertical-align: super; font-size: smaller; 垂直对齐方式：垂直对齐文本的上标，字体大小：设置为比父元素更小的尺寸。