前端笔记整理(html)(代码片段)

Leatitia Leatitia     2022-12-09     647

关键词:

前端基础知识

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> 声明:StrictTransitionalFrameset

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 加载完成后才触发,因此会造成页面阻塞;
    • 即使内容为空,加载也需要时间;
    • 没有语意;

前端笔记整理(编程)(代码片段)

基础编程在js中怎么捕获异常?写出来看看?应该在哪些场景下采用呢?说说你对hosts文件的理解,它都有哪些作用?a标签的href和onclick属性同时存在时,哪个先触发?数组去重遍历循环.indexOf()利用Set... 查看详情

前端笔记整理(vue)(代码片段)

Vue学习总结MVVM原理了解响应原理v-model双向绑定原理生命周期nextTick在哪里使用?原理是?vue.use是干什么的?原理是什么?Vue路由vue路由模式路由导航方式Vue-router有几种钩子函数?组件通信axios拦截器配置webpac... 查看详情

一名深漂程序员:我所整理和收集的前端面试题(笔记)(代码片段)

系列文章目录一名深漂程序员:我所整理和收集的前端面试题(一)一名深漂程序员:我所整理和收集的前端面试题(二)一、如何做性能优化1.webpack工程环境层面的优化1.新的工具,更好的代码压缩... 查看详情

一名深漂程序员:我所整理和收集的前端面试题(笔记)(代码片段)

系列文章目录一名深漂程序员:我所整理和收集的前端面试题(一)一名深漂程序员:我所整理和收集的前端面试题(二)一、如何做性能优化1.webpack工程环境层面的优化1.新的工具,更好的代码压缩... 查看详情

前端面试整理(代码片段)

第一阶段1、XHTML与HTML与HTML5的有何异同?HTML是一种超文本标记语言HTML5最先由whatwg命名的一种超文本标记语言,随后与W3Cxhtml2.0相结合,生成现代最新的一种超文本标记语言h5=html+css3+js+APIhtml与html5主要区别是语义化的标签<heade... 查看详情

前端笔记整理(css)(代码片段)

前端基础知识CSS3新特性定位常见类型`position:absolute`和`float`属性CSS盒模型`margin`塌陷浮动.clearfixBFC常见布局水平垂直居中flex布局flex属性flexitems属性两边宽度固定、中间栏自适应三栏布局怎么能让图文不可复制px... 查看详情

前端笔记整理(js)(代码片段)

前端基础知识数据类型JS数据类型数组检测数组迭代方法转换方法栈方法(后进先出)队列方法(先进先出)重排序方法操作方法位置方法(全等比较)归并方法类数组(Array-like)对象对象属性类... 查看详情

前端必会的html知识总结整理(代码片段)

1.浏览器内核ie:trident(三叉戟)内核firefox:gecko(壁虎)内核safari:webkit(浏览器核心)内核opera:以前是presto(急速)内核,现在是和谷歌共同开发的blink࿰ 查看详情

html笔记:前端-移动端下拉刷新-2.javascript通过窗口引入(代码片段)

查看详情

html笔记:前端-移动端下拉刷新-1.html基本结构和css文件(代码片段)

查看详情

青训营html基础-语义化标签-浏览器渲染过程-笔记及拓展(代码片段)

HTML是接触前端所学习的第一个技术栈了,可以说是前端学习的启蒙技术栈(哈哈哈)博主还是很久之前学习的,这次趁着字节跳动青训营的活动,就再学习一遍HTML。一小时的课程,巩固了之前的一些知识&... 查看详情

html两万字王者笔记大总结❤️熬夜整理&建议收藏❤️(上篇)(代码片段)

❤️HTML必备知识详解❤️第一部分:HTML框架简介1.是什么&怎么学&用什么工具(1)什么是HTML?(2)怎么学HTML?(3)使用的工具:2.HTML的基本结构3.HTML文件的规范4.HTML的基本模板第二... 查看详情

前端开发入门基础---html笔记篇(代码片段)

牛牛纯手码!!!!新鲜出炉的:源码+笔记(还热乎)分为上下两篇,作为pink老师的亲传弟子,好吃的“包子”当然要分享给更多的人!10天码出近"五万"字的“源码+笔记”ÿ... 查看详情

html笔记:前端开发中的“居中”,绝对定位,transform和flex布局:1。html结构(代码片段)

查看详情

html笔记:前端-移动端下拉刷新-3.带有require.js的amd(代码片段)

查看详情

html两万字王者笔记大总结❤️熬夜整理&建议收藏❤️(下篇)(代码片段)

❤️HTML必备知识详解❤️☀️第三部分:特殊符号❄️(1)什么是特殊符号?🌀(2)为什么需要特殊符号?☔️第四部分:表格⛄️(1)什么是表格?🌁(2)表格如今用来... 查看详情

前端知识整理(代码片段)

 前端知识整理代码千万行,安全第一行;前端不规范,运营两行泪*HTML HTML语义化HTML语义化是指仅仅从HTML元素上就能看出页面的大致结构,比如需要强调的内容可以放在<strong>标签中,而不是通过样式设置<span>... 查看详情

前端基础知识整理回顾~~(代码片段)

...言  编程:   使用(展示)数据存储数据处理数据  前端    1.前端是做什么的?  前端负责后端返回数据的展示 或者对前端数据提交给后端  2.起我们为什么要学前端?  1.全栈    3.前端都有哪些内容... 查看详情