1、head内常用标签
网页的head头部标签是SEO优化的重要部分，它可以帮助搜索引擎更好地理解该网页的内容。以下是head头部标签的示例代码：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>网页标题内容‥‥‥</title>
<!--网页关键字，当用浏览器搜索的时候，只要输入了keyword后面任意一个关键字，那么该网页都有可能被百度搜索出来展示给用户-->
<meta name="keywords" content="关键字1, 关键字2, 关键字3, 关键字4‥‥‥">
<!--网页描述-->
<meta name="description" content="网页描述信息‥‥‥">
<!--style:定义body中h1标签样式，以及使用class和id标识方法定义标签样式-->
<style>
h1 {
color: blue;
}
.myClass {
color: pink;
font-size: 40px;
}
#myId {
color: purple;
font-size: 50px;
}
</style>
<!--script标签内部用来书写JavaScript代码，弹窗输出数字123-->
<script>
alert(123)
</script>
<!--引入外部JavaScript代码-->
<script src="myjs.js"></script>
<!--引入外部css文件-->
<link rel="stylesheet" href="mycss.css">
<!--设置网站的小图标，浏览该网页时浏览器上方将显示该图标-->
<link rel="shortcut icon" href="myicon.ico" type="image/x-icon" />
</head>
<body>
<h1>这是页面的主标题</h1>
<!--在p段落标签中直接定义样式，字体颜色设置为绿色，字体大小设置为25像素-->
<p style="color:green; font-size: 25px;">这是一个段落。</p>
<!-- class标识标签 -->
<div class="myClass">第一个DIV“区块”</div>
<!-- id标识标签 -->
<div id="myId">第二个DIV“区块”</div>
<!--在DIV区块中直接定义样式，div区块高度设置为100像素，背景颜色设置为红色-->
<div style="height:100px; background:red">第三个DIV“区块”，背景为红色</div>
</body>
</html>
效果如下图所示：
上面的例子中，meta标签必须写在头部head标签之内，name的属性值包括“keywords”和“description”，主要用于描述网页，与之对应的属性为content，content属性值中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。“keywords”和“description”的区别如下所示：
Keywords（关键字）： 为搜索引擎提供关键字，各关键词间用英文逗号“,”隔开，有助于搜索引擎了解页面的主题和内容。
description（页面描述）：用简短的文字描述网站或网页的主要内容，有利于各大搜索引擎抓取和收录该网站或网页。当网页设置了description网站描述文字，那么在百度搜索、搜狗搜索、360搜索等搜索引擎的结果中，就能够显示这些描述，这个技术叫做SEO（search engine optimization，搜索引擎优化）。简短又准确的网页描述文字，可以帮助用户在搜索引擎中更方便的搜索到该网站和网页。
在HTML中，style标签包含了一系列CSS规则，用于定义HTML中标签的样式信息，指定HTML在浏览器中的呈现方式，控制网页的外观和布局。style标签定义样式有三种方式，如下：
内联样式：直接在HTML标签中使用style属性来设置样式，例如：<p style="color: red;">文本</p>。这种方式只对当前标签有效。
嵌入式样式：将CSS代码放在<style>标签内，通常放在<head>标签中，例如：<style>p { color: red; }</style>。
外部样式：将CSS代码保存在一个外部文件中，通过<link>标签引入到HTML中，例如：<link rel="stylesheet" href="mystyle.css">。
在head头部的style标签中，class属性用于设置一组标签的样式，可以同时应用于多个标签中，反复在网页中使用。id用于标识该标签的唯一的样式，在整个页面中仅能被使用一次，不能被重复使用。class名称以“.”开头，后面是类名。id名称以“#”符号开头，后面是分配给它的唯一名称。如下所示：
动手练一练：
<style>
.myClass {
color: pink;
font-size: 40px;
}
#myId {
color: purple;
font-size: 50px;
}
</style>
<!-- class实例 -->
<div class="myClass">第一个DIV“区块”</div>
<!-- id实例 -->
<div id="myId">第二个DIV“区块”</div>
2、body内常用标签
body中的标签是会显示到浏览器窗口中的，body中经常使用的标签如下所示：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>body内常用标签</title>
</head>
<body>
<!--标题标签"<h1> 到 <h6>"-->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<!--粗体（文本）-->
<b>加粗</b>
<!--斜体（文本）-->
<i>斜体</i>
<!--下划线（文本）-->
<u>下划线</u>
<!--删除线-->
<s>删除线</s>
<!--段落标签"<p>"-->
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<!--换行标签"<br />"-->
这是第一行<br />
这是第二行<br />
<!--图片标签"<img>"，在浏览器中显示原图-->
<img src="http://www.baidu.com/img/bd_logo.png" title="图片注释:鼠标放到图片上时显示的文字"/><br />
<!--图片标签"<img>"，设置图片的宽度和高度，单位是像素（px）-->
<img src="http://www.baidu.com/img/bd_logo.png" width="300" height="200" /><br />
<!--超链接标签“<a>”-->
<a href="https://www.example.com" target="_blank">这是一个超链接，点击这里访问示例网站</a><br /><br />
<!--表格标签-->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>女</td>
<td>5</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>6</td>
</tr>
</tbody>
</table>
<br />
<!--表单标签“”-->
<form action="submit.html" method="get">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" /><br />
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" /><br />
<input type="submit" value="提交" />
</form>
<br />
<!--下拉菜单“<select>”-->
<select>
<option>上海</option>
<option selected>北京</option>
</select>
<br /><br />
<!--文本区域“<textarea>”，设置文本框的行数为4行，列数为50列-->
<textarea rows="4" cols="50">默认文本</textarea>
<br />
<!--区块标签“<div>和<span>”-->
<div>
<span>这是一个span标签。</span>
<span>这是另一个span标签。</span>
</div>
<!--无序列表-->
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
<!--有序列表-->
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
<!--标题列表-->
<dl>
<dt>HTML：</dt>
<dd>HTML是一种专门用来开发网页的标记语言。</dd>
<dt>CSS：</dt>
<dd>CSS层叠样式表可以控制HTML文档的显示样式，用来美化网页。</dd>
<dt>JavaScript：</dt>
<dd>JavaScript简称JS，是一种用来开发网站（包括前端和后台）的脚本编程语言。</dd>
</dl>
</body>
</html>
效果如下图所示：
（1）HTML中的标题标签
在HTML中，标题标签用于定义不同级别的标题，通常使用<h1>到<h6>标签来定义，其中<h1>定义最大的标题，<h6>定义最小的标题。<h1>标签用于定义最重要的标题，通常用于网页上的主标题，且一个页面中只允许出现一个<h1>标签，但可以有多个<h2>～<h6>标签。例如：
动手练一练：
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
（2）HTML中的图片标签
<img>标签在HTML中用于插入图片，它包括多个属性，主要包括src、alt、width、height、title等，这些属性可以控制图片的显示方式和来源。其中，src属性是必需的，它指定了图片的来源地址，可以是网络地址，也可以是一个本地地址，本地地址可以用绝对路径或相对路径，例如，<img src="image.jpg">会从与HTML文件同一目录下寻找“image.jpg”文件。
<img>标签中的alt属性提供了图片的文本替代信息。如果在某种情况下，图片无法加载，浏览器就会显示alt属性中的文本。例如，<img src="image.jpg" alt="描述性文字">。
<img>标签中通过width和height属性来控制图片的显示尺寸，在需要对图片大小进行精确布局的情况下非常有用。例如，<img src="image.jpg" width="200" height="300">明确指定了图片的宽度和高度。如果只指定宽度或高度一个值，浏览器会自动按比例调整另一个值，以保证图片的显示比例不变。
<img>标签中的title属性用于指定图像的标题。当用户将鼠标放在图像上时，会显示这个标题文本。这个属性可以为用户提供图像内容的文本描述。例如：
动手练一练：
<img src="图片地址" alt="图片加载失败时显示的内容" title="鼠标放到图片上时显示的内容" width="设置宽度" height="设置高度" />
（3）HTML中的表格标签
在HTML中，表格由<table>标签来定义，包含<tr>（表行）、<td>（单元格）、<thead>（表头）、<tbody>（表体）等标签。表格的数据行使用<tr>标签进行定义。<thead>标签在表格中用于定义表格的头部（表头），表头单元格使用<th>标签进行定义。<tbody>标签用于定义表格的主体内容，每行的单元格使用<td>标签进行定义。border="1"属性用于为表格添加边框，使其更加清晰。例如：
动手练一练：
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>女</td>
<td>5</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>6</td>
</tr>
</tbody>
</table>
（4）HTML中的下拉标签
在HTML中，<select>标签用于创建下拉菜单，<option>标签定义菜单项。<option>标签的selected属性用于指定默认选中的选项。例如：
动手练一练：
<select>
<option>上海</option>
<option selected>北京</option>
</select>
（5）HTML中的文本区域标签
在HTML中，<textarea>标签用于创建多行文本输入框。例如：
动手练一练：
<textarea name="comments" rows="4" cols="50">请在此输入您的评论...</textarea>
上面的例子中，name属性定义了表单数据的名称，rows属性设置了文本区域的高度（以行数计），cols属性设置了文本区域的宽度（以字符数计）。<textarea>标签的内容是初始文本，用户可以在提交表单之前编辑这些文本。<textarea>标签还支持其他一些属性，如placeholder（提供输入区域的提示信息）、disabled（禁用文本区域）、readonly（使文本区域只读）等。
（6）HTML中<label>标签和<input>标签
在HTML中，<label>标签用于为页面上的其它标签指定文本标注（标记）。<label>标签会直接输出文本，而不会向用户呈现任何特殊效果，它通常与<input>标签一起使用。<label>标签的for属性与<input>标签的id属性相关联，这样当用户点击 <label>标签时，对应的<input>标签会被选中，便于用户输入数据, 能够提升用户体验。在HTML中，<input>标签用于收集用户信息。根据type属性的不同值，<input>可以有多种形态，例如文本输入、复选框、单选按钮、文件上传等。例如：
动手练一练：
<div>
<label for="test">文本输入框：</label>
<input type="text" id="test" placeholder="请输入文本">
</div><br />
<div>
<label for="agree">复选框：</label><input type="checkbox" id="agree" value="agree">我同意这些条款。
</div><br />
<div>
<label>单选按钮：</label>
<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性
</div><br />
<div>
<label for="file">文件上传：</label>
<input type="file" id="file">
</div><br />
<div>
<label>提交按钮：</label>
<input type="submit" value="提交">
</div><br />
<div>
<label>重置按钮：</label>
<input type="reset" value="重置">
</div><br />
在input标签中，id属性主要用于网页的唯一性识别。它可以在JavaScript中引用这个id属性值，实现动态操作，比如获取输入值、改变样式等。input标签中常见的属性还包括name属性，例如“<input type="text" name="fullname">”，当用户填写表单并提交时，name属性主要用于与服务器交互数据时，作为服务器端识别和处理数据的依据。这意味着，当数据提交到服务器时，name属性的值将用于标识提交的数据字段。
（7）HTML中的表单标签
网站的登陆页面、注册页面等都属于表单。在HTML中，表单由<form>标签来定义，主要作用是收集用户输入的数据，并将这些数据发送到服务器进行处理。表单内的标签如<input>、<textarea>、<button>等用于收集用户的输入信息。例如：
动手练一练：
<form action="submit.html" method="get">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" /><br />
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" /><br />
<input type="submit" value="提交" />
</form>
上面的例子中，表单使用action属性指定了提交数据的目标地址，method属性指定了数据提交的方法（通常是post或get）。<input>是输入标签，用于获取用户在网页中的键盘、鼠标输入的数据，type属性决定了输入类型，其中，type="text"是文本输入，type="password"是密码输入（输入的字符会显示为星号或其他字符）。id和name属性用于标识表单标签，<label>标签用于提供标签内的<input>字段的文本描述。最后，提交按钮“<input type="submit" value="提交">”用于提交表单数据。
在HTML表单中，method属性指定了表单数据发送到目标服务器时使用的HTTP方法。method属性通常是post或get，如果没有填写method属性，默认值是get：
当使用get方法时，表单数据会附加到URL的查询字符串中，以?key1=value1&key2=value2的形式发送。这种提交方式适用于数据量较小且不需要保密的表单。上面的例子中，我们点击“提交”按钮后，提交后的路径会以“submit.html?username=&password=”的形式URL发送到目标服务器。
当使用post方法时，表单数据会被包含在HTTP请求的请求体中，不会显示在URL中。这种提交方式适用于数据量较大、包含敏感信息或文件上传的情况。
（8）HTML中的区块标签“<div>和<span>”
div标签和span标签是HTML中最常用的标签，主要用于网页布局，div标签和span标签区别如下：
<div>标签：div是division的缩写, 是“分割”的意思，用于分隔大块区域。每一组“<div>内容</div>”标签可以理解为一个大盒子，在网页中独占一行，宽度默认为100%，并且可以包含其它标签，并控制其布局和样式。div标签常用于创建网页的整体布局，将页面划分为不同的区域。
<span>标签：span是“跨度”的意思，主要用于行内布局，每一组“<span>内容</span>”标签可以理解为一个小盒子，在网页中不独占一行，宽度和高度会根据外容器自适应，每一行上可以放多个span标签。例如：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>div和span标签</title>
</head>
<body>
<div>这是一个div标签，单独占一行</div>
<div>这是一个div标签，单独占一行</div>
<span>张三</span>
<span>李四</span>
<span>王五</span>
<p>这是一个包含<span style="color: blue;">蓝色文本</span>的段落。</p>
</body>
</html>
从上面的例子中可以看出，div标签会在网页中独占一整行，是一个大盒子。span标签不独占一行, 是一个小盒子。div标签常用于大块内容的布局和结构，如页面布局、分区等，而span标签用于小范围内的样式调整或文本标记，如强调、高亮等。
（9）HTML中的<script>标签
在HTML页面中，<script>标签是比较常见的脚本标签，用于在HTML页面中嵌入JavaScript代码，主要作用是加载和执行JavaScript代码。它可以放置在<head>标签或者<body>标签中，用于在页面加载时或页面中的特定位置执行脚本。通过script脚本标签，可以在网页中实现动态内容、用户输入验证、与服务器通信以及特效动画的效果，可以增强网页的交互性、动态性和功能性。
比如，我们进入购物网，填写一个用户名和密码的登录表单，如果我们没有输入用户名和密码，而直接点击登录按钮，HTML页面可以做到校验并提示“请输入账号名”。如图：
<script>标签可以用于在表单中嵌入JavaScript代码，用于表单验证或处理表单提交。JavaScript脚本可以内嵌在HTML文档中，也可以从外部文件加载。内嵌脚本通常放在<head>标签内或<body>标签的底部，以便在页面加载时执行。外部脚本则通过src属性指定脚本文件的URL来加载。例如：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>script标签</title>
<!--script标签内部用来书写JavaScript代码，弹窗输出“你好, HTML!”-->
<script>
function sayHello() {
alert('你好, HTML!');
}
</script>
</head>
<body>
<button onclick="sayHello()">点击我会跳出弹窗</button>
<!--引入外部JavaScript代码-->
<script src="my-script.js"></script>
</body>
</html>
上面的例子中，我们将JavaScript代码嵌入到了<script>标签内部，并定义了一个名为sayHello()的函数，该函数会在点击按钮时通过onclick事件触发。也可以在<body>中通过<script>标签的src属性指向了一个名为my-script.js的外部JavaScript文件。
（10）HTML中的<style>标签
<style>标签用于在HTML文件中定义内部CSS样式，控制网页的布局、颜色、字体等外观方面，它通常放在HTML文件的头部<head>部分。例如：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>style标签</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
上面的例子中，<style>标签定义了网页的样式，背景颜色是浅蓝色，标题<h1>的颜色是深蓝色，并且居中对齐，段落<p>的颜色是红色。如图：
（11）HTML中的换行<br/>标签和文本格式化标签
br是英文break的缩写，表示换行，<br/>是一个单标签(不需要结束标签) ，<br/>标签一般是放在要换行的段落的后面。
HTML中的文本格式化标签用于控制文本的显示格式，比如加粗、斜体、改变字体大小等，例如：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>HTML中的换行标签和文本格式化标签</title>
</head>
<body>
这是一个<strong>“加粗”</strong>文本。<br/>
这是一个<em>“斜体”</em>文本。<br/>
这是一个<ins>“下划线”</ins>文本。<br/>
这是一个<del>“删除线”</del>文本。<br/>
这是一个<sub>下标</sub>文本。<br/>
这是一个<sup>上标</sup>文本。<br/>
这是一个<code>“计算机代码”</code>文本。<br/>
这是一个<small>“小子号的文本”</small>。<br/>
这是<kbd>“键盘输入”</kbd>的样式。<br/>
这是<mark>“高亮”</mark>的文本。<br/>
这是<bdo dir="rtl">“从右到左的文本”</bdo>。<br/>
<address>这是作者的联系信息，文本以斜体呈现</address>
<pre>预 格 式 化 文 本， 保 留 空 格。</pre><br/>
</body>
</html>
HTML中常用的文本格式化标签如下表所示：
| 标签 | 描述 |
|---|---|
| <strong></strong> | 强调标签中的内容，并将字体加粗 |
| <b></b> | 加粗标签中的字体 |
| <em></em> | 强调标签中的内容，并使标签中的字体倾斜 |
| <i></i> | 定义标签中的字体为斜体 |
| <small></small> | 定义标签中的字体为小号字体 |
| <sub></sub> | 定义下标文本 |
| <sup></sup> | 定义上标文本 |
| <ins></ins> | 定义文档的其余部分之外的插入文本 |
| <del></del> | 在文本内容上添加删除线 |
| <code></code> | 定义一段代码 |
| <kbd></kbd> | 用来表示文本是通过键盘输入的 |
| <samp></samp> | 定义程序的样本 |
| <var></var> | 定义变量 |
| <pre></pre> | 定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体 |
| <abbr></abbr> | 用来表示标签中的内容为缩写形式 |
| <address></address> | 用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行 |
| <bdo></bdo> | 定义标签中的文字方向 |
| <blockquote></blockquote> | 定义一段引用的文本，例如名人名言，文本会换行输出，并在左右两边进行缩进 |
| <q></q> | 定义一段短的引用，浏览器会将引用的内容使用双引号包裹起来 |
| <cite></cite> | 表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示 |
| <dfn></dfn> | 用来定义一个术语，标签中的文本会以斜体呈现标签 |
上面的表格中，<b>和<strong>都是使字体加粗的效果，但是<strong>的语义性更强烈，表示更强烈的强调，对于优化搜索来说更好，能让它知道你这里面有强烈的重要性，<b>只对视觉效果进行了强调，而语义上没有帮助。
同样，<i>和<em>都是使字体倾斜的效果，<i>是基于视觉效果，表示无意义的斜体，仅仅表示样式上是斜体，而没有强调的语义。而<em>表示一般的强调文本，这个标签具有语义。<em>标签中的内容在搜索引擎中更受重视，一些网页内容也会根据它在显示时有加强语气的效果。