（三）复习第三课（07.20- 07.25第二轮）：HTML标签元素练习大全
<!DOCTYPE html>
<!--练习时间：2024.07.20-2024.07.25-->
<html lang="en"><!--添加了en可以让你的网站打开时会提示翻译-->
<head>
<p id="head1"></p>
<meta charset="utf-8"><!--对于中文网页需要使用此标签声明编码，否则会出现乱码-->
<meta http-equiv="Refresh" content="30"><!--这个是刷新界面，每隔3秒会刷新一次-->
<meta name="Keywords" content="HTML,css,XHTML,JavaScript"><!--为搜索引擎定义关键词-->
<meta name="Description" content="免费 Web & 编程 教程"><!--为网页定义描述内容-->
<meta name="author" content="Runoob"><!--定义网页作者-->
<!--<base href="http://www.baidu.com" target="_blank">--><!--默认HTML文档所有的连接标签链接-->
<!--<link rel="stylesheet" type="text/css" href="../CSS/one.css">--><!--这是一个外部链接，链接外部样式-->
<script src="../JS/myScript.js"></script><!--这是一个链接外部JS-->
<title>这是一个标题</title><!--标题-->
</head>
<!--牛逼：按ctrl+/就能够快速注释-->
<body>
<!--第一/二/三节：元素、属性、标题-->
<hr><!--这是一个带横线的换行符号-->
<div class="one"><!--块级标签div，带属性class-->
<h1>这是一级标题</h1><!--这是一个标题-->
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>这是一个段落</p><!--这是一个段落-->
<a href="https://www.runoob.com/html/html-head.html">这是一个链接（百度一下，你就知道）</a><!--这是一个链接-->
<img src="../Images/001.png" alt="加载失败提示" width="100" height="100"><!--图像标签-->
<br><!--这是一个空格换行-->
</div>
<!--第四节：文本格式化-->
<hr>
<div class="two">
<b>定义粗体文字</b>
<br>
<em>定义着重文字</em>
<br>
<i>定义斜体字</i>
<br>
<small>定义小号字</small>
<br>
<strong>定义加重语气</strong>
<br>
<sub>定义下标文字</sub>
<br>
<sup>定义上标文字</sup>
<br>
<ins>定义插入字</ins>
<br>
<del>定义删除字</del>
<br>
<code>定义计算机代码</code><br>
<kbd>定义键盘码</kbd><br>
<samp>定义计算机代码样本</samp><br>
<var>定义变量</var><br>
<pre>定义预格式文本</pre><br>
<abbr title="定义缩写">定义缩写</abbr><br>
<address>定义地址</address><br>
<bdo dir="rtl">定义从右向左文字方向</bdo><br>
<bdo dir="ltr">定义从左到右文字方向</bdo><br>
<blockquote>定义长引用</blockquote><br>
<q>定义短引用</q><br>
<cite>定义引用、引证</cite><br>
<dfn>定义一个定义项目</dfn><br>
</div>
<!--第五节：链接-->
<hr>
<div class="three">
<a href="https://www.runoob.com/html/html-head.html">
<img border="3" src="../Images/001.png" alt="加载失败后的提示"></a><!--这是一个带边框的图像链接-->
<p>
<a href="#c4">查看章节</a><!--这是一个当前页面链接到指定位置-->
</p>
<h2>章节1</h2>
<p>这边显示该章节的内容</p>
<h2>章节2</h2>
<p>这边显示该章节的内容</p>
<h2>章节3</h2>
<p>这边显示该章节的内容</p>
<h2>章节4</h2>
<p>这边显示该章节的内容</p>
<h2>章节5</h2>
<p>这边显示该章节的内容</p>
<h2>章节6</h2>
<p>这边显示该章节的内容</p>
<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 8</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 9</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 10</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 11</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 12</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 13</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="c4">章节 14</a></h2>
<p>这边显示该章节的内容……</p>
<h2>章节 15</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 16</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 17</h2>
<p>这边显示该章节的内容……</p>
<br>
<p>跳出框架</p>
<a href="https://www.runoob.com/html/html-head.html" target="_top">点击这里跳出当前界面显示</a><!--target可以选择是在当前界面打开还是跳出框架打开-->
<br>
<p>这是一个电子邮件链接</p>
<a href="mailto:545780157@qq.com?Subject=Hello%20again" target="_top">发送邮件</a><!--发送邮件-->
</div>
<!--第六节：头部-->
<hr>
<div class="four">
<p><a href="#head1">点击此处链接到头部</a></p>
</div>
<!--第七节：CSS-->
<hr>
<style type="text/css">
p{color:aquamarine;}/*这个是内部样式表*/
</style>
<div class="five">
<p style="color:aqua;margin-left: 20px;">这是一个段落</p><!--这个是内联样式-->
<h2 style="background-color: crimson">这里定义了标签的背景颜色</h2><!--定义标签的背景颜色-->
<h3 style="font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', 'serif';color:red;font-size:20px;">定义标签的字体、字体颜色、字体大小</h3>
<h4 style="text-align:center;">居中对齐的标题</h4>
</div>
<!--第八节：图像-->
<hr>
<div class="six">
<h4>浮动图片</h4>
<p><img src="../Images/pic_bulbon.gif" alt="图片加载失败的时候提示" style="float:left" width="100" height="100">一个带图片的段落，图片浮动在这个文本的左边</p><!--图片浮动左边-->
<p><img src="../Images/pic_bulboff.gif" alt="图片加载失败的时候提示" style="float:right" width="100" height="100">一个带图片的段落，图片浮动在这个文本的右边</p>
<a href="http://www.baidu.com"><img border="2" src="../Images/32X32.gif" alt="图片加载失败时提示信息" width="20" height="20">这是一个图片链接</a>
</div>
<!--第九节：表格-->
<hr>
<div class="seven">
<table border="1"><!--定义表格标签-->
<caption>这是表格的标题</caption><!--定义表格标题-->
<thead><!--定义表头标题部分-->
<tr><!--定义行-->
<th>列标题1</th><!--定义表头单元格-->
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<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>
<br>
<table border="3">
<h4>一列：</h4>
<tr>
<td>100</td>
</tr>
</table>
<table border="3">
<h4>一行三列：</h4>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<table border="3">
<h4>两行三列:</h4>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</div>
<!--第十节：列表-->
<hr>
<div class="eight">
<h3>无序列表：</h3>
<ul><!--定义无序列表-->
<li>cofe</li>
<li>tea</li>
<li>milk</li>
</ul>
<h3>带编号的有序列表</h3>
<ol>
<li>apple</li>
<li>banan</li>
<li>lemon</li>
</ol>
<h3>大写字母列表：</h3>
<ol type="A">
<li>apple</li>
<li>banna</li>
<li>lemons</li>
</ol>
<h3>小写字母列表：</h3>
<ol type="a">
<li>apple</li>
<li>banna</li>
<li>lemons</li>
</ol>
<h3>罗马数字列表：</h3>
<ol type="I">
<li>apple</li>
<li>banna</li>
<li>lemons</li>
</ol>
<h3>小写罗马数字列表：</h3>
<ol type="i">
<li>apple</li>
<li>banna</li>
<li>lemons</li>
</ol>
<h3>嵌套列表</h3><!--这是一个嵌套列表-->
<ul>
<li>Coffee</li>
<li>tea
<ul>
<li>black tea</li>
<li>green tea</li>
</ul>
</li>
</ul>
<dl><!--自定义列表开始标签-->
<dt>coffee</dt><!--注意此处的不同-->
<dd>*black hot drink</dd>
<dd>*white cold drink</dd>
</dl>
</div>
<!--第十一节：区块、布局-->
<hr>
<div class="night" style="width:500px;"><!--使用div布局-->
<div class="header" style="background-color:yellow;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div class="menu" style="background-color:blue;height:200px;width:100px;float:left;">
<b>菜单</b><br>html<br>css<br>javascipt<br>
</div>
<div class="content" style="background-color:red;height:200px;width:400px;float:left;">内容在这里
</div>
<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权@代号六零一</div>
</div>
<br>
<table width="500" border="1"><!--使用table布局-->
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>菜单</b><br>
html<br>css<br>javascript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">版权#代号六零一</td>
</tr>
</table>
<!--第十二节：表单-->
<script>
//post:是HTTP-POST方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
//get:默认值，是HTTP-GET方法，表单数据会附加在action属性的URL中，并以？作为分隔符，一般用于不敏感的信息，如分页等，例如https://www.runoob.com/?page=1,这里page=1就是get方法提交的数据。
</script>
<hr>
<form action="/" method="post">
<!--文本输入框-->
<label for="name">用户名：</label>
<input type="text" id="name" name="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>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!--复选框-->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!--下拉列表-->
<label for="country">国家：</label>
<select name="country" id="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<!--提交按钮-->
<input type="submit" value="提交">
</form>
<!--第十三节：JavaScript脚本-->
<!--颜色是由红色、绿色、蓝色混合而成-->
<hr>
<div class="ten">
<script>
document.write("Hello World!");
//这个标签用于插入JS脚本语言
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
function myFunction1()
{
x=document.getElementById("demo1")//找到元素
x.style.color="#ff0000"//改变样式
}
</script>
<noscript>抱歉，你的浏览器不支持JavaScript</noscript><!--浏览器不支持JavaScript时弹出的提示-->
<p id="demo">JavaScript可以触发事件，就像按钮点击</p><!--注意：这里要用ID，不能用class，否则失效-->
<button type="button" onclick="myFunction()">点我回修改P段落的文字</button>
<p id="demo1">JavaScript改变HTML元素的样式</p>
<button type="button" onclick="myFunction1()">点击这里改变样式</button>
</div>
<!--第十四节：字符实体-->
<!--HTML中的预留字符必须被替换为字符实体，一些在键盘上找不到的字符也可以使用字符实体来替换-->
<hr>
<div class="a">
!<!--感叹号-->
<br>
<!--空格-->
$<!--美元符号-->
</div>
<script>
//备注：1.XHTML指的是可扩展的超文本标记语言；2.与HTML4.01几乎是相同的；3.是更严格更纯净的HTML版本；4.以XML应用的方式定义HTML；5.是2001年1月发布的W3C推荐标准；6.得到所有主流浏览器的支持。可以理解为XHTML是新一代的文本标记语言的标准
</script>
</body>
</html>
分类:
前端基础
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了