HTML

 2019/10/08 

HTML基础

1、 Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

作用：声明文件类型定义（DTD），位于文档中最前面，作用是为了告知浏览器应该用哪种文档类型规范来解析文档
定义
- 严格模式（标准模式)，浏览器按照W3C标准来解析
- 混杂模式，向后兼容的解析方法，浏览器用自己的方式解析代码
如何区分？
用DTD来判断
- 有严格格式DTD——严格模式；
- 有URL的过渡DTD——严格模式，没有URL的过渡DTD——混杂模式；
- DTD不存在/格式不对——混杂模式；
- HTML5没有严格和混杂之分
区分的意义
严格模式的排版和js运行模式以浏览器支持的最高标准运行。如果只存在严格模式，那么很多旧网站站点无法工作。

2、 head中的meta：提供关于 HTML 文档的元数据(规定页面的描述、关键词、文档的作者、编码方式等)，属性有 http-equiv + content； name + content。
3、无序列表ul，有序列表ol,表格table-tr-td
4、表单form（action=”定义在submit时候的动作” method=”GET/POST”）（一般在form正下方会接个fieldset标签和legend标签（定义标题））
表单元素：input（type=”text/radio/submit…）,下拉列表select-option,大文本输入框textarea
HTML5新增表单元素：datalist，结合input、option使用，能实现输入框有下拉菜单效果。还有相对少用的keygen、output
5、 em来表示强调的文本，应该使用strong来表示重要文本(内容重要性)
6、 src和herf的区别
href指向网络资源位置，建立当前文档和资源的连接，一般用于超链接
src将所指向资源嵌入到当前文档标签中，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部。
7、 WEB标准以及W3C标准是什么?
标签闭合、标签小写、不乱嵌套、属性值用双引号、使用外链css和js、结构行为表现的分离
8、语义化的理解

用正确的标签做正确的事情！
HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

9、 XHTML和HTML有什么区别?
XHTML 是更严谨更纯净的HTML版本

一个是功能上的差别：主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
另外是书写习惯的差别：XHTML元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

10、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

行内元素有：a b span strong img input select
块级元素有：div ul ol li dl dt dd（都是列表类） h1 h2 h3 h4… p form hr
空元素：br hr（水平线） img input link meta （不需要闭标签）
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行

11、渐进增强和优雅降级
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功> 能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

12、a标签href不跳转
当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法：

// 标签属性href，使其指向空或不返回任何内容。如：
<a href="javascript:void(0);" >点此无反应javascript:void(0)</a>
<a href="javascript:;" >点此无反应javascript:</a>
// 标签事件onclick，阻止其默认行为。如：
<a href="" onclick="return false;">return false;</a>
<a href="#" onclick="return false;">return false;</a>
// 注意：只有一个href="#"是不可以的。

13、ifame标签：一个页面有多个window

可以通过contentWindow和contentDocument两个API获取iframe的window对象和document对象
通过window.self，window.parent，window.top这三个属性分别获取自身window对象，父级window对象，顶级window对象

14、如果一个元素拥有ID属性,那么会创建同名的全局变量

HTML5

1、html5有哪些新特性、移除了那些元素？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
- 新增元素
  - 通过 JavaScript 来绘制2D图形的 canvas 画布标签
  - 使用 XML 描述 2D 图形的语言：SVG （好比HTML相对于文本）
  - 视频 video 和音频 audio 元素
  - 语意化更好的内容元素，比如 article、footer、header、nav、section
- API及功能
  - 获取用户地理位置的 geolocationAPI
  - draggable 属性可拖动
  - Web存储。本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
  - 应用程序缓存（Application Cache），通过创建 cache manifest 文件，可创建 web 应用的离线版本。
  - 新的技术webworker（是运行在后台的 JavaScript，位于外部文件中，不会影响页面的性能）、 websocket、
移除的元素：
- 纯表现的元素：basefont、big、center、font、 s、strike、tt、u
- 对可用性产生负面影响的元素：frame、frameset、noframes
支持HTML5新标签：
- IE8/IE7/IE6支持通过document.createElement方法产生的标签
- 可以利用这一特性让这些浏览器支持HTML5新标签
- 浏览器支持新标签后，还需要添加标签默认的样式
当然也可以直接使用成熟的框架、比如html5shim

2、 HTML5 为什么只需要写 !DOCTYPE HTML
HTML5 不基于SGML（不是SGML的子集），因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

SGML：标准通用标记语言,国际上定义电子文件结构和内容描述的标准，一个庞大的标准，应用范围很广
XML：可扩展标识语言（eXtensible Markup Language），一种精简的SGML版本，一个用来定义其他语言的元语言

3、HTML5的离线储存怎么使用及其原理

功能：在用户没有网络连接时，可以正常访问站点，在用户与有网络连接时，更新用户机器上的缓存文件
原理：基于一个新建的.appcache文件（缓存清单），浏览器打开的并有网络连接的时候，会通过这个清单进行资源缓存。之后离线就可以根据缓存显示页面
使用：在head标签加manifest，指向一个.appcache文件，对该文件编写即可。文件内容分为三部分：CACHE MANIFEST（需要缓存的资源）；NETWORK（不缓存的资源）；FALLBACK（若无法建立因特网连接，就用某文件替代某个文件）。离线状态时，操作window.applicationCache进行需求实现

4、cookies，sessionStorage 和 localStorage 的区别

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
- cookie数据大小不能超过4k
- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage 数据在当前浏览器窗口关闭后自动删除
- cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

原文作者：Jacleklm

原文链接：http://jacleklm.github.io/2019/10/08/HTML/

发表日期：October 8th 2019, 5:20:21 pm

更新日期：September 17th 2023, 10:00:22 pm

Next Post

CSS知识点
Previous Post

HTTPS

CATALOG

1. HTML基础
2. HTML5