面试准备之(一):HTML元素基础总结

**

一:HTML文档的组成:

**
标准的超文本标记语言组成元素如下:
在这里插入图片描述
1、HTML5新增属性及优点:
1)旧版本依赖插件实现功能(如Flash插件),而HTML5聚合了插件功能,如播放视频、音频的 video 和 audio 元素。
2)HTML5不再基于SGML,所以文档声明类型DOCTYPE只有一种,不需要再引用DTD:
标准形式:<!DOCTYPE html>
3) HTML5删除了一些过时无用的(一些与语义化冲突的)元素,如font和center,新增了一些语义化元素: article、footer、header、nav、section、menu,新的表单控件:number、date、time、email、url、search、color、range、month、week、datetime、datetime_local,新功能:canvas、video\audio
4)制定了新的全局属性和元素属性,全局属性:draggable、contenteditable,元素属性:accept、placeholder等
2、浏览器渲染模式有哪几种?
1)怪异模式(混杂模式):向后兼容,兼容早期浏览器,如颜色值要以#开头、设置元素左右外边距margin:auto,不会水平居中等
2)接近标准模式:由某些DOCTYPE触发,基本接近标准模式,区别:如计算表格单元格尺寸要基于CSS2,可以消除图像底部的空隙
3)标准模式:常用,根据规范呈现页面。
3、HTML和XHTML区别:
1)XHTML需要元素嵌套正确
2)XHTML标签区分大小写
3)XHTML标签需要有结束标签,如</ div>
4)XHTML中可以混合各种XML应用,如MathML、SVG
5)HTML中读取标签名和属性名以大写返回,XHTML中以小写返回
6)XHTML中元素属性值必须要用引号包裹,且不允许简化
7)XHTML中特殊字符要换成实体引用,如’<'要用‘&lt;’代替,
HTML中也一样要对不能识别的符号进行实体转化,常见的实体(entity,特点:只显示,不执行不计算)定义方式有:名称方式;十进制方式;十六进制方式。例:
在这里插入图片描述

二、HTML元素常考知识点

1、嵌入CSS的方式及重点:
1)内联样式:使用全局属性style=“ ”方式
2)内嵌样式:全局属性+4个特殊属性:type,media,title,scoped。使用元素<style type="text/css"></style> //type处的属性还可以为scoped(定义样式使用范围仅在当前文件),media(指定样式应用的媒体类型),title(设置首选样式表,title='red'即为元素首选样式颜色为红色)
3)外部样式:用元素link使用,有http请求,特殊属性有5个:type,media,title,href,rel.
rel:定义当前文档与目标资源的关系,一般是stylesheet(文档的外部样式表)
href:定义要链接的资源的URL,可以为相对/绝对URL
例:<link rel="stylesheet" type="text/css" href="css/style.css"/>
2、嵌入JS的方式:
1)内联脚本(无http,当前文档可用):<script> </script>方式,主要问题:导致资源下载阻塞,不能并行下载。原因是内联脚本中可能会有依赖样式表中的CSS规则的代码,所以必须要等样式表下载完、内联代码执行完后,才会下载后续资源。
2)外部脚本(有http,整个项目可用):<script src="xxx.js" type="text/javascript" ></script> 将内容和行为分离,维护性和复用性优于内联。阻塞问题解决:增加两个布尔值:defer–HTML文档解析和外部脚本下载同步进行,都完成后脚本执行;async–HTML文档解析和外部脚本下载同步进行,但下载完脚本即开始执行。
3)元素属性(无http,不可复用):

  • 事件属性:on为前缀,缺点是无复用性、执行内容简单不适用于复杂场景、可读性差
  • 特殊协议:“javascript:”伪协议,只能用于特定的几个属性:如a元素的href、from元素的action属性等。

3、HTML5常用元素:
元素作用域定义:CSS规范规定,每个元素都有 display 属性,确定该元素的类型,每个元素都有默认的 display 值,如 div 的 display 默认值为“block”,则为“块级”元素;span 默认 display 属性值为“inline”,是“行内”元素。
行内元素有:a b span img input select strong
块级元素有:div ul ol li dl dt dd h1 h2 h3 …p
空元素:常见:br hr img link input meta;不常见:area base col command embed keygen param source track wbr

