HTML8_CSS3新特性 HTML5新标签 伪元素 怪异盒模型 box-sizing 阴影 box-shadow

码农键盘上的梦
63 阅读3分钟

一.HTML5新标签

HTML5的新特性:

  • 新增了一些标签, 弃用一些标签

  • 增加了本地持久化功能

  • 新增video和audio标签 终结flash

  • 新增了绘图标签 canvas

HTML5的新标签更加强调语义化

1. mark标签 双标签 标记标签

今天周三, 明天周四

2. meter标签 双标签 用来表示容量的使用情况, 一般用来表示电量或者内存

meter标签常用属性:

  • value 当前的容量

  • max 最大容量

  • min 最小容量

  • low 最低预警值

  • high 最高预警值

  • optimum 最佳值

    <meter min="0" max="100" low="20" high="80" optimum="50" value="40"></meter>

3. 单词内换行标签 wbr

<p class="p1">I have a good friend, and her name is Li Hua. Wehave<wbr>
becomefriends</wbr> 
for about two years. She is very kind. When I step into the classroom for the first time,
 she helps me to get familiar with the strange environment.
 The most important thing is that we share the same interest,
 so we have a lot in common. I cherish our friendship so much.</p>

​I have a good friend, and her name is Li Hua. Wehave

becomefriends
for about two years. She is very kind. When I step into the classroom for the first time, she helps me to get familiar with the strange environment. The most important thing is that we share the same interest, so we have a lot in common. I cherish our friendship so much.

4. 拼音/标注标签 ruby

需要配合rt和rp标签使用; rt: 对内容做解释 rp: 当浏览器不支持该标签时, 给用户提示

吴雄飞 总理 当前浏览器版本过低, 请升级浏览器!!

5. 数据提示标签 datalist 需要input标签配合使用

                    <form action="">
			<input type="text" placeholder="请输入想去的城市" name="city" list="c" />
			<datalist id="c">
				<option>郑州</option>
				<option>广州</option>
				<option>杭州</option>
				<option>南京</option>
				<option>北京</option>
			</datalist>
			<input type="submit" />

			<select name="city1">
				<option value="1">郑州</option>
				<option value="2">广州</option>
				<option value="3" selected>南京</option>
				<option value="4">北京</option>
			</select>
	</form>

6. 音频标签 audio

audio标签支持的音频格式mp3, ogg, wav格式

常用属性:

  • src: 需要播放的音频资源的位置(本地, 网络)

  • controls: 显示控制条

  • loop: 是否循环播放

  • autoplay: 是否自动播放

  • muted: 是否静音

注意: 属性名和属性值相同的属性, 可以只写属性名就可以起效.

<audio src="http://qiniu.cunzhuang.top/%E5%85%AD%E5%93%B2%20-%20%E4%BD%A0%E7%9A%84%E5%BF%83%E6%98%AF%E5%90%A6%E4%B9%9F%E6%9C%89%E6%88%91%E7%9A%84%E5%90%8D.mp3" controls loop autoplay muted>
			<!--source标签 可以承载不同的资源格式, 用于audio在不支持当前资源格式时予以替换-->
			<source src="http://qiniu.cunzhuang.top/%E5%85%AD%E5%93%B2%20-%20%E4%BD%A0%E7%9A%84%E5%BF%83%E6%98%AF%E5%90%A6%E4%B9%9F%E6%9C%89%E6%88%91%E7%9A%84%E5%90%8D.ogg" type="audio/ogg"></source>
			<source src="http://qiniu.cunzhuang.top/%E5%85%AD%E5%93%B2%20-%20%E4%BD%A0%E7%9A%84%E5%BF%83%E6%98%AF%E5%90%A6%E4%B9%9F%E6%9C%89%E6%88%91%E7%9A%84%E5%90%8D.wav" type="audio/wav"></source>
</audio>

7. 视频标签 video

支持mp4, ogg, webm格式的视频

常用属性:

  • src: 需要播放的视频资源的位置(本地, 网络)

  • controls: 显示控制条

  • loop: 是否循环播放

  • autoplay: 是否自动播放

  • muted: 是否静音

8. H5新增的表单控件

<form action="" method="get">
			<!--调色板-->
			<input type="color" />
			<!--邮箱格式输入框-->
			<input type="email" />
			<!--网址格式输入框 https://www.baidu.com  域名解析-->
			<input type="url" />
			<!--数字类型输入框
				常用属性:
				min属性:最小值
				max属性:最大值
				value属性:当前值
				step属性: 步长
			-->
			<!--<input type="number" min="10" max="20" value="15" step="2"/>-->

			<!--滑竿
				常用属性
				max: 最大值
				min: 最小值
				value: 当前值
			-->
			<input type="range" name="r" min="0" max="10" value="5" />
			<!--日期时间有关的控件-->
			<!--显示年月日-->
			<input type="date" name="d1" />
			<!--显示年和周-->
			<input type="week" name="d2" />
			<!--显示时间-->
			<input type="time" name="d3" />
			<!--显示年月日+时间-->
			<input type="datetime-local" name="d4" />

			<!--input常用的属性
				1. required  要求该输入框必须填写内容
				2. autofocus 自动聚焦, 如果有多个input设置该属性, 第一个起效果
			-->
			<hr />
			<input type="text" required autofocus/>
			<input type="text" autofocus/>
			<input type="submit" />
</form>

9. 语义化分区标签

header标签 标签定义文档的页眉（介绍信息）

section标签 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

footer标签 标签定义文档或节的页脚。 页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

二. 伪元素

  • 伪元素和伪类选择器两者没有关系

  • 伪元素的作用几乎与真正的html元素一致, 区别是, html元素是有存在的标签的, 伪元素没有标签

伪元素的语法:

::after
::before

.city::after {
				content: "";
				display: inline-block;
				width: 0px;
				height: 0px;
				border: 10px solid transparent;
				border-top-color: black;
}

伪元素的适用场景:

  • 当我们发现我们使用某些html元素的目的不是为了展示内容而是为了解决布局产生的问题时(如: 清除浮动的影响), 可以考虑使用伪元素解决这类问题

  • 当我们发现页面展示的某些特别微小的效果, 这些效果甚至没有必要使用html元素来实现时, 也可以考虑通过伪元素来实现

三. 怪异盒模型 box-sizing

盒模型分为两种:

  1. 普通盒模型 content-box

  2. 怪异盒模型 border-box

两种盒模型的组成部分都是相同的, 区别是 计算盒子大小的规则不同

  • 普通盒模型计算盒子大小的规则: 同一方向所有值累加

  • 怪异盒模型计算盒子大小的规则:

盒子的宽 = width(内容的宽+左右padding+左右border) + 左右margin

盒子的高 = height(内容的高+上下padding+上下border) + 上下margin

四. 阴影 box-shadow

  1. x方向的偏移量

  2. y方向的偏移量

  3. 阴影的发散度

  4. 阴影的宽度

  5. 阴影的颜色

  6. 内阴影

    box-shadow: 10px 10px 10px 10px gray inset;

avatar
文章
阅读
粉丝