Html是网页的骨架。

表格标签

表格基本语法

表格基本标签有< table >< tr >< td >等闭合标签，其中这三个标签依次包含关系。为了方便理解表格，可以这样理解：在html中表格是按照一行一行的写出来的。也就是说< table >定义了一个表格，< tr >定位到行< td >定位到此行的某一个具体单元格。下面是打印出表格的范例：

1
2
3
4
5
6
7
8
<table>
        <tr> <!-- 第一行 -->
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr> <!-- 第二行 -->
            <td>4</td><td>5</td><td>6</td>
        </tr>
</table>

表头单元格标签

表头单元格标签< th >，一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。以下是范例：

1
2
3
4
5
6
7
8
<table>
    <tr>
        <th>第一个</th><th>第二个</th><th>第三个</th>
    </tr>
    <tr>
        <td>1</td><td>上面加粗了</td><td>3</td>
    </tr>
</table>

表格属性

下面是表格相关属性，以键值对方式使用：

属性名 属性值 描述
align left\center\right 规定表格相对周围元素的对齐方式
border 1或者0 规定表格单元是否拥有边框，默认为0，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度

下面是使用范例：

1
2
3
4
5
6
7
8
<table align="center" border="1" cellpadding="10" cellspacing="10" width="200">
    <tr>
        <th>第一个</th><th>第二个</th><th>第三个</th>
    </tr>
    <tr>
        <td>1</td><td>上面加粗了</td><td>3</td>
    </tr>
</table>

表格结构标签

结构标签有< thead >和< tbody >两个闭合标签。< thead >标签用于定义表格的头部。在< thead >标签内必须拥有< tr >标签，一般是位于第一位。< tbody >用于定义表格的主体，主要用于存放数据本体。以上标签都被< table >标签包含。下面是使用范例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
    <thead>
        <tr>
            <th>标题1</th><th>标题2</th><th>标题3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>5</td><td>6</td>
        </tr>
    </tbody>
</table>

这样书写代码有助于分辨内容和修改代码。

合并单元格

合并单元格有两种方式，其语句是< td colspan=”X” >向右合并X个单元格分别是跨行合并rowspan（向下）和跨列合并colspan（向右）。下面是在3×3表格中合并(1,2)和(1,3)，(2,2)和(3,2)单元格的范例：

1
2
3
4
5
6
7
8
9
10
11
<table align="center" border="1" cellpadding="20" cellspacing="0">
        <tr>
            <td>1</td><td colspan="2">跨列两列</td> <!-- 不再写被合并的(1,3)单元格 -->
        </tr>
        <tr>
            <td>1</td><td rowspan="2">跨行两列</td><td>1</td>
        </tr>
        <tr>
            <td>1</td><td>1</td> <!-- 不再写被合并的(3,2)单元格 -->
        </tr>
</table>

在被合并的其他行上不得再写它被合并的单元格标签< td > !

列表标签

列表就是用来布局的。列表最大的特点是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用的不同可以分为无序列表、有序列表和自定义列表。

无序列表

闭合标签< ul >是无序列表标签，一般会以项目符号呈现列表项。列表项使用< li >标签定义。无序标签遵循以下规则：

  • 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  • **< ul >< /ul >中只能嵌套< li >< /li >，**直接在< ul >< /ul >标签中输入其他标签或者文字的做法是不被允许的。
  • < li >与< /li >之间相当于一个容器（盒子），可以容纳所有元素。
  • 无序列表会带有自己的样式属性。

下面时无序列表标签使用范例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
    <li>
        <p>这是一段话</p>
    </li>
    <li>
        <img src="https://media.alxcn.eu.org/links/头像.jpg" alt="显示失败" width="50">这是一张图片
    </li>
    <li>
    <p>这是一段话但是<br>它被换行了，它仍然在一个容器里,所以没有两个点</p>
    </li>
    <li>
        <a href="https://alx962.eu.org" target="_blank">跳转到我的主页</a>
    </li>
</ul>

有序列表

闭合标签< ol >是有序标签，其各个列表项会按照一定的顺序排列定义。在HTML中有序列表会以数字来显示，并且使用< li >闭合标签来定义列表项。< ol >标签遵循以下几点：

  • 闭合标签< ol >中只能嵌套< li >标签， 直接在< ol >标签中输入其他标签或者文字是不合法的。
  • < li >与< /li >之间相当于一个容器，可以容纳所有元素。
  • 有序标签右自己的样式属性。

下面是使用有序列表标签范例：

1
2
3
4
5
6
7
8
9
10
11
<ol>
    <li>
        <h1>这是第一个标题</h1>
    </li>
    <li>
        <p>这是一个句子</p>
    </li>
    <li>
        <img src="https://media.alxcn.eu.org/links/头像.jpg" alt="显示失败" width="50">这是一张图片
    </li>
