（二）复习第二课（07.15- 07.20第一轮）：HTML标签元素练习大全
一、标题元素
<!DOCTYPE html><!--声明HTML5文档:超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。-->
<html lang="en"><!--html:根元素。lang意思是：language语言;en意思是：English英语;使用这段的好处是让你的浏览器提示你要不要翻译此页，如果改成“zh-cn"就没有翻译的选项了-->
<head><!--头部元素-->
<meta charset="UTF-8"><!--这是一个注释：这段代码的意思是针对中文网站必须使用"utf-8"格式，否则会出现乱码，有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
-->
<meta name="Keywords" content="HTML,CSS,XML,XHTML,JavaScript"><!--为搜索引擎定义关键词-->
<meta name="Description" content="免费 web & 编程 教程"><!--为网页定义描述内容-->
<meta name="autor" content="runoob"><!--定义网页作者-->
<meta http-equiv="Refresh" content="10"><!--定义网页每30秒刷新-->
<title>HelloWorld</title><!--描述文章的标题-->
<base href="https://www.baidu.com" target="_blank"><!--标签描述了基本的连接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接-->
<link rel="stylesheet" type="text/css" href="CSS/one.css"><!--定义了文档与外部资源之间的关系-->
<!--Style_此标签定义HTML文档的CSS样式文件引用地址,也可以直接放在HTML文档中渲染：Ⅰ内部样式表-->
<style type="text/css">
body{
background:#FFFFFF;
}
</style>
<!--Script_此标签定义客户端脚本JS文件-->
<script>
document.write("Hello World")
</script>
<noscript>抱歉，您的浏览器不支持脚本！（这个提示只有当你的浏览器禁止了脚本或者不支持脚本的时候才生效）</noscript>
</head>
<body><!--主体元素:可见的页面内容-->
<h3 style="color:red">①标题段落：</h3>
<hr>
<div class="one">
<h1>这是一级标题</h1><!--标题标签-->
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<br><!--换行标签-->
<hr><!--水平分割线标签-->
<p>这是一个段落</p><!--段落标签-->
<br>
<hr>
<a href="https://www.baidu.com">这是一个链接</a><!--链接标签-->
<!--href是属性，在某些个别的情况下，比如属性值本身就包含双引号，那么你必须使用单引号-->
<a href="https://www.3cwschool">这是一个链接</a>
<img src="Images/001.png" width="258" height="250" alt="这是一个图像"/><!--图像标签:图像是没有结束标签的，img标签必须要带alt提示，否则会受到”警告“-->
<br>
</div>
<h3 style="color:red">②文本格式化</h3>
<hr>
<div class="two">
<!--文本格式化标签-->
<b>定义粗体文字</b>
<br>
<em>定义着重文字</em>
<br>
<strong>定义加重语气</strong>
<br>
<i>定义斜体文字</i>
<br>
<small>定义小号文字</small>
<br>
<p>定义<sub>下标文字</sub></p>
<br>
<p>定义<sup>上标文字</sup></p>
<br>
<ins>定义插入文字</ins>
<br>
<del>定义删除文字</del>
<hr>
<!--计算机输出标签-->
<code><p>定义计算机代码</p>Console.Write("HelloWorld");</code>
<br>
<kbd>定义键盘码</kbd>
<br>
<samp>定义计算机代码样本</samp>
<br>
<var>定义变量</var>
<br>
<pre>定义预格式文本</pre>
<br>
<p>定义一个缩写：<abbr>WTO</abbr></p>
<br>
<address>定义地址</address>
<br>
<p>从左到右:<bdo dir="ltr">定义文字方向</bdo></p><!--ltr:左边；-->
<p>从右到左:<bdo dir="rtl">定义文字方向</bdo></p><!--rtl：右边-->
<br>
<p>这是一个长引用：</p>
<blockquote>英文名：the Communist Party of China，简写CPC，创建于1921年7月23日，1921年中国GCD成立后，确立了新民主主义革命的正确道路，让灾难深重的中国人民看到了新的希望、有了新的依靠。我们党探索出农村包围城市、武装夺取政权的正确革命道路，“唤起工农千百万”“夺过鞭子揍敌人”，经过土地革命战争、抗日战争、解放战争，推翻了压在中国人民头上的帝国主义、封建主义、官僚资本主义“三座大山”，建立了人民当家作主的中华人民共和国，彻底结束了近代以来中国内忧外患、积贫积弱的悲惨境地，开启了中华民族发展进步的新纪元。</blockquote>
<br>
<p>这是一个短引用：他说：</p>
<q>这是我应该做的</q>
<br>
<p>这是一个引用、引证：</p>
<cite>HelloWorld</cite><p>是最简单的开发案例</p>
<br>
<p>定义项目：</p>
<dfn>这是一个简单的项目</dfn>
</div>
<h3 style="color:red">③链接</h3>
<hr>
<div class="three">
<a href="Index.html">文本链接</a>
<br>
<a href="https://www.baidu.com">点击图片链接到地址
<img src="Images/001.png" alt="示例图片">
</a>
<br>
<a href="#section2" style="color:blue">锚点链接</a>
<a name="section2">跳转到这里</a>
<br>
<a href="files/导入表.xls" download>下载文件</a>
<br>
<a href="https://www.baidu.com" target="_blank">在新窗口中打开</a>
<br>
<a href="https://www.baidu.com" target="_parent">在当前窗口打开</a>
<br>
<a href="https://www.baidu.com" target="_self">在当前窗口或者标签页打开</a>
<br>
<a href="https://www.baidu.com" target="_top">在整个窗口中打开</a>
<br>
<a href="https://www.baidu.com" target="new">在新窗口中打开</a>
<br>
<a id="tips">这是一个提示</a>
<br>
<a href="#tips">访问有用的提示部分</a>
<br>
<a href="https://www.baidu.com#tips">访问有用的提示部分</a>
<br>
</div>
<h3 style="color:red">④图像</h3>
<hr>
<div class="four">
<p style="background:yellow;font-size:20px;text-align:center;font-family:微软雅黑;">Ⅱ这是一个内联样式</p>
<br>
<img src="Images/001.png" style="float:left" alt="这是一个靠左边图片" width="300" height="200"/>
<br>
<img src="Images/001.png" style="float:right" alt="这是一个靠右边图片" width="300" height="200"/>
</div>
<h3 style="color:red">⑤表格</h3>
<hr>
<div class="five">
<table border="1" bgcolor="#19D988" align="center"><!--表格根标签:定义表格边框大小、颜色、布局方式-->
<thread><!--用于定义表格的标题部分-->
<tr><!--用于定义表格的行-->
<th>列标题1</th><!--用于定义表格的表头单元格-->
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thread>
<tbody><!--用于定义表格的主体部分-->
<tr>
<td>行1，列1</td><!--用于定义表格的列-->
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td>行2，列1</td>
<td>行2，列2</td>
<td>行2，列3</td>
</tr>
</tbody>
</table>
</div>
<h3 style="color:red">⑥列表</h3>
<hr>
<div class="six">
<!--无序列表：没有序号-->
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--有序列表：有序号,type定义类型-->
<ol type="I">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
</div>
<h3 style="color:red">⑦区块</h3>
<hr>
<div class="seven">
<!--块级元素会默认自动换行-->
<p>这是一个块级元素1</p>
<h1>这是一个块级元素1</h1>
<ul>这是一个块级元素</ul>
<!--内联元素不会默认换行-->
<b>这是一个内联元素2</b>
<a>这是一个内联元素2</a>
</div>
<h3 style="color:red">⑧表单</h3>
<hr>
<div class="eight">
<form action="/" method="post"><!--创建表单标签，action定义了表单数据提交的目标URL，method属性定义了提交数据的HTTP方法-->
<!--文本输入框-->
<label for="name">用户名：</label>
<input type="text" id="name" required>
<br>
<!--密码输入框-->
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<br>
<label>性别：</label>
<input type="radio" id="male" name="gender" value="male" checked>
<labe for="male">男</labe>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!--复选框-->
<input type="checkbox" id="subscribe" name="subscrible" checked>
<label for="subscrible">订阅推送信息</label>
<br>
<!--下拉列表-->
<label for="country">国家：</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!--提交按钮-->
<input type="submit" value="提交">
<br>
<textarea rows="10" cols="30">多行文本</textarea>
<br>
<!--分组标签-->
<fieldset>
<legend>Personalia:</legend><!--定义fieldset元素标题-->
Name:<input type="text"><br>
Email:<input type="text"><br>
data of birth:<input type="text">
</fieldset>
<br>
<!--按钮标签-->
<button type="button">点我！</button>
<br>
<!--指定一个预定义的输入控件选项列表-->
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
</datalist>
<br>
<!--定义表单的密钥对生成器字段-->
<form action="demo_keygen.asp" method="get">
用户名：<input type="text" name="usr_name">
加密：<keygen name="security">
<input type="submit">
</form>
<br>
</form>
</div>
<h3 style="color:red">⑨框架</h3>
<hr>
<div class="night">
<iframe src="Index.html" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">Runoob.com</a></p>
<p><b>注意：</b>因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>
</div>
<h3 style="ten">⑩字符</h3>
<hr>
<div class="ten">
<p>音标符</p>
à
<br>
á
<br>
â
<br>
ã
<br>
<p>字符实体</p>
<!--空格-->
<br>
<
<br>
¢
<br>
¥
<br>
®
<br>
™
<br>
©
<br>
</div>
</body>
</html>
<!--注释：post:指的是HTTP POST方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码登。get：默认值，指的是HTTP GET方法，表单数据会附加在action属性的URL中，并以？作为分隔符，一般用于不敏感信息，如分页等。-->
分类:
前端基础
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了