HTML标签总结【下】

发布于：2022-12-30 ⋅ 阅读:(401) ⋅ 点赞:(0)

文章目录

表格标签

作用

主要用于展示数据，使数据显示规整

表格基本语法

<table>           <!--定义表头-->
    <tr>          <!--定义表格中的行-->
        <th>表头1</th>    <!--定义表格中的单元格-->
        <th>表头2</th>    <!--定义表格中的单元格-->
        ...
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        ...
    </tr>
</table>

<table>
    <thead></thead>    定义表格头部
    <tbody></tbody>    定义表格主体
</table>

表格属性

实际开发中，通过css来设置。结构与样式相分离
属性 属性值 说明
align left、center、right 对齐方式
alt 文本 替换文本
border 1或"" 表格是否有边框，默认""无边框
cellpadding 像素值 单元边沿与内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值/百分比 规定表格的宽度

小说排行榜案例

<h2 align="center">小说排行榜</h2>
    <table align="center" border="1" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="../img/up.jpg" width="40"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">鬼吹灯</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="../img/down.webp" width="40"></td>
                <td>124</td>
                <td>675432</td>
                <td><a
                        href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859?fr=aladdin">盗墓笔记</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="../img/up.jpg" width="40"></td>
                <td>212</td>
                <td>333005</td>
                <td><a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723?fr=aladdin">西游记</a></td>
            </tr>
        </tbody>
    </table>

单元格合并

方式
跨行合并 rowspan= “合并单元格个数”
跨列合并 colspan = “合并单元格个数”
示例
表格表头单元格合并 
<table align="center" border="1" cellpadding="10" cellspacing="0">
        <tr>
            <th colspan="5">个人简历</th>
        </tr>
        <tr>
            <td>姓名：</td>
            <td></td>
            <td>性别：</td>
            <td></td>
            <td rowspan="3">照片</td>
        </tr>
        <tr>
            <td>出生年月：</td>
            <td></td>
            <td>民族：</td>
            <td></td>
        </tr>
        <tr>
            <td>政治面貌：</td>
            <td></td>
            <td>学历：</td>
            <td></td>
        </tr>
    </table>

列表标签

作用

表格是用来显示数据的，列表是用来布局的

整齐、整洁、有序，作为布局会自由方便

无序列表

ul 标签表示 HTML 页面中项目的无序列表
li标签用于定义列表项

示例
无序列表 
<h3>无序列表-您喜欢吃的食物</h3>
    <ul>
        <li>臭豆腐</li>
        <li>榴莲</li>
        <li>鱼罐头</li>
        <li><p>123</p></li>
    </ul>

有序列表

ol 标签用于定义有序列表，列表排序以数字来显示，
li 标签来定义列表项。

示例
有序列表 
<h3>有序列表-粉丝排行榜</h3>
    <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>路人 100</li>
    </ol>
注意
①ol中只能嵌套li
②有序列表会带有自己的样式属性（行首有数字序号等），可通过css设置

自定义列表

dl：用于定义描述列表（或定义列表）
dt：定义项目/名字
dd：描述每一个项目/名字

注意
①dl中只能嵌套dt、dd
②常常一个dt对应多个dd
③dt和dd是并列关系 
<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>

表单标签

作用

表单是为了在网页中收集用户信息

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

表单域是form大标签，囊括表单信息

input输入表单元素

type属性

属性值 描述
checkbox 复选框（name属性值必须相同）
radio 单选按钮（必须有相同的name属性值）
file 定义输入字符按和“浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段。该字符被隐藏
button 可点击按钮（如获取短信验证码）
reset 重置
submit 提交按钮 将表单数据发送给服务器（如注册、提交）
text 定义单行输入字段，默认宽度20

示例

