WEB前端基础知识点
因为要告知浏览器的解析器用什么文档标准解析这个文档,所以在文档的开头要写上文档类型声明,H5的文档类型声明要比H4文档类型声明简洁的多。因为H5不基于SGML(标准通用标记语言),所以不需要对DTD文档类型定义)进行引用,但是H4是基于SGML,必须对DTD进行引用。H4的三种文档类型声明是:过渡模式,严格模式,
框架模式。
HTML是HyperText Markup Language(超文本文本标记标签语言),通过HTML,浏览器才能解析文档,在页面上显现文档的内容和结构。同时HTML
也是网络三大基石之一:URL(统一资源定位符),HTTP(超文本传输协议)。超文本就是视频,音频和图片。
HTML的行内标签,块级标签,空标签有哪些?
行内标签:a b span img input select strong
块级标签:div ul ol li dl dt dd h1-h6 p
空/单标签:br hr img link meta base source
页面导入外部样式文件时,使用link和@import有什么区别?
(1)link属于XHTML标签,除了加载CSS外,还可以定义RSS,定义rel连接属性等作用;而@import是CSS提供的,只用用于加载CSS。
(2)页面被加载时,link会同时被加载,而@import引用的CSS只能等页面加载完才能加载。
(3)link无兼容性问题,而@import只能在IE5+上才被识别。
HTML和XHTML的区别?
(1)XHTML标签必须拥有根元素HTML
(2)标签必须被正确地嵌套
(3)标签必须正确关闭
(4)标签必须用小写字母
(5)空标签页必须关闭
(6)XHTML兼容性比较好
(7)XHTML不允许使用target="_blank"
(8)XHTML标签属性值必须用引号
w3c的标准与标签语义化?
W3C标准:
(1)所有的标签都使用小写字母
(2)所有的属性值都放在引号里
(3)标签正确嵌套/关闭
(4)符合HTML,CSS,JS的规则
(5)结构层+表示层+行为层
遵循W3C标准和标签语义化有利于:
让页面更友好,支持更多的终端,让更多的人可以使用互联网获得自己想要的信息。
(1)搜索引擎的搜索,有利于爬虫抓取内容
(2)支持多终端
(3)支持样式布局让站点支持个性化
(4)有利于开发和维护
(5)有利于降低成本
(6)提高用户体验
(7)页面能更好的呈现内容结构
浏览器内核的理解?
浏览器的内核分为两部分:渲染引擎和JS引擎,但是由于JS引擎越来越独立了,所以内核也就是倾向渲染引擎。但是因为各个浏览器的内核不一样,所以它们的渲染
引擎就不一样,所以渲染出来的页面也就不一样,这就是为什么浏览器有差异性,为什么我们要去适配浏览器的兼容性。
浏览器的内核有哪些?
firefox内核:Gecko
IE TT 360 世界之窗 搜狗浏览器内核:Trident
Opera:Presto 现为:Blink
Safari Chrome:Webkit
Chrome:blink
H5新特性+新语义化标签
HTML5不是SGML(标准通用标记语言)的子集了,主要是关于图像,位置,存储多任务等功能的增加。
新语义化标签:
绘画:canvas
视频:video
音频:audio
article footer header nav section calendar date time email url search
低端IE通过document.createElement方法添加标签
新特性:
客户端存储机制
cookie是网站为了标示用户身份而储存在用户本地终端上的数据(经过加密)
cookie数据始终在同源的http请求中携带(即使不需要),在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
存储大小:
cookie数据不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制,可以达到5m更大。
期限时间:
localStorage 浏览器关闭后数据不丢失除非删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
作用域是限定在文档源中,文档源url是通过协议+主机+端口决定的,同文档源可以共享数据,不同文档源不能共享
cookie 设置过期时间之前一直有效,即使窗口或浏览器关闭
cookie兼容性好,但是难用,是早期为服务器端脚本设计的客服端存储机制
webworker提供一个简单的方法使得web内容能够在后台运行脚本。
websocket 标签页之间的通信
1.地理位置API
地理位置API(https://www.w3.org/TR/geolocation-API/)它能够允许浏览器(用户允许的情况下)检测用户的地理位置。
2.历史管理API
它允许web应用保存和更新它们的状态,以便当用户点击浏览器的后退与前进按钮的时候,无需刷新页面而立即做出响应。
3.跨文档消息传递
Web Worker
单位与字体
1.px:(Pixel)单位名称像素,相对长度单位,是相对显示器屏幕分辨率而言的。国内使用的多。
WEB前端基础知识点的更多相关文章
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 进击的Python【第十六章】:Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- 进击的Python【第十五章】:Web前端基础之DOM
进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
- 进击的Python【第十四章】:Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- 进击的Python【第十三章】:Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
- web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
- Web前端基础怎么学? JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
- web前端面试知识点整理
一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
随机推荐
- eclemma怎么安装 eclemma的安装与简单使用图文教程(附下载)
来自于:https://www.jb51.net/softjc/628026.html 一. 安装 有两种安装方法 1. 下载安装(推荐) 地址: http://sourceforge.net/pro ...
- 1.C++基础(C、C++)
1.命名空间 所谓namespace,是指标识符的各种可见范围.C++标准程序库中的所有标识符都被定 义于一个名为std的namespace中. 命名空间std封装的是标准程序库的名称,标准程序库为了 ...
- [INS-06006] Passwordless SSH connectivity not set up between the following node(s)
解决方法1 参考:11.2.0.4 runInstaller: [INS-06006] Passwordless SSH connectivity not set up between the fol ...
- 把玩Pencil项目之编译并运行
Pencil是个好项目.使用Electron作为运行环境,如同Vs Code一样,将JS跨平台桌面应用做了一个好的示范.个人很喜欢这种方式,毕竟多年来关注Web全栈开发,有一种JS一统天下的感觉.我的 ...
- 关于asp.net中链接数据库的问题
学习了asp.net 有web服务器控件和C#代码两部分 那么在做页面时候,需要用到数据库和asp.net的链接 课本上只是说明了和SQL server的链接,本文介绍如何在.net中链接 Acces ...
- python导入.py文件
1.from . import D # 导入A.B.D 2.from .. import E # 导入A.E 3.from ..F import G # 导入A.F.G,.. 和 F是连着的,中间没有 ...
- 通过类创建子线程&同步锁
一.通过类创建子线程 import threading class MyThread(threading.Thread): def __init__(self,num): threading.Thre ...
- nginx解决跨域
location ~* \.(eot|ttf|woff|woff2|svg)$ { add_header Access-Control-Allow-Origin *; add_header Acces ...
- CentOS7 源码编译安装Tengine
简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.它的目的是打造一个高效.安全的Web平台. 发展 Tengine的性能和 ...
- Junit4 之 Assert 静态方法介绍
Junit中的assert方法全部放在Assert类中,总结一下junit类中assert方法的分类. 1.assertTrue/False([String message,]boolean cond ...