这篇文章主要涉及到HTML中的常用标签、h5标签等,可以说是一个备忘录吧,方便自己回顾一下每个标签的特点和其语义。
HTML布局元素语义化标签
<header>: 可以作为文档或文档的部分区域的页眉。用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。<header> 元素不能作为 <address>、<footer> 或另一个 <header> 元素的子元素。不允许 <header> 或<footer> 成为子元素。IE9支持。
<nav>: 一个含有多个超链接的区域,其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。一个网页也可能含有多个<nav>元素,它只用来将一些热门的链接放入导航栏。IE9支持。
<main>: 呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其它元素。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。IE不支持,Edge12支持。
<article>: 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。不能成为<address>元素的子元素。IE9支持。
<section>: 表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。不能成为<address>元素的子元素。IE9支持。
<aside>: 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。经常嵌套在 <main> 中。不能成为<address>元素的子元素。IE9支持。
<footer>: 页脚。HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。<footer>元素内的作者信息应包含在<address> 元素中。注意<footer>元素必须不能是 <address>, <header> 或者另一个<footer> 元素的后代元素。不能包含<footer>或者<header>。IE9支持。
<address>: HTML<address>元素 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。由<address>元素中任何形式的内容所提供的联系信息适用于上下文的背景信息,可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。IE支持。
参考来源: 文档与网站架构
HTML中的常用标签
<div>: 是一个块级元素,在语义上不代表任何特定类型的内容,可以用来对其它元素进行分组。
<span>: 是一个行内元素,没有特殊语义,可以用来编组元素以达到某种样式意图。
列表相关标签:
1) ul: 无序列表,用于列表的每一项之间的顺序并不重要。子项用<li>表示。
2) ol: 有序列表,用于列表的每一项之间的顺序是必要的。子项用<li>表示。
3) dl: 描述列表,是一个包含术语定义以及描述的列表,通常用于展示词汇或者元数据(键-值对列表)。子项为<dt>(定义列表中声明的一个术语)和<dd>(指明对一个术语的描述)。
重点强调标签:
<em>: 表示强调,浏览器的默认风格为斜体。既可以让文档读起来更有趣,也可以被屏幕阅读器识别出来,并以不同的语调发出。
<strong>: 表示非常重要,浏览器默认风格为粗体。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。
<a>标签相关定义及常用功能
一、定义
<a>: 代表一个链接到其他资源的超链接。通过href属性用于指定超链接目标的URL。
二、可实现的功能:
1) 页面跳转 <a href="URL">另一个网站</a>
2) 跳转到指定ID所在的位置 <a href="#top"></a>
3) 下载文件: <a href="URL" download="xxx.pdf">下载</a>
4) 发邮件: <a href="mailto:xxxxx@qq.com">发邮件</a>
5) 打电话: <a href="tel: 13111111111">拨打</a>
6) 发短信: <a href="sms: 13111111111">拨打</a>
</img>标签相关定义及相关问题
一、定义
<img>: 定义HTML页面中的图像。
二、 相关技巧和问题
1) <img src="/index.png">: 如果图片存储在和HTML页面同路径的images下,应当使用相对路径。这样可以减少浏览器的工作,减少重新通过 DNS去寻找IP地址。
2) <img> 和 css中的background-image的区别: CSS背景图只是为了装饰(只是为了添加一些漂亮的东西,来提升视觉效果),<img>图片对内容有意义。
<figure>: 代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。IE9支持。
例:
<figure>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg" alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure><blockquote>: 如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用<blockquote>元素包裹起来表示，并且在cite属性里用URL来指向引用的资源。cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。
<q>: 用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。
<cite>: 通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。引用的文本将以斜体显示。
<abbr>: 用于展示缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。当光标移动到包裹的内容上时会出现提示。(<attr title="超文本标记语言（Hypertext Markup Language）">HTML</attr>)
<dfn>: 表示术语的一个定义。术语定义应当在 <p>, <section>或定义列表 (通常是<dt>, <dd> 对)中给出。(<p><dfn title="超文本标记语言（Hypertext Markup Language）">HTML</dfn></p>)
<address>: 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。
例:
<address>
<a href="mailto:jim@rock.com">jim@rock.com</a><br>
<a href="tel:+13115552368">(311) 555-2368</a>
</address>上标和下标: 使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。 <sup>(上标) 和<sub>(下标)元素可以解决这样的问题。(
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>)<s>: 使用删除线来渲染文本,通常用于电商领域表示打折前的价格。但是当表示文档编辑时,不提倡使用<s>;为此,提倡使用<del>和<ins>元素。IE支持。
<del>: 表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。这个标签通常(但不一定要)在文字上显示删除线。IE支持。
<ins>: 定义已经被插入文档中的文本。
<del>和<ins>的使用例子: MDN的例子
HTML元素标记计算机代码
<code>: 用于标记计算机通用代码。
<pre>: 对保留的空格（通常是代码块）,空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>: 用于标记具体变量名。
<kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
<samp>: 用于标记计算机程序的输出。
例:
<pre><code>
const a = 1;
alert(a);
</code></pre>
<p>在上述的JavaScript示例中, <var>a</var>是一个变量。</p>
<p>按<kbd>window</kbd>显示菜单</p>
<p>结果为:<samp>1</samp></p><time>: 将时间和日期标记为可供机器识别的格式的 <time> 元素。世界上有许多种书写日期的格式,<time> 元素允许你附上清晰的、可被机器识别的 时间/日期。<time datetime="2016-01-20">2016年1月20日</time>
表格相关标签
表格相关标签: <table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>、<caption>。
注: 懒了,之前学习的时候不想整理,选择更不想了,这个还是自己搜吧
HTML表单元素:
<form>标签
一、定义
<form>: 该元素正式定义了一个表单,是一个容器元素。
二、常用的属性
1)action 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。
2)method 属性定义了发送数据的HTTP方法(它可以是“get”或“post”)。
<input>标签
一、定义
<input>: 该元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
二、常用属性:
type: 默认为text,可以为button、checkbox、radio、submit、password、text、file、email等,具体见下方的链接。
value: 这个<input>元素当前的值。
placeholder: 提示用户输入框的作用。只有当type属性为 text、search、tel、url、email时生效,否则会被忽略。
autocomplete: 如果<input>元素的 type 允许，则会具有自动填充的功能。也就是当用户在填写字段时,浏览器是否显示之前填写的选项。值为on(默认,启用自动完成功能)/off(规定禁用自动完成功能)。
checked: 如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态。
disabled: 禁用<input>元素,该元素不能被用户手动输入、点选、拖动。
readonly: 该<input>元素不能被编辑（比如输入、点选等）。
maxlength: 如果 type 的值是 text, email, search, password, tel, 或 url，那么这个属性指明了用户最多可以输入的字符个数（按照Unicode编码方式计数）；对于其他类型的输入框，该属性被忽略。它可以大于 size 属性的值。如果不指定这个属性，那么用户可以输入任意多的字符。如果指定为一个负值，那么元素表现出默认行为，即用户可以输入任意多的字符。本属性的约束规则，仅在元素的 value 属性发生变化时才会执行。译者注:ie10+。
参考链接: <input>详细内容
<textarea>标签
一、定义
<textarea>: 该元素为一个多行纯文本编辑控件。
二、常用的属性
cols: 文本域的可视宽度。必须为正数，默认为20 (HTML5)。
rows: 元素的输入文本的行数（显示的高度）。
placeholder: 向用户提示可以在控件中输入的内容。 在渲染提示时，占位符文本中的回车符(r)或换行符(n)一定会被作为行断（换行）处理。
disabled: 禁用文本域。默认为false。如果未指定，也可以从父级上如<fieldset>继承而来。该属性为HTML属性,一旦在元素上写了,无论值为什么都会禁用文本域。该属性和JavaScript中的disabled是两个类型,若是HTML和JS都有,那就以JavaScript中的disabled的设置为准。
readonly: 不允许用户修改元素内文本。该属性只要在元素上就会生效。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。
resize: 该元素规定是否可由用户调整元素的尺寸。值为 none(用户无法调整元素的尺寸)/both(用户可调整元素的高度和宽度)/horizontal(用户可调整元素的宽度)/vertical(用户可调整元素的高度)。
maxlength: 允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。
minlength: 允许用户输入的最小字符长度(Unicode) 。
参考链接: <textarea>详细内容
<label>标签
一、定义
<label>: 表示用户界面的某个元素的说明。
二、常用属性
for: 可标记的 form 相关元素的 id ，在同一文档中作为label元素。 第一个这样的元素在文档中有一个ID匹配属性值，作为这个label元素的labeled control。
三、功能
将一个<label>和<input>元素匹配在一起,从而单击<label>来聚焦或激活input:
1) 给<input>一个 id 属性,而<label>需要一个 for 属性,其值和input的id一样
2) 直接将<input>放在<label>中
<button>标签
一、定义
<button>: 表示一个可点击的按钮。
二、常用属性:
value: button的初始值。
type: button的类型。可选值为:
1) submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
2) reset: 此按钮重置所有组件为初始值。
3) button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
4) menu: 此按钮打开一个由指定<menu>元素进行定义的弹出菜单。
5) disabled: 表示该用户不能与button交互。
<fieldset>标签
一、定义
<fieldset>： 该元素通常用来对表单中的控制元素进行分组(包括label元素)。所有浏览器都支持。用于当表单内容多时,用它来进行分组。
二、常用属性(H5才支持):
disabled: 如果设置了这个 bool 值属性, 它的后代表单控制元素也会继承这个属性, 它的首个可选的 legend 元素除外。
三、相关标签
<legend>: HTML的<legend>元素（也称为HTML的域说明元素（or HMTL Legend Field Element））代表一个用于表示它的父元素<fieldset>的内容的标题。
<select>标签
一、定义
<select>: 表示一个控件,提供一个选项菜单。
二、常用属性:
disabled: 禁止选择。
multiple: 这个布尔值的属性标记select是否可以多选,默认是单选
autofocus: 让一个对象在页面加载的时候获取焦点。
三、相关标签
<optgroup>: 会创建包含在一个<select>元素中的一组选项。
<datalist>: 包含一组<option>元素,这些元素表示其他表单控件可选值。和input连用,在input上设置list属性其为<datalist>的ID,这样一来可以做一个搜索筛选。IE10及以上支持。
<option>: 用于定义在<select>、<optgroup>、<datalist>元素中包含的项。<option>可以在弹出窗口和html文档中的其他项目列表中表示菜单项。
参考链接: <datalist>详细内容
以上内容如有不对,希望大家指出,谢谢。
推荐链接: HTML5标签列表
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。