自学前端学习笔记html5(简称H5)

image.png

H5在语义上的改进

在此基础上，HTML5 增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解 HTML 页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。
我们常见的 css+div 布局是：

image.png

在html5中，我们可以这样写：

image.png

H5 的经典网页布局：

H5中新增的语义标签

表示区块
表示文章。如文章、评论、帖子、博客
表示页眉
表示页脚
表示导航
表示侧边栏。如文章的侧栏
表示媒介内容分组。
表示标记 (用得少)
表示进度 (用得少)
表示日期

本质上新语义标签与

、没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成

相当于

。

PS：单标签不用写关闭符号。

H5中新增的表单类型

email 只能输入email格式。自动带有验证功能。
tel 手机号码。
url 只能输入url格式。
number 只能输入数字。
search 搜索框
range 滑动条
color 拾色器
time 时间
date 日期
datetime 时间日期
month 月份
week 星期



    
    
    表单类型
    



    
        表单类型
        
            email: 
        
        
            color: 
        
        
            url: 
        
        
            number: 
        
        
            range: 
        
        
            search: 
        
        
            tel: 
        
        
            time: 
        
        
            date: 
        
        
            datetime: 
        
        
            week: 
        
        
            month: 
        
        
            datetime-local:

表单元素（标签）

这里讲两个表单元素。
1、数据列表：

上方代码中，input里的list属性和 datalist 进行了绑定。

image.png

上图可以看出，数据列表可以自动提示。
2、元素：

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键：一个公钥，一个私钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

3、元素：度量器

low：低于该值后警告
high：高于该值后警告
value：当前值
max：最大值
min：最小值。

举例：

表单属性

placeholder 占位符（提示文字）
autofocus 自动获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭默认的验证功能（只能加给form）
required 表示必填项
pattern 自定义正则，验证表单。例如

代码举例：




    
    
    




    
        表单属性
        
            用户名：
        

        
            电话：
        

        
            multiple的表单:

表单事件

oninput()：用户输入内容时触发，可用于输入字数统计。
oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。

举例：

多媒体

在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持Flash插件。

H5里面提供了视频和音频的标签。

音频

HTML5通过标签来解决音频播放的问题。

使用举例：

image.png

我们可以通过附加属性，来更友好地控制音频的播放，如：

autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。
controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
loop 循环播放。
preload 预加载同时设置 autoplay 时，此属性将失效。

视频

HTML5通过标签来解决视频播放的问题。

使用举例：

我们可以通过附加属性，来更友好地控制视频的播放，如：

autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。
controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
loop 循环播放。
preload 预加载同时设置 autoplay 时，此属性将失效。
width：设置播放窗口宽度。
height：设置播放窗口的高度。

DOM 操作

获取元素

document.querySelector("selector") 通过CSS选择器获取符合条件的第一个元素。
document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。

类名操作

Node.classList.add("class") 添加class
Node.classList.remove("class") 移除class
Node.classList.toggle("class") 切换class，有则移除，无则添加
Node.classList.contains("class") 检测是否存在class

自定义属性

js 里可以通过 box1.index=100; box1.title 来自定义属性和获取属性。

H5可以直接在标签里添加自定义属性，但必须以 data- 开头。

举例：

div

举例：鼠标点击时，tab栏切换

自学前端学习笔记html5(简称H5)

H5在语义上的改进

H5中新增的语义标签

你可能感兴趣的:(自学前端学习笔记html5(简称H5))