HTML5+CSS3 学习笔记1

HTML5

概念

1. 而是HTML语言的第五次重大修改——版本
2. 支持所有主流浏览器(IE9以上有选择的支持，但是IE8及以下不支持)
3. 改变了用户与文档的交互性：多媒体：vidio、audio、canvas
4. 增加了其他的特性：语义特性，本地存储特性、网页多媒体、二维三维、特效（过渡、动画）
5. 相对于h4：
   • 进步：抛弃了一些不合理不常用的标记和属性。
   • 新增了一些标记和属性——表单。
   • 从代码角度而言，h5的网页结构代码更简洁。

新增语义标签

标签名	说明
nav	导航
header	页眉
main	文档主要内容
article	文章
aside	主题内容之外
footer	文档 或 页脚

结构如下：

    
    


    
头部
    
导航
    

        
左边
        
右边
    
    
底部

关于语义标签的兼容性

IE9:行级元素在设置宽度的时候是失效的（解决方法：设置display:block;）
IE8：完全不支持语义标签（不支持HTML5）–在IE8中，它不认识语义标签，所以无法解析这些标签，也就意味着缩写的样式无效。
解决方法：

1. 手动创建标签；即document.createElement("标签名");–注意:默认的标签都是行级元素。
2. 引入第三放插件html5shiv.min.js，即 在默认情况下，IE8及以下的IE版本不支持HTML5，引入这个文件就能兼容。

表单新增

参考代码：

        电子邮箱：

        电话：

        网址：

        数量：

    	商品名称：

        范围：

    	颜色：

        时间：

        日期：

        日期时间：

        日期时间：

        月份：

        星期：

新增type属性

邮箱email

格式：
作用：提供了默认电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称；如果不能满足验证，则会阻止当前的数据提交。

电话tel

格式：
作用：为了能够在移动端打开数字键盘；意味着数字键盘限制了用户只能输入数字。
注意：不具备验证功能。验证功能参考表单新增其他属性。

网址url

格式：
作用：验证只能输入合法的网址：必须包含http://

数量number

格式：
作用：只能输入数字（包含小数点），不能输入其他字符。value设置默认值；max设置最大值；敏设置最小值。

search

格式：
作用：可以提供更人性化的输入体验，在输入后含有清空按钮作用。

范围range

格式：
作用：设置进度条

颜色color

格式：
作用：颜色拾取器

时间time

格式：
作用：时分秒`

日期date

格式：
作用：年月日

日期时间1 datetime

格式：
作用：年月日 时分秒

• 注意：大多数浏览器不能支持，只能Safari支持

日期时间2 datetime-local

格式：
作用：年月日 时分秒

月份month

格式：
作用：月份

星期week

格式：
作用：星期

表单新增其他属性

参考代码：

    	电子邮箱：

        电话：

        网址：

        数量：

    	商品名称：

        范围：

    	颜色：

        时间：

        日期：

        日期时间：

        日期时间：

        月份：

        星期：

        
        用户名：

        电话：

        文件：

        电子邮箱：

        

    
    地址：

placeholder

作用：提示文本，提示占位。

autofocus

作用：自动获取焦点。

autocomplete

取值：on打开、``off`关闭
作用：自动完成。
使用前提：

1. 必须成功提交过
2. 当前元素必须有name属性

required

作用：必须输入；如果没有输入则会阻止当前数据提交。

pattern

作用：添加验证——正则表达式
补充：

1. *：表示任意个
2. ?：表示0个或1个
3. +：表示1个或多个

multiple

作用：

1. 可以选择多个文件
2. 可以允许输入多个邮箱地址–以逗号,分隔

form

作用：指定表单id，可以实现将表单外的元素提交到指定表单。

• 注意：指定表单form需要有id属性值

表单新增元素

参考代码：

        专业：

        

    	用户名：

        密码：

        加密：

        
    
    
总金额：￥100.00

datalist

作用：不仅可以输入，还可以进行选择。
使用：给input元素指定list属性的值–为datalist的id属性值

• 注意：如果input输入框的type类型是url，那么value值必须添加http://

