前端笔记整理（HTML）

最新推荐文章于 2024-06-19 13:43:19 发布

LeaT07

最新推荐文章于 2024-06-19 13:43:19 发布

阅读量223

点赞数

分类专栏： HTML HTML5 文章标签： html

本文链接：https://blog.csdn.net/leatitia/article/details/117333419

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

前端基础知识

DOCTYPE
xml和HTML的区别
标签属性
对语义化的理解？
`iframe`的优缺点？

DOCTYPE

DOCTYPE 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。网页上不同的文件通过正确声明的HTML的版本，使浏览器就能正确显示网页内容。

特点：

声明不区分大小写，无结束标签
HTML 4.01 中，<!DOCTYPE>声明需引用 DTD（文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。而HTML5 不是基于 SGML，因此不要求引用 DTD。
HTML 4.01 规定的三种<!DOCTYPE> 声明：Strict、Transitional和 Frameset

hack

<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—>
<!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—>
<!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—>
<!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—>
<!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>

支持HTML5新标签

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可利用该特性让这些浏览器支持HTML5新标签；

   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]-->

严格模式与混杂模式区别

严格模式的排版和 JS 运作模式：以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

xml和HTML的区别

html不区分大小写，xml区分大小写
html可以没有闭合标签，xml必须有闭合标签
html可以拥有不带值的属性名，xml中所有的属性必须带值
html是用于显示数据，xml主要用于描述，存放数据
XML 的多个空格不会被合并成一个空格，而 HTML

标签属性

特点：

属性和属性值对大小写不敏感
<p></p>：浏览器会自动地在段落的前后添加空行。（是块级元素）
<pre></pre>：预格式化文本，可用于对空行和空格进行控制;

对语义化的理解？

去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

`iframe`的优缺点？

优点：
- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- 用来实现长连接，在websocket不可用的时候作为一种替代；
- 跨域通信，浏览器多页面通信；
- 历史记录管理，解决ajax化网站响应浏览器前进后台方案，在html5的history api不可用时作为一种替代；
- 纯前端的utf8和gbk编码互转
- 实现无刷新文件上传，在FormData不可用时作为替代方案；
- 创建一个全新的独立的宿主环境。经 @EtherDream 大神提醒，iframe还可以用于创建新的宿主环境，用于隔离或者访问原始接口及对象，比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用，那我们就能通过创建一个iframe，然后从iframe中取回原始对象和方法来破解这种防范。
- IE6下用于遮罩select
- 并行加载脚本
缺点：
- window.onload 事件会在所有iframe 加载完成后才触发，因此会造成页面阻塞；
- 即使内容为空，加载也需要时间；
- 没有语意；