跟着艾文一起学前端-第3篇-HTML的常用标签（1）

标签类型：

1. 小夫妻成双对-双标签

特点

两个标签，又开始标签<xxx> 和结束标签</xxx>，且结束标签的名称最前面是一个斜杠"/"。常用的有：

（1）标题标签<hn></hn>

这里的h是headline 标题的意思，n代表级别取值为1到6，也就是说标题的级别可以分为6级，举例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Arvin's title</title>
</head>
<body>
   Hi Arvin!!! very cool!
   <h1>h1--我是一级标题</h1>
   <h2>h2--我是二级标题</h2>
   <h3>h3--我是三级标题</h3>
   <h4>h4--我是四级标题</h4>
   <h5>h5--我是五级标题</h5>
   <h6>h6--我是六级标题</h6>
</body>
</html>

注：咱们之前讲到过，除了<head>标签里面放的，都是放在<body>标签中，如果我没有特殊说明的话，基本上都是在<body>标签中的哦

展示效果如下图所示：
在这里插入图片描述
这个时候咱们可以看出来h1到h6，六个标题的级别层次感

注：同时我们发现图中红色框弹出了语言选项，这是为什么呢?看咱们的代码中第2行<html lang=“en”> 因为这里的lang值是en（English），所以浏览器认为页面是英文，chrome浏览器提供了翻译功能，是不是很强大，但是为了防止它之后老是弹出，咱们这里把它改为lang=“zh”，zh就是中文的意思。可以尝试一下修改后保存再在浏览器中打开，发现就没有那个弹窗提示了。

（2）段落标签 <p></p>

我们在看一整篇文章的时候它是一个一个的段落构成的，这里的<p>标签的作用就是，被它包裹的内容就是一个段落

（3）布局标签
- <div> </div>
- <span> </span>
  什么式布局标签呢，咱们现在可以简单的理解为，它俩都是一块画板，画板上咱们可以画各种东西，它们两个的作用就是作为其他标签的容器。 div是division的缩写，是“区域”的意思，span是“跨度”的意思，也是范围性的意思。至于他们两个的区别后续咱们还会讲到，今天只是对常用标签的一个介绍。如果要细讲的话，篇幅太长。就目前所学的只是来说，div和span两个标签都是看不出来效果的，示例：
```
<body>
Hi Arvin!!! very cool!
<h1>h1--我是一级标题</h1>
<h2>h2--我是二级标题</h2>
<h3>h3--我是三级标题</h3>
<h4>h4--我是四级标题</h4>
<h5>h5--我是五级标题</h5>
<h6>h6--我是六级标题</h6>
<div>我是&lt;div&gt;布局标签</div>
<span>我是&lt;span&gt;布局标签</span>
```

