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>