HTML-标签2
2022-08-05 本文已影响0人
aofeilin
截屏2022-08-05 14.56.45.png
1.列表标签
截屏2022-08-05 14.46.49.png
<body>
<!-- ul ol子标签也是只能放li标签，不能包含其他的标签，但是可以把其他标签放在li标签里面。-->
<h2>水果 无序 </h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<h2>排行榜 有序</h2>
<ol>
<li>章三</li>
<li>里斯</li>
<li>王武</li>
</ol>
<!-- 自定义列表 dl的子标签只允许放dt 和 dd,如果想要放其他标签只能放在dt dd里面。-->
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行</dd>
<dd>常见问题</dd>
</dl>
</body>
2.表格标签
截屏2022-08-05 14.48.26.png
<body>
<table border="1" width="400">
<!-- 大标题 -->
<caption> <strong>学生成绩表</strong> </caption>
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>章三</td>
<td rowspan="2">100分</td>
<td rowspan="2">优秀</td>
</tr>
<tr>
<td>里斯</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">100分</td>
</tr>
</tfoot>
</table>
</body>
3.表单标签
截屏2022-08-05 14.50.00.png
<body>
<form action="">
用户名: <input type="text" placeholder="请输入用户名">
<br>
<br>
密 码: <input type="password" placeholder="请输入密码">
<br>
<br>
性别: 男<input type="radio" name="sex" checked> 女<input type="radio" name="sex">
<br>
<br>
爱好: 羽毛球<input type="checkbox" checked> 足球<input type="checkbox"> 蓝球<input type="checkbox">
<br>
<br>
<!-- 文件多选 multiple -->
<input type="file" multiple>
<br>
<br>
<!-- 提交按钮 -->
<input type="submit" value="免费注册">
<!-- 重置 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<input type="button" value="获取vip" >
<button type="reset">重置2</button>
</form>
<!-- 必须结合form来使用 -->
<button type="reset">重置2</button>
<input type="reset" value="重置">
</body>
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<input type="radio" name="sex" id="man"> <label for="man"> 男</label>
<label> <input type="radio" name="sex">女</label>
<!-- 选中文字也可以选中按钮的两种方法，
1,先设置input的id,labelfor设置对应的id.
2,label是input的父,他们之间的关系是父子关系.
-->
<br>
<br>
<label> <input type="checkbox">足球 </label>
<input type="checkbox" id="badminton">
<label for="badminton">羽毛球 </label>
<!-- 选中文字也可以选中按钮的两种方法，
1,先设置input的id,labelfor设置对应的id.
2,label是input的父,他们之间的关系是父子关系.
-->
<select>
<option>北京市</option>
<option>上海市</option>
<option>广州市</option>
<option selected>台湾市</option>
</select>
<!-- 类似 radio checkbox 的selected -->
<textarea cols="120" rows="4"></textarea>
<!-- 默认是可以拖动的，使用css去设置不可以编辑。 -->
4.语义化标签 div span
5.字符实体： 
6.demo1
截屏2022-08-05 14.54.06.png
<body>
<table border="1" width="400" height="400">
<caption><strong>优秀学生信息表格</strong> </caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年级二班</td>
</tr>
<tr>
<td>李四</td>
<td>110</td>
<td>三年级三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们都很好</td>
</tr>
</table>
</body>
7.demo2
截屏2022-08-05 14.55.06.png
<body>
<h1>青春不常在，抓紧努力学</h1>
<hr>
用户名: <input type="text" placeholder="请输入用户名">
<br> <br>
性别: <label> <input type="radio" name="sex" checked>男 </label> <label> <input type="radio" name="sex">女 </label>
<br> <br>
所在城市 :
<select>
<option>上海</option>
<option>北京</option>
<option selected>台湾</option>
</select>
<br> <br>
爱好:
<label> <input type="checkbox" checked>羽毛球 </label> <label> <input type="checkbox" checked>LOL </label>
<br>
<br>
个人介绍
<br>
<br>
<textarea rows="10" cols="100" placeholder="请输入个人介绍"></textarea>
<h3>我的考试：</h3>
<ul>
<li>语文考试100</li>
<li>数学考试100</li>
<li>数学考试100</li>
</ul>
<input type="checkbox">我同意所有的条款
<br> <br>
<input type="submit" value="注册">
<input type="reset" value="重置">
</body>