``` 效果图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020031415122453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3NjQzNTg=,size_16,color_FFFFFF,t_70)

（4）文本格式化标签

标签名称	中文解释	效果
<strong></strong>	强壮，这里应该是强调或者是浓厚的意思	strong
<b></b>	咱们平时用过office软件应该知道B是加粗的意思和strong同样效果，这是HTML5之前的用法，废弃，不推荐，了解就行	b
<del></del>	delete 的缩写，删除的意思，这里是删除线	~~原价：19999~~
<s></s>	和delete的作用一样，也是HTML5之前的用法，废弃	~~原价：19999~~
<ins></ins>	因为看不出来这个是哪个单词的缩写，网上查了一下，合理的解释叫做inserted text，插入的文本，一般我们填表格或者登记信息的时候都是写在横线上，不得不说，老外的这个想法很直观，直观到你不能明白它的意思，意会一下吧	姓名：艾文
<u></u>	这个跟office中的U一样，就不解释了，但是废弃	姓名：艾文
<em></em>	emphasized text 强调的文字，我们可以看到印刷的文字有好多斜体一般都是被强调的意思，老外他们认为斜体就是强调的意思，所以em就是emphasize强调的意思	考试重点：第一章
<i></i>	这个是office软件中的大写的倾斜的i，不解释了	考试重点：第一章

（5）链接标签<a></a>

a是anchor text的缩写，是锚文本的意思，用来描述改文本指向的页面或者是锚点定位（这个要等之后学习到的时候再详细探讨）。基本语法格式如下：

<a href="跳转的目标，可以是自己的html页面也可以是网络链接地址" target="这里说明该文字点击后，目标页面的展现方式，比如说是在当前页签内展示，还是在新页面展示">百度一下</a>

<a>标签的属性值说明：

属性名称	属性值	说明
href	跳转目标地址	Hypertext Reference 叫做超文本引用
target	#，_self,_blank	#代表空连接，点击后不跳转；self为默认值，在当前窗口打开的意思；blank为在新窗口中打开

2. 单身贵族-单标签

特点：单个的标签，不包裹任何标签，在标签后加一个空格然后是一个斜杠"/"。比较常用的有

(1)划清界限-水平线标签<hr />

hr是 Horizontal line 水平线的意思，顾猜测它应该是horizon的缩写，它的效果如下：

这一条线就是<hr />所展示的效果。

(2)不愿不追随的换行标签<br />

br在这里应该是break的缩写，可以理解为打断的意思，一句话给他打断，分到下一行展示：效果：“你好
呀”，其实我是在你好与呀之间放了一个<br />标签，它就被浏览器解释为换行的意思。

（3）图片标签<img />

image的缩写，是图像、图片的意思，使用方法是通过该标签的src属性指定图片的路径名称，这里我建了一个images文件夹，里面放了一张图片"arvin-logo.jpg",使用方法，如下图所示：
在这里插入图片描述
效果图：

image标签的属性：

属性名称	属性值	说明
src	URL	是source 源的缩写，值是图片的路径，可以是本地的文件路径也可以是网络链接
alt	文字，比如说“哎呀，图片丢失了”	alternative text ，替换性文字的意思，它是图片不能正常展示时的提示性文字
title	也是文字	图片标题，鼠标移到图片上显示的文字
width	像素或者百分比	图片的宽度
height	像素或者百分比	图片的高度，一般width和height设置一个值就行了，浏览器会帮我们等比缩放的，两个都设置如果错了会被拉伸变形的
border	数字	边界的意思，用来设置图片的边框，我们可以理解为给照片加了一个相框

html中的特殊字符如何展示在页面上，比如说你想把你的代码直接展示在页面上，会发现展示不了，是因为它们被浏览器解释执行了，关于特殊字符，请查看另一篇文章：HTML中字符实体

注释标签

如果说现在你能看懂你写过的代码的话，是很正常的，因为刚刚写完，但是如果时间长了再回来看看，或者说你的页面中有几千行代码，你想知道某一块代码是干什么的，是不是很难快速的知道或者定位？这时候，我们就要把注释给加上去，为什么加注释呢，主要是为了方便自己查阅，也是为了工作过程中团队协作时你的小伙伴也能更好的读懂你写的代码是什么功能。我们知道HTML是标签语言，所有的标签语言的注释是通过<!-- 注释说明文字–>它是以“<!–”即左尖括号<叹号!和两个-英文短线开头加上注释的内容，最后以两个英文短线-和右尖括号>结尾，包裹起来的。所有注释内容浏览器不予以执行，为了方便理解代码我稍后会将加入注释的代码在文章的末尾给出

标签关系

1.父与子-嵌套关系

标签之间是包裹关系的被称为是嵌套关系或者是父子关系，外层标签叫父标签，内层标签是子标签。

2.兄弟姊妹-平级并列关系

并列着的标签被称为兄弟关系或者说姊妹都一个意思。
如下图：
在这里插入图片描述

红色的<html>标签里面包含了黄色的<head>标签和<body>标签，所以<html>相对于<head>标签和<body>标签来说就是父标签，红色框选标签是黄色框选标签的父标签，他们之间的关系就是父子关系。

两个黄色框选的标签，<head>标签和<body>标签他们并没有包含关系，所以他们是兄弟关系，HTML中各个标签只有父子或者是兄弟关系，没有其他情况。

最后附上本次代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Arvin's title</title>
    </head>
    <body>
        Hi Arvin!!! very cool!
        <!-- 注释 ，这里的内容不被浏览器执行-->
        <!-- 双标签 标题标签 h1到h6 -->
        <h1>h1--我是一级标题</h1>
        <h2>h2--我是二级标题</h2>
        <h3>h3--我是三级标题</h3>
        <h4>h4--我是四级标题</h4>
        <h5>h5--我是五级标题</h5>
        <h6>h6--我是六级标题</h6>
        <!-- 布局标签 -->
        <div>我是&lt;div&gt;布局标签</div>
        <span>我是&lt;span&gt;布局标签</span> 
        <br /><!-- 换行标签-->
        <!-- 图片标签 -->
        <img src="images/aivin-logo.jpg" />
        <br />
        <a href="http:www.baidu.com">百度一下</a>
        
        <br />
        <strong>粗体</strong>
        <em>斜体</em>
        <del>原价：19999</del>
        <ins>下划线</ins>
    </body>
</html>

效果图：
在这里插入图片描述