Html 5 与 CSS 3

HTML5

• HTML5 是新一代的HTML标准，2014年10月由万维网联盟(W3C) 完成标准制定。
• HTML5在狭义上是指新一代的HTML标准，在广义上是指：整个前端。
• 优势
  • 针对JavaScript,新增了很多可操作的接口。
  • 新增了一些语义化标签、全局属性。
  • 新增了多媒体标签，可以很好的替代flash.
  • 更加侧重语义化，对于SE0更友好。
  • 可移植性好，可以大量应用在移动设备上。

新语义化标签

• header 整个页面，或部分区域的头部
  • <header> 标签定义文档或者文档的一部分区域的页眉
  • <header> 元素应该作为介绍内容或者导航链接栏的容器
  • 在一个文档中，可以定义多个 <header> 元素
  • <header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部
• footer 整个页面，或部分区域的底部
  • <footer> 标签定义文档或者文档的一部分区域的页脚
  • <footer> 元素应该包含它所包含的元素的信息
  • 在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等
  • 在一个文档中，可以定义多个 <footer> 元素
• nav 导航

  • <nav> 标签定义导航链接的部分

  • 并不是所有的 HTML 文档都要使用到 <nav> 元素

  • <nav> 元素只是作为标注一个导航链接的区域

• article 文章、帖子、杂志、新闻、博客、评论等

  • <article> 标签定义独立的内容。

  • <article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

  • <article> 的潜在来源：

    • 论坛帖子

    • 博客文章

    • 新闻故事

    • 评论

• section页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）
  • article 里面可以有多个section
  • section强调的是分段或分块，如：将一块内容分成几段
  • article 比section更强调独立性，一块内容如果比较独立、完整，应该使用article元素
• aside 侧边栏

  • <aside> 标签定义 <article> 标签外的内容

  • aside 的内容应该与附近的内容相关

新结构化标签

• <meter> 标签定义度量衡
  • 仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等
  • 属性：
    • form 规定<meter>元素所属的一个或多个表单
    • high 规定被界定为高的值的范围
    • low 规定被界定为低的值的范围
    • max 规定范围的最大值
    • min 规定范围的最小值
    • optimum 规定度量的最优值
    • value 规定度量的当前值

<p>展示给定的数据范围：</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

• <progress> 标签定义运行中的任务进度（进程）
  • 属性：
    • max 规定需要完成的值。
    • value 规定进程的当前值。

下载进度：
<progress value="22" max="100">
</progress>

新列表标签

• datalist 用于搜索框的关键字提示
• details 用于展示问题和答案，或对专有名词进行解释
• summary 写在details 的里面，用于指定问题或专有名词

<input type="text"list="mydata">
<datalist id="mydata">
<opt1 on value="周冬雨">周冬雨</opt1on>
<opt1 on value="周杰伦">周杰伦</opti1on>
<opt1 on value="温兆伦">温兆伦</opt1on>
<opt1 on value="马冬梅">马冬梅</opt1on>
</datalist>

<details>
<summary>如何走上人生黄峰？</summary>
<p>一步一步走呗</p>
</details>

新文本标签

• ruby 包裹需要注音的文字
• rt 写注音，rt标签写在ruby的里面

<ruby>
  汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

•  mark 标记 

<p>Do not forget to buy <mark>milk</mark> today.</p>

新表单标签

• 表单控件新增属性
  • placeholder  提示文字(不是默认值。value才是默认值)，适用于文字输入类的表单控件
  • required 表示该输入项必填，适用于除按钮外其他表单控件
  • autofocus 自动获取集点，透用于所有表单控件
  • autocomplete 自动完成，可以设置为on或off，适用于文字输入类的表单控件
    • 密码输入框、多行输入框不可用
  • pattern 填写正则表达式，适用于文本输入类表单控件
    • 多行输入不可用，且空的输入框不会验证，往往与required配合，

<!-- autocomplete 的使用 -->
<form action="demo-form.php" method="get" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  E-mail: <input type="email" name="email"><br>
  <input type="submit">
