HTML 标签

html

页面结构

body
body 元素中的所有内容都会显示在浏览器的主窗口中
head
包含页面的一些信息，比如标题等
title
页面标题，通常位于 head 内。

文本

结构化标签

结构化标签会影响网页的结构。

h1, h2, h3, h4, h5, h6
标题
p
段落
b
粗体
i
斜体
sup
上标
sub
下标
br
换行
hr
分割线

语义标签

语义标签不影响网页的结构，却可以为页面添加额外的信息。

strong
表示十分重要。默认浏览器中显示为粗体。
em
起强调作用。默认浏览器中显示为斜体。
blockquote
标记较长的引用。默认浏览器会对 blockquote 中的内容进行缩进。
q
标记较短引用
abbr
缩写。通过指定 title 属性来指明全称。鼠标移上去时会动态显示。
cite
标明引用来源。浏览器会显示为斜体。
dfn
解释新术语
address
包含网站设计者的联系详情。通常显示为斜体。
ins
显示已经插入到文档中的内容。通常带有下划线。
del
显示已经从文档中被删除的内容。通常带有删除线。
s
显示不准确或不相关却不应当予以删除的内容。通常带有从中穿过的线条。

列表

ol
有序列表，其中的每个项目用 li 元素表示。
ul
无序列表，其中的每个项目用 li 元素表示。
dl
定义列表，用成对的 dt 和 dd 元素来表示被定义的术语及相应的定义。

链接

a
用 href 属性来指明要链接的目标页面。
当链接到另一个网站时，href 的值必须是绝对 URL；当链接到同一网站的目标页面时，href 的值可以是相对 URL。同一个网站不同页面的相对 URL 类似于文件系统中不同文件的相对位置，实际上，二者没有本质区别。
mailto:
在 a 标签中的 href 属性中指定 mailto: 后跟一个邮箱名称时，单击链接会启动 email 程序，并自动添加连接中指定的 email 地址为收件人。
target
在 a 标签中指定 target 属性为 _blank 时可以在新窗口中打开链接。
一般情况下，要尽量避免在新窗口中打开链接，除非是跳转到其它的网站。
#id
在 a 标签中的 href 属性中用 # 后跟某元素的 id 时，会跳转到页面内的这个元素。在跳转到其它页面时，如果在原来的 URL 后用这种方式指定元素，也可以跳转到其它页面的某个元素。

图像

img
img 标签要指定几个属性：
src：图像地址
alt：对于图像的说明
titile：图像名称，鼠标悬停在图像上方时会显示
height,width: 图像大小
应该根据图像在网页上显示的大小来保存图像；照片最好保存为JPEG格式。
figure
用来包含图像以及对图像的说明。其中图像说明用 figcaption 来指定。

<figure>
<img src="images/nice.jpg" alt="beautiful scene">
<br />
<figcaption>How beautiful it is!</figcaption>
</figure>

表格

table
创建表格。
tr
表格内的每一行。
td
表格内每一行内的每一个单元格。通过指定 colspan 或者 rowspan 单元格可以跨列或者跨行。
th
和 td 用法一样，但它的作用是表示列或行的标题。用 scope 的属性来指定（可以赋值为 row 或 col）。
thead
表格的内容应放在 thead 中。
tbody
表格的主体部分应放在 tbody 元素中。
tfoot
表格的脚注应放在 tfoot 元素中。

<table>
<thead>
    <tr>
        <th></th>
        <th scope="col">列标题一</th>
        <th scope="col">列标题二</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">行标题一</th>
        <td>列值一</td>
        <td>列值二</td>
    </tr>
    <tr>
        <th scope="row">行标题二</th>
        <td>列值一</td>
        <td>列值二</td>
        <th scope="row">行标题二</th>
    </tr>
    <!-- 其它行 ... -->
</tbody>
<tfoot>
    <tr>
        <td></td>
        <td colspan="2">表格脚注</td>
    <tr>
