列表标签
目标:无序有序和自定义列表标签实现网页中列表结构的搭建
列表的应用场景
按行展示关联性内容,如新闻(无序)、排行榜(有序)、账单(自定)等
无序列表
组成
ul(表示整体用于包裹) 嵌套 li(表示每一项用于包含每行内容)
显示特点
每项前默认圆点标识
注意,ul (ol)只允许包含 li,li 可以包含任何内容
有序列表
组成
ol+li
特点
默认显示序号表示
自定义列表
场景
网页底部导航
组成
dl(整体,包裹dt或dd)+dt(主题)+dd(每项内容)
显示特点
默认缩进
dl 只允许包含 dt/dd,后二者可以包含任意
表格标签
基本标签
场景:行+列(如成绩表)
标签名 | 说明 |
---|---|
table(>tr>td) | 整体,包裹多个tr |
tr | 每行,包裹td |
td | 单元格,包裹内容 |
相关属性
设置展示效果(给格子)
border(/width/height)+数字以规定 边框宽度(/表格宽度/表格高度)
<table border="1" width="750" height="500">
<caption><strong>成绩单</strong></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>林檎</td>
<td rowspan="2">一伯昏</td>
<td>谢谢喵</td>
</tr>
<tr>
<td>东雪莲</td>
<!-- 被删除行<td>零分</td> -->
<td>最适合梅菲斯特的一集</td>
</tr>
</table>
</body>
标题和表头
即 整体大标题(caption,写在table内部)和每列上方的小标题(th,写在tr内部)
结构标签*
thead头部、tbody主体、tfoot底部
合并单元格
跨列或跨行合并 步骤:
-
明确合并哪几个单元格
-
左上原则确定保留和删除
上下合并只保留最上,左右合并只保留最左,删除其他
-
给保留的单元格设置属性名(
rowspan
或colspan
)、属性值(合并的个数)不能跨结构合并(thead、tbody、tfoot)
表单标签
登陆、注册、搜索等功能时使用;
input
收集用户信息,通过type属性值不同行使不同效果
text 文本框 输入单行文本、password密码框、radio单选框 多选一、checkbox多选框 多选多、file上传文件、submit提交按钮、reset重置按钮、button普通按钮 默认无功能 配合JavaScript...
<!-- 写什么显示什么,文本框不换行 -->
文本框:<input type="text">
<!-- 不显示内容,也不换行 -->
密码框:<input type="password">
<hr>
<input type="radio">
<input type="checkbox" name="" id="">
<!-- ...... -->
占位符,提示用户要输入的文本
<input type="text" placeholder="请输入用户名,邮箱/手机">
单选控件,分组
性别:<input type="radio" name="gender">MALE <input type="radio" name="gender">FEMALE
默认选中控件,提升体验
性别:<input type="radio" name="gender">MALE <input type="radio" name="gender" checked>FEMALE
multiple多文件选择控件
<input type="file" multiple>
button
<!-- 自带“提交”字样和提交功能,不必配合js -->
<input type="submit" value="注册">
但前提是有表单域 <form action="提交地址">
才能实现提交或重置功能;
button是双标签,随type不同取值而行使不同功能,另外通过value命名
select
<section>
<option value="">Beijing</option>
<option value="" selected>Tokyo</option>
<option value="">New York</option>
</section>
textarea
<textarea name="" id="" cols="75" rows="45"></textarea>
实际工作通过CSS控制宽高以及禁用拖拽
label
方法① 用label把内容文本包裹、表单上添加id、在label的for属性中设置对应id
方法② 直接用label把内容和表单一起包裹、把label的for属性删除
性别:
<input type="radio" name="gender" id="MALE"><label for="MALE">帅OTTO</label>
<!-- 以上为① -->
<label><input type="radio" name="gender">柯洁</label>
<!-- 以上为② -->
语义化标签
无语义 布局 标签:div(独占行)、span(一行多个);
有语义的* :HTML5
标签名 | 语义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
手机端网页常用
字符实体
html里的空格合并现象
网页不认识多个空格,若实现特殊符号效果则需要实体
结构:“ &英文;”
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 |   | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 引号 | " |
' | 撇号 | &apos |
¢ | 分cent | ¢ |
£ | 镑pound | £ |
¥ | 元 | ¥ |
€ | 欧元euro | &euro |
§ | 小节 | § |
© | 版权copyright | © |
常见字符实体
案例
<title>七月十号</title>
</head>
<body>
<table border="2" width="500" height="300">
<caption>
<h2>优秀学生(悲)</h2>
</caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">逸一时误一世</td>
<td>山里灵活的狗</td>
<td>114514</td>
<td>帝丹高中</td>
</tr>
<tr>
<!-- <td>壹玖壹玖捌壹零</td> -->
<td>我超,出音味来</td>
<td>1919810</td>
<td>榊野学园</td>
</tr>
<tr>
<td>先辈评语</td>
<td colspan="3">灌注永雏塔菲谢谢喵!</td>
</tr>
</table>
<h1>你所热爱的,就是你的生活</h1>
<hr>
<!-- 先给表单域 -->
<form action="">
输入昵称:<input type="text" placeholder="不可使用违规名称,如帅otto">
<!-- 上行默认不换行 -->
<br><br>
成分和浓度:
<label>
<input type="radio" name="gender" checked>鼠鼠我呀...
</label>
<label>
<input type="radio" name="gender">原神怎么你了?
</label>
<br><br>
了解你的捍卫者:
<select>
<option>古代艺术家特有的沉着冷静,好摇不挑曲儿</option>
<option selected>如来嘛(我醉提酒游寒山,爽滑慢舔)</option>
<option>Never Gonna Give You Up</option>
</select>
<br><br>
你的XP:
<label><input type="checkbox">牡蛎牡蛎牡蛎牡蛎牡蛎牡蛎</label>
<label><input type="checkbox" checked>One Last Kiss</label>
<label><input type="checkbox">这么可爱一定是男孩子(立了)</label>
<label><input type="checkbox" checked>请停止你的松冈行为</label>
<br><br>
请结合实际谈谈你对“鲜衣怒马少年郎,谁人不识理塘王”的理解(5分): <br>
<textarea name="" id="" cols="60" rows="10"
placeholder="阿妈说,格聂山上风声很大,没有烟灰...">
</textarea>
<h2>你可以再表演一次那个吗?就是那个:</h2>
<ul>
<li>骂谁罕见?</li>
<li>啊↗?</li>
<li>↑↑↑骂谁罕见!!!</li>
</ul>
<input type="checkbox">我说婷婷同意所有条款
<input type="submit" value="你说得对,但...">
<button type="reset">启!动!!</button>
</form>
</body>
</html>