</form>

<!-- pattern 的使用 -->
<form action="demo-form.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

• input 标签 新增type值：
  • email 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式
  • url URL类型的输入框，表单提交时会验证格式，输入为空则不验证格式
  • number 数字类型的输入框，表单提交时会验证格式，输入为空不验证格式
  • search 搜索类的输入框，表单提交时不会验证格式
  • tel 电话类的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字健盘
  • range 范国选择框，默认值为5，表单提交时不会验证格式
  • color 颜色选择框，默以值为黑色，表单提交时不会验证格式
  • date 日期选择框，默以认值为空，表单提交时不会验证格式
  • month 月份选择框，默认值为空。表单提交时不会验证格式
  • week 周选择框，默认值为空，表单提交时不会验证格式
  • time 时间选择框，默认值为空。表单提交时不会验证格式
  • datetime-local 日期+时间选择框，默认值为空，表单提交时不会验证格式
• form 标签 新增属性：
  • novalidate 如果给form标签设置了该属性，表单提交的时候不再进行验证

新多媒体标签

• <video>视频标签
  • 属性：
    • src 视频地址， URL地址
    • width 设置视频播放器的宽度，像素值
    • height 设置视频播放器的高度，像素值
    • controls 向用户显示视频控件（比如播放、暂停按钮）
    • muted 视频静音
    • autoplay 视频自动播放
    • loop 循环播放
    • poster 视频封面，URL地址
    • preload 视倾预加载，如果使用autoplay ,则忽略该属性
      • none 不预加载视须
      • metadata 仅预先获取视频的元数据（例如长度）
      • auto 下载整个视须文件，即使用户不希望使用它
  • 支持的视频格式：
    • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
    • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
    • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

• <audio> 音频标签
  • 属性
    • src 音频地址，URL地址
    • controls 向用户显示音频控件（比如播放、暂停按钮）
    • autoplay 音频自动播放
    • muted 音频静音
    • loop 循环播放
    • preload 音频预加载。如果使用autoplay ,则忽略该属性
      • none 不预加载音频
      • metadata  仅预先获取音预的元数据（例如长度）
      • auto 可以下载整个音频文件，即使用户不希望使用它
  • 格式：
    • MP3 ：audio/mpeg
    • Ogg ：audio/ogg
    • Wav ：audio/wav

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

新全局属性

• contenteditable 表示元素是否可被用户编辑。可选值如下：
  • true:可编辑
  • false:不可编辑
• draggable 表示元素可以被施功，可选值如下：
  • true:可拖功
  • false:不可拖动
• hidden 隐藏元素
• spellcheck 规定是否对元素进行拼写和语法检查，可选值如下：
  • true:检查
  • false:不检查
• contextmenu 规定元素的上下文菜单，在用户鼠标右键点击元素时显示，
• data-* 用于存储页查的私有定数据。(如 data-a = "1",data-b = "2",data-c = "3"),方便JS取值

兼容性处理

• 添加元信息，让浏览器处于最优渲染模式

<!--设置IE总是使用最新的文档预式进行灌染：-->
<meta http-equiv="X-UA-Compatible"content="IE-Edge">
<!--优先使用webkit(Chromium)内核进行渲染，针对368等壳浏览器-->
<meta name="renderer" content="webkit">

• 使用 html5shiv 让低版本浏览器认识H5的语义化标签

<!--[if lt ie9]>
<script src = "../sources/js/html5shiv.js"></script>
<![endif]-->

• 比较符号：
  • lt 小于
  • lte 小于等于
  • gt 大于
  • gte 大于等于
  • ！逻辑非

        

CSS3

• CSS3是CSS2的升级版本，它在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题
• 新增模块：
  • 新增选择器。例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等
  • 新增视觉效果。例如：圆角、阴影、渐变等
  • 新增背景效果。例如：支持多个背景图片，同时新增了若干个背景相关的属性
  • 新增布局方案。 —— 弹性盒子
  • 新增Web字体，可以显示用户电脑上没有安装的字体
  • 增强颜色，新增opacity属性来控制透明度
  • 新增2D和3D变换，例如：旋转、扭曲、缩放、位移等
  • 增加动画与过度效果，让效果的变换更具流线性、平滑性