4、meta元素可以定义文档的哪些元数据:
1)charset:声明HTML文档内容所用的字符编码:<meta charset=utf-8>
2)name:提供给计算机如搜索引擎,让其更好理解索引,提升SEO;可设置视口宽高、是否可以伸缩等适配不同设备: <meta name=viewport content="user-scalable=no,width=device-width">
3)http-equiv:指定首选样式表、执行重载(定义秒数:content=“2”//2s)或重定向(定义秒数和url,例如:content=“2”; url=http://www/diandiantest.com)

5、input元素的类型及相关属性介绍:
1)文本:type=hidden、text、password、tel、email、search、url,除password外都有list属性
例:<input type="tel" form="info" />
2)日期:type=date、datetime-local、month、time、week
3)数值:type=number(可输入整数或浮点数)、range(指定范围内的数值,包括整数或浮点数,可用step设置增量值)
4)按钮:type=image(图像做成按钮,可提交表单)、button、submit(提交表单)、reset(重置表单)
5)其他:checkbox(选择是/否,多选)、radio(选择是/否,单选)、color(指定颜色)、file(将选定的文件上传服务器,可使用multiple进行多选上传)

6、iframe框架:
优点和作用:
1)嵌入第三方内容
2)无刷新可上传文件
3)长轮询,实现设备监控、文字直播,现用webSocket替代
4)跨域通信,暴露了数据且数据量很小
5)可用iframe实现一个统一风格的页面,然后把这个页面在一个新页面中嵌套、引入,形成最终的网页
6)在移动端使用iframe唤起客户端的功能,如JSBridge
缺点:
1)浏览器对于同一域名的请求数量是有限制的,而frame中的文档和frame这个父文档本身共享链接(域名),如果子文档过多,就会出现部分子文档的资源只能等待。换句话说,会增加http请求
2)搜索引擎的爬虫程序无法解读这种页面
3)框架结构中出现各种滚动条
4)可以制造点击劫持,将一个iframe作为隐藏显示在文档中,引诱用户点击,常见的页面弹出的垃圾广告

7、canvas和SVG:

1)canvas位图图像:像素点构成

  • 只能使用JS绘制图形、设置CSS样式和动画
  • 实现图像合成和裁剪,还可修改图像的像素数据实现滤镜效果等
  • 内容变化就会重新渲染整个画布
  • 绘制按钮时,不能直接添加DOM事件(如点击)
  • 使用时,画背景fillStyle,画形状fillRect,画文本fillText

2)SVG矢量图形:点和线组成,是一种用XML描述图形的标记语言

Canvas和SVG实现举例:
在这里插入图片描述
在Chrome上的效果图:
在这里插入图片描述
8、HTML5数据存储:
1)Cookie:用于浏览器和服务器之间传递额外的数据,常用语标识用户身份,避免重复验证。
缺点:a、大小只有4KB,只能存储简单信息
b、可以指定过期时间进行记忆用户信息,但是记忆的内容会放在http首部,用户过多时会影响带宽(速度)
c、不适合存储隐私信息,因为cookie会在网络中传递,容易被劫持 — 设置HttpOnly属性禁止页面的JS访问此cookie,避免被盗。
特点:a、存储时间:在设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭
b、作用域:所有的同源窗口共享
c、存储位置:浏览器端
2)Web存储–local Storage:
特点:a、存储大小大概5MB
b、存储时间:即便窗口或浏览器关闭也一直有效
c、作用域:所有的同源窗口共享
d、存储位置:浏览器端
3)Web存储–session Storage:
特点:a、存储大小大概5MB
b、存储时间:仅在浏览器窗口关闭之前有效
c、作用域:不在不同的浏览器共享
d、存储位置:浏览器端
4)userData:
特点:a、存储大小大概1MB
b、存储时间:在设置的失效时间内都有效
c、作用域:所有的同源窗口共享
d、存储位置:HTML元素中

9、浏览器内核相关:
1)简介:可以认为内核分为渲染引擎(Layout Engine或Rendering Engine)和JS引擎两部分,目前JS引擎越来越独立,所以直接称内核就是渲染引擎也可以。
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
JS引擎:解析和执行javascript来实现网页的动态效果。
2)目前常见的内核:
IE浏览器:Trident内核
Safari浏览器:Webkit内核
Opera浏览器:Presto内核----Blink内核
Chrome浏览器:webkit内核—Blink内核
Firefox火狐浏览器:Gecko内核

10、HTML5的文件离线储存,工作原理?

<html manifest='cache.manifest'>  //在cache.mainfest中规定需要缓存的内容

原理:在线 + HTML头部有manifest属性====>浏览器请求manifest文件
如果是第一次访问,那么浏览器就会根据manifest文件的内容下载相应的资源,并进行离线存储。
如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不会做任何操作,如果文件改变了,那么就会重新下载文件中的资源,并且进行离线存储。

未完待续。。。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值