常见html标签有标题,文字加粗倾斜,段落,注释,超链接,图片,视频,音频等,下面详细介绍一下他们:
h(标题)标签:使用<h1>至<h6>标签进行定义。<h1>定义最大的标题,<h6>定义最小的标题。
权重依次为h1>h2>h3....类推,在做H标签的时候一定要注意切勿把H标签用在LOGO上面,还有就是注重在页面当中出现的次数,不易过多(SEO)。
Strong(加粗)标签,Em(倾斜)标签:对于网站而言这两种标签的作用非常类似,它们都是对网页内容当中的重要关键词来进行加强突出,让搜索引擎更为重视(SEO)。
a(定义超链接)标签:可以让我们从一个页面跳转到其他页面或者是当前页面的其他位置(行内元素)。
跳转到其他页面:
①属性:href 指定跳转的目标路径
--值可以是一个外部网站的地址
--也可以写一个内部页面的地址
②属性:target 指定超链接打开的位置
--self 默认值 在当前页面中打开超链接
--blank 在一个新的页面中打开超链接
另外超链接也是一个行内元素,在a标签中可以嵌套除它自身以外的任何元素
当前页面的其他位置:
①可以直接将超链接的href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部位置
②可以跳转到页面的指定位置,只有将href属性设置#加目标元素的id属性值(相当于锚点)
--id属性(唯一不重复的)
Ⅰ :每一个标签都可以添加一个id属性
Ⅱ:id属性就是元素的唯一标识同一个页面中不能出现重复的id属性值,如同身份证一样
③可以使用 javascript:;来作为href的属性,此时点击这个超链接什么也不会发生(相当于做占位符使用)
注释<!--HTML-->/*css*/标签:注释的内容会被浏览器忽略,不会在网页中直接显示,但可以在源码中查看注释,注释用来对代码进行解释说明,注释还可以将一些不希望显示的内容隐藏,另外注释不能嵌套(浏览器自上而下解析遇到注释结束标签-->或*/会与系统会误认为和最开始注释配成一对)。
img(图片)标签:图片标签用于向当前页面引入一个外部图片(该标签为自结束标签,行内块状元素)
属性:
src 指定的是一个外部图片的路径(路径规则和超链接是一样的)
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器图片会无法加载时显示,搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所解析
width 图片的宽度(单位是像素)
height 图片的高度(单位是像素)
--宽度和高度中如果只修改一个,则另一个会等比例缩放
注意:
一般情况下在pc端,不建议修改图片大小,需要多大图片就裁多大,但是在移动端,经常需要对图片进行缩放(大图缩小)
图片的格式:
jpeg(jpg)
-支持的颜色比较丰富,不支持透明效果,不支持动图
-一般用来显示照片
gif
-支持的颜色比较少,支持简单透明,支持动图
-颜色单一的图片,动图
png
-支持的颜色丰富,支持复杂透明,不支持动图
-颜色丰富,复杂透明图片(专为网页而生)
webp
-这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
-它具有其他图片格式的所有优点,而且文件还特别的小
-缺点是兼容性不好
base64(图片转换)
-将图片使用base64编码,这样可以将图片转化为字符,通过字符的形式引入图片
-一般都是一些需要和网页一起加载的图片才会使用base64
总之原则:效果一样用小的,效果不一样用好的
audio(音频) video(视频)标签:用来向页面中引入一个外部的音频文件,音视频文件引入时,默认情况下不允许用户自己控制播放停止。
属性:
src 指定的是一个外部文件的路径
controls:是否允许用户控制播放
autoplay:音频文件是否自动播放
-如果设置了autoplay则音乐在打开页面时会自动播放,但是目前大部分浏览器都不会自动对音乐播放
loop:循环播放
示例: