HTML进阶
一、列表
1、无序列表
<ul>
<li>无序列表标签：</li>
<li>ul 嵌套 li</li>
<li>列表条目</li>
<li>ul 标签里面只能包含 li标签</li>
<li>li标签里面可以包含任何内容</li>
</ul>
注意事项：
- ul 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
2、有序列表
<ol>
<li>ol嵌套li</li>
<li>实验li里面可以包含列表不</li>
<li><ol><li>实验1</li></ol></li>
<li>实验1成功，理论上ul ol可以互相嵌套</li>
</ol>
注意事项：
- ol 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
3、定义列表
<dl>
<dt>定义列表标题</dt>
<dd>列表具体内容</dd>
<dt>京东</dt>
<!--dd里面不可以加上dt 并列关系 默认就近原则-->
<dd><dt>服务中心</dt></dd>
<dd><dd>售后政策</dd></dd>
</dl>
二、表格
1、基本使用
table嵌套tr，tr嵌套th、td
<table border="1"><!--border表示边框，需要自己加-->
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>120</td>
<td>220</td>
</tr>
<tr>
<td>李华</td>
<td>100</td>
<td>90</td>
<td>190</td>
</tr>
<tr>
<td>table表格,格子大小可以随内容自动变化</td>
<td>tr表示行</td>
<td>th表示表头</td>
<td>td表示内容</td>
</tr>
</table>
2、结构标签
表头thead，表身tbody，表脚tfoot
<table border="1" style="text-align:center">
<!--border表示边框，需要自己加-->
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<!--结构标签看不到具体效果,只是针对浏览器而言,让结构更清晰-->
<tbody>
<tr>
<td>张三</td>
<td>100</td>
<td>120</td>
<td>220</td>
</tr>
<tr>
<td>李华</td>
<td>100</td>
<td>90</td>
<td>190</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
3、合并单元格
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100</td>
<td>120</td>
<td>220</td>
</tr>
<tr>
<td>李华</td>
<td>90</td>
<td>190</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
<h3>跨列合并</h3>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100</td>
<td>120</td>
<td>220</td>
</tr>
<tr>
<td>李华</td>
<td>100</td>
<td>90</td>
<td>190</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
</tr>
</tfoot>
</table>
<h3>最终效果</h3>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100</td>
<td>120</td>
<td>220</td>
</tr>
<tr>
<td>李华</td>
<td>90</td>
<td>190</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
</tr>
</tfoot>
</table>
横着合并 colspan
竖着合并 rowspan
取值是数字表示要合并单元格的数量
合并到第一个元素那里 其他元素删除或者注释掉
合并不能跨结构标签合并
合并只有数据相同才可以合并
三、表单
1. input标签
<input type="..." placeholder="...">
type属性值不同，input标签功能也不同；
placeholder表示文本占位信息；
2、input标签type属性值
- radio单选框
<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女
<!--name名字一样 划分到同一组别 这时就可以实现单选-->
<!--对于某些网页，某些选项是大多数人的选择 进网页可以默认某个选项 优化用户的体验-->
- file上传文件
上传文件(单选)：
<input type="file" >
<br><br>
上传文件(多选)<input type="file" multiple>
- checkbox多选框
<input type="checkbox">敲代码
<input type="checkbox" checked>敲前段代码
<input type="checkbox" checked>敲前段Html代码<!--加上checked就是默认选中-->
3、其他表单标签
- select-option下拉菜单
<select name="" id="">
<!--默认出现的name和id属性适用于发射数据的,但是目前没有后台,省略-->
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
<!--下拉菜单默认选中用selected-->
<option>杭州</option>
</select>
- textarea文本域标签
<!--一般会把右下角拖拽功能禁用-->
<!--cols和rows控制文本域尺寸 一般用CSS-->
<textarea>请输入文字测试是否换行</textarea>
- label标签
<strong>写法一</strong>
<br>
性别：
<!--for属性值和表单控件id要相同--> <!--label标签只包裹内容-->
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender">女
<br><br>
<strong>写法二</strong>
<br>
性别：
<!--label可以直接包裹文字和表单空间-->
<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender">女</label>
- button按钮
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
四、布局标签
1、div和span标签
<div>这是div标签</div>
<div>看看div换不换行</div> <!--div内容即使不够整行 实际占比也是一整行-->
<span>这是span标签</span>
<span>看看span换不换行</span>
2、网页结构标签
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
五、字符实体
空格
<!--代码中敲键盘空格 网页只保留一个-->
小于号<
大于号>
六、案例
1、新闻列表
<!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>案例1--新闻列表</title>
</head>
<body>
<ul>
<li>
<img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2Fb64543a98226cffc3c93a1c612e2429cf703ea7c.jpeg%40f_auto%3Ftoken%3Dfb8c8b2259d7c5087e9c821536ccb561&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1682701200&t=f5e2c2397d6808c8e48067ea1b10889e" alt="">
</li>
<h3>从唯一女神，到节目败笔，35岁杨颖不再被世界宽容</h3>
<li>
<img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics7.baidu.com%2Ffeed%2F91ef76c6a7efce1b75c56ad45647e6d2b58f65e1.jpeg%40f_auto%3Ftoken%3Dd0f296f8140484a243b5f2933500eb8c&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1682701200&t=e6f3cd9845529665b1c0347a6b4fd9e1" alt="">
</li>
<h3>注定比蔡徐坤走得更远，拿下奔跑吧又搭档马丽常远，是有点实力的</h3>
<li><img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2Fbd315c6034a85edf61451f378594182fdc547522.jpeg%40f_auto%3Ftoken%3D90fa1cf7cb9ddea5aaa9628485ebbb58&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1682701200&t=9e2619192283d58cc4b039dd0409781a" alt=""></li>
<h3>新《跑男》首播口碑出炉，观众打分和评论都已一针见血</h3>
</ul>
<dl>
<dt><strong>关注我们</strong></dt>
<dd>微信公众号</dd>
<dd>新浪微博</dd>
<dd>关于百度</dd>
<dd>联系客服</dd>
</dl>
</body>
</html>
效果图：
2、注册信息
<!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>案例2--注册信息</title>
</head>
<body>
<h1>注册信息</h1>
<form action="">
<h2>个人信息</h2>
姓名：
<input type="text" placeholder="请输入真实姓名" /><br /><br />
密码：
<input type="password" placeholder="请输入密码" /><br /><br />
确认密码：
<input type="password" placeholder="请输入确认密码" /><br /><br />
性别：
<label for="man"
><input type="radio" name="gender" id="man" checked />男</label
>
<label for="woman"
><input type="radio" name="gender" id="woman" />女</label
>
<br /><br />
居住城市：
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="" selected>深圳</option>
<option value="">苏州</option>
<option value="">揭阳</option>
<option value="">潮州</option>
</select>
<h2>教育经历</h2>
最高学历：
<select name="" id="">
<option value="">小学</option>
<option value="">初中</option>
<option value="">高中</option>
<option value="">大学专科</option>
<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="">2023</option>
<option value="">2022</option>
<option value="">2021</option>
<option value="">2020</option>
<option value="">2019</option>
<option value="">2018</option>
<option value="">2017</option>
<option value="">2016</option>
<option value="">2015</option>
<option value="">2014</option>
<option value="" selected>2013</option>
</select>
--
<select name="" id="">
<option value="">2023</option>
<option value="">2022</option>
<option value="">2021</option>
<option value="">2020</option>
<option value="">2019</option>
<option value="">2018</option>
<option value="">2017</option>
<option value="">2016</option>
<option value="">2015</option>
<option value="">2014</option>
<option value="">2013</option>
</select>
<h3>工作经历</h3>
公司名称：
<input type="text" /><br /><br />
工作描述：<br />
<textarea name="" id="" cols="20" rows="2"></textarea><br /><br />
<input type="checkbox" checked />已阅读并同意以下协议：<br /><br />
<ul>
<li><a href="#">《用户服务协议》</a></li>
<br />
<li><a href="#">《隐私政策》</a></li>
</ul>
<br /><br />
<button type="submit">免费注册</button>
<button type="reset">重新填写</button>
</form>
</body>
</html>
效果图：
扫一扫
2331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
