本文详细介绍了HTML中的常用标记，包括设置标题、样式、脚本、标题、水平线、注释、换行、图片、超链接、表格、列表等。重点讲解了如何使用`<title>`、`<style>`、`<script>`、`<h1>`至`<h6>`、`<hr>`、`<br>`、`<img>`、`<a>`、`<table>`、`<ol>`、`<ul>`和`<dl>`等标记，并探讨了路径、边框、宽度、高度、目标等属性的用法。
1. HTML中的常用标记
1.1 <head>标记中的常见标记
<title></title>—设置当前网页的标题
<meta>—单标记
例如:
<!DOCTYPE html>
<html>
<head>
<title>meta标记</title>
<!--1.设置当前网页的字符编码-->
<!--charset是meta的一个属性-->
<meta charset="utf-8">
<!-- 2.为搜索引擎定义关键词-->
<!--name/content是meta的一个属性-->
<meta name="keywords" content="HTML,CSS">
<!--3.为网页定义描述内容-->
<meta name="description" content="这是一个html网页">
<!--4.设置当前网页自动刷新-->
<!--http-equiv-->
<!--<meta http-equiv="refresh" content="5">-->
<!--5.设置当前在间隔时间以后自动跳转到其他页面-->
<!--<meta http-equiv="refresh" content="5,https://www.baidu.com/">-->
<!--6.设置当前网页的作者-->
<meta name="author" content="网星">
</head>
<body>
</body>
</html>
<style></style>—设置当前网页的css的内部样式块
<!DOCTYPE html>
<html>
<head>
<title>style标记</title>
<meta charset="utf-8">
<style>
p{
color: red;
font-size: 30px;
background-color: royalblue;
}
</style>
</head>
<body>
<p>测试style标记--设置当前网页的css的内部样式块</p>
</body>
</html>
<link>--导入外部样式文件【.css】到当前html文件中
rel=“stylesheet”
href=“独立的样式表文件路径”
例如:
test.css
p{
color: yellow;
font-size: 40px;
background-color: green;
}
Test3.html
<!DOCTYPE html>
<html>
<head>
<title>link标记</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>测试link标记--导入外部样式文件【.css】到当前html文件中</p>
</body>
</html>
<script></script>-–设置当前网页中需要执行的javascript脚本语言
例如:
<!DOCTYPE html>
<html>
<head>
<title>script 标记</title>
<meta charset="utf-8">
<script>
function testscript(){
window.alert("测试script标记");
}
</script>
</head>
<body>
<input type="button" value="测试script标记" onclick="testscript()" />
</body>
</html>
可以导入外部js文件进入当前html文件中
例如:
创建独立的js文件【test.js】
function testscript(){
window.alert(“测试script标记”);
}
test4.html
<!DOCTYPE html>
<html>
<head>
<title>script 标记</title>
<meta charset="utf-8">
<script src="test.js"></script>
</head>
<body>
<input type="button" value="测试script标记" onclick="testscript()" />
</body>
</html>
1.2 <body>标记中的常见标记
<h1> ~ <h6>------设置网页内容的标题
<h1> ~ <h6>标记的前后会自动换行
<h1>最大标题，<h6>最小标题
例如:
<!DOCTYPE html>
<html>
<head>
<title>h系列标记</title>
<meta charset="utf-8">
</head>
<body>
<h1>h1--标题标记</h1>
<h2>h2--标题标记</h2>
<h3>h3--标题标记</h3>
<h4>h4--标题标记</h4>
<h5>h5--标题标记</h5>
<h6>h6--标题标记</h6>
</body>
</html>
<hr>----单标记，设置一条水平的分割线
例如：
<!DOCTYPE html>
<html>
<head>
<title>h系列标记</title>
<meta charset="utf-8">
</head>
<body>
<h1>hr--单标记，设置一条水平的分割线</h1>
<hr align="left" color="red" width="300px" size="10">
<h2>color---设置分割线的颜色</h2>
<h2>width---设置分割线的长短</h2>
<h2>size---设置分割线的粗细</h2>
<h2>align---设置分割线的水平对齐方式【left center right】</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>p系列标记</title>
<meta charset="utf-8">
</head>
<body>
<h1>31省区市新增确诊病例25例，其中本土1例，在福建莆田</h1>
<hr>
<p>
9月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例
25例。其中境外输入病例24例（云南13例，河南3例，上海2例，福建2例，广东2例，
山西1例，四川1例），含5例由无症状感染者转为确诊病例（河南2例，广东2例，四川
1例）；本土病例1例（在福建莆田市）。无新增死亡病例。新增疑似病例2例，均为境
外输入病例（均在上海）。当日新增治愈出院病例50例，解除医学观察的密切接触者
1197人，重症病例较前一日减少1例。 境外输入现有确诊病例606例（其中重症病例7例
），现有疑似病例3例。累计确诊病例8592例，累计治愈出院病例7986例，无死亡病例。
截至9月10日24时，据31个省（自治区、直辖市）和新疆生产建设兵团报告，现有确诊病
例731例（其中重症病例7例），累计治愈出院病例89786例，累计死亡病例4636例，累计
报告确诊病例95153例，现有疑似病例3例。累计追踪到密切接触者1169405人，尚在医学
观察的密切接触者12090人。31个省（自治区、直辖市）和新疆生产建设兵团报告新增无
症状感染者21例，其中境外输入16例，本土5例（福建4例，均在莆田市；广东1例，在广
州市）；当日转为确诊病例5例（均为境外输入）；当日解除医学观察19例（境外输入18例
）；尚在医学观察的无症状感染者371例（境外输入345例）。
</p>
</body>
</html>
HTML 注释
解释说明html代码的含义
<!-- 注释内容 -->
不会被执行
可以使用注释调试代码
<br>—设置内容回车换行
在html文件中使用键盘上的回车键换行是没有效果，所以在html文件想要内容换行使用<br>标记
例如:
<!DOCTYPE html>
<html>
<head>
<title>p系列标记</title>
<meta charset="utf-8">
</head>
<body>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>
春眠不觉晓，<br>
处处闻啼鸟。<br>
夜来风雨声，<br>
花落知多少。<br>
</p>
</body>
</html>
HTML 格式化标签
例如:
<!DOCTYPE html>
<html>
<head>
<title>格式化标签</title>
<meta charset="utf-8">
</head>
<body>
格式化标签<br>
<b>定义粗体文本</b><br>
<em>定义字体倾斜</em><br>
<i>定义斜体字</i><br>
<small>定义小号字</small><br>
<strong>定义加粗字体</strong><br>
X<sup>2</sup>-2X+1=0<br>
X<sub>1</sub>=1; X<sub>2</sub>=-1;<br>
<ins>字体下面的下划线</ins><br>
<del>字体上面的删除线</del>
</body>
</html>
<img>---单标记,设置在html文件中显示图片
绝对路径–从操作系统的指定盘中的目录开始查找图片资源所形成的路径【不推荐】
例如:F:\20210907\HTML基础\20210911HTML基础(2)\code\imgs\avatar3.png
绝对路径缺点:
- 如果图片保存目录太深，图片的操作路径就会很长
2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。
相对路径–从当前网页开始查找图片资源所形成的路径【推荐】 - 图片与当前网页在同一个目录下【src=”图片名称”】
- 图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】
- 图片保存在当前网页所在目录的父文件夹中[…/—上一层]
网络地址 src=”url”
width–设置图片宽度
height–设置图片宽度
alt–设置图片的文字提示【当图片无法显示是才会显示】
例如:
<!DOCTYPE html>
<html>
<head>
<title>img标记</title>
<meta charset="utf-8">
</head>
<body>
<h4>src--设置图片的路径</h4>
<h4>绝对路径--从操作系统的指定盘中的目录开始查找图片资源所形成的路径</h4>
<img src="F:\20210907\HTML基础\20210911HTML基础(2)\code\imgs\avatar3.png">
<img src="F:/20210907/HTML基础/20210911HTML基础(2)/code/imgs/avatar2.png"><br>
<h4>绝对路径的缺点:<br>
1.如果图片保存目录太深，图片的操作路径就会很长<br>
2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。
</h4>
<h4>相对路径--从当前网页开始查找图片资源所形成的路径【推荐】</h4>
<h5>1.图片与当前网页在同一个目录下【src=”图片名称”】</h5>
<h5>2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】</h5>
<h5>3.图片保存在当前网页所在目录的父文件夹中[../---上一层]</h5>
<img src="avatar04.png">
<img src="imgs/avatar2.png">
<img src="../testimgs/avatar5.png">
<h4>网络地址 src=”url”</h4>
<img width="200px" height="200px" alt="测试img"
src="https://img0.baidu.com/it/u=2809737200,31955359&fm=26&fmt=auto&gp=0.jpg">
<h4>width--设置图片宽度</h4>
<h4>height--设置图片宽度</h4>
<h4>alt--设置图片的文字提示【当图片无法显示是才会显示】</h4>
</body>
</html>
超链接（链接）
href—设置链接地址
target —被打开的内容何处显示【_blank[新窗口] _self[覆盖当前窗口] ifram的name属性值】
id属性—设置超链接的编号【可以连接到当前网页中指定位置】
例如:
<!DOCTYPE html>
<html>
<head>
<title>a标记</title>
<meta charset="utf-8">
</head>
<body>
<h4><a id="top">a---超链接</a></h4>
<h5>href---设置链接地址</h5>
<h5>target ---被打开的内容何处显示【_blank[新窗口] _self[覆盖当前窗口] ifram的name属性值】</h5>
<h5>id属性---设置超链接的编号【可以连接到当前网页中指定位置】</h5>
<a href="F:\20210907\HTML基础\20210911HTML基础(2)\code\test1.html" target="_self">打开test1.html</a><br>
<a href="test2.html" target="_blank">打开test2.html</a><br>
<a href="https://www.baidu.com/">打开百度</a><br>
<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>章节 14</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 15</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 16</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 17</h2>
<p>这边显示该章节的内容……</p>
<a href="#top">回到顶端</a>
</body>
</html>
HTML 表格
<table>—表示表格
<thead>—表示表头
<tbody>—表示表格的身体
<tr>-----表格中的行
<td>----行中的列
注意:表格中没有内容的时候表格不显示
border–设置表格的边框
width / height----设置表格的宽度和高度
cellpadding—设置单元格中的内边距[单元格中的内容距离4边边框的距离]
cellspacing— 增加单元格之间的距离。
colspan–设置表格跨列【左右合并单元格】
rowspan–设置表格跨行【上下合并单元格】
例如:
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="1px" width="500xp" height="200px" cellpadding="20px" cellspacing="0">
<tr>
<td>1001</td><td>zhangsan</td><td>23</td><td>西安</td>
</tr>
<tr>
<td>1002</td><td>lisisi</td><td>24</td><td>北京</td>
</tr>
</table>
<hr>
<table border="1px" width="500xp" height="200px" cellpadding="20px" cellspacing="0">
<tr><td colspan="4">测试表格的跨列操作</td></tr>
<tr>
<td>1001</td><td>zhangsan</td><td>23</td><td>西安</td>
</tr>
<tr>
<td>1002</td><td>lisisi</td><td>24</td><td>北京</td>
</tr>
</table>
<hr>
<table border="1px" width="500xp" height="200px" cellpadding="20px" cellspacing="0">
<tr><td rowspan="3">测试表格的跨行操作</td></tr>
<tr>
<td>1001</td><td>zhangsan</td><td>23</td><td>西安</td>
</tr>
<tr>
<td>1002</td><td>lisisi</td><td>24</td><td>北京</td>
</tr>
</table>
</body>
</html>
HTML 有序列表
ol—表示有序列表
li—表示有序列表中的每一个项目
ol上添加type属性设置修改有序列表前面的标号【a A i I 1】
ol上添加start属性设置修改有序列表前面的标号的开始值
ul—表示无序列表
li—表示无序列表中的每一个项目
ol上添加type属性设置修改有序列表前面的标号【disc/circle/square】
dl—表示自定列表
dt—表示自定列表主项目
dd—表示自定列表中主项目里的子项目
例如:
<!DOCTYPE html>
<html>
<head>
<title>html中的列表</title>
<meta charset="utf-8">
</head>
<body>
<h4>有序列表</h4>
<ol type="A" start="3">
<li>班级:一年级一班</li>
<li>姓名:zhangsan</li>
<li>年龄:6</li>
</ol>
<h4>无序列表</h4>
<ul type="square">
<li>班级:一年级一班</li>
<li>姓名:zhangsan</li>
<li>年龄:6</li>
</ul>
<h4>自定义列表</h4>
<dl>
<dt>家用电器</dt>
<dd>空调</dd>
<dd>冰箱</dd>
<dd>洗衣机</dd>
<dt>手机/数码/运营商</dt>
<dd>手机</dd>
<dd>数码相机</dd>
<dd>中国移动</dd>
</dl>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
