4-html常见标签

HTML常见标签

1、h系列标签

英文：headline（标题）

包含一共六级标题，有h1,h2,h3,h4,h5,h6

都是双标签，容器级标签

作用：给内部内容添加对应级别标题的语义

标签根据重要性不同，认为权重不同，所有的标题标签的权重都比别的标签要高

h系列标签的基本使用

<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>

2、p标签

英文：paragraph（段落）

双标签，文本级标签

作用：添加一个完整段落的语义

基本使用

<p></p>

3、img标签

英文：image（图片）

单标签，文本级标签

作用：在指定位置插入一张图片

img标签的属性

1. src: 作用是引入图片的路径

2. alt: 图片加载不出来时候的替换文本

<img src="images/345345.jpg" alt="我是鸟巢">

3. width: 设置图片的宽度

4. height: 设置图片的高度

<img src="images/1.jpg" alt="我是鸟巢" width="220px" height="10px">

<img src="images/1.jpg" width="220px">

只设置了宽度属性，我们看上图的高度是通过等比例缩放得到的

5. title：作用是设置鼠标以上图片时候的悬停文本

<img src="images/1.jpg" title="鸟巢的远景">

6. border：作用是给图片添加边框

<img src="images/0.jpg" alt="我是鸟巢" border="10" width="220px">

图片的border属性用来了解就可以了，因为我们真正加边框的时候是通过CSS实现的，因为边框不可能只有黑色

<img src="images/0.jpg" alt="我是鸟巢" style="border:10px dashed red" width="220px">

4、相对路径和绝对路径

相对路径：

从html文件出发，找到对应图片位置的路径

如果进入到某个文件夹使用‘/’，如果出某个文件夹使用‘…/’

同一路径
<img src="images/1.jpg" alt="">
如果文件夹内部是文件，图片在文件夹的外面
<img src="../1.jpg" alt="">
如果需要出多个文件夹，使用多个../
<img src="../../1.jpg" alt="">

绝对路径：

绝对路径重要分为盘符绝对地址，和网站的绝对地址

盘符绝对地址

<img src="C:/Users/lmpc/Desktop/1.jpg" alt="">

通过c盘根目录出发去查找你对应文件位置，工作中不使用这种方法，因为服务器没有c盘…这些目录

网站的绝对地址

<img src="https://bkimg.cdn.bcebos.com/pic/472309f79052982253a702cad8ca7bcb0a46d426?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg" alt="">

5、锚点<a></a>

英文anchor（锚）

双标签，文本级标签

作用：在指定位置添加一个超级链接，从而实现相应的跳转

a标签的属性

1. href: 英文hypertext reference （超文本引用）

<a href="http://www.baidu.com">跳转到百度</a>

上面的代码href属性跳转到百度网站，这个是绝对路径，我们也可以设置相对路径跳转

<a href="12_a标签的跳转.html">跳转到12文件</a>

2. target：作用是是否在新标签打开链接，值一定是”_blank”

<a href="12_a标签的跳转.html" target="_blank">跳转到12文件</a>

3. title属性：作用是鼠标移上文字之后的悬停文本

<a href="12_a标签的跳转.html" target="_blank" title="鼠标移上的文字">跳转到12文件</a>

页面锚点的使用

锚点的作用：实现点击超级链接从而实现页面内的跳转

有两种方法：

方法一

设置一个空锚点，然后给这个空锚点设置一个name属性值和锚的href属性是一的

锚，href属性，后面一定要加#号

<a href="#jbxx">基本信息</a>

锚点的点，name属性设置被跳转的点

<a name="jbxx"></a>

第二种方法

设置锚点的点为标签的id属性

先设置空锚点

<a href="#jbxx">基本信息</a>

锚点的点：由原来的a标签的name属性变为了其他标签id属性，id属性的值要和href一样

<h3 id="jbxx">基本信息</h3>