html特殊标签笔记

简介：我目前是大学毕业，这不距离上次使用html还是上次。。。。哈哈哈，玩笑就不开了，好久没有使用html了，我就把自己感觉不是很熟悉的地方简单做了一下笔记，你们可以参考一下啊

目录

1. 布局盒子区别

2. 锚点链接

3. 表格

3.1 表格属性

3.2 合并单元格

4. 列表

4.1 无序列表

4.2 有序列表

4.3 自定义列表

5. 表单

5.1 type

5.2 input属性

5.3 label标签

5.4 下拉标签

5.5 文本域标签

---

1. 布局盒子区别

• div ： 独占一行（大盒子）

• span：一行可以有多个（小盒子）

2. 锚点链接

<h1 id="hao">你们好</h1>
<!-- 链接加上这样的属性值 -->
<a href="#hao"></a>

3. 表格

    <!-- 表格的使用 -->
    <table border="1px">
        <!-- 表格头部 -->
        <thead>
            <tr>
                <!-- 第一行设置为表头 -->
                <th>我是表头</th>
                <th>我是表头</th>
                <th>我是表头</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <!-- 一行 -->
            <tr>
                <!-- 一个单元格 -->
                <!-- colspan:跨列合并（左右相邻单元格合并） -->
                <td colspan="2">单元格</td>
                <td>单元格</td>
                <!-- rowspan：跨行合并（上下相邻单元格合并） -->
                <td rowspan="2">单元格</td>
            </tr>
            <tr>
                <!-- 一个单元格 -->
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <!-- 一个单元格 -->
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
    </table>

3.1 表格属性

属性名	属性值	描述
align	left、right、center	对齐方式
border	1或""	边框粗细
cellpadding	像素值	单元边与其内柔之间的空白，默认1
cellspacing	像素值	单元格之间的空白，默认2像素
width	像素值或百分比	规定表格宽度

3.2 合并单元格

<tr>
    <!-- 一个单元格 -->
    <!-- colspan:跨列合并（左右相邻单元格合并） -->
    <td colspan="2">单元格</td>
    <td>单元格</td>
    <!-- rowspan：跨行合并（上下相邻单元格合并） -->
    <td rowspan="2">单元格</td>
</tr>

4. 列表

4.1 无序列表

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

4.2 有序列表

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

4.3 自定义列表

<!-- 自定义列表在前面没有项目符号 -->
<dl>
    <dt>项目名字</dt>
    <dd>其他</dd>
    <dd>其他</dd>
    <dd>其他</dd>
    <dd>其他</dd>
    <dd>其他</dd>
</dl>
<dl>
    <dt>项目名字</dt>
    <dd>其他</dd>
    <dd>其他</dd>
    <dd>其他</dd>
    <dd>其他</dd>
    <dd>其他</dd>
</dl>
<dl>
    <dt>项目名字</dt>
    <dd>其他</dd>
    <dd>其他</dd>
    <dd>其他</dd>
    <dd>其他</dd>
    <dd>其他</dd>
</dl>

5. 表单

5.1 type

<!-- 表单 -->
<form action="#">
    用户名：<input type="text"><br>
    密码：<input type="password">
</form>

type的属性：

• text：文本

• password：密码

• radio：单选按钮

• checkbox：多选按钮

• file：文件上传

• hidden：定义隐藏的输入字段

• image：定义图像形式的提交按钮

• reset：定义重置按钮

• submit：提交按钮

5.2 input属性

• name：名字

• value： 固定input元素的值

• checked： 规定input元素首次加载时应该被选中

• maxlength：归档输入字段中的字符的最大长度

5.3 label标签

说明：自动将焦点转到或者选择对应的表单，用来增加用户体验

<label for="nan">男</label>
<input type="radio" id="nan" value="">
<br>
<label for="nv">女</label>
<input type="radio" id="nv" value="">

5.4 下拉标签

<select name="" id="">
    <option value="">山东人</option>
    <option value="">北京人</option>
    <option value="">山东人</option>
    <!-- 这个属性是默认选择此为默认属性 -->
    <option selected="selected">火星人</option>
</select>

5.5 文本域标签

<!-- 如果想输入文本特别多，文本框不能满足需要可以使用文本域 -->
<textarea name="" id="" cols="30" rows="10">
    你好这是我的个人简历，请看我的简历，谢谢您。
</textarea>