1
<!DOCTYPE html> <!--根标签,页面中最大的标签-->
<html lang="en">
<head> <!--头部,必须设置它当中的title标签-->
<meta charset="UTF-8"> <!--字符编码-->
<title>标题</title> <!--标题-->
</head>
<body> <!--文档主题,页面内容基本放在这里-->
</body>
</html>
2标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
</body>
</html>
3段落和换行标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落和换行标签</title>
</head>
<body>
夜已深，漆黑一片，景物不可见。但山中并不宁静，猛兽咆哮，震动山河，万木摇颤，乱叶簌簌坠落。
群山万壑间，洪荒猛兽横行，太古遗种出没，各种可怕的声音在黑暗中此起彼伏，直欲裂开这天地。
山脉中，远远望去有一团柔和的光隐现，在这黑暗无尽的夜幕下与万山间犹如一点烛火在摇曳，随时会熄灭
一阵狂风吹过，一片巨大的乌云横空，遮住了整片夜空，挡住了那仅有的一点星华，山脉中更加黑暗了。
一声凶戾的禽鸣自高天传来，穿金裂石，竟源自那片乌云，细看它居然是一只庞大到不可思议的巨鸟，遮天蔽月，长也不知多少里。
路过石村，它俯视下方，两只眼睛宛若两轮血月般，凶气滔天，盯着老柳木看了片刻，最终飞向了山脉最深处。
平静了很长一段时间，直到后半夜，大地颤动了起来，一条模糊的身影从远方走
<p>夜已深，漆黑一<br>片，景物不可见。</p>
</body>
</html>
4文本格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本格式化</title>
</head>
<body>
<strong>加粗标签</strong><br>
<b>加粗标签</b><br>
<em>倾斜标签</em><br>
<i>倾斜标签</i><br>
<ins>下划线</ins><br>
<u>下划线</u><br>
<strong>
<em><u>别被刺杀</u></em>
</strong>
</body>
</html>
5盒子标签
一个盒子里面可以有多个其它的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子标签</title>
</head>
<body>
<div>div盒子1</div> <!--是一个大盒子,独占一行-->
<div>div盒子2</div>
<span>span盒子1</span> <!--一个小盒子,一行可有多个span-->
<span>span盒子2</span>
</body>
</html>
6图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<img src="R-C.jpg" alt="图片不存在" title="图片标题" width="350" >
<!--src 图片路径, alt 图片不存在时提示, title 鼠标停在图片上会显示-->
<!--可以设置宽,高,设置后会等比例变化-->
</body>
</html>
7链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接标签</title>
</head>
<body>
<a href="R-C.jpg">风景图片</a><br>
<a href="https://www.baidu.com">百度搜索</a><br>
<a href="https://www.baidu.com" target="_self">百度搜索</a><br>
<a href="https://www.baidu.com" TARGET="_blank">百度搜索</a>
<a href="#">空链接</a>
<1-- target="_self" 当前页面打开 TARGET="_blank" 新的页面打开 -->
</body>
</html>
8描点标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接标签</title>
</head>
<body>
<h1 id="shouye">首页</h1>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<p>懒癌不动产</p>
<a href="#shouye">返回首页</a>
<!--1.打描点的位置定义id-->
<!--2.获取描点的位置获取id-->
</body>
</html>
9特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊字符</title>
</head>
<body>
<!-- 空格 -->
<p>灯火, 阑珊处</p>
<p>灯火, 阑珊处</p>
<p>灯火, 阑珊处</p>
<!-- >大于符号 <小于符号-->
<p>是一个段落标签
</body>
</html>
10 表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table align="center" border="1" cellpadding="5" cellspacing="0">
<!--align="center"居中 border="1"表格 cellpadding="5"文字和单元格之间的距离默认1像素-->
<!--cellpadding="0" 单元格之间的空白默认2像素-->
<thead> <!--用于定义表格头部,内部必须有tr-->
<tr> <!-- 行 -->
<th>姓名</th> <!--表示表头-->
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody> <!--定义表格主体,用于存放数据-->
<tr>
<td>钟廖</td> <!--列-->
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>阿思</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
11列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<h3>所有菜单</h3>
<!-- 无序列表 -->
<ul>
<li>河南馒头</li>
<li>香辣鸡腿</li>
<li>手撕包菜</li>
</ul>
<!-- 有序列表 -->
<h3>访问量</h3>
<ol>
<li>抖音 1000</li>
<li>快手 2000</li>
<li>火山 3000</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>官方抖音</dd>
</dl>
<!--ul ol 当中只能放li标签 li标签中可以放任意标签
dl当中只能放dt和dd标签 dd里面可以放任意标签-->
</body>
</html>
12表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- 表单是为了收集用户信息 -->
<form action="" method="get">
<!-- action=""提交的链接 method="get"请求方法，get，post -->
用户名：<input type="text" placeholder="请输入您的用户名">
密码：<input type="password"><br>
<!-- 单选框 -->
性别：男 <input type="radio" name="radio" checked="checked"> 女 <input type="radio" name="radio"><br>
<!-- checked="checked" 二选一，默认选中 -->
爱好：唱歌 <input type="checkbox"> 跳舞: <input type="checkbox" >
rap: <input type="checkbox" ><br>
<!-- checkbox 复选（多选） -->
<!-- submit 提交 -->
<input type="submit" value="注册"><br>
<!-- reset 重置按钮-->
<input type="reset" value="清空" ><br>
<!-- button 普通按钮-->
<input type="button" value="获取验证码"><br>
<!-- file 文件上传 -->
上传文件 <input type="file">
</form>
</body>
</html>
13 label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="" method="get">
<!-- label 绑定一个表单元素，当点中label中的文本时，会自动将焦点转到对应的表单元素上-->
<label for="username">用户名</label><input type="text" id="username"><br>
<label for="nan">男：</label> <input type="radio" id="nan" name="sex" checked="checked " >
<label for="nv">女：</label> <input type="radio" id="nv" name="sex">
</form>
</body>
</html>14下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<!---->
<form>
<select name="" id="">
<option value="">长沙</option>
<option value="">乐山</option>
<option value="" selected="selected">岳阳</option>
<option value="">西湖</option>
</select>
</form>
</body>
</html>
15文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
<form action="">
工作日报
<textarea name="" id="" cols="30" rows="10">
工作日报的内容....
</textarea>
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
