H5新特性+CSS3新特性

Nini_ya

于 2023-08-15 20:25:24 发布

阅读量64

点赞数 1

文章标签： css3 前端 css html5

本文链接：https://blog.csdn.net/testycookie/article/details/132176303

版权

H5新特性

重要的我详细写，不重要的我就随便带过了。

语义化标签

什么是语义化

HTML语义化是指从HTML元素上就能看出页面的大概结构，比如需要强调的内容可以放在strong标签中，而不是通过样式设置span去写。这样能使页面元素更有意义，利于被搜索引擎解析，利于SEO。

HTML 语义化的建议

应该少使用无意义的div和span标签
在label标签中设置for属性和对应的input关联起来

<label for="female">Female</label>
<input type="radio" name="sex" id="female" />

设置img的alt属性，给a标签设置title属性，利于SEO
与表单、有序无序列表相关的标签不要单独使用

语义化标签包括

header：顶部
nav：导航
article：新闻报道或博客
section：段落，和article嵌套
aside：侧边栏
footer：底部

增强型表单

新的表单中添加了很多输入型控件，比如：number、url、email、range、color、date等，通过input的type属性使用。
例如：<input type="number" name="demo" min="1" max="100" step="2"/>
同时，还添加了一些新的placeholder、required、pattern、min、max、height、width等表单属性

DOM扩展

H5增加的getElementByClassName()方法适用性很广

//取得类中包含"username"和"current"的元素
var usernames = document.getElementByClassName("username current")

HTML5规定可以为元素添加自定义属性，但要加前缀data-，可以通过元素的dataset属性访问自定义属性的值。

<div id="div" data-age="2019" data-name="James"></div>
<script>
var div = document.getElementById("div")
//取得自定义属性的值
var age = div.dataset.age;
var name = div.dataset.name;
</script>

媒体元素

H5新增了audio和video标签,使用时必须加上src

<!-- 视频 -->
<video src="video.mp4">Video Player</video>

<!-- 音频 -->
<audio src="song.mp3">Audio Player</audio>

Web Storage

Web Storage常用的两个对象分别是localStorage和sessionStorage。

sessionStorage对象存储某个特定会话的数据，该数据只保持到浏览器关闭。因为sessionStorage绑定于某个服务器会话，所以文件在本地运行时是不可用的。
localStorage对象目的是跨越会话存储对象，但有特定的访问限制。要访问同一个localStorage对象，页面必须来自同一个域名(子域名无效)，使用同一种协议，在同一个端口上。

Web Sockets

只有支持这种协议的专门服务器才能正常工作，未加密的连接不再是http://而是ws://，加密的连接也不再是https://而是wss://。使用自定义协议而不是HTTP协议的好处是，能够在客户端和服务器之间发送非常少量的数据，而不必担心HTTP那样字节级的开销。

地理位置

Canvas绘图

CSS3新特性

边框

1. CSS3 圆角：border-radius
2. 盒阴影：box-shadow
3. 边界图片：border-image

背景

1. 添加背景图片：background-image
2. 指定背景图片大小：background-size
3. 设置图片位置：background-origin

渐变

background-image: linear-gradient(direction[如，to right], color-stop1, color-stop2, …);

文本效果

1. 盒子阴影：box-shadow
2. 溢出内容设置（比如省略号）：text-overflow: clip; 
3. 文本换行：p {word-wrap:break-word;}

2D转换

1. 盒子根据所给x轴y轴平移：translate		【transform: translate(50px,100px);】
2. 盒子按所给角度旋转，正值为顺时针，负值则相反：rotate	【transform: rotate(30deg);】
3. 放大缩小宽高的比例：scale	  【 transform: scale(2,3); 】//前宽后高

3D转换

过渡

可以设定过多久过渡，过渡事件有多长

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 1s linear 2s; //这是过渡设置
}

div:hover
{
	width:200px; //这是过渡效果
}
</style>
</head>
<body>

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

</body>

动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

“from” 和 “to”，等同于 0% 和 100%

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s; //绑定名称和时间
}
@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>

弹性（flex）盒子

弹性子元素在父容器中的位置：flex-direction

flex-direction: row | row-reverse | column | column-reverse

row：横向左对齐，默认的排列方式。
row-reverse：反转横向右对齐
column：纵向
column-reverse：反转纵向排列

把弹性项沿着弹性容器的主轴线对齐:justify-content

flex-start：弹性项目向行头紧挨着填充。默认值。
flex-end：弹性项目向行尾紧挨着填充
center：弹性项目居中紧挨着填充。
space-between：弹性项目平均分布在该行上。
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

效果展示：

弹性盒子元素在侧轴方向上的对齐方式：align-items（基本都是center）
指定弹性盒子的子元素换行方式：flex-wrap

flex-wrap: nowrap|wrap|wrap-reverse

nowrap：默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap：弹性容器为多行。
wrap-reverse：反转 wrap 排列。

当使用了 flex-wrap 时，align-items只能针对一行，可以用align-content设置各个行的对齐，一般也是center

多媒体查询（不常用）

网格布局（不常用）