HTMLCSS学习笔记（二十五）—

HTML5语法

内容类型（ContentType）
- HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"
DOTYPE声明
- <!DOCTYPE html>不区分大小写
指定字符集编码
- <meta charset="UTF-8">
可省略标记的元素
- 不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta
  - 省略前<hr />省略后<hr>
- 可以省略结束标记的元素： li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
  - 省略前<li><li/>省略后<li>
- 可以省略全部标记的元素：html、head、body、colgroup、tbody

HTML5语义化标签

section元素表示页面中的一个区块
article元素表示一块与上下文无关的独立的内容
aside元素在article之外的，与article内容相关的辅助信息
header元素表示页面中一个内容区块或整个页面的标题
footer元素表示页面中一个内容区块或整个页面的脚注
nav元素表示页面中导航链接部分
figure元素表示一段独立的内容，
使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素表示页面中的主要的内容(ie9以下不兼容)
hgroup标题的一个分组
mark定义高亮显示的文本(span)
time时间
dialog标记定义一个对话框(会话框)类似微信
embed 标记定义外部的可交互的内容或插件比如flash

以上布局可以参考：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}html,body{height: 100%;}body{display: flex;flex-direction: column;}h2{font-size: 60px;color: #fff;}nav,li{list-style: none;}header,footer{width: 100%;height: 150px;background: #F47D31;text-align: center;line-height: 150px;}.box{display: flex;width: 100%;height: 100%;justify-content: space-between;}.box section{width: 20%;height: 100%;background: #888;}.box section:nth-of-type(1) nav{display: flex;align-items: center;flex-direction: column;}.box section:nth-of-type(1) nav li{width: 90%;height: 50px;color: #F47D31;line-height: 50px;border-bottom: 2px solid #EEE;}.box section:nth-of-type(2){flex: 1;height: 100%;background: #888;display: flex;flex-direction: column;}.box section:nth-of-type(2) article{background: #EEE;margin: 5px;display: flex;flex-direction: column;align-items: center;}.box section:nth-of-type(2) article header{background: #F47D31;width: 95%;        height: 50px;line-height: 50px;text-align: center;color: #fff; margin: 5px 0;}.box section:nth-of-type(2) article footer{background: #F47D31;width: 95%;           height: 50px;line-height: 50px;text-align: center;color: #fff; margin: 5px 0;}.box section:nth-of-type(2) aside{width: 95%;}.box section:nth-of-type(2) aside p{margin: 10px 0;}.box section:nth-of-type(3) .des_text{width: 90%;color: #fff;margin-left: 5%;}.nav_header,.des_header{width: 100%;height: 70px;line-height: 70px;color: #fff;background: #888;}</style>
</head>
<body><header><h2>Header</h2></header><section class="box"><section><header class="nav_header">Nav</header><nav><li>link1</li><li>link2</li><li>link3</li></nav></section><section><article><header>Article Header</header><aside><p>塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶 </p><p>塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶 </p></aside><footer>Article Footer</footer></article><article><header>Article Header</header><aside><p>塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶 </p><p>塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶 </p></aside><footer>Article Footer</footer></article></section><section><header class="des_header">aside</header><p class="des_text"><mark>HTML5:</mark>塞纳河畔 左岸的咖啡 我手一杯 品尝你的美 留下唇印的嘴 花店玫瑰 名字写错谁 告白气球 风吹到对街 微笑在天上飞 你说你有点难追 想让我知难而退 礼物不需挑最贵 只要香榭的落叶</p></section></section><footer><h2>Footer</h2></footer>
</body>
</html>

HTML5多媒体标签

属性

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

source

标签为媒介元素（比如和）定义媒介资源。
标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

type常见属性值:
用于视频：video/ogg video/mp4 video/webm
用于音频：audio/ogg audio/mpeg

HTML5新增表单控件类型

type=“email” 限制用户必须输入email类型
type=“url” 限制用户必须输入url类型
type=“range” 产生一个滑动条表单
type=“number” 显示一个数字文本输入框
type=“search” 产生一个搜索意义的表单
type=“color” 生成一个颜色选择的表单
type=“time” 限制用户必须输入时间类型
type=“month” 限制用户必须输入月类型
type=“week” 限制用户必须输入周类型
type=“datetime-local” 选取本地时间
type=”date”

HTML5新增表单属性

required 监测是否为空。
min 最小
max 最大
step 步幅确定一个法定值。 -3 0 3 6 9
list 必须结合datalist标签，绑定datalist id名称。
autocomplete 是否自动提示信息属性值 on （默认值） off (关闭提示) 表单元素要必须有name属性
placeholder 文本框的提示信息
autofocus 自动聚焦。一个页面只能由一个。
pattern 后面的属性值是一个正则表达式。
novalidate 取消验证，写在form
multiple 选择（上传）多个

output 表示不同类型的输出，比如脚本的输出

for：定义输出域相关的一个或多个元素。
form：定义输入字段所属的一个或多个表单。
name：定义对象的唯一名称。（表单提交时使用）

<form action="" oninput="c.value=parseInt(a.value)+parseInt(b.value)"><input type="number" name="a" id=""> + <input type="number" name="b" id=""> =<output name="c" for="a b"></output></form>

HTMLCSS学习笔记（二十五）——HTML5基础补充相关推荐

JVM 学习笔记二十五、JVM监控及诊断工具-命令行篇
二十五.JVM监控及诊断工具-命令行篇 1.概述性能诊断是软件工程师在日常工作中经常面对和解决的问题,在用户体验至上的今天,解决好应用软件的性能问题能带来非常大的收益. Java作为最流行的编程语言 ...
Java学习笔记二十五:Java面向对象的三大特性之多态
Java面向对象的三大特性之多态一:什么是多态: 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作. 多态性是对象多种表现形式的体现. 现实中,比 ...
java沙盒模式_JavaScript学习笔记(二十五) 沙箱模式
沙箱模式(Sandbox Pattern) 沙箱模式可以避免命名空间的一些缺点(namespacing pattern),比如: 依赖一个唯一全局的变量作为程序的全局符号.在命名空间模式中,没有办法存 ...
angular学习笔记(二十五)-$http(3)-转换请求和响应格式
本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({transfor ...
Mr.J-- jQuery学习笔记(二十五)--监听DOM加载
页面元素 <body> <div></div> <div></div> <div></div> <div> ...
学习笔记（十五）——镜像的知识点与注意事项
学习笔记(十五)--镜像的知识点与注意事项一.基础知识 1.SQL Server镜像只有两种模式:高安全模式和高性能模式.两种模式的主要区别在于在事务提交后的操作. 在高性能模式下,主体服务器不需要 ...
JavaScript学习笔记（十五）
JavaScript学习笔记(十五) 事件事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是 ...
OpenCV学习笔记（十五）：图像仿射变换：warpAffine(),getRotationMatrix2D()
OpenCV学习笔记(十五):图像仿射变换:warpAffine(),getRotationMatrix2D() 一个任意的仿射变换都能表示为乘以一个矩阵(线性变换)接着再加上一个向量(平移)的形式. ...
Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)
Table of Contents appendTo appendTo(source, target) 源代码 append prependTo prependTo源码 prepend ...
MATLAB学习笔记（十五）
MATLAB学习笔记(十五) 一.非线性方程求解与函数极值计算 1.1 非线性方程数值求解 1.2 函数极值的计算 1.2.1 无约束最优化问题 1.2.2 有约束最优化问题一.非线性方程求解与函数 ...

HTMLCSS学习笔记（二十五）——HTML5基础补充

HTML5语法

HTML5语义化标签

HTML5多媒体标签

HTML5新增表单控件类型

HTML5新增表单属性

HTMLCSS学习笔记（二十五）——HTML5基础补充相关推荐

最新文章

热门文章