随笔 - 25, 文章 - 0, 评论 - 0, 阅读 - 3533

(三).html的列表,表格,表单相关知识

Posted on   云语不知  阅读(40)  评论(0编辑  收藏  举报

1 列表

1.1 无序列表

<!--
unorder list 无序列表
list item 列表项
-->
<ul>
<li>HTMl 超文本标记语言</li>
<li>CSS 层叠样式表</li>
<li>JavaScript 浏览器脚本语言</li>
</ul>
一组类似的内容排列在一起,适合使用无序列表,比如新闻列表,文章列表,导航条等。

1.2 有序列表

<!--
order list 有序列表
list item 列表项
-->
<h2>小说</h2>
<ol>
<li>章节1</li>
<li>章节2</li>
<li>章节3</li>
<li>章节4</li>
</ol>
一组相似的内容排列在一起且排列项有序,适合使用的场景:各种排行榜

1.3 定义列表(了解)

<!--
dl define list 定义列表
dt define title 定义列表项的标题
dd define description 定义列表项描述
-->
<!-- 一个dt 对应一个dd -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>浏览器脚本语言</dd>
</dl>
<!-- 一个dt对应多个dd -->
<dl>
<dt>如何掌握HTML标签</dt>
<dd>掌握语义</dd>
<dd>掌握属性及属性值</dd>
<dd>掌握标签是双标签还是单标签</dd>
</dl>

1.4 列表标签总结

标签名 功能和语义 属性 单标签还是双标签
ul 无序列表包裹标签 双标签
ol 有序列表包裹标签 双标签
li 列表项(必须被ul或ol标签直接包裹 双标签
dl 自定义列表包裹标签 双标签
dt 列表项标题 双标签
dd 列表项描述 双标签
<h1>列表项的嵌套</h1>
<hr>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">热卖商品</a>
<ul>
<li><a href="#">新人特卖</a></li>
<li><a href="#">9.9包邮</a></li>
<li><a href="#">人气好物</a></li>
</ul>
</li>
<li><a href="#">论坛</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">加入我们</a></li>
</ul>
1. li标签里面可以包裹任何东西
2. li标签必须被ul标签或者 ol标签直接包裹

2 表格标签

2.1 表格的结构

<table>
<!-- 表格标题 -->
<caption></caption>
<!-- 表格头部 -->
<thead>
<!-- 行 -->
<tr>
<!-- 表头单元格 -->
<th>表头单元格</th>
<th></th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<!-- 行 -->
<tr>
<!-- 普通单元格 -->
<td>普通单元格</td>
<td></td>
</tr>
</tbody>
<!-- 表格脚 -->
<tfoot>
<!-- 行 -->
<tr>
<td>普通单元格</td>
<td></td>
</tr>
</tfoot>
</table>
1. 表格标签必须按照规定顺序进行包裹 table > caption thead tbody tfoot > tr > th、td
2. 如果table标签直接包裹tr,浏览器会自动添加 tbody,建议自己添加 thead,tbody,tfoot
3. td 和 th 作为单元格,内部可以包裹任意内容

2.2 表格整体样式设置

table标签设置如下属性:

width 设置表格宽度
height 设置表格高度
border 设置单元格边框宽度
cellspacing 单元格间距
cellpadding 单元格内容和边框距离

2.3 单元格样式设置

① 设置单元格内容对齐方式

给td或者th设置如下属性:

align 设置单元格的内容水平对其方式,值:left默认、center、right
valign 设置单元格的内容垂直对齐方式,值:middle默认、topbottom

② 设置单元格宽高

给 td或者th设置如下属性:

width 设置单元格所在的列宽
heigth 设置单元格所在的行高

2.4 单元格跨行和跨列(重要)

给 td或者 th设置如下属性:

rowspan 设置该单元格所跨的行数
colspan 设置该单元格所跨的列数

2.5 表格标签总结

标签名 功能和语义 属性 单标签还是双标签
table 表格包裹标签 width:宽
height:高
border:边框粗细
cellspacing:单元格间隔
cellpadding:单元格内容和边框的距离
双标签
caption 表格标题 双标签
thead 表格头 双标签
tbody 表格主体 双标签
tfoot 表格脚 双标签
tr 双标签
td 单元格 width:宽
height:高
align:水平对齐方式
valign:垂直对齐方式
colspan:列合并
rowspan:行合并
双标签
th 表头单元格 双标签

vertical

3 表单

3.1 表单总体设置

<form action="https://www.baidu.com/s" method="get" target="_blank">
<input type="text" name="wd">
<input type="submit">
</form>

3.2 表单控件

① 文本输入框

<!-- 设置type属性值为text表示文本输入框 -->
<input type="text"> <br>
<!-- input标签type默认值是text -->
<input> <br>
<!-- maxlength 设置最大可输入长度 -->
<input type="text" maxlength="6"> <br>

② 密码输入框

<input type="password"> <br>
<input type="password" maxlength="4"> <br>

③ 单选框

<input type="radio" name="gender" value="male" checked>
<input type="radio" name="gender" value="female">
1、同一选项单选框要保证name的属性值相同
2、设置checked属性可以默认被选中,checked属性不需要值

④ 复选框

<input type="checkbox" name="hobby" value="eat" checked> 吃饭 <br>
<input type="checkbox" name="hobby" value="sleep"> 睡觉 <br>
<input type="checkbox" name="hobby" value="code" checked> 敲代码 <br>
<input type="checkbox" name="hobby" value="study"> 学习 <br>
1、设置checked属性可以默认被选中,checked属性不需要值

⑤ 提交按钮

<!-- 提交按钮必须写在form表单内 -->
<input type="submit">
<input type="submit" value="登录">
<!-- button默认type类型为submit -->
<button>提交</button>
<button type="submit">提交</button>
1input标签实现的提交按钮,按钮上的文字,默认是“提交”,可以使用 value属性进行设置
2button按钮的type属性默认是submit,默认就是提交按钮

⑥ 重置按钮

<input type="reset" value="重置">
<button type="reset">重置</button>
input标签实现的重置按钮,按钮上的文字,默认是“重置”,可以使用value属性设置按钮上的文字。

⑦ 普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
inputbutton的普通按钮,type的属性值都是button

⑧ 文本域

<!--
rows:默认行数
cols:默认列数
-->
<textarea cols="30" rows="10"></textarea>
rows 设置默认显示多少行,影响文本域的高度
cols 设置默认显示多少列,影响文本域的宽度

⑨ 下拉选项

<!-- selected 属性表示默认选中 -->
<select>
<option>上海</option>
<option selected>北京</option>
<option>深圳</option>
<option>新疆维吾尔自治区</option>
<option>宁夏回族自治区</option>
<option>伊犁哈萨克自治州</option>
</select>
option设置selected属性,可以让该选项默认选中,selected属性不需要属性值

3.3 表单控件的属性

① name 属性

1. 给表单控件设置 name 属性,作为数据的标识,后端会根据 name 值获取数据
2. 单选框需要设置相同的 name 值才有单选的效果
3. 提交按钮、重置按钮、普通按钮不建议设置 name 属性

② value 属性

1. 文本输入框、密码输入框,value 属性设置输入框的默认显示文字
2. 单选框、复选框, value 属性设置提交到后端的数据内容
3. input 标签实现的提交按钮、重置按钮、普通按钮,value 属性设置按钮上的文字
4. option 标签,value属性设置提交到后端的数据内容
option 如果没有设置 value 属性,双标签中的文字会作为提交到后端的数据
5. button、textarea、select 标签没有 value 属性

③ disabled 属性

1. 任何表单控件,设置 disabled 属性之后,该表单控件不可用,disabled 属性不需要属性值
2. select 标签设置 disabled,整个下拉框不可用
option 标签设置 disabled,该下拉选项不可用

3.4 label 标签的使用

<!-- 通过 label 的 for 属性与表单控件的id属性关联 -->
<label for="un">用户名:</label>
<input type="text" id="un"> <br>
<label for="pwd">密码:</label>
<input type="password" id="pwd"> <br>
<!-- lable 标签将表单控件与描述文字包裹起来 -->
<label><input type="radio" name="gender" value="male" checked></label>
<label><input type="radio" name="gender" value="female"></label>
1. 文本输入框,密码输入框、文本域、下拉框选项使用 for的属性值与表单控件的id属性关联
2. 单选框、复选框使用 label 标签包裹进行关联
3. 提交按钮、重置按钮、普通按钮不需要使用 label 标签

3.5 表单标签总结

标签名 语义和功能 属性 单标签和双标签
form 表单包裹标签 action:设置提交地址
target:设置在哪个窗口打开
双标签
input 各种类型的表单控件 type:表单控件的类型
name:数据标识(后端使用)
value:表单控件的值
maxlength:设置最大可输入的长度
checked:表单控件默认选中
diabled:设置表单控件不可用
单标签
button 按钮 type:按钮的类型,默认是submit类型,还有button和reset类型 双标签
textarea 文本域 rows:默认显示的行数
cols:默认显示好的列数
name:数据标识
disabled:设置文本域不可用
双标签
select 下拉选项的包裹标签 name:数据标识
disabled:设置不可用
双标签
option 下拉选项 value:表单控件的值,用于传递给后端
disabled:设置不可用
双标签
label 关联表单控件 for:与关联表单控件的id一致 双标签
1. input 标签的 type 属性值:text、password、radio、checkbox、submit、reset、button,默认是 text
2. button 标签的 type属性值:submit、reset、button,默认是 submit
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示