了解HTML5的新特性和CSS选择器

131 阅读2分钟

html5的新特性有哪些?

  1. 语义化标签,例如header,footer,section,article等 语义化标签的作用:提升页面的阅读性(结构性增强),更有利于SEO,对于使用屏幕阅读器的人来说会更友好(有明显的语气差别,例如strong标签内的内容会重读)
  1. 新增媒体元素,audio、video audio和video标签能够很容易的输出音频或视频流,提供便利的获取文件信息的API
  1. 用于绘画的canvas属性 Canvas API 提供了一个通过JavaScript 和 HTML的canvas元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
  1. 新增本地存储方式:sessionStorage、localStorage sessionStorage 用于存储会话级别的数据,会话关闭,数据消失,不可设置过期时间。 localStorage 用于存储需要进行持久化存储的数据,只要不主动删除,数据不会消失。
  1. 新的技术:webworker、websocket webworker:用于多线程编程 websocket:客户端与服务端双向数据通信协议
  1. 新增的表单控件:calendar、date、time、email、url、search

html5中行内元素与块级元素的区别?

1、块级元素总是在新行开始,行内元素和其他元素在同一行

2、块级元素的高度、行高可控制,行内元素的高度、行高部分可改变;

3、块级元素的宽度与内容无关,行内元素的宽度与内容有关。

css选择器优先级顺序

image.png

CSS选择器权重值越大优先级越高。

! important 规则 也是有弊端的尽量避免!

css选择器有哪些?

(1)通用选择器 *

(2)类别选择器(.class)    .home    选择class=”home”的所有dom元素

(3)ID选择器(#id)    #first    选择id=”first”的所有dom元素

(4)标签选择器(element)    div    选择所有div标签

(5)后代选择器(element element)    div p    选择div内部的所有p标签dom元素

(6)子选择器(element>element)    div>p    选择父元素为div的所有p标签dom元素

(7)群组选择器(element,element)    div,p    选择所有div和p标签dom元素

(8)相邻同胞选择器(element+element)    div+p    选择紧接在div之后的所有p标签dom元素

(9)伪类选择器(:link :visited :hover :nth-child(0) :first-child) 触发一定的“事件”来实现效果  了解

(10)伪元素选择器(:first-letter :first-line :before :after :lang(language))  向指定的选择器添加指定的效果 了解

(11)属性选择器( [title] [class~="logo"] )   CSS 属性选择器匹配那些具有特定属性或属性值的元素 了解

js的数据类型有哪些?

数据类型:Number、String、Boolean、Null、undefined、object、symbol、bigInt。