1 列表
1.1 无序列表
| |
| |
| |
| |
| <ul> |
| <li>HTMl 超文本标记语言</li> |
| <li>CSS 层叠样式表</li> |
| <li>JavaScript 浏览器脚本语言</li> |
| </ul> |
| 一组类似的内容排列在一起,适合使用无序列表,比如新闻列表,文章列表,导航条等。 |
1.2 有序列表
| |
| |
| |
| |
| <h2>小说</h2> |
| <ol> |
| <li>章节1</li> |
| <li>章节2</li> |
| <li>章节3</li> |
| <li>章节4</li> |
| </ol> |
| 一组相似的内容排列在一起且排列项有序,适合使用的场景:各种排行榜 |
1.3 定义列表(了解)
| |
| |
| |
| |
| |
| |
| |
| <dl> |
| <dt>HTML</dt> |
| <dd>超文本标记语言</dd> |
| <dt>CSS</dt> |
| <dd>层叠样式表</dd> |
| <dt>JavaScript</dt> |
| <dd>浏览器脚本语言</dd> |
| </dl> |
| |
| |
| <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默认、top、bottom |
② 设置单元格宽高
给 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 表单控件
① 文本输入框
| |
| <input type="text"> <br> |
| |
| <input> <br> |
| |
| <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属性不需要值 |
⑤ 提交按钮
| |
| <input type="submit"> |
| <input type="submit" value="登录"> |
| |
| <button>提交</button> |
| <button type="submit">提交</button> |
| 1、input标签实现的提交按钮,按钮上的文字,默认是“提交”,可以使用 value属性进行设置 |
| 2、button按钮的type属性默认是submit,默认就是提交按钮 |
⑥ 重置按钮
| <input type="reset" value="重置"> |
| <button type="reset">重置</button> |
| input标签实现的重置按钮,按钮上的文字,默认是“重置”,可以使用value属性设置按钮上的文字。 |
⑦ 普通按钮
| <input type="button" value="普通按钮"> |
| <button type="button">普通按钮</button> |
| input和button的普通按钮,type的属性值都是button |
⑧ 文本域
| |
| |
| |
| |
| <textarea cols="30" rows="10"></textarea> |
| rows 设置默认显示多少行,影响文本域的高度 |
| cols 设置默认显示多少列,影响文本域的宽度 |
⑨ 下拉选项
| |
| <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="un">用户名:</label> |
| <input type="text" id="un"> <br> |
| |
| <label for="pwd">密码:</label> |
| <input type="password" id="pwd"> <br> |
| |
| |
| <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 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