HTML&CSS3(1)

语义化标签

什么是语义化标签

​通过该标签的名称,就可以知道标签中的内容属于怎样的内容,比如a标签的意思是超链接,p标签的意思是段落,h 标签代表标题

新增的语义化标签

  • header 代表网页或任意一块区域的头部
  • nav 整个页面的导航部分
  • main 整个页面的主要区域
  • section 整个页面的一大块内容
  • article 一篇文档 是独立的一块内容
  • aside 侧边栏
  • footer 代表网页或任意一块区域的底部

处理新增语义化标签的兼容问题

1
2
3
4
// lte 的意思是: l(小于)  t   e(等于)   组合起来就是: 小于等于 IE 8 
<!--[if lte IE 8]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->

表单中的新类型

为什么在表单中添加了新的输入类型

在表单输入的过程中,, 因为用户的个人习惯会输入各种格式的内容,为了在必要的时候统一格式

表单中新的类型介绍

  • email 会验证邮箱的格式,如果输入错误会提示
  • url 会验证输入的url是否带有http或https协议前缀,如果没有,会提示
  • search 在有内容的清空下,会出现清除按钮 其他情况和普通text类型一样
  • number 可以控制输入的数字的范围和步进值
  • time 可以允许我们选择时间 并且规范时间的格式
  • datetime-local 可以允许我们选择时间和日期
  • color 可以让我们去选颜色

表单中的新属性

为什么要给表单添加新的属性

|

表单中的属性介绍

  • placeholder 提示用户在输入框中输入什么内容
  • autocomplete 自动完成
  • autofocus 自动聚焦
  • required 必填
  • pattern 自定义验证
  • multiple 多选,只能用在type=file的表单中

总结

  • 最常用的表单属性有: placeholder ,required,pattern

多媒体标签

为什么需要多媒体标签

多媒体标签介绍及使用

audio

1
<audio src="./mp3/1.mp3"></audio>

video

1
<video src="./mp3/1.mp4"></video>

音频和视频格式了解

音频格式(一定去测 因为浏览器在更新 所支持的格式也在更新)

视频格式(rmvb avi mp4 flv wav 下载一个格式工厂 转一下)

|

h5中获取元素的新方法

为什么要学习获取元素的新方法

|

新方法介绍

  • document.querySelector(符合css选择器规则的元素) id 类名选择器 如果符合css选择器规则的有很多 那只能得到且只有第一个
  • document.querySelectorAll(符合css选择器规则的元素) 一组 就算只有一个 那返回的也是数组

h5中操作类名的新方法

新方法介绍

  • node.classList.add() 添加类名
  • node.classList.remove() 删除类名
  • node.classList.toggle() 切换类名
  • node.classList.contains() 包含类名