私有前缀

div
{
	border-image:url(border.png) 30 30 round;
	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(border.png) 30 30 round; /* Opera */
}

• “-webkit-”  、 “-o-”   都是私有前缀
• 私有前缀是W3C标准所提出的某个CSS特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了。
• 常见浏览器私有前缀：
  • Chrome 、 Safari  、 Edge 浏览器：-webkit-
  • Firefox浏览器：-moz-
  • 旧Opera浏览器：-o-
  • 旧 IE 浏览器：-ms-

新长度单位

• rem 根元素字体大小的倍数，只与根元素字体大小有关
• vw 视口宽度的百分之多少，10vw就是视口宽度的10%
• vh 视口高度的百分之多少，10vh就是视口高度的10%
• vmax 视口宽高中大的那个的百分之多少
• vmin视口宽高中小的那个的百分之多少

盒子属性

• box-sizing 怪异盒模型
  • 使用box-sizing属性可以设置盒模型的两种类型
    • content-box width和height设置的是盒子内容区的大小。（默认值）
    • border-box width和height设置的是盒子总大小。（怪异盒模型）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title>
<style> 
#example1 {
  box-sizing: content-box;  
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid blue;
}

#example2 {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid blue;
}
</style>
</head>
<body>

<h1>box-sizing 属性</h1>
<p>定义如何计算一个元素的总宽度和总高度，是否包含内边距和边框。</p>

<h2>box-sizing: content-box (默认):</h2>
<p>高度和宽度只应用于元素的内容:</p>
<div id="example1">这个 div 的宽度为 300px。但完整宽度为 300px + 20px (左边框和右边框) + 60px (左边距和右边距) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>高度和宽度应用于元素的所有部分: 内容、内边距和边框:</p>
<div id="example2">不管如何这里的完整宽度为300px!</div>

</body>
</html>

• resize调整盒子大小
  • 使用resize属性可以控制是否允许用户调节元素尺寸
    • none 不允许用户调整元素大小(默认值)
    • both 用户可以调节元素的宽度和高度
    • horizontal 用户可以调节元素的宽度
    • vertical 用户可以调节元素的高度
  • resize 属性要配合  overflow 属性（可取任意值）一起使用才能调整元素大小

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title>
<style> 
div
{
	border:2px solid;
	padding:10px 40px; 
	width:300px;
	resize:both;
	overflow:auto;
}
</style>
</head>
<body>

<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>

<div>调整属性指定一个元素是否由用户可调整大小的。</div>

</body>
</html>

• box-shadow盒子阴影
  • 使用box-shadow属性为盒子添加阴影。
    • h-shadow  水平阴影的位置，必须填写，可以为负值
    • v-shadow 垂直阴影的位置，必须填写，可以为负值
    • blur 可选，模糊距离
    • spread 可选，阴影的外延值
    • color 可选，阴影的颜色
    • inset 可选，将外部阴影改为内部阴影
  • 默认值： box-shadow:none表示没有阴影
  • 写两个值：水平位置、垂直位置   
    • box-shadow:10px 10px;
  • 写三个值：水平位置、垂直位置、颜色 
    • box-shadow:10px 10px red;
  • 写三个值：水平位置、垂直位置、模糊值
    • box-shadow:10px 10px 10px;
  • 写四个值：水平位置、垂直位置、模糊值、颜色
    • box-shadow:10px 10px 10px red;
  • 写五个值：水平位置、垂直位置、模糊值、外延值、颜色
    • box-shadow:10px 10px 10px10px blue;
  • 写六个值：水平位置、垂直位置、模糊值、外延值、颜色、内阴影*/
    • box-shadow:10px 10px 28px 3px blue inset ;

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}

