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.如果你给一个不存在的网址,那么不管你访问多少次,最后都会呈现未访问的的状态