002 html总结
1.题目
- 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
- div+css的布局较table布局有什么优点?
- strong与em的异同?
- 你能描述一下渐进增强和优雅降级之间的不同吗?
- 为什么利用多个域名来存储网站资源会更有效?
- 请描述一下cookies,sessionStorage和localStorage的区别?
- 简述一下src与href的区别。
- 你如何理解HTML结构的语义化?
一:解答
1.Doctype
文档类型,一个文档类型标记是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。
Doctype还会对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析,所以Doctype是非常关键的,尤其是在 IE 系列浏览器中,由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。
总结为:
HTML5提供的<DOCTYPE html>
是标准模式,向后兼容的, 等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的 标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。
2.div+css的布局较和able布局的优点?
一、div+css布局的好处:
1.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。
2.布局精准,网站版面布局修改简单。
3.加快了页面的加载速度(最重要的)(在IE中要将整个table加载完了才显示内容)。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签,提高另外搜索引擎对网页的搜索效率。
二、table布局的好处(table布局也不是一点用的没有,这点是毋庸置疑的)
1.容易上手。
2.可以形成复杂的变化,简单快速。
3.表现上更加“严谨”,在不同浏览器中都能得到很好的兼容。
3.div+css的布局较table布局有什么优点?
1,其实也是div+css布局的第一个特点,table标签被严格地定义为存放数据的一个区域,而不是布局工具,它的布局形式不符合W3C标准,没有实现结构和表现的分离,它既有css的表现功能,也有html的结构功能。
2,table布局加载网页时,必须整体加载完,降低了网页的呈现速度,而div+css布局是边加载边显示的。
3,table布局在网页代码编写时,有时需要嵌套多重表格才能实现,但使用div+css布局,相对而言会减少许多嵌套时的代码,更容易检查和维护。
4,table布局不方便表现的更换,使用div+css布局,大多只要更改css样式表就能变化表现形式。
5、易于维护和改版。
4.strong与em的比较
strong:粗体强调标签,强调,表示内容的重要性;
em:斜体强调标签,更强烈的强调,表示内容的强调点,即一个是粗体,一个是斜体,都表示强调。
5.你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的、能够起作用的版本开始,并不断扩充,以适应未来环境的需要。
6.为什么利用多个域名来存储网站资源会更有效?
1. CDN缓存更方便
CDN:是构建在网络之上的内容发布网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容发布、调度等功能模块,是用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要是内容存储和分布技术。简单来说,CDN主要用来使用户就近获取资源。
2. 突破浏览器并发限制
同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。大多数浏览器的并发数量都控制在6以内。有些资源的请求时间很长,因而会阻塞其他资源的请求。因此,对于一些静态资源,如果放到不同的域名下面就能实现与其他资源的并发请求。
因而后来衍生了domain dash来加大并发数,但是过多的域名会使DNS解析负担加重,因此一般控制在2-4个。
对于图片资源的加载,利用css sprites技术,结合background的定位在同一张图片中加载多个图片,这也是减少并发数量的一种常用方法。
3. 节约cookie带宽
假如twitter 的图片放在主站域名下,那么用户每次访问图片时,request header 里就会带有自己的cookie ,header 里的cookie 还不能压缩,而图片是不需要知道用户的cookie 的,所以这部分带宽就白白浪费了。 写主站程序时,set-cookie 也不要set 到图片的域名上。 在小流量的网站,这个cookie 其实节省不了多少带宽,当流量如facebook twitter 时,节省下来就很可观了。
4. 节约主域名的连接数,优化页面响应速度
5. 防止不必要的安全问题
7.请描述一下cookies,sessionStorage和localStorage的区别?
相同点:都存储在客户端
不同点:
1.存储大小
- cookie数据大小不能超过4k。
- sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
2.有效时间
- localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
- sessionStorage 数据在当前浏览器窗口关闭后自动删除。
- cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
- cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
- sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
8.简述一下src与href的区别
1.src用于替换当前元素,href用于在当前文档和引用资源之间确立关系。
src-source,指向外部资源位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的
资源下载并应用到文档内部,例如js脚本,img图片和frame等元素。
<script src="source.js"></script>
当浏览器解析到元素时,会暂停其他资源的下载和处理,直到该资源,编译,执行完毕,图片和框架也是如此,类似将所指向资源嵌入标签内,这也是为什么js放在底部而不是头部。
2.href - Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档之间的链接,如果我们在文档中添加
<link href="css.css" rel="stylesheet"/>
href 目的不是为了引用资源,而是为了建立联系,让当前标签能够链接到目标地址。
那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。
9.如何理解语义化
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
转载于:https://www.cnblogs.com/juncaoit/p/10438395.html
002 html总结相关推荐
- Datawhale组队学习周报(第002周)
Datawhale组队学习周报(第002周) (一)当下 本周(02月22日~02月28日),我们正在进行5门开源内容的组队学习.一共建立了6个学习群,参与人数1080人.到目前为止,有4门课开源内容 ...
- 《新程序员002》图书正式上市! 从“新数据库时代”到“软件定义汽车”
20年前,伴随着互联网打开信息化大门,技术人成为新时代的开拓者.在时代的召唤下,CSDN于2001年推出国内首个面向IT人员的专业杂志--<程序员>,成为一代代开发者的技术启蒙.20年后的 ...
- SpringCloud(第 002 篇)简单电影微服务类(消费方,而提供方为用户微服务)
2019独角兽企业重金招聘Python工程师标准>>> SpringCloud(第 002 篇)简单电影微服务类(消费方,而提供方为用户微服务) 一.大致介绍 微服务与微服务之间通过 ...
- 基础002. Editplus编辑远程文件
本文"植物微生物组"公众号原创,ID: plantmicrobiome 作者:刘永鑫 编辑:翟志文 原文链接:基础002. Editplus编辑远程文件 Editplus 远程打开 ...
- 职场思想分享002 | 入职第一个月工资这样花,一年内工资至少再涨50%!
今天为大家分享老男孩核心思想108招之第002招:入职第一个月工资这样花,一年内工资至少再涨50%! --如果你不是第一次工作,那就按跳槽后入职的第一个月计算吧! 不管生活多么的困难,新人入社会以后入 ...
- Java8 Lamdba表达式 002
本篇将讲述lamdba表达式的排序,本例包括一个Player对象的集合[稍后定义],通过每一个player的分数高低对列表的player进行排序.类定义001例如以下 public class Sor ...
- NLP-基础知识-002 (语言模型)
一.Noisy Channel Model p(text|source) = k * p(source|text)P(text) ----> Noisy Channel Model主要通过贝叶斯 ...
- Python:每日一题002
题目: 企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40万 ...
- python解释器内建函数002
001.dict 函数来创建字典 #!/usr/bin/python #!coding:utf-8if __name__ == "__main__":dct001=dict(hos ...
- 码农人生——从未学过Android如何开发Android App 案例讲解-第002期案例
标题有点晃眼,本次分享是002期博文的实践故事,不会有任何代码.也不会教别人android 如何开发,类似博文已经有大批大批,而且还会有陆陆续续的人写,我写的文章,主要是经验之谈,希望总结出的一些方法 ...
最新文章
- Java基础之多线程详细分析
- Django项目:CRM(客户关系管理系统)--50--41PerfectCRM实现全局账号密码修改
- 一步步编写操作系统 48 加载内核1
- 小学奥数 7834 分成互质组 python
- 来自官方文档的Ubuntu 16.04 + tensorflow-GPU 配置
- StringUtils工具类常用方法汇总1(判空、转换、移除、替换、反转)
- 【开篇】初等数论及其核心内容
- 游戏素材网站推荐!!!
- 用电脑键盘打出常用特殊符号
- UDP与TCP协议详解
- 百度云网盘资源高速下载免登录网页版教程分享
- 关于Linux系统重启过慢问题解决方案
- 【面试篇】牛客网面试总结
- 数字化时代-11:从马斯洛需求层次看未来选择做什么样的产品
- input框中的背景文字
- 图灵程序设计丛书:大规模数据处理入门与实战.epub
- Cmake和Mingw下载
- Android 7.0 开发者版本
- CSS基础:引用外部字体
- HashMap?面试?我是谁?我在哪? 侵立删