• opacity不透明度
  • opacity属性能为整个元素添加透明效果，值是0到1之间的小数
    • 0是完全透明，1表示完全不透明
  • opacity与rgba的区别？
    • opacity是一个属性，设置的是整个元素（包括元素里的内容）的不透明度
    • rgba是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度

 背景属性

• background-origin 设置背景图的原点
  • padding-box:从padding区域开始显示背景图像（默认值）
  • border-box:从border区域开始显示背景图像。
  • content-box:从content区域开始显示背景图像。
• background-clip 设置背景图的向外裁剪的区域
  • border-box:从border区域开始向外裁剪背景（默认值）
  • padding-box:从padding区域开始向外裁剪背景
  • content-box:从content区域开始向外栽剪背景
  • text: 背景图只呈现在文字上（backgroun-clip要加上-webkit-前缀）
• background-size 设置背景图的尺寸
  • 用长度值指定背景图片大小，不允许负值
    • background-size:300px 200px;
  • 用百分比指定背景图片大小，不允许负值
    • background-size:100%100%;
  • auto:背景图片的真实大小（默认值）
  • contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片
    • background-size:contain;
  • cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整
    • background-size:cover;
• background 复合属性
  • background: color url repeat position / size origin clip 
    • 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式
    • origin 和clip 的值如果一样，如果只写一个值，则origin 和clip 都设置：如果设置了两个值，前面的是origin ,后面的clip 
    • size 的值必须写在position 值的后面，并且用 / 分开
• 多背景图

background: url(../images/bg-lt.png) no repeat left top,
            url(../images/bg-rt.png) no-repeat right top,
            url(../images/bg-1b.png) no-repeat left bottom,
            url(../images/bg-rb.png) no-repeat right bottom;

边框属性

• border-radius 边框圆角
  • 同时设置4个角，border-radius:10px:
  • 单独设计每个角（一个值：正圆半径；两个值：椭圆X半径，Y半径）
    • border-top-left-radius 左上角
    • border-top-right-radius 右上角
    • border-bottom-right-radius 右下角
    • border-bottom-left-radius 左下角
• outline 边框外轮廓
  • outline-width:外轮哪的宽度
  • outline-color:外轮廓的颜色
  • outline-style:外轮廓的风格
    • none:无轮廓
    • dotted:点状轮廓
    • dashed:虚线轮廓
    • solid:实线轮廓
    • double:双线轮廓
  • outline-offset 设置外轮廓与边框的距离，正负值都可以设置
    • outline-offset不是outline的子属性，是一个独立的属性
  • outline复合属性
    • outline:width style color:

 

文本属性 

• text-shadow 文本阴影 
  • h-shadow 必需写，水平阴影的位置，允许负值
  • v-shadow 必需写，垂直阴影的位置，允许负值
  • blur 可选，模糊的距离
  • color 可选，阴影的颜色
  • none 没有阴影（默认值）
• white-space 文本换行
  • normal 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格（默认值）
  • pre 原样输出，与pre标签的效果相同
  • pre-wrap 在pre效果的基础上，超出元素边界自动换行
  • pre-line 在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略
  • nowrap 强制不换行
• text-overflow 文本溢出
  • clip 当内联内容溢出时，将溢出部分裁切掉（默认值）
  • ellipsis 当内联内容溢出块容器时，将溢出部分替换为…。
  • 要使得 text-overflow属性生效，块容器必须显式定义overflow为非visible值，
    white-space为nowrap值。
• text-decoration 文本修饰
  • text-decoration:text-decoration-line II text-decoration-style I|text-decoration-color
  • 子属性及其含义：
    • text-decoration-line 设置文本装饰线的位置
      • none:指定文字无装饰（默认值）
      • underline:指定文字的装饰是下划线
      • overline：指定文字的装饰是上划线
      • line-through:指定文字的装饰是贯穿线
    • te×t-decoration-style 文本装饰线条的形状
      • solid:实线（默认）
      • double:双线
      • dotted:点状线条
      • dashed:虚线
      • wavy:波浪线
    • text-decoration-color 文本装饰线条的领色