获取页面元素

• document.querySelector("选择器");

  • 选择器可以是css中的任意一种选择器
  • 通过该选择器只能选中第一个元素

• document.querySelectorAll("选择器");

  • querySelectorAll会返回所有符合选择器规则的元素列表
  • querySelector返回的只是单独的一个元素

一、什么是语义元素

• 语义 = 意义
• 语义元素 = 元素的意义
• 一个语义元素能够清楚地描述其意义给浏览器和开发者

二、语义化优点：

• 为了在没有css时，也可以很好地呈现出内容结构，代码结构。
• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

新的表单元素

新的Input类型

新的表单控件

邮箱 type="email"

url type="url"

search type="search"

数字 type="number"

电话 type="tel"

滑块 type="range"

颜色 type="color"

日期 type="date"

选择一个日期（UTC 时间） type="datetime"

选择一个日期和时间 (无时区) type="datetime-local"

月份 type="month"

周 type="week"

时间 type="time"

audio标签

属性

• src : 音频的地址
• controls : 显示控制栏
• autoplay : 自动播放
• loop : 设置循环播放
• preload : (auto/metadata/none) 规定当网页加载时，音频是否默认被加载以及如何被加载。

兼容

source: 指定多个音频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容