前端知识总结之H5C3篇

最新推荐文章于 2024-07-20 08:51:01 发布

前端周哥

最新推荐文章于 2024-07-20 08:51:01 发布

阅读量256

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_72809383/article/details/128083984

版权

本文介绍了HTML5新增的语义化元素、表单控件、本地存储、媒介播放、绘画和性能优化等特性。同时，讨论了HTML语义化对SEO和团队开发的影响，以及XHTML与HTML的区别。在布局方面，阐述了流式布局、响应式布局和不同方式的居中方法。最后，探讨了网络通信和代码层面的性能优化策略，如文件合并、代码压缩和CDN等。

摘要由CSDN通过智能技术生成

一. H5新增了以下的几大类元素:

内容元素: header , nav , footer , section
表单控件: calender , date , time , email , url , search
本地存储: localStorage 长期存储数据,浏览器关闭后数据不会丢失, SessionStorage 数据在浏览器关闭之后自动删除
媒介播放: video , audio
绘画使用: canvas

二. 语义化的理解:

HTML语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析;
在没有css样式的情况下也能以一种文档显示,并且是容易阅读的
利于SEO,语义化和搜索引擎建立良好的关系,有利于爬虫抓取更多有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重
便于团队开发和维护,语义化更具可读性,便于阅读,维护和理解

三. XHTML和HTML有什么区别?

XHTML文档必须拥有根元素
XHTML元素必须被正确的嵌套
XHTML元素必须被关闭
标签名必须用小写字母

四. C3新特性有哪些?

动画: animation
2D,3D转换: transform
过度: transition
边框圆角:border-radius, 阴影:box-shadow
盒子模型: box-sizing
文字阴影: text-shadow
背景: background-size, background-origin背景图片原点
渐变: linear-gradient
伸缩布局: flex
颜色: rgba()

五. 清除浮动有几种方式?

父级元素设置height
结尾处加空div标签clear:both
父级元素设置overflow: hidden / auto
使用伪类:after 必须设置content: '';

六. 媒体查询的原理是什么?

H5的新特性,使用@media查询,你可以针对不同的媒体类型定义不同的样式

七. 流式布局

按照页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变,使用%百分比定义宽度,高度大都是用px来固定,可根据可视区域和父元素的实时尺寸来调整,尽可能适应各种分辨率

八. 响应式布局

主要实现不同屏幕分辨率的终端上浏览网页的不同展示方式,通过响应式设计能使网站在手机和平板上有更好的浏览阅读体验

九. 性能优化

网络通信方法:(降低请求次数,降低传输量)
- 文件合并
- 精灵图
- 代码压缩
- 图片的压缩
- 启用CDN托管服务
- 启用gzip压缩(网络传输的压缩),二进制压缩,大概可以压缩为原来的1/3
代码层: (节省内存)
- 尽量不使用闭包
- 杜绝无效的循环
- 递归过程优化(添加缓存)
- 业务相关的业务逻辑优化

十. 如何居中一个元素

水平居中
- 行内元素水平居中
  - 父容器使用text-align: center设置
- 块级元素水平居中
  - 将左右外边距设置为auto: margin: 0 auto
  - 将父元素设置为相对定位,子元素绝对定位,向右移动子元素,距离为父容器的一半,然后在向左移动自身的一半
  1. <div class= "parent">
  2. <div class= "child"></div>
  3. </div>
  4. <style>
  5. .parent {
  6. position: relative;
  7. }
  8. .child {
  9. position: absolute;
  10. left: 50%;
  11. transform: translateX(-50%);
  12. }
  13. </style>
  14. 复制代码
  - 父元素设置为flex布局,使用justify-content: center
  - 父元素设置为flex布局,子元素使用margin: 0 auto
- 浮动元素水平居中
  - 利用flex布局,使用justify-content: center实现水平居中
- 绝对定位元素水平居中
  - 通过子元素绝对定位,外加margin: 0 auto实现
  1. <div class= "parent">
  2. <div class= "child"></div>
  3. </div>
  4. <style>
  5. .parent {
  6. position: relative;
  7. }
  8. .child {
  9. position: absolute;
  10. margin: 0 auto; /*水平居中*/
  11. left: 0; /*不能省略,且为0*/
  12. right: 0; /*不能省略,且为0*/
  13. }
  14. </style>
  15. 复制代码
垂直居中
- 单行行内元素垂直居中使用行高=高line-height
- 多行行内元素垂直居中
  - 使用flex布局,调整主轴方向为纵向flex-direction: column,在使用justify-content: center
- 块级元素垂直居中
  - 使用绝对定位距离顶部50%,并设置margin-top向上偏移元素高度的一半(已知高度)
  1. <div class= "parent">
  2. <div class= "child">固定高度的块级元素垂直居中</div>
  3. </div>
  4. <style>
  5. .parent {
  6. position: relative;
  7. }
  8. .child {
  9. position: absolute;
  10. top: 50%;
  11. height: 100px;
  12. margin-top: -50%;
  13. }
  14. </style>
  15. 复制代码
  - 使用绝对定位+transform(未知高度)
  1. <div class= "parent">
  2. <div class= "child">未知高度的块级元素垂直居中</div>
  3. </div>
  4. <style>
  5. .parent {
  6. position: relative;
  7. }
  8. .child {
  9. position: absolute;
  10. top: 50%;
  11. transform: translateY(-50%);
  12. }
  13. </style>
  14. 复制代码
  - 使用flex布局中align-items: center属性,使子元素垂直居中
水平垂直居中
- 绝对定位与负边距实现(已知宽高,兼容所有浏览器)
1. <div class= "parent">
2. <div class= "child" style="width: 100px; height= 100px;"></div>
3. </div>
4. <style>
5. .parent {
6. position: relative;
7. }
8. .child {
9. position: absolute;
10. top: 50%;
11. left: 50%;
12. margin: -50px 0 0 -50px;
13. }
14. </style>
15. 复制代码
- 绝对定位+margin: auto(不需要知道宽高,不兼容低版本IE)
1. <div class= "parent">
2. <div class= "child" style="width: 100px; height= 100px;"></div>
3. </div>
4. <style>
5. .parent {
6. position: relative;
7. height: 200px; /*父容器必须有高度*/
8. }
9. .child {
10. position: absolute;
11. top: 0;
12. left: 0;
13. right: 0;
14. bottom: 0;
15. margin: auto;
16. }
17. </style>
18. 复制代码
- 绝对定位+translate
  1. .parent {
  2. position: relative;
  3. height: 200px; /*父容器必须有高度*/
  4. }
  5. .child {
  6. position: absolute;
  7. top: 50%;
  8. left: 50%;
  9. transform: translate(-50%, -50%);
  10. }
  11. 复制代码
- flex布局主轴对齐,侧轴对齐(不兼容低版本IE)
  1. .parent {
  2. height: 100px;
  3. display: flex;
  4. justify-content: center;
  5. align-items: center;
  6. }
  7. 复制代码
- 父元素flex布局,子元素直接margin: auto即可(最简单的,也不兼容低版本IE)
  1. .parent {
  2. height: 100px;
  3. display: flex;
  4. }
  5. .child {
  6. margin: auto;
  7. }
  8. 复制代码