一、HTML中常用的标记（标签）
1.<head>标记中常用的标记
（1）<title></title>---设置当前网页的标题 <meta>---单标记
<!DOCTYPE html>
<html>
<head>
<title>mate标记</title>
<!--1.设置当前网页的字符编码-->
<mate charset="utf-8">charset是meta的一个属性-->
<!--2.为搜索引擎定义关键词，应用于让浏览器搜索-->
<mate name="keywords" content="html标记">
3.为网页定义描述内容，搜索引擎出来后每个页面的概括-->
<mate name="description" content="这是一个网页">
4.设置当前网页自动刷新-->
<!--<mete http-equiv="refesh" content="5">-->
<!--5.设置当前在间隔时间以后自动跳转到其他页面-->
<!--<meta http-equiv="refresh" content="5;https://www.baidu.com">-->
<!--6.设置当前网页的作者-->
<meta name="author" content="网星">
</head>
<body>
</body>
</html>(2)<style></style>---设置当前网页的css的样式块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>style标记</title>
<style>
p{
color: red;
font-size: 30px;
background-color: royalblue;
}
</style>
</head>
<body>
<p>P标记测试style标签--设置当前网页的css的内部样式块</p>
</body>
</html>
*在HTML中使用css的方法：
a.在HTML文件内<head>标记中直接使用<style>标记完成样式 
b.使用<link>--导入外部样式文件【.css】到当前html文件中
例如：
test.css
p{
color: rgb(240, 237, 61);
font-size: 30px;
background-color: rgb(64, 221, 43);
}在test3.html文件中导入样式脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>style标记</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>P标记测试style标签--设置当前网页的css的内部样式块</p>
</body>
</html>
（3）<script></script>---设置当前网页中需要执行的javascript脚本语言
例如：
<!DOCTYPE html>
<html>
<head>
<title>script 标记</title>
<meta charset="utf-8">
<script>
function testJs(){
window.alert("测试script标记");
}
</script>
</head>
<body>
<input type="button" value="测试script标记" onclick="testJs()">
</body>
</html>
*可以导入外部js文件进入当前html文件中
例如:
创建独立的js文件【test.js】
function testJs(){
window.alert("测试script标记(2)");
}在test5.html文件中导入js脚本
<!DOCTYPE html>
<html>
<head>
<title>script 标记</title>
<meta charset="utf-8">
<script src="test.js"></script>
</head>
<body>
<input type="button" value="测试script标记" onclick="testJs()">
</body>
</html>
2.<body>标记中的常见标记
(1)<h1> ~ <h6>------设置网页内容的标题
<h1> ~ <h6>标记的前后会自动换行<h1>,最大标题，<h6>最小标题
<!DOCTYPE html>
<html>
<head>
<title>h1-h6标记</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>
(2)<hr>----单标记，设置一条水平的分割线
<!DOCTYPE html>
<html>
<head>
<title>hr系列标记</title>
<meta charset="utf-8">
</head>
<body>
<h1>hr--单标记，设置一条水平的分割线</h1>
<!--color---设置分割线的颜色
width---设置分割线的长短>
size---设置分割线的粗细
align---设置分割线的水平对齐方式【left center right】-->
<hr color="red" width="300px" size="10" align="left">
</body>
</html>
(3)<p>---在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>
(4)<br>---设置内容回车换行
在html文件中使用键盘上的回车键换行是没有效果，所以在html文件想要内容换行使用
<!DOCTYPE html>
<html>
<head>
<title>p系列标记</title>
<meta charset="utf-8">
</head>
<body>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>
春眠不觉晓，<br>
处处闻啼鸟。<br>
夜来风雨声，<br>
花落知多少。<br>
</p>
</body>
</html>
(5)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>
(6)<img>---单标记,设置在html文件中显示图片
<!DOCTYPE html>
<html>
<head>
<title>img标记</title>
<meta charset="utf-8">
</head>
<body>
<!--
src--设置图片的路径
width--设置图片宽度
height--设置图片宽度
alt--设置图片的文字提示【当图片无法显示是才会显示】-->
<h4>绝对路径--从操作系统的指定盘中的目录开始查找图片资源所形成的路径</h4>
<img src="E:\wangxingPeiXun\HTML基础\HTML基础（2）\testimgs\2048475.jpg" width="300px">
<img src="E:\wangxingPeiXun\HTML基础\HTML基础（2）\testimgs\2048559.jpg" width="300px"><br>
<h4>绝对路径的缺点:<br>
1.如果图片保存目录太深，图片的操作路径就会很长<br>
2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。</h4>
<h4>相对路径--从当前网页开始查找图片资源所形成的路径【推荐】</h4>
<h5>1.图片与当前网页在同一个目录下【src=”图片名称”】</h5>
<h5>2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】</h5>
<h5>3.图片保存在当前网页所在目录的父文件夹中[../---上一层]</h5>
<img src="avatar2.png">
<img src="img/avatar04.png">
<img src="../testimgs/avatar5.png">
<h4>存放其他网页图片<br></h4>
<img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" width="300px">
</body>
</html>
(7)<a> 超链接（链接）
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="test.html" target="_self">打开test.html文件</a>
<a href="test10.html" target="_blank">打开test10.html文件</a>
<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>（8）HTML 表格
<table>---表示表格
<thead>---表示表头
<tbody>---表示表格的身体
<tr>-----表格中的行
<td>----行中的列
注意:表格中没有内容的时候表格不显示
border--设置表格的边框
width / height----设置表格的宽度和高度
cellpadding---设置单元格中的内边距[单元格中的内容距离4边边框的距离]
cellspacing--- 增加单元格之间的距离。
colspan--设置表格跨列【左右合并单元格】
rowspan--设置表格跨行【上下合并单元格】
l例如：
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="1px" cellpadding="20px" cellspacing="0" align="center" width="400px">
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
</tr>
<tr>
<td>1002</td>
<td>lisi</td>
<td>24</td>
</tr>
</table>
<br>
<table border="1px" cellpadding="20px" cellspacing="0" align="center" width="400px">
<tr>
<td colspan="3">测试表格的跨列操作</td>
</tr>
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
</tr>
<tr>
<td>1002</td>
<td>lisi</td>
<td>24</td>
</tr>
</table>
<br>
<table border="1px" cellpadding="20px" cellspacing="0" align="center" width="400px">
<tr>
<td rowspan="3">测试表格的跨列操作</td>
</tr>
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
</tr>
<tr>
<td>1002</td>
<td>lisi</td>
<td>24</td>
</tr>
</table>
</body>
</html>
（9）列表
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>
<meta charset="utf-8">
</head>
<body>
<!-- 有序列表,type--设置序号【A a 1 I i】 -->
<h4>有序列表</h4>
<ol type="">
<li>编号1</li>
<li>编号2</li>
<li>编号3</li>
</ol>
<h4>无序列表</h4>
<!-- 无序列表,type--设置序号【disc(实心圆)/circle空心圆/square实心方块】 -->
<ul type="square">
<li>fxt</li>
<li>htt</li>
<li>ch</li>
</ul>
<!--自定义列表-->
<h4>自定义列表</h4>
<dl>
<dt>家电</dt>
<dd>电视机</dd>
<dd>冰箱</dd>
<dd>洗衣机</dd>
</dl>
<dl>
<dt>文具</dt>
<dd>铅笔</dd>
<dd>橡皮</dd>
<dd>文具盒</dd>
</dl>
</body>
</html>
3138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
