HTML 常用标签alt：描述图像的替换文本。用户将看到这个显示，如果图像的URL是错误的 <a> 元素 (或锚(anc

一、常用标签

标签	说明
基本
`<!DOCTYPE>`	定义文档类型。
`<html>`	代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
`<head>`	代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。
`<meta>`	定义其他 HTML 元素无法描述的元数据。
`<title>`	定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。
`<link>`	用于链接外部的 CSS 到该文档。
`<style>`	用于内联CSS样式。
`<script>`	用于嵌入或引用可执行脚本。
章节
`<body>`	定义文档的主体。
`<header>`	定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
`<nav>`	定义只包含导航链接的章节。一般接`<ul>`
`<main>`	定义文档中主要或重要的内容。
`<section>`	定义文档中的一个章节。
`<footer>`	定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
`<h1>~<h6>`	标题元素实现了六层文档标题，`<h1>` 是最大的标题，`<h6>` 是最小的标题。标题元素简要地描述章节的主题。
`<div>`	代表一个通用的block容器，没有特殊含义。
组织内容
`<p>`	paragraph，定义一个段落。
`<br>`	break，换行，空标签。
`<hr>`	水平线。
`<ol>`	ordered list，定义一个有序列表。
`<ul>`	unordered list，定义一个无序列表。
`<li>`	list，定义列表中的一个列表项
`<dl>`	definition list，定义一个定义列表（一系列术语和其定义）。
`<dt>`	definition title，代表一个由下一个 `<dd>` 定义的术语。
`<dd>`	definition description，代表出现在它之前术语的定义。
`<span>`	代表一段没有特殊含义的inline容器

示例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>网页标题</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="topNavBar">
            <img src="#" alt="logo">
            <nav>
                <ul>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">SKILLS</a></li>
                    <li><a href="#">EXPERIENCE</a></li>
                </ul>
            </nav>
        </div>
        <div class="banner" style="background-image: url(#)">
        </div>
        <main>
            <div class="picAndText">
                <h1>Zach Z</h1>
                <p>前端开发工程师</p>
                <hr>
                <dl>
                    <dt>年龄</dt>
                    <dd>18</dd>
                    <dt>城市</dt>
                    <dd>北京</dd>
                </dl>
            </div>
            <footer class="media">
                <a href="#"><img src="#" alt="微信"></a>
                <a href="#"><img src="#" alt="知乎"></a>
                <a href="#"><img src="#" alt="掘金"></a>
            </footer>
        </main>

        <section>
            <h2>技能</h2>
            <ol>
                <li>HTML 5 &amp; CSS 3</li>
                <li>JavaScript</li>
                <li>jQuery</li>
            </ol>
        </section>
        <script src="js/main.js"></script>
    </body>
</html>

二、文字编辑

标签	说明
`<b>`	加粗
`<strong>`	代表特别重要的文字。
`<i>`	倾斜，代表一段不同性质的文字，如技术术语、外文短语等。
`<em>`	代表强调文字。
`<s>`	删除线，代表不准确或不相关的内容。
`<del>`	定义从文档移除的内容。
`<u>`	下划线
`<ins>`	定义增加到文档的内容。
`<q>`	代表内联的引用。
`<cite>`	代表作品标题引用。
`<blockquote>`	代表其中的文字是引用内容。属性cite表示引用地址

三、嵌入内容

图像：<img>
- src：图片位置
- alt：描述图像的替换文本。用户将看到这个显示，如果图像的URL是错误的
- title：鼠标悬停时内容
内嵌网页：<iframe>
- src：网页位置
- frameborder：框架边缘，一般设为0
- 示例：

<iframe name=xxx src="#" frameborder=0></iframe>
<a target=xxx href="http://qq.com">QQ</a>

视频：<video>
音频：<audio>

四、链接`<a>`

<a> 元素 (或锚(anchor)元素)，可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL(uniform resource locator)的超链接。（HTTP GET 请求）

属性`href`

包含超链接指向的URL或URL片段。

地址一定要加协议类型
- 支持协议包括http:，file:，ftp:，mailto：
- 无协议地址，则使用当前页面协议
相对URL
- 相同文件夹只用文件名：review.html
- 子文件夹：movies/dvd/reviews.html
- 祖父文件夹：../../index.html
href后面可以写什么？
- 空着，点击则会刷新页面
- ="#ssss"：加锚点，页面内跳转，不发请求。#后无内容则跳转页面顶部
- ="?name=jake"：浏览器会自动判断意思，发起get请求
- ="javascript:;"，使用伪协议js:，不是类似http:这样的真协议

属性`target`

_self: 当前页面加载。此值是默认的，如果没有指定属性的话。
_blank: 新窗口打开，即到一个新的未命名的HTML浏览上下文
_parent: 父页面打开。如果没有父页面，此选项的行为方式相同_self。
_top: 顶层窗口打开。如果没有父页面或顶层窗口，此选项的行为方式相同_self。

属性`download`

此属性指示浏览器下载URL而不是导航到它，因此将提示用户将其保存为本地文件。

五、表格`<table>`

<tr>：(table row)每行开始
<td>：(table data)每格元素
<th>：(table heading)标题
- scope属性(row，col)：表示列标题还是行标题
<thead>：一块列标签（表头）。
<tbody>：一块具体数据（表格主体）
<tfoot>：一块列摘要（表尾），例如：总计。
<caption>：表格的标题。
colspan(数字)属性：跨列
rowspan(数字)属性：跨行

六、表单`<form>`

属性

action：服务器上接受信息的URL（xxx.php）
method：一般用post，极少用get
id：添加元素标识

控件

<button>：按钮。
<select>：表下拉框。
<textarea>：多行文本框。
<label>：代表表单控件的标题。一般label加for，input加id建立关联。老手直接用label把input包起来就建立关联了。
<option>：代表一个<select>元素或<datalist>元素中的一个选项

控件`<input>`

允许用户编辑数据的数据区（文本框、单选框、复选框等），详情见MDN

type属性：

button：无缺省行为按钮
text：单行字段；换行会将自动从输入的值中移除。
password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度。
checkbox：复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。
radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
submit：用于提交表单的按钮。
file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
image：图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
hidden：不显示在页面上的控件，但它的值会被提交到服务器。
search：HTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
其它控件：color,number,range,reset,tel,url,email,month,week,time,date,datetime,datetime-local

说明

没有提交按钮就无法提交。加<input type="submit" value="提交">
主要是发起post请求。
http以明文传密码。post的时候可以看到。在第四部分。
中文都会被转译为utf-8
file协议不支持post。用localhost:8080/index.html
method都用post，get会把参数放到查询参数里。
通过action="users=?zzz=3"，可以使post支持查询参数，但get没办法上传
a标签和form标签是一对。

HTML 常用标签

一、常用标签

示例

二、文字编辑

三、嵌入内容

四、链接<a>

属性href

属性target

属性download

五、表格<table>

六、表单<form>

属性

控件

控件<input>

说明