<form action="xxx.php" method="get">
    <!-- text 文本框 用户可以在里面输入任何文字 -->
    用户名：<input type="text" name="username" value="请输入用户名"><br/>
    <!-- password 密码框 用户看不见输入的密码 -->
    密码：<input type="password" name="password"><br/>
    <!-- radio 单选按钮 可以实现多选一 -->
    <!-- name是表单元素的名字 这里性别单选按钮必须有相同的名字name 才可实现多选一 -->
    性别：男<input name="sex" type="radio" value="男"> 女<input name="sex" type="radio" value="女"><br/>
    <!-- checkbox 复选框 可以实现多选 -->
    爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆">
    <!-- value可以设置值，把该value送到后台 -->
    <!-- name和value是每个表单元素都有的属性值 主要给后台人员使用 
    name是表单元素的名字 要求单选按钮和复选框要有相同的name值 -->
    <!-- sunmit 提交按钮 把表单数据发送到服务器 -->
    <input type="submit" value="提交按钮">
    <input type="submit" value="免费注册"><br/>
    <!-- reset 重置按钮 可以还原表单初始的默认状态 -->
    <input type="reset" value="重新填写"><br/>
    <!-- button 普通按钮 定义可点击按钮 后期结合JavaScript使用 -->
    <input type="button" value="获取短信验证码"><br/>
    <!-- file 文件域 上传文件 -->
    上传头像：<input type="file"><br/>
</form>

效果如下：

其他属性

属性 属性值 描述
name 用户自定义 定义input元素名称（单选按钮、复选框）
value 用户自定义 规定input的值（打开页面就显示的默认值）
checked checked 规定此input元素首次加载时应被选中（单选按钮、复选框默认值）
maxlength 正整数 规定输入字段中 字符最大长度

label标签

😊😊label 标签用于绑定一个表单元素, 当点击

示例

<label for="addr">住址：</label>
<input type="text" id="addr">

<input type="radio" name="sex2" id="nan"> 
<label for="nan">男</label> 
<input type="radio" name="sex2" id="nv"> 
<label for="nv">女</label>

label标签的核心：label标签的for属性应当和相关元素的id属性相同

select下拉表单元素

注意

①select中至少包含一对 。
②在option 中定义 selected =“ selected " 时，当前项即为默认选中

示例

籍贯：
<select>
    <option>岳阳</option>
    <option selected="selected">武汉</option>  
    <option>广州</option>
</select>

效果：

textarea文本域元素

场景

  • 用户输入内容较多的情况下，我们就不能使用文本框表单
  • textarea标签是用于定义多行文本输入的控件
  • 控件常见于留言板，评论。

    示例

    留言评论：
<textarea>
这里可以填写默文本域中的默认值
</textarea><br/>
留言评论：
<!-- 设置3行 实际可以写到456行 自动加滑动条
实际开发中 用css改变大小 -->
<textarea  rows="3" cols="60">感谢您的留言
</textarea>

    综合案例：注册页面

    <!DOCTYPE html>
<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>
    
        <h3>青春不常在，抓紧谈恋爱</h3>
    <table>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" id="nan"><label for="nan"><img src="../img/man.jpg" width="18">男</label>
                <input type="radio" name="sex" id="nv"><label for="nv"><img src="../img/woman.jpg" width="18">女</label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年--</option>
                    <option>1993</option>
                    <option>1995</option>
                    <option>1997</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2002</option>
                </select>
                <select>
                    <option>--请选择月--</option>
                    <option>4</option>
                    <option>5</option>
                    <option>8</option>
                    <option>10</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>13</option>
                    <option>17</option>
                    <option>23</option>
                    <option>28</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marriage" id="single" checked="checked"><label for="single">未婚</label>
                <input type="radio" name="marriage" id="married"><label for="married">已婚</label>
                <input type="radio" name="marriage" id="divorced"><label for="divorced">离婚</label>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" name="education" value="博士后"></td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="likes">妩媚的
                <input type="checkbox" name="likes">可爱的
                <input type="checkbox" name="likes">小鲜肉
                <input type="checkbox" name="likes">老腊肉
                <input type="checkbox" name="likes" checked="checked">都喜欢
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><input type="textarea" value="自我介绍" rows="3" cols="20"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="checkbox" checked="checked">我已同意注册条款和会员加入标准</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">我是会员 立即登录</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h4>我承诺</h4>
                <ul>
                    <li>年满18岁 单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

    效果：

    本文含有隐藏内容，请 开通VIP 后查看

    网站公告

    今日签到

    点亮在社区的每一天
    去签到

    热门文章

    最新发布