前端16天–IFC、BFC、H5新特性–2021/4/21

HTML5是HTML标准的最新演进版本：

1、是一个新的HTML语言版本包含了新的元素、属性和行为。
2、同时包含了一系列可以被用来让web站点和应用更加多样化的、功能更强大的技术。（API）
之前学的是HTML4.01（Xhtml1.0）2014.10.29，HTML5诞生XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。**HTML5新版本特性**
1、淘汰过时的或冗余的属性2、Indexed DB本地存储功能3、脱离Flash 和Silverlight直接在浏览器中显示图形或动画4、一个HTML5文档到另一个文档间的拖放功能5、提供外部应用和浏览器内部数据之间的开放接口

H5兼容性：

chrome://flags
caniuse.com 查看各个标签能否咋各个浏览器中使用
移动端可以放心使用（blick）
html5test.com

语法

DTD：文档类型定义

定义标准模式解析。

字符集：

语法：
单标签可以不用书写关闭符号
标签的type属性可以不写（style、script可以不用写类型）
标签的属性值可以不用双引号包裹（不要用
标签可以使用大写字母

语义化标签：

div：section、article、nav、header、footer、aside
figure、figcaption、time、mark、details、summary

表单元素(之后讲正则校验）

<form action="/demo" id="demo"><!-- button和input都在表单里面，可以直接提交 --><input type="hidden" name="color" value="red"><!-- <button>提交</button> --><input type="text" name="" id="" placeholder="请输入用户名"><!-- placeholder --><input type="text" autofocus><!-- 自动获取焦点 --><input type="text" required><!-- required --><input type="text" list="color"><!-- 智能感应 --><datalist id="color"><!-- 有value标签之间的数值就会失效 --><option value="red">red</option><option value="pink"></option><option value="green"></option><option value="orange"></option><option>yellowgreen</option><option>yellow</option><option>gold</option></datalist></form><!-- 将标签定义在form标签外面，通过form属性id完成对表单的绑定 --><button form="demo">提交</button>

输入框类型

<form action="/demo" id="demo"><!-- button和input都在表单里面，可以直接提交 --><input type="hidden" name="color" value="red"><!-- <button>提交</button> --><input type="text" name="" id="" placeholder="请输入用户名"><!-- placeholder --><input type="text" autofocus><!-- 自动获取焦点 --><input type="text" required><!-- required --><input type="text" list="color"><!-- 智能感应 --><datalist id="color"><!-- 有value标签之间的数值就会失效 --><option value="red">red</option><option value="pink"></option><option value="green"></option><option value="orange"></option><option>yellowgreen</option><option>yellow</option><option>gold</option></datalist></form><!-- 将标签定义在form标签外面，通过form属性id完成对表单的绑定 --><button form="demo">提交</button><form action="/demo1" id="didi"><input type="search"><input type="tel"><input type="url"><input type="number"><input type="email"><input type="range" min="0" max="100" value="10" name="range"><input type="week"><input type="color"><input type="date"><button form="didi">提交</button></form>

多媒体

<!-- 嵌入某页面 --><iframe src="" frameborder="0"></iframe><!-- html4.1通过flash引入视频 --><iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=a44ba10f7842358505428b276f441b5b&tvId=8193823322789400&accessToken=2.ef9c39d6c7f1d5b44768e38e5243157d&appKey=8c634248790d4343bcae1f66129c1010&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="100%" height="100%" ></iframe><!-- H5直接用video 不再使用flash --><!-- 自动播放已经不支持、设置muted静音自动播放 --><!-- 支持mp4、webM、Ogg格式视频 ，编码方式也有要求--><video src="../../pic/WIN_20210421_10_45_19_Pro.mp4" autoplay controls loop muted><!-- 备选视频 --><source src=""><source src=""></video>

音频同

css3前缀、色彩和透明度

H5新特性rgba（color，color，color，1-0.5），子元素不会变透明，其他元素不会被覆盖。

<style>body {height: 2000px;}.top {height: 100px;}.pre {width: 800px;height: 100px;background: rgba(255, 255, 100, 1);position: fixed;}.demo {height: 300px;width: 300px;background-color: blue;opacity: 0.5;/* background: rgba(102,1,200,0.2); */}</style>
</head>
<body><div class="top"><div class="pre">123</div></div><div class="demo">456</div>
</body>

css3属性、儿子、儿子类型、关系类型选择器

/* 儿子选择器 *//* 加了div，p就不是第一个了所以不会被选中 */p:first-child {background-color: pink;}h3:first-child {background-color: pink;}.item:first-child {background-color: gold;}.item:nth-child(2) {background-color: green;}.item:nth-child(3) {background-color: yellowgreen;}.item:nth-child(4) {background-color: black;}.item:nth-child(odd) {/* 奇数 */background-color: yellowgreen;}.item:nth-child(even) {/* 偶数 */background-color: black;}.item:nth-child(3n+1) {/* 偶数 */background-color: red;}.item:nth-last-child(1) {/* 偶数 */background-color: red;}/* 总结：冒号后面为整个父元素的第几个子元素，如果该子元素是冒号前面的类型或者标签则渲染属性 */

/* 儿子类型选择器 *//* 在冒号前面这个标签类型一样的所有标签中挑选第冒号后面个 */p:first-of-type {background-color: orange;}/* 多组同时寻找 ，每个父容器中寻找一次*/p:last-of-type {background-color: red;}

关系节点选择器

.container p{/* background-color: pink; */}/* 只选择儿子选择器 */.container > p {/* background-color: pink; */}/* 选择下一个亲兄弟 ，中间有其他的不行*/.demo + p{/* background-color: pink; */}/* 选择所有亲兄弟 */.demo ~ p {background-color: pink;}

伪类

link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。

visited表示链接被点击后显示的颜色。

hover表示鼠标悬停时显示的颜色。

focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色）。

active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。

伪元素

css2中以：开头，css3中以：：开头（兼容IE678建单冒号）
在原有元素之前之后插入伪元素：
content必填
content/display/clear等

扩展盒模型

div {width: 400px;height: 400px;background-color: pink;padding: 50px;border: 50px dashed green;margin: 50px;float: left;}/* 默认标准盒模型，外扩 *//* 设为内减盒模型 */.box2 {box-sizing: border-box;/* border-box / 默认content-box *//* 设置了之后宽高就为border外面那一圈的大小 */}

圆角

#demo {height: 100px;width: 300px;background-color: greenyellow;border-top-left-radius: 10px;border-bottom-right-radius: 20px;/* 右上角 */border-start-end-radius: 50px ;/* 左下角 */border-end-start-radius: 50px ;}

复合写法：

盒子阴影

box-shadow：30px,30px,10px,green,outset,40px,50px,10px,red,inset…

圆角作业：

P116

前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21相关推荐

前端面试题二：ES6/7/8新特性、性能优化、数据交互、H5新特性
目录一.ES6/7/8新特性二.性能优化三.数据交互四.H5新特性一.ES6/7/8新特性 1.ES6中新增了哪些数据类型? Symbol类型(基本) Set类型(复杂) Map类型(复杂) ...
html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
【面试】面试官：说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
H5新特性（一）——音视频标签
H5新特性--音视频标签大家都有在网页中浏览音频和视频的经历,在HTML5之前,对视频和音频没有一个标准,因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是 R ...
h5新特性DOMAST的简单理解
h5新特性 1.一些语义化标签 header.footer.nav.aside.article.section.hgroup(h1~h6的集合) document.createElement('hea ...
Java 8新特性：Optional类
Java 8新特性:Optional类在上一篇介绍Stream流式数据处理的文章中提到了Optional类,这是Java 8新增的一个类,用以解决程序中常见的NullPointerException ...
【Optional类】JDK1.8新特性之Optional类的使用
这篇文章,主要介绍JDK1.8新特性之Optional类的使用. 目录一.Optional类 1.1.Optional类介绍 1.2.Optional属性和方法 (1)value属性 (2)私有构造 ...
JavaScript前端中的伪类元素before和after使用详解
在前端开发中,伪类是一种让你可以选择元素的某个状态或位置的 CSS 选择器.其中,:before 和 :after 伪类允许你在一个元素之前或之后插入内容. :before 和 :after 伪类创建 ...
前端面试html5新特性,前端面试基础-html篇之H5新特性
h用能境战求道,重件开又是正易里是了些之框5的新特性(目前个人所了解)如求圈分件圈浏第用代是水刚道.的它还下语义化标签表单新特性视频(vi朋不功事做时次功好来多这开制的请一例农在deo)和音频( ...

前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21