HTML 02（完）

最新推荐文章于 2024-09-14 13:37:05 发布

caicaicai..

最新推荐文章于 2024-09-14 13:37:05 发布

阅读量136

点赞数

分类专栏：前端文章标签：列表 html web visual studio code css

本文链接：https://blog.csdn.net/xujiaqiqiqi/article/details/115868066

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表格标签

主要用于显示、展示数据

<table>
    <tr>
        <td>单元格内的文字</td>
        ....
    </tr>
    ....
</table>

<table></table>是用于定义表格的标签
<tr></tr> 定义表格中的行 必须在<table></table>标签中
<td></td>定义表格中的单元格 必须在<tr></tr>标签中
<th></th>表示HTML表格表头部分（table head）通常用于第一行 会加粗居中
td 就是table data，即数据单元格内容

<table>
        <tr>
            <th>姓名</th> <th>性别</th> <th>年龄</th>
        </tr>
        <tr>
            <td>xjq</td> <td>男</td> <td>24</td>
        </tr>
        <tr>
            <td>wfl</td> <td>男</td> <td>20</td>
        </tr>
        <tr>
            <td>狗</td> <td>女</td> <td>10</td>
        </tr>
</table>

表格属性

写在<table></table>里面

<table align="center" border="1" cellpadding="20" cellspacing="10" width="100">

表格结构标签

<thead></thead> 表格的头部区域 就是第一排属性
<tbody></tbody> 表格的主体区域
作用：更好的分清表格结构

合并单元格

跨行合并：rowspan="合并单元格的个数" 最上侧单元格为目标单元格，写合并代码
跨列合并：colspan="合并单元格的个数" 最左侧单元格为目标单元格，写合并代码
三步：
1.先确定跨行还是跨列
2.找到目标单元格，写上合并方式
3.删除多余的单元格

<td></td> <td rowspan="2"></td> <td></td> 
<td colspan="3"></td>

列表标签

主要用于布局
最大的特点就是整齐、整洁、有序
3类：无序有序自定义列表

无序列表（多用）

<ul></ul>里面只能放<li></li>标签
但是<li></li>标签里面能放别的标签
通过css来设置样式

<ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
        <li>牛肉</li>
</ul>

有序列表

<ol></ol>里面只能放<li></li>标签
但是<li></li>标签里面能放别的标签
通过css来设置样式

<ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
        <li>牛肉</li>
</ol>

自定义列表

常用于对术语或名词进行解释和描述，自定义列表前没有任何项目符号
<dt></dt>定义项目
<dd></dd>描述每一个项目
<dt><dd>是并列关系
<dl></dl>里面只能放<dt></dt> <dd></dd>标签
但是<dt></dt> <dd></dd>标签里面能放别的标签

<dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dd>西瓜</dd>
</dl>

表单标签

收集用户信息进行交互
表单由表单域、表单控件（表单元素）、提示信息组成
在这里插入图片描述
表单域

<form></form>定义表单域，实现用户信息的收集和传递
会把范围内的数据提交给服务器
<form action="列表.html" method="POST" name="name1"></form>

在这里插入图片描述
表单元素

<input>输入的意思，收集用户信息
<input>是单标签

在这里插入图片描述

<input type="属性值" />

在这里插入图片描述
name和value给后台看的单选和复选都必须要有相同name值
name 一样可以实现选这个取消那个
value 后台可以看到选什么 text中可以显示
checked 打开页面时默认☑️（主要针对单选框和复选框）

<form action="xxx.html" method="GET">
        用户名：<input type="text" value="请输入用户名"><br>
        密码：<input type="password" value=""><br>
        性别： 男<input type="radio" name="usersex" value="男"> 女<input type="radio" name="usersex" value="女"><br>
        爱好：吃饭<input type="checkbox" name="userhabby" value="吃饭"> 睡觉<input type="checkbox" name="userhabby" value="睡觉"> 玩游戏<input type="checkbox" name="userhabby" value="玩游戏">
        <input type="submit" value="免费注册"><br>
        <input type="reset" value="重新填写"><br>
        <input type="button" name="" id="" value="获取短信验证码"><br>
        <input type="file" name="" id="" value="上传图片"><br>
        <input type="hidden" name="" id="">
</form>

lable标签

<lable></lable>标签为input元素定义标注，用于绑定一个表单元素当点击<lable>标签内文本时，自动会将焦点转到对应表单元素上，用来增加用户体验
for="属性"等于 id="属性"
<label for="text">用户名：</label><input type="text" id="text">

select标签
下拉菜单节省空间

<select name="" id="">
        <option value="">萧山</option>
        <option value="">杭州</option>
        <option value="" selected="select">绍兴</option>
</select>
<select> 至少包含一对<option>
selected="select" 默认出现这个选中项