2019-10-10【a标签、行内快级元素、】

html第一天总结

一、行内标签&块级标签

span标签可以同处一行，而p标签只能每个独占一行。
其本质原因是因为他们是不同类型的标签元素，
p是块级标签，span是行内标签
块级元素具有的特征就是独占一行，行内元素具有的特征就是允许多个行内元素同存一行、

诗词美句摘录

《水调歌头·丙辰中秋》

明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。

《前出师表》片段

臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间：尔来二十有一年矣。

二、布局标签

要在HTML显示图片是通过引入外部图片实现的，
src属性
“src"是图片的必要属性，
通过将该属性的值设置为 【硬盘或服务器地址上图片的绝对路径】 或 【HTML页面和图片间的相对路径】即可显示指定图片。
如下：
alt属性
由于网络的不稳定、部分用户的带宽较小或图片体积较大等原因，有的时候网页上的图片不能马上显示出来（路径错误会导致图片不能显示），
这个时候一个比较稳妥的做法，就是给予一定的文字说明，这个时候就需要用到标签内的“alt"属性，只需将“alt"的属性值设为需要提示的文本信息即可。
title属性
在对于需要进行说明的图片，或者单纯是为了提升用户体验，我有的时候需要为图片进行一定的简单描述，在特定的条件下，在图片旁边写上一串文本，既影响了布局，又显得突兀，这个时候我们就需要用到标签内的“title"属性.

在这里需要说明的是，“title"这个属性，是一个全局属性，最常用的地方虽然是标签，但它在其它几乎任何标签上都可以使用，包括文本标签。
标签的类型
关于行内标签和块级标签
我们讲已经知道了“行内标签"和“块标签"，明白了多个“行内标签"在限定的屏幕宽度内是不会换行的，而“块标签"则不然，每个“块标签"之间都会自动进行换行。
实际上，除此之外，他们间还有一个比较显著的区别，就是“行内标签"是不能进行大小（宽高）设置的，它的大小是由它里面的内容多少决定的。而“块标签"的大小是可以设置的
我们可以通过css来设置一个p和一个span标签的宽高来查看效果。
演示如下：
关于img标签的类型
而标签却既不是行内标签，也不是块级标签。或者说他既是行内标签也是块级标签（即他同时具有这两种标签类型的特征）
Img标签具有行内标签类型的特征：允许多个img标签或者多个行内标签同处一行。
Img标签也具有块级标签类型的特征：可以设置宽高等css属性。
演示如下：
总结:
现在我们就已经知道了html标签得我三种基本类型：
块级标签（div,p，article，section等），行内标签（span），行内块标签(img)
通过css强行改变标签元素的类型
Dsplay : block/inline-block/inline
如：
span {
display: block;
}

三、HTML超链接标签a

1.超链接标签（a标签）概述
1.具有使当前页面跳转到一个新的页面的功能的标签-------超链接标签（a标签）

2.超链接标签为双标签，写法如下：

3.超链接默认情况是一个“行内标签"，即在他不会独占一行,且默认情况无法设置宽高。
2.a标签基本的写法如下
打开百度

解释： 这句代码标签当用户点击这个标签后，打开百度站点
3.超链接标签（a标签）的主要属性
超链接标签的主要属性为 href 与 target
Href
打开百度
①　Href作用
决定此标签被点击后将跳转到那个文件，必须给出此属性。
如果没有这个属性，标签会类似于一个一样的文本标签，且不会给文字设置颜色和下划线。
②　Href值的类型
href的值，也就是要跳转的文件类型，可以是如下类型
【一个http/https协议的网站】
【一个站内网页】
【一个电子邮件地址】
【一张图片】
【一个文本文件】
【一个应用程序】
…

虽然类型很多，但是对他而言就只有两种情况：

1.当前浏览器能识别的类型【比如网站地址，图片地址，txt文档地址】就正常显示
2.当前浏览器不能识别的类型【比如: zip,doc,excel,ppt…】 就直接下载
Target 属性
打开百度

target属性决定以何种方式行进跳转或打开新的文件（是在当前窗口还是新窗口打开？）
target可以为以下值：
_blank ： 在一个新的浏览器窗口或标签页中打开页面或文件
_self ： 在当前浏览器窗口打开页面或文件
4.a标签实现锚点链接
即通过a标签跳转到网页中指定的位置
如果将标签的href属性值设置为#+当前页面中指定元素的ID值后，该超链接将不再是进行页面间的跳转或是文件的打开了，而是实现在当前页面的跳转【如果一些百科网页】

写法如下：
跳转到zl处

效果演示：
https://www.aulence.com/html-pages/html/codeEffect/code-10.html
百科html: https://baike.baidu.com/item/HTML/97049?fr=aladdin#5
5.a标签实现文件下载
标签除了能跳转到页面、文件，跳转页面位置，在HTML5中还能够定义一个文件的下载（强制下载，即便能识别也进行下载），并设置下载文件的名字。

要具有这个功能，我们需给它加上“download"属性，并指定一个文件下载后的名称。
大致形式如下：
<a href=“要下载的文件的地址” download=“下载后的文件的名称">

下载文件

注意：
1.需要以服务器的形式打开你的网页才能实现正常的下载。
2.在下载时，不能浏览器可能会有写不同的效果展现（因为不同浏览器对标准的实现效果不太一样）
3.我们可以把a标签中的”下载文本”四个字替换为，一个展示图片的标签，实现直接点击图片进行下载。

6.a标签回到页面顶部
我们在一个内容很多的网页中加上a标签，并且他的href属性赋值为#top，那么当我们点击这个超链接时可以让当前网页回到最顶部。

如下：

回到顶部

若网页中使用了这种方式让页面回到顶部的话，当前页面的所有元素都要避免使用“top"这个id值，否则该功能会失效。（此时会变成一个描点链接）

7.Href的值为特殊值时
href为正常百度地址

没有href，如同一个span标签，表示普通文本


#号(描点链接相关)


空格(会刷新)


void(会执行js代码，返回空，什么都不做)


alert(666),(会执行js代码，弹框)

8.a标签的几种状态
一个超链接从我们访问开始，会有几种状态，如下：

未点击： 颜色为蓝色，表示未访问此链接
点击中： 颜色为红色，表示即将访问此链接
点击后： 颜色为紫色，表示已访问此链接

注意：
1.如果我们使用css设置了一个颜色，那么他会强行覆盖上面的三种状态颜色。
2.对于已访问后的链接，就会变为紫色，然后会把当前情况存储在浏览器中，即便你从新运行此网页颜色仍然是紫色，甚至很多浏览关掉后在打开还是显示的已访问状态。
3.如果你的浏览器已经访问了某个网址，即便不是你的a标签打开访问的，也会显示为紫色。
4.如果你给一个不存在的网址，那么不管你访问多少次，最后都会呈现未访问的的状态