H5学习笔记

最新推荐文章于 2022-06-01 22:32:41 发布

jerryzhou;

最新推荐文章于 2022-06-01 22:32:41 发布

阅读量267

点赞数

分类专栏： Html 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_35206244/article/details/83988180

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

W3CSCHOOL

简单的文档类型和字符集定义
新增页面结构
全新的表单设计

一、文档类型定义

1.1 HTML中文档类型的定义：
html 4.01
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
```
html 1.0
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
h5
```
<!DOCTYPE HTML>
```
二、字符集定义：
```
HTML: <meta name="charset" contect="utf-8">
 
 HTML5：<meta charset="utf-8">
```
三、新增页面结构
1.section结构：文档中的区块、章、节、页眉、页脚显示效果和普通的DIV没有任何区别
2.header结构：定义网页的页眉信息
3.footer结构：定义区段的页脚，一段是版尾信息
4.nav结构：定义导航
5.article结构：定义文章或网页的主要内容
6.aside结构：定义主要内容之外的其他内容
7.figure结构：定义独立的流内容（数据、图像、图表、代码）

四、全新的表单设计

新增的input类型

1.email类型：
2.url类型：
3.number类型：
4.date类型：
5.其他日期类型：month、week、time、datetime、datetime-local
6.search类型：搜索类类型
7.color类型：颜色选取框

新增的表单元素:

1.datalist元素：
```
<input type="text" list="mydl">
<datalist id="mydl">
<option>西安</option>
<option>武汉</option>
</datalist>
```
2.keygen元素:密钥对生成器
```
<keygen name=“security|”>
```
3.output元素:不同类型的输出
```
<script type="text/javascript>
function show(){
var omytext = document.getElementById("mytext").value;
document.getElementById("message").
}
</script>
<output id="message" onforminput="show()">
</output>
```
新增的表单属性：

1.placeholder:提示信息
2.required:必填项
3.pattern:"[A-Z’{3}"//正则表达式
4.multiple:3