格式：

keygen

作用：密钥对生成器–生成公钥、私钥。
说明：当提交表单时，会生成两个键，一个是私钥，一个是公钥。私钥存储于客户端，公钥则会被发送到服务器。公钥可用于之后验证用户的客户端证书，即实现非对称加密目前，浏览器支持率极低。
格式：

output

作用：显示输出信息（只能显示不能修改）
说明：

1. 语义性更强
2. 值需要设置，不能自动计算。
   格式：

新增表单事件

参考代码：

    

    	用户名：

        电话：

        
    
    

oninput 当内容改变时

作用：监听当前指定元素内容的改变（添加、删除内容）。

onkeyup 当键盘弹起时

作用：每一个键弹起都会触发该事件。

oninvalid 当验证不通过时

应用：当验证不通过时，设置默认的提示信息。——调用this.setCustomValidity("")

• 注意：要存在验证——pattern属性

新增标签——进度条

1. progress

格式：
属性：
1. max：最大值
2. value：当前进度值

2. meter

作用：度量器，衡量当前进度值（体现出来）。
格式：
属性：
1. max：最大值
2. min：最小值
3. high：规定的较高的值
4. low：规定的较低的值
5. value：当前度量值
实现效果参考代码：

新增标签——多媒体

audio 音频

格式：
属性：
1. src：音频文件路径；取值 路径
2. controls：播放器控制面板
3. autoplay：自动播放
4. loop：循环播放

video 视频

格式：
属性：
1. src：视频文件路径；取值 路径
2. controls：播放器控制面板
3. autoplay：自动播放
4. loop：循环播放
5. width：宽度；取值 长度单位
6. height：高度；取值 长度单位 （注意：一般情况下只会设置宽度或高度，自动等比缩放；如果同时设置宽高，那么视频并不会真正调整到设置的宽高，除非设置的值刚好是等比例的。）
7. poster：当视频还没有完全下载或者用户还没有点击播放时默认显示的封面；默认显示当前视频文件的第一幅画面； 取值 图片的路径

source的设置

说明：不同浏览器支持的视频文件格式不一。在对网页进行添加视频时，需要考虑到浏览器是否支持；可以采用source准备多个格式的视频文件，让浏览器自动选择。
格式例子：

新增DOM元素

querySelector()

作用：获取单个元素，如果获取的元素不止一个，则返回满足条件的第一个元素。
比较：getElementsByTagName———获取到的是指定标签名称的数组。
格式：document.querySelector("选择器");
说明：
1. query查询 Selector选择器
2. 参数要求：如果是类选择器必须添加.；如果是id选择器，就必须添加#;否则当成标签处理。

querySelectorAll()

作用：获取所有满足条件的元素。
格式：document.querySelectorAll("选择器");

新增类样式操作—— classList

作用：获取当前元素的所有class样式列表 ——数组
比较：className —— 获取/赋值 到当前元素的class样式
格式：元素.classList;
例子：document.querySelector("选择器").classList;

add()

作用：为元素添加指定名称的class样式。

• 一次只能添加一个样式
  格式：元素.classList.add(class样式名称);

remove()

作用：为元素移除指定名称的样式(不是移除class属性)。

• 一次只能让移除一个样式
  格式：元素.classList.remove(class样式名称);

toggle()

作用：切换元素的样式——如果元素之前没有指定名称的样式则添加；如果有则移除。
格式：元素.classList.toggle(class样式名称);

contains()

作用：判断元素是否包含指定名称样式；返回bool类型
格式：元素.classList.contains(class样式名称);

自定义属性

应用：通过自定义属性值，获取当前标签。

例子如下：

例子

定义

规范：
1. 规范:data-开头，多个单词使用-连接
2. data-后必须 至少有一个字符
建议：
1. 名称应该都是用小写，不包含任何大写
2. 名称不要有任何特殊符号
3. 名称不要使用纯数字

取值dataset

格式：var变量=元素.dataset["驼峰命名名称"];
步骤

1. 获取自定义属性值
2. 将date-后的单词使用驼峰命名法连接
3. 使用dataset获取属性值