前端学习第八篇

HTML5新特性

HTML5的新增特性主要是增加了一些新的标签、新的表单以及表单属性等。这些新特性都有兼容性问题，基本上是IE9+以上版本的浏览器才支持

新增语义化标签：

< header >:头部标签
< nav >:导航标签
< article>:内容标签
< section >:定义文档某个区域
< aside >:侧边栏标签
< footer >:尾部标签

注意：

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE 9中，需要把这些元素转换为块级元素
移动端更喜欢使用这些标签

新增的多媒体标签
1.视频< video >
尽量使用mp4文件格式

语法：

<video src="" controls="controls"></video><!-- or -->
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的浏览器不支持 video 标签。
</video>

2.音频< audio >

<audio controls><source src="horse.ogg" type="audio/ogg" /><source src="horse.mp3" type="audio/mpeg" />您的浏览器不支持 audio 元素。</audio><!-- or --><audio src="" controls="controls"></audio>

总结：

谷歌浏览器把音频和视频自动播放禁止了（可以给视频标签添加muted属性来静音播放视频但是音频得通过Javascript）
音频标签和视频标签使用方式基本一致
不同浏览器支持情况不同

3.新增的input类型

4.HTML5新增的表单属性

 input::placeholder {color: pink;}/* 修改placeholder的字体颜色 */

CSS3新特性

新特性有兼容性问题，ie9+才支持。移动端支持优于pc端

1.属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助类或者ID选择器

<!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>/*1. 必须是input 但是具有 value这个属性 选择这个元素 */input[value] {color: pink;}/* 2. 类选择 属性选择器以及伪类选择器的权重都是10 */input[type="text"] {color: red;}/* 3.选择首先是div 然后具有class属性 并且属性值必须是 icon开头的这些元素 */div[class^="icon"] {color: blue;}/* 4.具有class属性且以data结尾 */section[class$="data"] {color: green;}</style></head><body><!--1．利用属性选择器就可以不用借助于类或者id选择器--><input type="text" value="请输入" /><input type="text" /><!--2，属性选择器还可以选择属性=值的某些元素 (重要)--><input type="text" name="" id="" /><input type="password" name="" id="" /><!-- 3，属性选择器可以选择属性值开头的某些元素--><div class="icon">123</div><!-- 4．属性选择器可以选择属性值结尾的某些元素--><section class="icon-data"></section></body>
</html>

2.结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的元素

