标签基础二
列表标签
列表的作用，使布局内容排列整齐有序。
列表标签是父子标签，嵌套布局。
分类
- 无序列表
布局整齐排列不需要规定顺序的区域。
标签:ul嵌套li,ul是无序列表,li是列表条目。
tips:
- ul标签只能包裹li标签
- li标签可以包裹任意内容
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
...
</ul>- 有序列表
布局排列整齐的需要规定顺序的区域。
标签:ol嵌套li,li是列表条目
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>- 定义列表
标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题，dd是定义列表的描述和详情。
<dl>
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
<dd>维修服务价格</dd>
<dt>线下门店</dt>
<dd>小米之家</dd>
<dd>服务网点</dd>
<dd>授权体验店</dd>
</dl>dl里面只能包含dt和dd。
dt和dd可以包含任意内容。
表格标签
类似excel数据。
| 标签 | 作用 |
|---|---|
| table | 表格 |
| tr | 行 |
| th | 表头单元格 |
| td | 内容单元格 |
<table border="">
<tr>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>chuck</td>
<td>030121301197</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>joan</td>
<td>030121301197</td>
<td>女</td>
<td>26</td>
</tr>
</table>在网页中，默认没有边框线，通过border属性添加边框线。
表格结构标签：用于浏览器识别表格内容。
| 标签名 | 含义 | 特殊说明 |
|---|---|---|
| thead | 表格头部 | 表格头部内容 |
| tbody | 表格主题 | 主要内容区域 |
| tfoot | 表格底部 | 汇总信息区域 |
<table border="">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>chuck</td>
<td>030121301197</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>joan</td>
<td>030121301197</td>
<td>女</td>
<td>26</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>2</td>
<td>-</td>
<td>-</td>
<td>51</td>
</tr>
</tfoot>
</table>合并单元格：多个单元格合并为一个，可以横向合并也可以竖向合并。
- 跨行合并
保留最上单元格，添加rowspan属性，值为需要合并的行数
- 跨列合并
保留最左单元格，添加colspan属性，值为需要合并的列数。
表单标签
用于收集信息、登录界面、注册界面等场景。
input标签
<input type="">
| 属性 | 说明 |
|---|---|
| text | 文本框，单行文本 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
placeholder属性：占位文本，没有输入内容时显示。
用户：<input type="text" placeholder="用户名/手机号/邮箱"><br>name属性，为一个单选项设定名字，用于判断选项属于同一个，同组只能选中一个选项。
单选框：<input type="radio" name="gender">男<input type="radio" name="gender">女<br>value属性，用于设置选择该选项提交给服务器的值，可以是任意字符。
单选框：<input type="radio" name="gender" value="man">男<input type="radio" name="gender" value="woman">女<br>checked,设置默认选中，可以简写为一个单词。
单选框：<input type="radio" name="gender" value="man" checked>男<input type="radio" name="gender" value="woman">女<br>多文件上传：
multiple属性，type选择file时，添加multiple属性，可以实现多文件上传。
上传文件：<input type="file" multiple>下拉菜单
标签:select嵌套option,select是下拉菜单,option是每一个选项。
<select>
<option>北京</option>
<option>上海</option>
<option selected>深圳</option>
</select>selected属性，默认选中。
<option selected>深圳</option>文本域
多行文本输入表单。
标签：textarea,双标签。
<textarea>文本域</textarea>label标签
给某个标签的说明文本，也可以用于绑定文字和表单控件。
# 1.label标签的for属性值与input的id值相同进行绑定
性别：
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
# 2.使用label标签包裹input
性别：
<label><input type="radio">男</label>
<label><input type="radio">女</label>按钮
button标签：
<button type="">
按钮
</button>type属性：
| 属性 | 作用 |
|---|---|
| submit | 提交按钮，提交数据到后台服务器（默认） |
| reset | 重置按钮，将表单控件重置默认值，需要使用form表单标签包裹才能生效 |
| button | 普通按钮，默认没有功能，配合js使用 |
from标签：表单区域双标签。
<form action="">
用户：<input type="text" placeholder="请输入用户名/手机号/邮箱"><br>
密码：<input type="password" placeholder="请输入密码"><br>
<button type="submit">登录</button>
<button type="reset">重置</button>
</form>action属性，用于数据提交的地址。
div和span标签
用于布局网页，没有语义。
- div独占一行
- span不换行
<div>
这是一个div标签。
</div>
<span>
这是一个span标签。
</span>字符实体
在网页中显示预留字符如>,<,p等等
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | ||
| < | 小于号 | < |
| > | 大于号 | > |
| © | 版权符号 | © |
测试 空格! <br>
小于号< <br>
大于号>案例一：
<ul>
<li><img src="./lovejoanicon.jpg" alt="xinwentupian" width="100" height="100"><a href="https://baijiahao.baidu.com/s?id=1769558821541373581" target="_blank"><h3>夯实粮食安全根基</h3></a></li>
<li><img src="./lovejoanicon.jpg" alt="xinwentupian" width="100" height="100"><a href="https://baijiahao.baidu.com/s?id=1769619996817021375" target="_blank"><h3>瓦格纳撤军 停止在俄境内活动沸</h3></a> </li>
<li><img src="./lovejoanicon.jpg" alt="" height="100" width="100"><a href="https://baijiahao.baidu.com/s?id=1769633241308232914" target="_blank"><h3> 乌军方：趁乱从多方向对俄发起反攻热</h3></a></li>
<li><img src="./lovejoanicon.jpg" alt="" height="100" width="100"><a href="https://baijiahao.baidu.com/s?id=1769549784593328796" target="_blank"><h3>大地诗篇</h3></a></li>
<li><img src="./lovejoanicon.jpg" alt="" height="100" width="100"><a href="https://haokan.baidu.com/v?pd=wisenatural&vid=7703806344085346580" target="_blank"><h3>女生考前3天连续失眠 一查684分落泪</h3> </a></li>
</ul>案例二：
<div>
<form action="">
<h1>注册信息</h1>
<h2>个人信息</h2>
姓名：<input type="text" placeholder="请输入真实姓名"><br><br>
密码：<input type="password" placeholder="请输入密码"><br><br>
确认密码：<input type="password" placeholder="请输入确认密码"><br><br>
性别：<label><input type="radio" name="gender">男</label><label><input type="radio" name="gender">女</label><br><br>
居住城市：<select name="" id="">
<option value="" selected>深圳</option>
<option value="">广州</option>
<option value="">北京</option>
<option value="">上海</option>
</select>
<h2>教育经历</h2>
最高学历：<select name="" id="">
<option value="">专科</option>
<option value="" selected>本科</option>
<option value="">研究生</option>
</select><br><br>
学校名称：<input type="text"><br><br>
所学专业：<input type="text"><br><br>
在校时间：<select name="" id="">
<option value="">2015</option>
<option value="">2016</option>
<option value="">2017</option>
<option value="">2018</option>
<option value="">2019</option>
</select> ---
<select name="" id="">
<option value="">2015</option>
<option value="">2016</option>
<option value="">2017</option>
<option value="">2018</option>
<option value="">2019</option>
</select>
<h2>工作经历</h2>
公司名称：<input type="text"><br>
工作描述：<br>
<textarea name="workdescript"></textarea><br>
<input type="checkbox">我已阅读并同意以下协议：
<ul>
<li><a href="#"><ins>《用户服务协议》</ins></a></li>
<li><a href="#"><ins>《隐私协议》</ins></a></li>
</ul>
<button type="submit">免费注册</button>
<button type="reset">重新填写</button>
</form>
</div>
1 游客 2025-03-27 22:56 回复
555
1 游客 2025-03-27 22:55 回复
555
buy priligy australia 游客 2024-10-13 14:56 回复
What's up, I check your new stuff on a regular basis.
Your writing style is awesome, keep it up!