</tfoot>
</table>

表单

form
表单位于 form 元素中。action 属性来指定响应的 URL。method 来指定提交的方式：get 或 post。

添加文本

input type=”text”
添加单行文本。
input type=”password”
添加隐藏单行文本。
textarea
添加多行文本。

进行选择

input type=”radio”
单选按钮。
input type=”checkbox”
复选框。
select
下拉列表框。通过 option 子标签来设置选项。
通过设置 multiple 选项可以设置多选框。

提交表单

input type=”submit”
提交按钮。
input type=”image”
图像提交按钮。

上传文件

input type=”file”
上传文件。

按钮

button
可以结合文本和图像。

组合表单

fieldset
组合多个控件；会有一个外边框围起来。
legend
可以指定多个控件的组合的标题。

其它控件

input type=”date”
日期控件。
input type=”email”
邮箱输入。
input type=”url”
网页地址输入。
input type=”search”
搜索输入。

<form action="http://www.example.com/review.php" method="get">
    <fieldset>
        <legend>你的详细信息：</legend>
        <label>Name:
            <input type="text" name="name" size="30" maxlength="100">
        </label>
        <br />
        <label>Email:
            <input type="email" name="email" size="30" maxlength="100">
        </label>
        <br />
    </fieldset>
    <br />
    <fieldset>
        <legend>你的调查：</legend>
        <p>
            <label for="hear-about">你是怎么知道我们的？</label>
            <select name="referrer" id="hear-about">
                <option value="google">Google</option>
                <option value="friend">朋友</option>
                <option value="other">其它</option>
            </select>
        </p>
        <p>
            你会继续来访吗？
            <br />
            <label>
                <input type="radio" name="rating" value="yes"/>
                是的
            </label>
            <label>
                <input type="radio" name="rating" value="no"/>
                不会
            </label>
            <label>
                <input type="radio" name="rating" value="maybe"/>
                也许
            </label>
        </p>
        <p>
            <label for="comments">想对我们说的：</label>
            <br />
            <textarea rows="4" cols="40" id="comments">
            </textarea>
        </p>
        <label>
            <input type="checkbox" name="subscribe" checked="checked" />
            订阅邮件
        </label>
        <br />
        <input type="submit" value="提交"/>
    </fieldset>
</form>

其它

白色空间折叠：浏览器忽视空白和断行。
id 特性：同一个页面内元素 id 是唯一的。
class 特性：多个元素可以属于一个 class 。
某些元素总是会另起一行，称为块级元素，比如 h1，p， ul 以及 li 等。
有些元素出现时总是和邻近的元素在同一行，称为内联元素，比如 a，b，em 以及 img 等。
div 元素可以将文本和元素集中在一个块级元素中。
span 元素就像是 div 元素的内联版本。
iframe 内联框架。页面内的一个小窗口。

meta 元素用来指定页面信息。如：

<!DOCTYPE html>
<html>
    <head>
        <title>页面的信息</title>
        <meta name="description" content="个人博客" />
        <meta name="keywords" content="个人 博客 地图" />
        <meta name="robots" content="nofollow" />
        <meta http-equiv="author" content="atlas" />
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="expires" content="Fri, 23 Apr 2017 23:12:34 GMT" />
    </head>
</html>

转义字符
- 小于号：<
  <
- 大于号：>
  >
- And符号：&
  &
- 双引号："
  "
- 美分符号：¢
  ¢
- 英镑符号：£
  £
- 日元符号：¥
  ¥
- 欧元符号：€
  €
- 版权符号：©
  ©
- 注册商标：®
  ®
- 商标：™
  ™
- 左单引号：‘
  ‘
- 右单引号：’
  ’
- 左双引号：&ldsquo;
  &ldsquo;
- 右双引号：&rdsquo;
  &rdsquo;
- 乘号：×
  ×
- 除号：÷
  ÷