nth-child(n) ：选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始
n可以是关键字：even 偶数，odd 奇数
n可以是公式：（如果只有n，则从0开始计算，第0个或者超出的元素的个数会被忽略）

    <style>/* 1.选择ul里面的第一个li */ul li:first-child {background-color: pink;}/* 2.选择ul里面的最后一个li */ul li:last-child {background-color: red;}/* 3.选择ul的第三个li   */ul li:nth-child(3) {background-color: green;}/* 4.把所有的偶数的孩子选出来 */ul li:nth-child(even) {background-color: grey;}/* 5.把所有的奇数的孩子选出来 */ul li:nth-child(odd) {background-color: black;}/* 6.:nth-child(n) 从0开始 每次加1 往后面计算 这里必须是n 不能是其他的字母 n就是选择了所有的孩子 */ul li:nth-child(n) {background-color: #fff;}</style>

nth-child 和 nth-of-type 区别：

nth-child 会对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type会对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E 找第n个孩子
同种标签用nth-child 比如无序列表

<!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>/* nth-child 会把所有孩子排列序号执行的时候首先看 nth-child(1)之后回去看前面的div */section div:nth-child(1) {background-color: grey;}/* nth-of-type会把指定元素的盒子排序 执行的时候首先看 div指定的元素 之后再去看 nth-of-type(1) 是第几个孩子 所以第二个才能改变div的样式*/section div:nth-of-type(1) {background-color: hotpink;}</style></head><body><section><p>1</p><div>2</div><div>3</div></section></body>
</html>

3.伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

eg：

     div::before {width: 100%;height: 100%;display: none;content: "";background: rgba(0, 0, 0, 0.5);}div:hover::before {display: block;}

注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法: element::before {}
before和after必须有 content属性
before在父元素内容的最前面创建元素，after在父元素内容的最后面插入元素
伪元素选择器和标签选择器一样，权重为1

应用场景：
伪元素清除浮动

此处table的作用是转换为块级元素并在一行显示

4.CSS3盒子模型
CSS3中可以通过 box-sizing来指定盒模型：

box-sizing:content-box 盒子大小为width + padding + border(以前默认的)
box-sizing:border-box盒子大小为width
如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度）

5.CSS3过渡

过渡(transition)是CSS3中具有颠覆性的特征之一，可以在不使用Flash动画或
JavaScript的情况下，当元素从一种样式变换为另—种样式时为元素添加效果。
虽然低版本浏览器不支持( ie9以下版本）但是不会影响页面布局。

语法：

transition:要过渡的属性 花费时间 运动曲线 何时开始;

1.属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
2.花费时间：单位是秒(必须写单位）比如0.5s
3.运动曲线：默认是ease(可以省略）
4.何时开始：单位是秒(必须写单位）可以设置延迟触发时间默认是0s(可以省略)
谁做过渡就写在谁那边

    <style>div {width: 200px;height: 100px;background-color: pink;/* transition:  变化的属性 花费时间 运动曲线 何时开始 */transition: width 0.5s ease 0.3s;}/* 鼠标放在div里面实现过渡transition 应该写在div里，而不是在hover里面 */div:hover {width: 300px;height: 200px;}/* 如果想要多个属性都变话 写all就可以 */div {transition: all 0.5s;}</style>

6.CSS3 滤镜filter：
filter 属性将模糊或颜色偏移等图形效果应用于元素（了解）

语法： filter：函数();

 /* blur 模糊处理 像素越大越模糊 */img {filter: blur(5px);}

其他属性参考菜鸟教程：https://www.runoob.com/cssref/css3-pr-filter.html

7.calc 函数：

  /* 括号里面可以使用 + - * /来计算 */
div {width: calc(100%-30px);}

保安日记：前端学习第八篇之HTML5相关推荐

前端学习记录 —— HTML篇（下）
前端学习记录 -- HTML篇(下) 一.表格标签 table,tr,td 1. 表格标题 <caption></caption><caption></cap ...
(:◎)≡前端学习之CsS篇
前端学习之CSS篇 1.CSS简介 2.CSS语法规范 3.CSS选择器 (1)标签选择器 (2)类选择器 (3)id选择器 (4)通配符选择器 (5)选择器总结 4.CSS字体属性 5.CSS文本属 ...
保安日记：前端学习第三篇之CSS选择器
前端第三篇 Emmet语法快速生成HTML标签快速生成CSS样式 1．比如w200按tab 可以生成width: 200px; 2.比如lh26按tab可以生成line-height:26px; ...
前端学习——jQuery入门篇
一. jQuery入门 1.1 初步感受jQuery 使用jquery简单写个tab切换小案例 <!DOCTYPE html> <html lang="en"&g ...
2018年前端学习心得——总结篇
学习 2018年,确定了人生的职业规划,开启了前端之路.基础不存在的,本科所了解的HTML标签和简单CSS样式早就不存在了.下面简单总结一下这一年的收获与进步. 自我学习(3个月):前端基础知识,在图 ...
web前端学习（CSS篇）
目录 CSS基础语法基本样式内联样式与内部样式内联样式外部样式及两种写法 CSS中的颜色表示法 CSS背景样式背景实现视觉差效果 CSS边框样式边框实现三角形 CSS文字样式 CSS段落样 ...
前端学习随笔 css篇
CSS css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style = ...
前端学习之React篇-（1）最简React——Html直接引用React
当新手想看看React是什么样的,语法是什么样的,那么这里给出了一个最简单的使用React的方法--就是在html页面中直接引入React的js文件,然后在这个html中直接写react的js即可,简 ...
初步学习Django-第八篇：ORM常用操作
转载于:https://www.cnblogs.com/hcyjjp/p/10418899.html

保安日记：前端学习第八篇之HTML5

前端学习第八篇

HTML5新特性

CSS3新特性

保安日记：前端学习第八篇之HTML5相关推荐

最新文章

热门文章