HTML 标签概览

一、HTML5技术集

1. 新标签、新属性
2. 新的通信技术：WebSockets、WebRTC 等
3. 离线存储技术：LocalStorage、断网检测
4. 多媒体技术：视频、音频
5. 图像技术：Canvas、SVG、WebGL
6. Web增强技术：History API、全屏
7. 设备相关技术：摄像头、触摸屏
8. 新的样式技术：CSS3 新的 Flex、Grid 布局

二、标签概览

常用的HTML标签

# 元数据
meta 【*】
title 【】
base 【】
link 【】
style 【】
# 章节
section 【*章节内容】
nav 【*导航内容】
article 【*文章内容】
main 【*主要内容】
aside 【*旁支内容】
header 【*头部】
footer 【*脚部】
address 【地址】
h1 ~ h6 【标题】
#内容层次
ol + li 【*有序列表】
ul + li 【*无序列表】
dl + dt + dd 【*描述列表】
p 【段落】
hr 【分割线】
pre 【保留空格、回车和Tab】
blockquote 【块级引用】
figure+figcaption 【】
div 【】
#文字
a 【*用于超链接使用】
em 【表示强调，语气很重要】
strong 【表示强调，本身很重要】
q 【行内引用】
code 【包起来的字是等宽的，放代码用，常配合外面包裹一个pre标签使用】
time 【】
kdb 【】
sub/sup 【】
mark 【】
br/wbr 【】
ins/del 【】
span 【】
#嵌入内容
img 【*图片】
video 【*视频】
canvas 【*画板】
svg 【*矢量图】
audio 【音频】
iframe 【内嵌框】
#表格
table 【*表格】
tbody 【*表格身体】
thead 【*表格头部】
tfoot 【*表格脚部】
tr 【*表行】
td 【*表列】
th 【*表列加粗】
#表单
form 【*】
label 【*】
input 【*】
button 【*】
select 【*】
option 【*】
textarea 【*】
progress 【】
#可交互元素
summary+details 【】
menu+menuitem 【】

三、全局属性

每个标签都有的全局属性

1. class 【设置类】
2. contenteditable 【使其变得可编辑】
3. hidden 【让它看不见】
4. id 【设置全文档唯一标识符】
5. style 【添加样式】
6. tabindex 【设置 Tab 的交互性】
7. title 【置了在文字溢出使用省略号并悬停其上的展示】

四、meta 标签

下面这个标签经常使用，意思是不让手机用户对页面进行缩放

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

五、章节/内容/文字标签

• 标题 h1 ~ h6 — 段落上的的标题
• 章节 section — 把每章节的标题和段落包起来，section 里套 section 也很常用
• 文章 article — 表示文档、页面、应用或网站中的独立结构
• 段落 p — 标题下的段落
• 头部 header — 顶部广告
• 脚部 footer — 版权声明
• 主要内容 main — 可以将除了头部和脚部内容当做主要内容包起来
• 旁支内容 aside — 写个导航
• 划分 div — 可以把主要内容和旁支内容包起来，使结构更加清晰
• ol + li — 有序列表，ol 不能有除了 li 之外的任何子元素
• ul + li — 无序列表，ul 不能有除了 li 之外的任何子元素
• dl + dt + dd — 描述列表，dt 内容是描述的对象，dd是描述的内容
• pre — 保留空格、回车和Tab，用了之后字体会非常奇怪，记得在 style 里把字体设置回来
• hr — 画分割线使用
• br — 换行
• a — 超链接的时候使用，<a href="URL" >内容</a>
• em — 表示强调，语气很重要，默认样式是斜体
• strong — 表示强调，本身很重要，默认样式是加粗
• code — 特点：它包起来的字是等宽的，写代码用，但不保留回车换行，配合 pre 标签，就能愉快写代码
• q — 行内引用 — 表示这里一段是引用的，默认无样式，只是引用
• blockquote — 块级引用，表示这里一块是引用的，会换行

六、a 标签

a 标签可以跳转到外部锚点、跳转内部锚点、跳转到邮箱或电话等

属性可选值如下

• href（跳转外部内容/跳转内部锚点/跳转到邮箱或电话等）
  • 网址（//www.baidu.com，https://www.baidu.com）
  • 路径（/a/b/c，index.html，./index.html）
  • 伪协议（javascript:alert(1)，mailto:邮箱，tel:手机号）
• target（指定跳转方式）
  • _blank
  • _top
  • _parent
  • _self
  • page_name（寻找名叫”page_name”的页面并在其中打开，如果没有会自动创建）
• download（下载）
• rel=noopener（解决了一个bug，不让新跳转的页面操作原来页面）

在 http 协议中，/ 的根目录表示开启的 server 的目录

<a href="//www.baidu.com" target="_blank" rel="noopener">这是一个百度链接</a>

七、table 标签

相关标签

table thead tbody tfoot tr td th

相关样式

table-layout border-collapse border-spacing

<table>
  <tbody>
    <tr>
      <th>testHeader</th>
    </tr>
      <tr>
      <td>testContent</td>
    </tr>
  </tbody>
</table>

八、img 标签

img 标签的作用是发出 get 请求，展示一张图片

相关属性

alt height width src

相关事件

onload onerror

相关样式

max-width:100%

img 标签是一个可替换元素：参看MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element

九、form 标签

form 标签的作用是发送 GET 或 POST 请求，然后刷新页面

相关标签

input textarea select+option label

相关属性

action autocomplete method target

相关事件

onsubmit

<form method="post" action="//xxx.com">
  <label>
        <span>公司地址：</span>
        <input type="text" name="" placeholder="请输入公司地址">
  </label>
  <input type='submit' value='点击提交' />
  <button>点击<strong>提交</strong></button>
</form>

• input 的提交不可以套其他内容，只能是纯文本，button 的提交里面可以套其他的标签
• button 的 type 默认是 submit，所以可以省略写

十、input/textarea/selection 标签

input 标签的作用是让用户输入内容

相关属性

type name autofocus checked disabled maxlength pattern value placeholder

type 属性可选值

button text color password radio checkbox file submit hidden email number search tel

相关事件

onchange onfocus onblur

HTML 新增了验证器功能

<input type='text' required />

textarea 标签

<textarea stype="resize:none;width:50%;height300px;"></textarea>

select 标签

<select>
  <option value='1'>周一</option>
  <option value='2 '>周一</option>
</select>

注意事项

• 一般不监听 input 的 click 事件
• form 里面的 input 要有 name
• form 里面要放一个 type=submit 才能出发 submit 事件

十一、video 标签

（待更新）

十二、audio 标签

（待更新）

十三、canvas 标签

（待更新）

十四、svg 标签

（待更新）

「@浪里淘沙的小法师」