Html是网页的骨架。

表格标签

表格基本语法

表格基本标签有

分别是跨行合并rowspan（向下）和跨列合并colspan（向右）。下面是在3×3表格中合并(1,2)和(1,3)，(2,2)和(3,2)单元格的范例：

等闭合标签，其中这三个标签依次包含关系。为了方便理解表格，可以这样理解：在html中表格是按照一行一行的写出来的。也就是说定义了一个表格，定位到行和两个闭合标签。标签用于定义表格的头部。在标签内必须拥有标签，一般是位于第一位。用于定义表格的主体，主要用于存放数据本体。以上标签都被
定位到此行的某一个具体单元格。下面是打印出表格的范例：

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>

表头单元格标签

表头单元格标签

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

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>

表格结构标签

结构标签有

标签包含。下面是使用范例：

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>

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

合并单元格

合并单元格有两种方式，其语句是

向右合并X个单元格 
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>

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

列表标签

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

无序列表

闭合标签

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

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

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

        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>

        有序列表

        闭合标签

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

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

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

            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中，闭合标签

            用于定义描述列表（或定义列表），该标签会与
            （定义项目/名字）和
            （描述每一个项目/名字）一起使用。这些标签遵循以下几点：

            • 里面只能包含
              和
              。
            • 和
              个数没有限制，经常是一个
              对应多个
              。

            **也就是说，标签

            定义一个自定义列表，在其包含中标签
            定义了列表头名字，在其包含中标签
            定义每个列表中各个元素。**以下是使用自定义列表标签范例：

            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标签中，闭合标签

            用于定义表单域，会吧它范围内的表单元素信息提交给服务器。标签常用的属性有：

            属性

            属性值

            作用

            action

            url地址

            用于指定接受并处理表单数据的服务器程序的url地址

            method

            get/post

            用于设置表单数据的提交方式，其取值为get/post

            name

            名称

            用于指定表单的名称，以区分同一个页面中的多个表单域

            下面是表单域使用范例：

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

            input表单元素

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

            属性值

            描述

            button

            定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）

            chechbox

            定义复选框

            file

            定义输入字段和浏览按钮，供上传文件

            hidden

            定义隐藏的输入字段

            image

            定义图像形式的提交按钮

            password

            定义密码字段，该字段中的字符被掩码

            radio

            定义单选按钮

            reset

            定义重置按钮，重置按钮会清除表单中的所有数据

            submit

            定义提交按钮，提交按钮会把表单数据发送到服务器

            text

            定义单行的输入字段，用户可在其输入文本。默认宽度为20个字符

            标签除type外，还有其他属性，以下是常用的属性：

            属性

            属性值

            描述

            name

            由用户自定义

            定义input元素的名称

            value

            由用户定义

            规定input元素的值

            checked

            checked

            规定此input元素首次加载时应当被选中

            maxlength

            正整数

            规定输入字段中的字符的最大长度

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

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

            以下标签使用范例：

            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标签

            比如期待点击“男”这个字就可以选定这个元素，以下是

            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标签

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