HTML5 pink老师-CFANZ编程社区

文档类型声明及标签

注释格式：

快捷键：ctrl + /

<!DOCTYPE html> <!--文档类型声明, 告诉浏览器使用HTML5来显示网页，它不是标签-->
<html lang="en"> <!--当前文档显示语言-->
<head>
    <meta charset="UTF-8">  <!--字符集，防止乱码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开始</title>
</head>
<body>
    
</body>
</html>

<table>
    <thead> <!--表格头部-->
        <tr> <!--行-->
            <th colspan="2">The table header</th> <!--表头标签，居中加粗-->
        </tr>
    </thead>
    <tbody> <!--表格主体-->
        <tr>
            <td>The table body</td><!--单元格-->
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

合并单元格

跨行合并：rowspan=“合并单元格个数”
跨列合并：colspan=“合并单元格个数”

<ul>

无序列表

<ul>
    <li></li>
    <li></li>
</ul>

<ol>

有序列表

<ol>
    <li></li>
    <li></li>
</ol>

<dl>

自定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

<form>

表单域

<form action="" method="" name="">
    
</form>

<input>

表单元素

<input>的工作方式相当程度上取决于***type***属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。

可用的值包括：

Type	描述
button	没有默认行为的按钮，上面显示*`value`*属性的值，默认为空。
checkbox	复选框，可设为选中或未选中。
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
date	输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
datetime-local	输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
email	编辑邮箱地址的区域。类似 `text` 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file	让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
hidden	不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
image	带图像的 `submit` 按钮。显示的图像由 `src` 属性规定。如果 src 缺失，alt 属性就会显示。
month	输入年和月的控件，没有时区。
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio	单选按钮，允许在多个拥有相同 `name`值的选项中选中其中一个。
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用htmlattrdefmin 和 htmlattrdefmax来规定值的范围。
reset	此按钮将表单的所有内容重置为默认值。不推荐。
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
submit	用于提交表单的按钮。
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
text	默认值。单行的文本区域，输入中的换行会被自动去除。
time	用于输入时间的控件，不包括时区。
url	用于输入 URL 的控件。类似 `text` 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
week	用于输入以年和周数组成的日期，不带时区。

属性：

属性	相关的type	描述
value	所有	表单控件的值。以名字/值对的形式随表单一起提交
checked	radio, checkbox	用于控制控件是否被选中
maxlength	password, search, tel, text, url	value的最大长度(最多字符数目)

<label>

<select>

下拉表单

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
<!--
	使用option属性 select="selected" 来确保默认值
-->

<textarea>

文本域标签，可以输入多行文本

<label for="story">Tell us your story:</label>

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>