一.HTML的初始结构
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置文本字符 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置网页名 -->
<title>首页</title>
</head>
<body>
这是我的first page！
</body>
</html>
二.HTML中的常用标签
1. 标题标签
<h1> 到 <h6>：定义六个级别的标题，<h1> 级别最高，<h6> 级别最低。
h1字体大小是32px
h4字体大小是16px
默认字体大小是16px
2. 段落和换行标签
<p>：定义段落。
<br>：插入一个简单的换行符。
3. 链接标签
<a>：定义超链接，用于链接到其他网页或网站。
4. 图像标签
<img>：定义图像，src 属性用于指定图像的URL。
5. 列表标签
<ul>：定义无序列表。
<ol>：定义有序列表。
<dl>: 自定义列表
<dt>:自定义列表头
<dd>:自定义列表项
<li>：定义列表项。
<tr>：定义表格行。
<td>：定义表格数据单元格。
<th>：定义表头单元格。
6. 表单标签
<form>：定义HTML表单，用于用户输入。
<input>：定义输入字段，type 属性用于指定输入类型（如 text, password, submit 等）。
<textarea>：定义多行文本输入字段。
<label>：定义 <input> 元素的描述。
<select> 和 <option>：定义下拉列表。
<button>：定义一个点击按钮。
7. 语义化标签
<header>：定义文档的头部区域。
<footer>：定义文档的底部区域。
<article>：定义文档中的独立内容区域。
<section>：定义文档中的节（或区段）。
<nav>：定义导航链接的部分。
<aside>：定义页面的侧边栏内容。
8.格式化标签
<strong>我变强壮了</strong>
<b>我也可以加粗</b>
<hr>
<em>我倾斜了吗</em>
<i>我倾斜了吗</i>
<hr>
<del>我身上有什么？</del>
<s>我身上有一条线</s>
<hr>
<ins>*是中国的，日本也是中国的</ins>
<u>*是中国的，日本也是中国的</u>
<hr>
100<sub>10</sub>
26<sup>C°</sup>
9. 其他常用标签
<div>：定义文档中的区块或节，常用于结合CSS进行布局和样式设计。
<span>：对文档中的行内元素进行分组。
<meta>：提供有关HTML文档的元数据，如字符编码、页面描述、关键词等。
<title>：定义浏览器工具栏的标题，当网页添加到收藏夹时的标题。
<style>：用于包含CSS样式信息。
<script>：用于嵌入或引用JavaScript代码。
这些只是HTML5中常用标签的一部分，实际上HTML5还包含许多其他标签和属性，用于构建功能丰富、结构清晰的网页。
三.部分标签的使用
1. table标签
1.1 table标签的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table标签的使用</title>
</head>
<body>
<!--
border 边框
cellspacing 格子和格子之间的边距
cellpadding 格子和文字的边距
align="" left, center, right
th 默认字体加粗，内容居中
表格的组成
caption 标题
thead 表头
tr 代表一行
th 代表一行中的一个格子
tbody 主体部分
tr
td 代表一行中的一个格子
tfoot
tr
td
-->
<table border="1" cellspacing="0" cellpadding="0">
<caption>水果价格列表</caption>
<thead>
<tr>
<th>No</th>
<th>fruit</th>
<th>price</th>
<th>num</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1001</td>
<td align="center">apple</td>
<td align="center">$2</td>
<td align="center">10</td>
</tr>
<tr>
<td align="center">1002</td>
<td align="center">pear</td>
<td align="center">$5</td>
<td align="center">8</td>
</tr>
<tr>
<td align="center">1003</td>
<td align="center">strawberry</td>
<td align="center">$7</td>
<td align="center">10</td>
</tr>
<tr>
<td>1004</td>
<td>watermelon</td>
<td>$1.2</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总金额：</td>
</tr>
</tfoot>
</table>
</body>
<style>
</style>
</html>
1.2 table标签的合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, tr, td{
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="200" height="200">
<tr>
<td>1</td>
<td >2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">7</td>
</tr>
</table>
</body>
</html>
2. ul, ol, dl 标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<script>
// 列表 块级元素
// 1.有序列表 ol
// 默认显示 1-n的数字
// start="10"
// type=""
// 2.无序列表 ul 默认是黑点
// style="list-style: circle;" 空心的圆
// style="list-style:none;"
// 3.自定义列表 dl > dt > dd
</script>
<ol start="10">
<li>苹果</li>
<li>梨子</li>
<li>草莓</li>
<li>香蕉</li>
</ol>
<br>
<ul style="list-style: none;">
<li>周杰伦</li>
<li>蔡徐坤</li>
<li>黎明</li>
<li>迪丽热巴</li>
</ul>
<!-- t:title -->
<dl>
<dt>吃了吗</dt>
<dd>吃的包子</dd>
<dt>今天去哪里玩</dt>
<dd>哪里都不去</dd>
</dl>
</body>
</html>
3.label 标签
<!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>
<p>
<!-- label中的for应该与input中的id相关联 -->
<!-- 使用单选框时，想要两个单选框为一组，需要给他们设置相同的name -->
<label for="username">
用户名： <input type="text" name="" id="username" >
</label>
<label for="nan">
<input type="radio" value="男" id="nan" checked name="gender">男
</label>
<label for="nv">
<input type="radio" value="女" id="nv" name="gender">女
</label>
</p>
</body>
</html>
label 标签通常和表单元素一起使用
4.form 表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单的使用</title>
</head>
<body>
<!-- 表单：数据的入口 -->
<!-- form表单
method="get/post"
get:通过url地址传智，体积小，速度快，不安全，数据格式有限（asc,string）
post:通过表单传值，体积大，速度慢，安全，类型和格式不限制(压缩包，视频，音频，ppt)
action="提交的地址"
-->
<form action="" method="get">
<p>
用户名<input type="text" placeholder="用户名" name="username" >
</p>
<p>
密 码<input type="password" name="pwd">
</p>
<p>
性别：
<!-- 使用lable标签for属性应该和input标签中的id相关联 -->
<!-- 使用单选框时选项应该在同一组中（在同一个name属性中） -->
<label for="gender1">
<input type="radio" id="gender1" name="gender" value="男">男
</label>
<label for="gender2">
<input type="radio" id="gender2" name="gender" value="女" checked>女
</label>
</p>
<p>
<label for="age">
年龄：<input type="number" max="120" min="18" value="20">
</label>
</p>
<p>
爱好：
<input type="checkbox" value="钱" name="hobby"> 钱
<input type="checkbox" value="黄金" name="hobby"> 黄金
<input type="checkbox" value="香车" name="hobby"> 黄金
<input type="checkbox" value="美女" name="hobby"> 黄金
<input type="checkbox" value="黄金" name="hobby"> 黄金