HTML标记语言
HyperText Markup Language 超文本标记语言，是一种用于创建网页的标准标记语言。
HTML不是一种编程语言，而是一种标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
由w3c定义的一系列的标签构成。
简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
实例解析
<!DOCTYPE html>声明为 HTML5 文档<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为 utf-8<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落
**注：**在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
标签
- HTML标签是由尖括号包围的关键字；
- HTML标签通常是成对出现的；
- 第一个标签为开始标签，第二个标签为结束标签；
<a></a> - 自闭和标签；
<br/>
文字分隔标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 文字上的分隔标记 -->
<!-- 浏览器不会识别Enter、空格键，所以你按多少次空格都没用 -->
<!-- 断行标记 -->
莫愁前路无知己，<br>天下谁人不识君。
<!-- 分段标记 -->
<p>
我劝天公重抖擞，
</p>
<p>
不拘一格降人才。
</p>
<!-- 空格标记 -->
张三给你发来消息： 在吗？老弟！
</body>
</html>
排版标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 排版的标记 -->
<!-- 文字的左对齐、右对齐、居中 -->
<!-- 在HTML4.01中，所有p元素的呈现属性均不被赞成使用，建议使用CSS代替 -->
<p style="text-align: left;">
6月25日0时至24时，北京市新增报告本地确诊病例11例、疑似病例3例、无症状感染者1例；无新增报告境外输入确诊病例、疑似病例、
无症状感染者，治愈出院病例1例。
</p>
<p style="text-align:center;">
6月11日0时至6月25日24时，累计报告本地确诊病例280例，在院280例。尚在观察的无症状感染者22例；无新增报告境外输入新冠肺炎
确诊病例、疑似病例和无症状感染者，无在院病例。
</p>
<!-- 在VS Code中安装open in browser插件，在浏览器中打开页面的方式为：右键-> open in default browser -->
<p style="text-align: right;">
新增确诊病例中，丰台区7例、海淀区2例、昌平区1例、大兴区1例。
</p>
<!--
在HTML4.01中，center标签不被赞成使用。
<center>
</center> -->
<!-- 被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 -->
<pre>
天生我才必有用，
千金散尽还复来。
</pre>
</body>
</html>
字体标记与分割线标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 字体标记 -->
<!-- 标题 -->
<!-- <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 在HTML4.01中，font标签不被赞成使用。 -->
<!-- <font></font> -->
<b>文本加粗</b>
<br>
<i>斜体文本</i>
<br>
<u>底线</u>
<br>
<s>删除线</s>
<br>
<dfn>名词解释</dfn>
<br>
<em>着重</em>
<br>
<strong>强调</strong>
<br>
10 <sup>2</sup>
<hr>
<!-- 分割线标记 -->
log <sub>2</sub>
<br>
联系我们：<address>上海市政立路485号</address>
</body>
</html>
背景标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 500px; height: 500px; background-image:url(img/微信图片_20200625141410.jpg);">
</div>
<div style="width: 200px; height: 200px; background-color: rgb(75, 153, 153);">
</div>
<!-- 圆形 -->
<div style="width: 200px; height: 200px; border: 1px solid black; border-radius: 100px;">
</div>
</body>
</html>
图像信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- img标记 -->
<!-- 在浏览器无法载入图像时，替换文本属性alt告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。 -->
<!-- title属性：当鼠标滑到图片上时显示的信息 -->
<img src="img/微信图片_20200625141410.jpg" alt="松韵.jpg" title="嘿嘿">
<!-- img -->
<img src="http://wx4.sinaimg.cn/orj360/006N7hEIly1gfykqd7gz8j32yo4g0x6r.jpg" alt="奇妙小森林.jpg">
<!-- src的相对路径(项目下的图片)和绝对路径(网络地址上的图片) -->
</body>
</html>
列表标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 列表标记 -->
<!-- 无序列表 type默认小圆点，其他的可以是圆点或者方形 -->
<ul type="disc">
<li>Apple</li>
<li>HUAWEI</li>
<li>Mi</li>
</ul>
<!-- 有序列表 type默认阿拉伯数字，start表示从第几个阿拉伯数字开始 -->
<ol type="1" start="3">
<li>Nike</li>
<li>Converse</li>
<li>Adidas</li>
</ol>
<!-- 自定义列表 缩进 -->
<dl>
<dt>江苏</dt>
<dd>南京市</dd>
<dd>苏州市</dd>
<dd>无锡市</dd>
</dl>
</body>
</html>
特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 特殊字符 -->
<!-- 空格 -->
北 京
<br>
左尖括号<>右尖括号
<br>
<!-- & -->
&&
<br>
版权所有：©
<!-- 双引号 -->
"下山"
<!-- 定义一个锚点 -->
<a name="bottom"></a>
</body>
</html>
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 定义一个锚点 -->
<a name="top"></a>
<!-- 超链接 -->
<!-- 在新的标签页打开该链接 -->
<a href="https://www.bilibili.com/" target="_blank">进入哔哩哔哩网站</a>
<hr>
<!-- 在自身窗口打开该链接，默认值 -->
<a href="index.html" target="_self">跳转到index.html</a>
<!-- div用户铺满整个页面，让回到顶部有效果 -->
<div style="width: 100px; height: 800px; background-color: rgb(26, 180, 129);"></div>
<!-- 锚点，可以前往当前页面的某个位置，回到顶端 -->
<a href="#top">回到顶部</a>
<a href="index2.html#bottom" target="_blank">回到index2.html的底部</a>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表格 -->
<table border="1px" cellspacing="0px" align="center" width="500px" height="300px" style="text-align: center;">
<!-- cellspacing：单元格间距，一般设置为0px，这样单元格与单元格之间没有1px的间距 -->
<!-- cellpadding：单元格边距，说的是单元格中的文字距离单元格左侧的距离 -->
<!-- align：一般用在HTML标签的属性上，水平居中对齐 -->
<!-- text-align：一般用于CSS中，设置元素内容水平居中对齐 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表格的合并单元格 -->
<table border="1px" cellspacing="0px" cellpadding="" width="400px" height="300px">
<tr>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 表单 -->
<form action="#" method="GET">
<!-- action：表单数据提交到的页面；method：提交方式 GET/POST -->
<!-- GET：将请求参数拼接在url后面，多个请求参数之间使用&分隔，数据大小有限制，不安全 -->
<!-- POST：将请求参数封装在请求体里面，数据大小无限制，安全 -->
用户名：<input type="text" name="username" placeholder="请输入用户名" required><br>
<!-- name属性必须提供，作为后台获取该表单数据的依据，placeholder属性为提示信息，required属性为必须填写的字段 -->
密码：<input type="password" name="password" placeholder="请输入密码"><br>
性别：<input type="radio" name="gender" value="0" checked id="men"><label for="men">男</label>
<!-- checked属性为默认值 -->
<input type="radio" name="gender" value="1" id="woman"><label for="woman">女</label><br>
<!-- 单选按钮，两个表单的name属性值必须一致，不然不能归为一组radio -->
<!-- label按钮：保证当用户点击男/女时，也可以选中该按钮，而不是只能点击按钮 -->
爱好：
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="basketball" id="1" checked><label for="1">篮球</label>
<!-- checked:默认值 -->
<input type="checkbox" name="bobby" value="swimming" id="2"><label for="2">游泳</label>
<input type="checkbox" name="hobby" value="piano" id="3"><label for="3">钢琴</label><br>
城市：
<!-- 下拉框 -->
<select name="city" id="">
<option value="">请选择你的城市：</option>
<option value="shanghai" selected>上海</option>
<!-- selected：默认值 -->
<option value="beijing">北京</option>
<option value="hangzhou">杭州</option>
</select><br>
<!-- date类型 -->
出生日期：
<input type="date" name="birthday"><br>
<!-- number类型 -->
个数：
<input type="number" name="count" start="1" max="10"><br>
<!-- email类型 -->
邮箱：
<input type="email" name="email"><br>
<!-- file类型 -->
选择文件：
<input type="file" name="uploadFile"><br>
<!-- 文本域 -->
自我介绍：
<textarea name="description" id="" cols="30" rows="10"></textarea><br>
<!-- reset类型 -->
<input type="reset" value="重置">
<input type="submit" value="注册">
<!-- 提交按钮的type属性为submit -->
</form>
</body>
</html>
多媒体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 多媒体 -->
<audio src="audio/G.E.M. 邓紫棋 _ 王嘉尔 - 热爱就一起.mp3" controls></audio>
<video src="video/G.E.M. 邓紫棋-我说了算（多芬秀发合作单曲）(蓝光).mp4" controls width="800px" height="400px"></video>
</body>
</html>
块标签和行标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
块标签：占据一整行，
h1-h6、ul、ol、dl、
div、
行标签：内容有多宽占多宽，不会占据一整行，
a、b、
span
-->
<!-- 典型的块标签 -->
<div>
<!-- 不带有任何样式，一张白纸，没有宽度，没有高度，没有背景 -->
<!-- 正是因为它很干净，所以才会使用div + css样式来构建网页 -->
</div>
<!-- 典型的行标签 -->
<span>
</span>
</body>
</html>
1998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
