网站首页 > 教程分享 正文
1.知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化?
像html5的新的标签header,footer,section等就是语义化
一方面,语义化就是让计算机能够快读的读懂内容,高效的处理信息,可以对搜索引擎更友好
另一方面,便于与他人的协作,他人通过读代码就可以理解你网页标签的意义
去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义方式来渲染网页
便于团队开发和维护,语义化更具有可读性,是下一步把网页的重要动向,遵循W3C标准的团队都要遵循这个标准,减少差异化
2.介绍HTML5的新特性
新的DOCTYPE声明<!DOCTYPE html>
完全支持css3
video和audio
本地存储
语义化表圈
canvas
新事件如 ondrag onresize
3.如果解决ajax无法后退的问题?
html5里引入了新的API,即:history.pushState,history.replaceState
可以通过pushState和replaceSate接口浏览器历史,并且改变当前页面的URL
onpopstate监听后退
4.websocket和ajax轮询
websocket是html5中提出的新的协议,可以实现客户端与服务器的通信,实现服务器的推送功能
优点是,只要简历一次连接,就可以连续不断的得到服务器推送消息,节省带宽和服务器端的压力。
ajax轮询模拟常连接就是每隔一段时间(0.5s)就向服务器发起ajax请求,查询服务器是否有数据更新
缺点就是,每次都要建立HTTP连接,即使需要传输的数据非常少,浪费带宽
5.web worker和websocket
worker主线程:
通过worker = new worker(url)加载一个js文件来创建一个worker,同时返回一个worker实例
通过worker.postMessage(data)方法来向worker发送数据。
绑定worker.onmessage方法来接收worder发送过来的数据
可以使用worker.terminate()来终止一个worder的执行。
6.垂直居中
单行行内元素
可以设置padding-top,padding-bottom
将height和line-height设为相等
多行行内元素
可以将元素转为tabel样式,再设置vertical-align:middle;
使用flex布局
块级元素
已知高度绝对定位负边距
未知高度transform:translateY(-50%);
flex布局
display: flex;
justify-content: center;
aligin-items: center;
7.rem 和 em的区别?
em相对于父元素,rem相对于根元素
8.清除浮动
利用clear属性进行清理
父容器结尾插入空标签
<div style="clear: both;"></div>
利用css伪元素:
.clearfix:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
将父容器形成BFC
BFC能清理浮动主要运用的是它的布局规则:
内部的Box会在垂直方向,一个接一个的放置
box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
每个元素margin box的左边,与包含快border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此
计算BFC的高度时,浮动元素也参与计算
浮动清理利用的主要是第六条规则,只要将父容器出发为BFC,就可以实现包含的效果。那么出发BFC有哪种方法?
根元素
float属性不为noe
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inline-flex
overflow不为visible
9.position的值, relative和absolute分别是相对于谁进行定位的?
relative:相对定位,相对于自己本身在正常文档流中的位置进行定位。
absolute:生成绝对定位,相对于最近一级定位不为static的父元素进行定位。
fixed: (老版本IE不支持)生成绝对定位,相对于浏览器窗口或者frame进行定位。
static:默认值,没有定位,元素出现在正常的文档流中。
sticky:生成粘性定位的元素,容器的位置根据正常文档流计算得出。
10.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
选择符:
id选择器(#myId)
类选择器(.myClassName)
标签选择器(div,p,h1)
相邻选择器(h1 + p)
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
属性选择器(button[disabled="true"])
伪类选择器(a:hover,li:nth-child)
有多少人和我一样到后面前的基础都忘了差不多了呢?
猜你喜欢
- 2024-10-28 一起学Vue:路由(vue-router)(vue路由两种方式)
- 2024-10-28 Vue实战065:ScrollBehavior实现路由记录滚动行为
- 2024-10-28 前端开发:带你深入理解路由两种模式
- 2024-10-28 深入浅出谈谈Vue 原理(简述vue原理)
- 2024-10-28 JavaScript禁止页面返回(js禁止浏览器后退)
- 2024-10-28 深度:从零编写一个微前端框架(前端框架从入门到微前端)
- 2024-10-28 2024——前端react进阶题(前端react必读书籍推荐)
- 2024-10-28 浅谈前端路由hash模式和history模式的区别
- 2024-10-28 vue3使用vue-router路由(路由懒加载、路由传参)
- 2024-10-28 手写vue路由(vue路由使用步骤)
你 发表评论:
欢迎- 最近发表
-
- 有了这份900多页的Android面试指南,你离大厂Offer还远吗?
- K2 Blackpearl 流程平台总体功能介绍:常规流程功能
- 零基础安卓开发起步(一)(安卓开发入门视频)
- 教程:让你的安卓像Windows一样实现程序窗口化运行
- Android事件总线还能怎么玩?(事件总线有什么好处)
- Android 面试被问“谈谈架构”,到底要怎样回答才好?
- Android开发工具Parcel和Serialize
- Android 中Notification的运用(notification widget安卓)
- Android退出所有Activity最优雅的方式
- MT管理器-简单实战-去除启动页(mt管理器怎么去除软件弹窗)
- 标签列表
-
- css导航条 (66)
- sqlinsert (63)
- js提交表单 (60)
- param (62)
- parentelement (65)
- jquery分享 (62)
- check约束 (64)
- curl_init (68)
- sql if语句 (69)
- import (66)
- chmod文件夹 (71)
- clearinterval (71)
- pythonrange (62)
- 数组长度 (61)
- javafx (59)
- 全局消息钩子 (64)
- sort排序 (62)
- jdbc (69)
- php网页源码 (59)
- assert h (69)
- httpclientjar (60)
- postgresql conf (59)
- winform开发 (59)
- mysql数字类型 (71)
- drawimage (61)
本文暂时没有评论,来添加一个吧(●'◡'●)