</ol>

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在HTML中，闭合标签< dl >用于定义描述列表（或定义列表），该标签会与 < dl >（定义项目/名字）和 < dd >（描述每一个项目/名字）一起使用。这些标签遵循以下几点：

  • < dl >< /dl >里面只能包含< dt >和< dd >。
  • < dt >和< dd >个数没有限制，经常是一个< dt >对应多个< dd >。

也就是说，标签< dl >定义一个自定义列表，在其包含中标签< dt >定义了列表头名字，在其包含中标签< dd >定义每个列表中各个元素。 以下是使用自定义列表标签范例：

1
2
3
4
<dl>
    <dt>列表1<dd>实例1</dd><dd>实例2</dd></dt>
    <dt>列表2<dd>实例3</dd><dd>实例4</dd></dt>
</dl>

表单标签

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

表单域

表单域是一个包含表单元素的区域。
在HTML标签中，闭合标签< form >用于定义表单域，< form >会吧它范围内的表单元素信息提交给服务器。< form >标签常用的属性有：

属性 属性值 作用
action url地址 用于指定接受并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式，其取值为get/post
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域

下面是表单域使用范例：

1
<form action="https://notfound.notfound" method="get" name="表单域名称">各种表单元素控件</form>

input表单元素

在自闭合< input >标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式。下面是type属性及其描述：

属性值 描述
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
chechbox 定义复选框
file 定义输入字段和浏览按钮，供上传文件
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮，重置按钮会清除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
text 定义单行的输入字段，用户可在其输入文本。默认宽度为20个字符

标签< input >除type外，还有其他属性，以下是常用的属性：
属性 属性值 描述
name 由用户自定义 定义input元素的名称
value 由用户定义 规定input元素的值
checked checked 规定此input元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度

以下是常用属性的使用注意事项：

  • name和value是每个表单都有的属性值，主要给后台人员使用。
  • name表单元素的名字，要求单选按钮和复选框要有相同的name值。
  • checked属性主要针对于单选按钮和复选框，主要作用就是一打开页面就可以默认选中某个表单元素。
  • maxlength是用户可以在表单元素输入的最大字符数。
  • 对于radio单选元素，其各个name值必须设定相同。

以下< input >标签使用范例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="test.test">
    用户名<input type="text" value="请输入用户名" maxlength="6">
    <br>
    密&nbsp;&nbsp;&nbsp;&nbsp;码<input type="password" maxlength="8">
    <br>
    密&nbsp;&nbsp;&nbsp;&nbsp;语<input type="hidden" value="芝麻开门">
    <br>
    写点什么<input type="text">
    <br>
    性&nbsp;&nbsp;&nbsp;&nbsp;别<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex" checked="checked">未定义
    <br>
    爱&nbsp;&nbsp;&nbsp;&nbsp;好<input type="checkbox" name="hobby">吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby" checked="checked">放飞自我
    <br>
    <input type="button" value="测试按钮">
    <input type="submit" value="提交按钮">
    <br>
    <input type="file">
    <input type="image" value="提交图片">
    <br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

label标签

< label >闭合标签用于绑定一个表单元素, 当点击< label >标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。也就是说将< label >标签中所有元素放入一个容器中绑定在一起。其中标签的for属性和id属性是关键，应当保持一致。

比如期待点击“男”这个字就可以选定这个元素，以下是< label >标签使用范例：

1
2
3
4
5
6
7
8
<form action="test.test">
<label for="sex0">
    <input type="radio" name="sex" id="sex0">男
</label>
<label for="sex1">
    <input type="radio" name="sex" id="sex1">女
</label>
</form>

select标签

这是下拉菜单。在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< select >闭合标签控件定义下拉列表。< select >标签遵循以下规则：

  • < select >中至少包含一个< option >标签。
  • 在< option >标签中selected=’’selected”，表示这是选项被默认选中。

以下是< slelct >标签使用范例：

1
2
3
4
5
6
7
8
9
<form action="test.test">
请选择地区
<select name="地区">
    <option selected="selected">中国大陆</option>
    <option>中國香港</option>
    <option>中國澳門</option>
    <option>台灣地區</option>
</select>
</form>

textarea标签

闭合标签< textarea >是多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。此标签遵循以下规则：

  • cols=“每行中的字符数” ，rows=“显示的行数”。

以下是< textarea >标签使用范例：

1
2
3
4
<form action="test.test">
请输入
<textarea name="text"cols="50" rows="10"></textarea>
</form>

Html第Ⅱ部分完。
HTML5速成笔记完。

工程范例

工程范例效果：工程范例文件,点我预览。


