（1）HTML笔记（标签）_qq名沭瑾-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoma_666/article/details/97150497

1、什么是标签

标签是由一对尖括号组成的。

种类：

单标签：<img />

双标签：<html></html>

双标签是由同一对标签组成的，前面<html>是开始标签，后面</html>是结束标签。

2、HTML文档的构成

网站三要素与网页三要素参考转载地址：（http://www.580plan.com/articles/changjianwenti/3581.html）

<!doctype html><!-- 声明文档类型 html5版本 具有向下兼容低版本的功能  -->
<html>
	<head><!--头部 : 不可视区域：看不到的内容 -->
		<meta charset='utf-8'/>
		<!-- 网页的三要素：网页标题 ，网页关键词，网页描述（简称TDK） -->
		<title>  </title>
		<meta name='keywords' content=''/><!-- 元标签 -->
		<meta name='description' content=''/>
	</head>
	<body><!-- 身体: 可视区域。 -->
	</body>
</html>

3、常用的标签

1.标题标签：h1（一级标题）h2（二级标题）h3（三级标题）h4（四级标题）h5（五级标题）h6（六级标题）

特点：字体都是有加粗的效果，同时h1到h6的字体逐渐变小！与seo息息相关！

与seo的关系可参考转载地址：（https://www.cnblogs.com/jerain6312/articles/4679494.html）

2.p标签：段落标签

3.strong/b标签：加粗标签

两者区别在于前者与seo相关，后者只是普通加粗的效果！

与seo的关系可参考转载地址：（https://www.4xseo.com/basis/1409/）

4.em/i标签：倾斜的效果

em与seo相关，i标签只是普通倾斜的效果

5.span标签区分样式的标签

与普通的文本样式区别开来

6.sup 上标

sub 下标

<p> 我明年的目标：1000000000 ，这个项目需要和你谈一下！</p>
<p> 我明年的目标：10<sup>9</sup> ，这个项目需要和你谈一下！</p>
<p>	C + 02 =>CO2 </p>
<p>	C + 0<sub>2</sub> =>CO<sub>2</sub> </p>

7.列表标签

ul li 无序列表

disc 默认实心圆

circle 空心圆

square 方块

ol li 有序列表

注意：错误写法：不能在ul/ol子集直接嵌套其他标签，必须在li子元素再去嵌套标签！

自定义列表：

dl dt dd

dt 大多都用来作为文本的标题

dd 用来编辑内容

8.img标签

img ：图片标签（单标签）

常用的图片类型：

.jpg

.png 大多数为透明图

.gif 动态度

图片四要素

路径src

宽度width

高度height

alt 标记：同样跟seo有关

title标题

路径问题：

./ 进入当前目录

/ 进入子目录下面

相对路径与绝对路径：

相对路径：

相对于.html文本出来的

绝对路径（两种绝对路径）：

从盘符出发

从域名出发

缺点：绝对路径的缺点在于，如果当时的路径发生改变，图片就会消失。

<img src="file:///C:/Users/MACHENIKE/Desktop/img/daughter.png" alt="" />		
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542733409205&di=28f58608bfc73cfd93e794f85ecb6774&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D34934caedaa20cf4529df69c1e602143%2F30adcbef76094b36c1bed0c4a9cc7cd98d109def.jpg" alt="" />

9.a 标签超链接标签

href=" " 实现页面的跳转

跳转页面target

_self 当前页面默认

_blank 新页面打开

<a href='https://www.baidu.com/' target='_self'> 点我跳转到百度 </a>
<a href='#'> 点我不能跳转 </a>
<a href="javascript:;"> 点我不能跳转 </a>
<a href="javascript:void(0);"> 点我不能跳转 </a>
<a href='jd.com'  target='_blank'> 点我跳转到京东 </a>
<a href='https://www.jd.com/'  target='_blank'> 点我跳转到京东 </a>

锚点：

<a href="#p1">我要跳转到p1</a>
<a href="#p5">我要跳转到p5</a>
<a href="#p6">我要跳转到p6</a>
		
<p id="p1">我是第1个</p>
<p id="#2">我是第几个</p>
<p id="#3">我是第几个</p>
<p id="#4">我是第几个</p>
<p id="p5">我是第5个</p>
<p id="p6">我是第6个</p>