1.HTML指的是超文本标记语言,它是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言，标记语言是由一套标记标签构成。
2.所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制） 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)
3.在网页开发中，HTML类似身体，css类似外观修饰，JS类似行为动作
<!DOCTYPE html>
<!-- 文档类型声明标签 -->
<html lang="en">
<!-- 当前文档的显示语言，en 表示英文语言，zh-CN表示中文语言 -->
<head>
<meta charset="UTF-8">
<!-- charset是多个字符的合集，以便计算机能够识别和储存各种文字，UTF-8万国码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我利用VScode创建的第一个界面</title>
</head>
<body>
<h1>标签目录</h1>
<h2>
1.<a href="#标题标签">标题标签</a><br>
2.<a href="#段落标签">段落标签</a><br>
3.<a href="#换行标签">换行标签</a><br>
4.<a href="#文本格式化标签">标题标签</a><br>
5.<a href="#div&span标签">div&span标签</a><br>
6.<a href="#图像标签">图像标签</a><br>
7.<a href="#链接标签">链接标签</a><br>
8.<a href="#特殊字符">特殊字符</a><br>
9.<a href="#表格标签">表格标签</a><br>
10.<a href="#列表标签">列表标签</a><br>
11.<a href="#表单标签">表单标签</a><br>
</h2>
<h3 id="标题标签">标题标签</h3>
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h3 id="段落标签">段落标签</h3>
<p>段落标签</p>
<p>在今天早上进行的 2023年世界女排联赛总决赛中，<br>中国女排1:3不敌土耳其女排，获得了世联赛的亚军，这也是迄今为止中国女排在世界女排联赛中取得的最佳战绩。</p>
<p>前身是世界女排大奖赛的世联赛于2018年正式改制，除了2020年因疫情原因停办，在过去的4届世联赛上，美国获得三连冠，而去年的冠军则被意大利队收入囊中。中国队在2018年和2019年获得该比赛季军，土耳其则是2018年的亚军和2021年的季军。
</p>
<p>在此前的比赛中，中国队先后击败巴西队和波兰队，而土耳其则是淘汰了意大利队和美国队，两队会师决赛，大战一触即发。与中国女排相似的是，土耳其近几年也处于阵容和教练组变化的时期，曾在去年率领塞尔维亚队获得世锦赛冠军的桑塔雷利成为了土耳其的新任主帅，更有世界级接应巴尔加斯加盟，可以说土耳其队的实力非常强劲，而中国队这边则明显有着新老交替磨合期出现的许多问题，球队虽然意志坚定，但配合的默契度以及对于球队新技战术的落实上仍然有改善的可能，再加上朱婷和张常宁的缺席，队伍也并非是“完全体”，面对土耳其队难免落入下风。
</p>
<h3 id="换行标签">换行标签</h3>
<br>
<h3 id="文本格式化标签">文本格式化标签</h3>
<p>我是<strong>加粗</strong>标签</p>
<p>我是<b>加粗</b>标签</p>
<p>我是<em>倾斜</em>标签</p>
<p>我是<del>删除</del>标签</p>
<p>我是<ins>下划线</ins>标签</p>
<h3 id="div&span">div&span标签</h3>
<div>这是一个大盒子，会单独占一行</div>
<span>这是一小大盒子，会在一行中</span>
<h3 id="图像标签">图像标签</h3>
<img src="../images/东秦.jpg" title="小破秦">
<h4>alt 替换文本 图像显示不出来的时候使用图像文本替代 title 图像名称文本</h4>
<img src="东秦肖邦.jpg" alt="小破秦">
<h4>width 给图像设置宽度</h4>
<img src="东秦.jpg" alt="小破秦" width="500">
<h4>height 给图像设置高度</h4>
<img src="东秦.jpg" alt="小破秦" height="500">
<h4>border 给图像设置边框</h4>
<img src="东秦.jpg" alt="小破秦" height="500" border="15">
<h4>相对路径</h4>
<img src="images/东秦.jpg"><!-- 在同一级中 -->
<img src="../images/东秦.jpg" alt="无"><!-- 在上一级中 -->
<h3 id="链接标签">链接标签</h3>
<!-- 外部链接 -->
<!-- href链接目标的地址 target打开的方式 默认为_self -->
<a href="https://www.bilibili.com/" target="_blank">bilibili</a><br>
<a href="https://www.bilibili.com/">bilibili</a><br>
<!-- 内部链接 -->
<a href="第一个页面.html"></a>
<!-- 锚点链接如上目录所示 -->
<h3 id="特殊字符">特殊字符</h3>
<p>空 格</p>
<p>大于号<p>小于号</p>
<h3 id="表格标签">表格标签</h3>
<!-- 行标签<tr> 单元格标签<td> 表头单元格标签 -->
<!-- align 属性值 left(默认) center right 规定表格相对周围元素的对齐方式
border 属性值 1或"" 规定表格单元是否拥有边框 默认为"" 没有边框
cellpadding 属性值 像素值 规定单元边与其内容之间的空白 默认为1像素
cellspacing 属性值 像素值 规定单元格之间的空白 默认为2像素
width 属性值 像数值或百分比 规定表格宽度 -->
<th>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" highth="250">
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left(默认) center right</td>
<td>规定表格相对周围元素的对齐方式</td>
</tr>
<tr>
<td>border</td>
<td>1或""</td>
<td>规定表格单元是否拥有边框 默认为"" 没有边框</td>
</tr>
<tr>
<td>cellpadding</td>
<td>像素值</td>
<td>规定单元边与其内容之间的空白 默认为1像素</td>
</tr>
<tr>
<td>cellspacing</td>
<td>像素值</td>
<td>规定单元格之间的空白 默认为2像素</td>
</tr>
<tr>
<td>width</td>
<td>像数值或百分比</td>
<td>规定表格宽度</td>
</tr>
</tbody>
</table>
<h4>合并单元格</h4>
<!-- 合并单元格 ：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="合并单元格的个数" -->
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" highth="250">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<h3 id="列表标签">列表标签</h3>
<h4>无序列表</h4>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<h4>自定义列表</h4>
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
</dl>
<h3 id="表单标签">表单标签</h3>
<!-- 表单： 1.表单域<form> 2.表单控件 3.提示信息 -->
<h4>表单域</h4>
<form action="deom.php" method="POST" name="name1">
</form>
<h4>表单元素</h4>
<form>
<!-- text文本框 -->
<label for="username">用户名：</label><input type="text" name="username" value="请输入用户名" maxlength="12"
id="username"><br>
<!-- name 定义input 的元素名称
value 规定input 元素的值
checked 规定此input 元素首次加载时应当被选中
maxlenghth 规定输入字段中的字符的最大长度 -->
<!-- password密码框 -->
密码：<input type="password" name="password"><br>
<!-- radio 同一name值下的单选按钮 -->
<!-- <label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点(光标转到或者选择对应的表单元素上,用来增加用户体验. -->
性别：<label for="male">男</label><input type="radio" name="性别" value="男" checked="checked" id="male">
<label for="female">女</label><input type="radio" name="性别" value="女" id="female"><br>
<!-- checkbox 多选框 实现多选按钮 -->
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<!-- 提交给后台 -->
<input type="submit" value="免费注册">
<!-- 重置按钮 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 -->
<input type="button" value="获取短信验证码"><br>
<!-- 文件按钮 -->
上传头像：<input type="file"><br>
<!-- <select>下拉表单元素 -->
籍贯
<select>
<option>海南</option>
<option>上海</option>
<option>广东</option>
<option selected="selected">湖南</option>
<option>山东</option>
</select><br>
<!-- <textarea>文本域标签 -->
个性签名；
<textarea rows="10" cols="50">
</textarea>
</form>
</body>
</html>