范例代码： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>范例工程</title>
</head>

<body>
    <h1><center> 欢迎查阅本范例工程 </center> </h1>
    <h4>关于我</h4>
    <p>
        我是Alx962，这是我的头像
        <img src="https://media.alxcn.eu.org/links/avatar.jpg" alt="显示失败" width="100" border="2">
        <br>
        欢迎访问我的主页，地址是
        <a href="https://alx962.eu.org">https://alx962.eu.org</a>
        <br><br>
        <a href="#mark">点我跳转到自定义列表</a>
    </p>
    <br><br>
    这是我的总结，我希望通过这个表格告诉你我的服务器情况
    <table align="center" border="1" cellpadding="20" cellspacing="5">
        <thead>
            <tr>
                <td>类别</td>
                <td>费用</td>
                <td>难度</td>
                <td>时间成本</td>
                <td>图片展示</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>网络</td>
                <td>基本宽带费</td>
                <td>需要自己学习内网穿透</td>
                <td>时间成本适中</td>
                <td rowspan="3"><img src="https://media.alxcn.eu.org/blog/summer1.jpg" width="200" alt="加载失败"
                        title="这是一张非常夏天的照片" border="2"></td>
            </tr>
            <tr>
                <td>服务器</td>
                <td>华硕小主板￥200左右</td>
                <td>非常大</td>
                <td>非常大</td>
            </tr>
            <tr>
                <td>软件系统</td>
                <td>开源免费</td>
                <td>适中</td>
                <td colspan="2">较大</td>
            </tr>
        </tbody>
    </table>
    <br>
    学习服务器一定要注意以下几点：
    <ul>
        <li>不要一开始就想上很高配服务器，用不上</li>
        <li>遇到问题多问<a href="https://www.google.com.hk" target="_blank">Google</a></li>
        <li>提问前先多想想，Think twice。</li>
    </ul>
    几个建议：
    <ol>
        <li>不要怕折腾</li>
        <li>禁止熬夜</li>
        <li>这是南昌的晚霞 <img src="https://media.alxcn.eu.org/blog/summer4.jpg" alt="加载失败" title="南昌的风真的好舒服" width="1080">
        </li>
    </ol>
    <br><br><br>
    <h4 id="mark">自定义列表</h4>来说，一般用于网站最下面或者分类，可以这样：
    <dl>
        <dt>
            <a href="https://media.alxcn.eu.org/blog/html_example1.html" target="_blank">工程范例文件</a>
            <br><br>
        <dd><a href="https://alx962.eu.org" target="_blank">我的主页</a></dd>
        <dd><a href="https://blog.alx962.eu.org" target="_blank">我的博客</a></dd>
        <dd><a href="https://nic.eu.org/" target="_blank">域名停靠</a></dd>
        <dd><a href="mailto:chinacao829@gmail.com" target="_blank">联系我们</a></dd>
        </dt>
    </dl>
    <br><br>
    <p> 下面将做一个小的调查</p>
    <form action="none.none">
        <table border="0">
            <tr>
                <td align="middle">用户名</td>
                <td><input type="text" placeholder="请输入用户名" maxlength="6"></td>
            </tr>
            <tr>
                <td align="middle">密码</td>
                <td><input type="password" placeholder="请输入密码" maxlength="30"></td>
            </tr>
            <tr>
                <td align="middle">确认密码</td>
                <td><input type="password" placeholder="请输入密码" maxlength="30"></td>
            </tr>
            <tr>
                <td align="middle">写点什么</td>
                <td><input type="text"></td>
            </tr>
        </table>
            性&nbsp;&nbsp;&nbsp;&nbsp;别<input type="radio" name="sex">男<input type="radio" name="sex">女<input
                type="radio" name="sex" checked="checked">未定义
            <br>
            爱&nbsp;&nbsp;&nbsp;&nbsp;好<input type="checkbox" name="hobby">吃饭<input type="checkbox" name="hobby">睡觉<input
                type="checkbox" name="hobby" checked="checked">放飞自我
            <br><br><br>
            <input type="button" value="测试按钮">
            <br><br>
            <input type="submit" value="提交按钮">
            <br><br>
            <input type="file" name="photo" accept="image/*">
            <button type="submit">上传图片</button>
            <br><br>
            请选择你所在的地区：
            <select name="地区">
                <option selected="selected">中国大陆</option>
                <option>中國香港</option>
                <option>中國澳門</option>
                <option>台灣地區</option>
                <option>海外各国</option>
            </select>
            <br><br><br>
            感谢你的耐心审阅，请留下你的宝贵意见：
            <textarea name="text" cols="50" rows="10"></textarea>
            <br><br><br><br><br><br>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
    </form>
    
</body>
</html>
完