HTML5新增知识点 | 青训营笔记

MATCHA
154 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第2天

HTML5新增语义

  • < header >：头部标签
  • < nav >：导航标签
  • < article >：内容标签
  • < section >：定义文档某个区域
  • < aside >：侧边栏标签
  • < footer >：尾部标签 image.png

注意：

  1. 这种语义化标准主要是针对搜索引学的
  2. 这些新标签页面中可以使用多次
  3. 在IE9中，需要把这些元素转换为块级元素
  4. 移动端更喜欢使用这些标签

多媒体标签

视频

<viedo src="文件地址" controls="controls"></viedo>

当使用低版本或不兼容的浏览器时：（从上到下执行）

<viedo controls="controls" width="300">
    <source src="move.ogg" type="video/ogg">
    <source src="move.mp4" type="video/mp4">
    您的浏览器暂不支持<video>标签播放视频
</viedo>

常见属性 image.png

音频

<audio src="文件地址" controls="controls"></audio>

当使用低版本或不兼容的浏览器时：（从上到下执行）

<audio controls="controls" width="300">
    <source src="hi.mp3" type="audio/mpeg">
    <source src="hi.ogg" type="audio/ogg">
    您的浏览器暂不支持<audio>标签
</audio>

常见属性 image.png

注意：

  • 谷歌浏览器把音频和视频自动播放禁止了
  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签添加muted属性来静音播放视频，音频不可以(可以通过JavaScript解决)
  • 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设大小属性

HTML5新增input类型

image.png

image.png

HTML5新增选择器

属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或id选择器

image.png

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素.常用于根据父级选择器里面的子元素 image.png
nth-child(n)选择某个父元素的一个或多个特定的子元素

  • n可以是数字.关键字和公式
  • n如果是数字， 就是选择第n个子元素，里面数字从1开始..
  • n可以是关键字 :even偶数 ，odd 奇数
  • n可以是公式:常见的公式如下(如果n是公式，则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)

image.png

<style>
    /*1.把所有的偶数even的孩子选出来*/
    ul li:nth-child(even){
        background-color:#ccc;
    }
    /*2.把所有的奇数odd的孩子选出来*/
    ul li:nth-child(odd){
        background-color:#gray;
    }
    /*3.nth-child(n)从0开始每次加1，往后面计算，这里面必须是n，不能是其他的字母。选择了所有的孩子*/
    ol li:nth-child(n){
        background-color:#white;
    }
</style>

nth-child和nth-of-type的区别
nth-child会把所有的盒子都排列序号，执行时先看nth-child(1)，之后回去看前面div。
nth-of-type会把指定元素的盒子排列序号，执行时首先看div指定的元素，之后回去看nth-of-type(1)第几个孩子

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签，从而简化HTML结构。 image.png 注意：

  • before和after创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法: element:before{}
  • before和after必须有content属性
  • before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为1

网站favicon图标

1. 制作图标

  1. 把所需图标切成png图片
  2. 把png图片转换成ico图标，这需要借助于第三方转换网站，例如比特虫：www.bitbug.net

2. 把favicon图标放到网站根目录下

image.png

3. HTML页面引入favicon图标

在html页面里面的< head >< /head >元素之间引入代码
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"

logo SEO优化

  1. logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
  2. h1 里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。
  3. 为了搜索引擎收录我们，我们链接里面要放文字(网站名称)，但是文字不要显示出来。
    • 方法1：text-indent移到盒子外面(text-indent:-9999px)，然后overflow:hidden，淘宝的做法。
    • 方法2：直接给font-size:0;就看不到文字了，京东的做法。
  4. 最后给链接一个 title属性,这样鼠标放到logo上就可以看到提示文字了。
avatar
文章
阅读
粉丝