<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Code Title</title>
</head>
<!-- 注释 -->
<body>
<strong>
code body
<!-- 换行 -->
<br> AAAA
</strong>
<!-- 分隔线 -->
<hr>
<h3>三级标题</h3>
<h4>文本</h4>
<p>段落</p>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<br>
<h4>图片</h4>
<!-- src:路径 alt:图片名称 title:提示文字，鼠标悬停显示 width:宽度，只设置一个保持比例，自动缩放 -->
<img src="./cat.jpg" alt="图片test" title="title提示文字，鼠标悬停显示" width="300" height="200">
<br>
<h4>音频</h4>
<!-- controls:显示浏览器控件 autoplay:自动播放 loop:循环播放 -->
<audio src="./music.mp3" controls autoplay loop></audio>
<br>
<h4>视频</h4>
<!-- 视频 controls:显示浏览器控件 autoplay:自动播放(加muted，自动播放) loop:循环播放 -->
<video src="./video.mp4" width="30%" controls autoplay loop muted></video>
<br>
<h4>超链接</h4>
<!-- 超链接 href:目标地址 target:默认_self覆盖，_blank重开 -->
<a href="http://google.com" target="_blank">跳转到Google</a>
<br>
<!-- 无序列表 -->
<h4>水果</h4>
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
<!-- 有序列表 -->
<h4>蔬菜</h4>
<ol>
<li>土豆</li>
<li>西红柿</li>
<li>茄子</li>
</ol>
<!-- 自定义列表 dt:表示主题 dd:表示每一项内容-->
<dl>
<dt>帮助中心</dt>
<dd>账户中心</dd>
<dd>购物指南</dd>
</dl>
<br>
<!-- 表格 table:表格定义 caption:标题 tr:表示一行 td:表示单元格 th:表头 border:显示边框 width:表格宽 height:表格长 -->
<table border="1">
<caption>
<strong>成绩单</strong>
</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>郭德纲</td>
<td>70</td>
<td>相声演员</td>
</tr>
<tr>
<td>郭富城</td>
<td>80</td>
<td>电影演员</td>
</tr>
</table>
<br>
<!-- 表格结构 thead tbody tfoot-->
<table border="1">
<caption>
<strong>成绩单</strong>
</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>郭德纲</td>
<td>100</td>
<td>相声演员</td>
</tr>
<tr>
<td>郭富城</td>
<td>100</td>
<td>电影演员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>娱乐圈</td>
<td>南北郭</td>
</tr>
</tfoot>
</table>
<br>
<!-- 合并单元格 rowspan:垂直合并 colspan:水平合并 不能跨结构合并-->
<table border="1">
<caption>
<strong>成绩单</strong>
</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>郭德纲</td>
<td rowspan="2">100</td>
<td>相声演员</td>
</tr>
<tr>
<td>郭富城</td>
<td>电影演员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">娱乐圈</td>
</tr>
</tfoot>
</table>
<br>
<h3>表单标签</h3>
<h4>input标签</h4>
<!-- 登录注册搜索的时候需要用到，小框框 -->
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input" target="_blank">参考文档</a>
<br>
<input type="datetime" id="name" name="name" required minlength="4" maxlength="8" size="10">
<br>
<!-- 提示信息 placeholder -->
<input type="text" placeholder="请输入用户名">
<input type="text" placeholder="请输入密码">
<br>
<!-- 单选框 name:name相同的只能选一个 checked: 默认选中-->
性别:
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<br>
<!-- 复选框 -->
同意协议:
<input type="checkbox" checked>
<br>
<!-- 上传文件 multiple:选择多个文件-->
<input type="file" multiple>
<br>
<!-- 按钮 submit:提交 reset:重置按钮 button: 普通按钮 只用在form(作用域)中才生效 -->
<form action="">
用户名：<input type="text" placeholder="请输入用户名">
<br>
密码： <input type="text" placeholder="请输入密码">
<br>
<input type="reset" value="清空">
</form>
<h4>button标签</h4>
<!-- button按钮 -->
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
<button type="button">普通按钮</button>
<h4>下拉标签</h4>
城市：
<select>
<option>北京</option>
<option>上海</option>
<!-- seelcted 默认选中 -->
<option selected>深圳</option>
</select>
<h4>文本域</h4>
<textarea name="" id="" cols="60" rows="3"></textarea>
<h4>label标签</h4>
性别:
<label><input type="radio" name="sex" checked>男</label>
<label><input type="radio" name="sex">女</label>
<br>
<h3>语义化标签</h3>
<div>aaaaaa</div>
<span>bbbbbb</span>
<!-- html5手机端有效 -->
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>玩野区块</section>
<article>网页文章</article>
<br>
<h4>字符实体</h4>
<!-- 空格 -->
学 习
</body>
</html>
10-25
553
553
06-18
1651
1651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
