<html>
<head>
<title>Document</title>
</head>
<body>
<h1>水果列表</h1>
<ul>
<!-- ul 无序列表 -->
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
<!-- li每一项 -->
</ul>
<hr>
<h1>成绩排行榜</h1>
<ol>
<!-- ol有序标签 -->
<li>小姐姐</li>
<li>小帅哥</li>
<li>小可爱</li>
<!-- li 标签项目 可用在有序列表 (<ol>) 和无序列表 (<ul>) 中-->
</ol>
<hr>
<dl>
<!-- dl自定义列表 整体 -->
<!-- dt自定义列表 标题 -->
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
<!-- dd自定义列表每一项 -->
</dl>
<hr>
<table border="1" width="300" height="300" >
<!-- border表格边框宽度 -->
<!-- table 表格标签 -->
<caption><h3>学生成绩单</h3></caption>
<!-- caption 表格大标题 -->
<thead>
<!-- <thead> 表格标头 -->
<!-- tr 表格每一行 -->
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
<!-- th 表头标题 -->
</tr>
</thead>
<tbody>
<!-- tbody 表格主体 包含主体所有tr 否则 rowspan不起作用 -->
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<!-- 保留 -->
<!-- rowspan 竖向合并单元格 -->
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<!-- 删除 -->
<td>小姐姐真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
<!-- 删除 -->
<!-- colspan 横向合并单元格 -->
</tr>
</tfoot>
<!-- tfoot 表格底部 -->
<!-- rowspan和colspan不可跨结构表单 例如<tfoot> tbody 必须在其内部 -->
</table>
<hr>
<!-- input 根据属性值不同 表现不同效果 -->
<!-- test 文本框 -->
<!-- password 密码框 -->
<!-- radio单选框 -->
<!-- checkbox 多选框 -->
<!-- file 文件选择 用于上传文件 -->
<!-- placeholder 文本框占位符 框内提示语 -->
<!-- checked 默认选中-->
<!-- multiple 文件多选 -->
<!-- submit 提交按钮 -->
<!-- reset 重置按钮 -->
<!-- button 普通按钮 需要配合JS实现功能 -->
<form>
昵称：<input type="text" placeholder="请输入用户名" value="" name="nickname"><br><br>
密码：<input type="password" placeholder="请输入密码"><br><br>
性别：<label><input type="radio" name="sex" checked>男</label>
<!-- name为单选框分组 同name分组 只可以选中一项 -->
<input type="radio" name="sex">女<br><br>
爱好：<label>
<input type="checkbox" checked>敲代码
</label>
<!-- label 包裹文本 点文字也可选中 -->
<input type="checkbox" checked>熬夜
<input type="checkbox">掉头发<br><br>
<input type="file" multiple><br><br>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮"><br><br>
<hr>
<button type="submit">button提交</button>
<button type="reset">button重置</button>
<button type="button">button普通</button>
<!-- button标签 相对于input更便捷 例如button内修改 添加文字 图片等 -->
</form>
<!-- submit reset botton 需要form配合来实现功能 -->
<hr>
<!-- select 下拉菜单整体 -->
<!-- option 下拉内容每一项 -->
<!-- selected 默认下拉选项 -->
所在城市：<select>
<option>上海</option>
<option>北京</option>
<option>深圳</option>
<option selected>广东</option>
</select>
<hr>
<!--<textarea 文本框标签 cols文本框宽度 rows 可显示的行数 -->
<h3>留言框</h3>
<textarea cols="20" rows="5"></textarea>
<hr>
<!-- div独占一行 自动换行 span 横向一行显示多个 -->
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<hr>
<header>头部标签</header>
<nav>导航标签</nav>
<footer>底部标签</footer>
<aside>侧边栏</aside>
<section>网页区块标签</section>
<article>文章标签</article>
<hr>
女孩：宝贝，靠近点 男孩：我离不开你<br><br>
P标签长这样<p></p>
<!-- ； 空格符号 直接空格只生效一格 -->
<!--<； 小于号 -->
<!-->； 大于号 -->
<hr>
<table border="1" width=400 height=400>
<caption><h3>优秀学生信息表</h1></caption>
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>10</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</tfoot>
</table>
</body>
</html>黑马--前端学习日记
最新推荐文章于 2024-07-14 16:50:03 发布
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
