做django后台网站,做网站建设有前景吗,官方关停13家网站,制作二维码软件目录 DOCTYPE#xff08;文章类型#xff09;head标签浏览器乱码的原因及解决常用的meta标签与SEOscript标签中defer和async的区别srchref区别HTML5有哪些更新语义化标签媒体标签表单进度条、度量器DOM查询Web存储Canvas和SVG拖放 #xff08;HTML5 drag API#xff0… 目录 DOCTYPE文章类型head标签浏览器乱码的原因及解决常用的meta标签与SEOscript标签中defer和async的区别srchref区别HTML5有哪些更新语义化标签媒体标签表单进度条、度量器DOM查询Web存储Canvas和SVG拖放 HTML5 drag APIWebSocket img的srcset属性行内元素、块级元素、空元素Web WorkerHTML5离线存储title与h1、b与strong、i与em的区别iframe的优缺点渐进增强和优雅降级之间的区别 DOCTYPE文章类型
!DOCTYPE html DOCTYPE作用 !DOCTYPEHTML5中一种标准通用标记语言的文档类型声明作用是告诉浏览器解析器应该以什么样的文档类型定义HTML或XHTML来解析文档不同的渲染模式会影响浏览器对CSS、JavaScript的解析。 浏览器渲染页面的两种模式
浏览器渲染页面有两种模式CSS1Compat标准模式与BackCompat怪异模式
在W3C标准出台以前浏览器在对页面的渲染上没有统一规范各个浏览器对页面的渲染上存在差异甚至是同一浏览器的不同版本中对浏览器的渲染也不同产生了Quirks mode或Compatibility Mode。
在W3C标准推出之后浏览器渲染页面有了统一标准(CSScompat或Strict mode、Standars mode)。但为了保证旧的网页还能继续正常渲染使用保持浏览器渲染的兼容性浏览器都保留了旧的渲染方法。因此浏览器的渲染产生了Quircks mode和Standars mode两种模式。
标准模式CSS1Compat 浏览器使用W3C的标准解析渲染页面。
HTML4提供了三种DOCTYPE可选择
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd
XHTML1.0提供了三种DOCTYPE可选择
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd元素真正的宽度 margin-left border-left-width padding-left width padding-right border-right-width margin-right;
怪异模式BackCompat 浏览器使用自己的解析渲染引擎来解析渲染页面。
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
或什么也不加width则是元素的实际宽度内容宽度 width - (margin-left margin-right padding-left padding-right border-left-width border-right-width); 怪异模式和标准模式
head标签 head 标签是 HTML 文档的一个重要部分它通常位于文档的起始位置在 html 标签内部。head标签中包含的元素提供了关于文档的元信息以及引用外部资源和定义文档属性的方法。 作用
文档元信息描述文档的属性如标题、字符编码等引用外部资源head中引用外部资源如样式表、脚本文件、图标等也可以定义网站图标。SEO搜索引擎优化一些元信息和标签可以用于改善搜索引擎对页面内容的理解和索引。
head部分有以下几标签base、link、meta、script、style、title其中title定义文档标题是head部分中唯一必需的元素。
浏览器乱码的原因及解决 字符编码是一种将字符映射到数字编码的方法用于在计算机中表示和存储文本。如果网页的字符编码与浏览器解析时的字符编码不一致就可能出现乱码问题。 字符编码不一致 当网页的字符编码与浏览器解析时的字符编码不匹配时浏览器无法正确解析和显示字符。即网页源代码是gbk的编码而内容中的中文字是utf-8编码当浏览器打开就会出现html乱码。 解决 确保服务器响应头和HTML中的标签正确设置字符编码。通常使用UTF-8编码。 服务端设置响应头Content-Type: text/html; charsetutf-8 HTML中设置meta标签meta charsetUTF-8服务器端编码问题 服务器生成的文本或数据以错误的字符编码传递给浏览器导致浏览器无法正确解析。 解决 在服务器端确保生成的文本和数据以正确的字符编码输出。通常使用UTF-8编码。字体问题 某些字体可能不包含特定字符的字形导致浏览器无法正确渲染这些字符。 解决 在CSS中使用通用字体族如font-family: sans-serif;以便浏览器可以自动选择适合的字体。
常用的meta标签与SEO !-- charset描述HTML文档的编码类型 --meta charsetUTF-8!-- viewport适配移动端可控制视口的大小和比例content参数width viewport 宽度(数值/device-width)height viewport 高度(数值/device-height)initial-scale 初始缩放比例maximum-scale 最大缩放比例minimum-scale 最小缩放比例user-scalable 是否允许用户缩放(yes/no)--meta nameviewport contentwidthdevice-width, initial-scale1.0meta namedescription content页面内容描述meta namekeywords content页面关键词meta nameauthor content网页作者信息!-- refresh页面重定向和刷新 --meta http-equivrefresh content0; urlhttp://example.com!-- robots搜索引擎索引方式content参数all文件将被检索且页面上的链接可以被查询none文件将不被检索且页面上的链接不可以被查询index文件将被检索follow页面上的链接可以被查询noindex文件将不被检索nofollow页面上的链接不可以被查询--meta namerobots contentindex,follow /script标签中defer和async的区别
在HTML中会遇到以下三类script
script srcxxx/script //同步容易阻塞浏览器解析HTML文档导致白屏。
script srcxxx async/script //异步可能阻塞也可能不阻塞。
script srcxxx defer/script //异步不阻塞浏览器解析HTML文档。1、浏览器在解析HTML文档时如果遇到 script srcxxx/script 标签会停止解析文档立即加载并执行指定的脚本执行完毕之后才会继续解析后面的标签。
2、浏览器在解析HTML文档时如果遇到 script srcxxx async/script 标签时说明该脚本的网络请求加载是异步进行的不用等脚本加载完之后再加载页面或加载其他脚本不会阻塞浏览器解析HTML。但是当脚本加载完毕之后如果此时HTML还未解析完浏览器会暂停解析HTML先让JS引擎执行代码执行完毕后再解析HTML。
3、浏览器在解析HTML文档时如果遇到 script srcxxx defer/script 标签时说明该脚本的网络请求加载是异步进行的不用等脚本加载完之后再加载页面或加载其他脚本不会阻塞浏览器解析HTML。且当脚本加载完毕之后如果此时HTML还未解析完浏览器不会暂停解析HTML而是等HTML解析完毕之后再让JS引擎执行代码。
浏览器的渲染流程 1、浏览器接收到字节数据转成字符串网页字符串交给HTML解析器通过词法分析转换成token标记然后解析器根据token构建节点形成DOM树。 2、浏览器的加载解析过程是“自上而下”的若在解析html时遇到JavaScript资源URL没有标记异步方式则需要停止当前DOM树创建直到JavaScript加载并被JavaScript引擎执行后才继续DOM树的创建。因为js可能会改动dom和css造成解析浪费。如果脚本是外部的则会等待脚本下载完毕再继续解析文档脚本解析会将脚本中改变DOM和CSS的地方分别解析出来追加到DOM树和Style表上。 3、如果节点中有其他资源如图片、视频等调用资源加载器去加载这些内容但这些都是异步加载的不会阻碍当前DOM数继续创建。css相关的请求资源会被浏览器生成相应的CSSDOM即使DOM解析完毕页面也不会渲染页面渲染的条件是DOM和CSSDOM都解析完毕进行合并生成RenderTree进一步进行布局绘制。加载过程中遇到外部css文件浏览器另外发出一个请求来获取css文件。css不妨碍DOM的解析但是会阻塞页面渲染。
重绘 在不影响元素周围或内部的布局的情况下只改变某个元素的外观如修改元素的颜色、背景、阴影等引起浏览器的repaint重画某一部分跳过了创建布局树和分层的阶段。
重排 在元素的尺寸、位置或者整体布局改变时浏览器会重新计算并更新页面的布局如添加、删除、修改元素、改变窗口大小等重排会影响整个页面的布局和渲染因此代价较大。 避免重排的方式样式集中改变、使用 absolute 或 fixed 脱离文档流。
srchref区别
img src alt
input typetext src
script src/script
iframe src frameborder0/iframea href/a
link relstylesheet hrefstyle.css1、srcsource指向外部资源指向的内容将会嵌入到文档中当前标签所在位置在请求src资源时会暂停其他资源的下载和处理直接将其指向的资源同步加载、编译、执行到相应的文档内。这也就是为什么要把js脚本放在底部而不是头部。
-- srcimg、input、style、script、iframe2、hrefHypertext Reference指超文本引用指向网络资源所在位置建立和当前元素锚点或当前文档链接之间的链接在文档中添加href资源时会将其指向的资源异步下载到相应的文档内不会停止对当前文档的处理。这也就是为什么建议使用link方式来加载css而不是import方式。 -- hreflink、aHTML5有哪些更新
语义化标签
语义化是指根据内容的结构选择合适的标签即用正确的标签做正确的事情。 优点 1、对机器友好带有语义的文字表现力丰富更适合搜索引擎的爬虫爬取有效信息有利于搜索引擎优化SEOsearch engine optimization。语义类还支持读屏软件根据文章可以自动生成目录。 2、对开发者友好使用语义类标签增强了可读性结构更加清晰开发者能清晰的看出网页的结构便于团队的开发与维护。 header定义文档的页眉头部/headernav定义导航链接的部分/navfooter定义文档或节的页脚底部/footerarticle定义文章内容/articlesection定义文档中的节section、区段/sectionaside定义其所处内容之外的内容侧边/aside媒体标签
1、音频audio src/audio 2、视频video src/video 3、媒体资源
video width320 height240 controlssource srcmovie.mp4 typevideo/mp4source srcmovie.ogg typevideo/ogg
/video表单
新增表单元素 · email提交表单的时候验证输入值是否满足email的格式 · tel验证输入的是否是电话号码的格式 · url提交表单的时候验证输入值是否满足url的格式 · number根据你的设置提供选择数字的功能其中min为最小值max为最大值value为默认值step为点击箭头时数字的变化量max、min、step、value均可不写目前某些浏览器还不支持。 · range会以一个滑块的形式表现包含一定范围内数字值的输入域max为最大值min为最小值value为默认值如果没有设置max和min默认值是1-100 · date选取日、月、年 · month选取月、年 · week选取周、年 · time选取小时、分钟 · datetime-local选取时间、日、月、年(本地时间) · search用于搜索域若加上results属性则会在搜索框前面加一个搜索图标 · colorcolor类型会提供颜色拾取器供用户选择颜色并将用户选择的颜色填充到此元素中
新增表单属性 · autofocus在页面加载时自动获得焦点。 · placeholder提供一种提示hint描述输入域所期待的值。 · autocomplete 规定 form元素或者input元素拥有自动完成功能即记录用户之前输入的值关闭为off默认为on。 · required要求该输入框是必填项当提交表单的时候会自动验证其内容是否不为空。 · pattern利用正则表达式用于验证 input 元素的值。 · multiple规定input 元素中可选择多个文件或邮箱。
新增表单事件 · oninput监听当前指定元素内容的改变只要内容改变(添加内容删除内容)事件就会触发。 · oninvalid当表单提交验证不通过时会触发该事件。
进度条、度量器
1、进度条progress value22 max100/progress 2、度量器meter value2 min0 max10/meter
DOM查询 Web存储 cookie与sessionStorage和localStorage 1、保存方式 cookie存放在客户的浏览器上。 session都在客户端中保存不参与服务器通讯。 2、生命周期 cookie可设置失效时间。 localStorage除非手动清除否则可永久保存。 sessionStorage关闭当前页面或浏览器后失效。 3、存储大小 cookie 4KB左右 session 5MB 4、使用情景 cookie因每次请求都会携带在http中可用来识别用户登录。 localStorage可用来跨页面传参。 sessionStorage可用来保留一些临时数据。
Canvas和SVG
1、Canvas图形容器用于图形的绘制通过JavaScript来绘制2D图形逐像素进行渲染当其位置发生变化就会重绘。
位图绘制 Canvas 是一个 HTML5 元素提供了一个位图绘制的区域你可以在上面绘制像素。绘制结果是一张位图图像。像素操作 你可以直接操作像素数据绘制图形、图像和复杂的效果。因为是像素操作缩放可能会导致图像失真。实时绘制 Canvas 适用于需要实时更新和绘制的场景如游戏、数据可视化等。动画和交互性 Canvas 能够实现动画效果但需要通过 JavaScript 来处理动画帧和交互事件。图形复杂性 对于绘制简单图形或需要复杂的像素级操作的情况Canvas 是一个不错的选择。
2、SVG 基于可扩展标记语言XML描述的2D图形的语言每个被绘制的图形均被视为对象如果对象的属性发生变化那么浏览器能够自动重现图形。
矢量图形 SVG 是一种基于 XML 的图形描述语言它使用矢量图形来描述图像这意味着图像可以无限缩放而不失真。DOM 元素 SVG 图形被视为 DOM文档对象模型元素可以像 HTML 元素一样进行操作。这使得它可以与其他 DOM 元素交互、操作和样式化。分辨率无关性 由于是矢量图形SVG 不依赖于分辨率所以它适合用于不同大小的显示屏和设备。动画和交互性 SVG 支持内置的动画和交互功能可以使用 CSS 和 JavaScript 来实现复杂的动态效果。图形复杂性 对于图像和图形的绘制特别是在需要复杂路径和形状的情况下SVG 是一个很好的选择。文本支持 SVG 具有文本支持可以嵌入文本和文字使其成为图像和图表的好选择。
拖放 HTML5 drag API
拖放拖放是一种常见的特性即抓取对象以后拖到另一个位置。
style#div1 {width: 140px;height: 160px;padding: 10px;border: 1px solid #a1a1a1;}#dragimg {width: 120px;height: 140px;}
/stylebodydiv iddiv1 ondropdrop(event) ondragoverallowDrag(event)/divimg src./static/123.png draggabletrue ondragstartdrag(event) decodingasync loadinglazy iddragimgscriptfunction allowDrag(event) {event.preventDefault()}function drag(ev) {ev.dataTransfer.setData(Text, ev.target.id);}function drop(ev) {ev.preventDefault()var data ev.dataTransfer.getData(Text)ev.target.appendChild(document.getElementById(data))}/script
/bodyWebSocket
WebSocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议实现了浏览器与服务器全双工通信能更好的节省服务器资源和带宽并达到实时通讯的目的。 【WebSocket】前端使用WebSocket实时通信
img的srcset属性
img src/static/flamingo-fallback.jpgsrcset/static/flamingo4x.png 4x,/static/flamingo3x.png 3x,/static/flamingo2x.png 2x,/static/flamingo1x.png 1x sizes(max-width: 360px) 340px, 128px /
//在图片密度为1x时加载/static/flamingo1x.png
//在图片密度为2x时加载/static/flamingo2x.png
//在图片密度为3x时加载/static/flamingo3x.png
//在图片密度为4x时加载/static/flamingo4x.png
//sizes[media query] [length], [media query] [length] ... 实现响应式图片在指定宽度或像素密度下加载对应的图片地址。 srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。
行内元素、块级元素、空元素
1、行内元素特点 · 可以与其他行内元素位于同一行 · 行内内部可以容纳其他行内元素但不可以容纳块元素不然会出现无法预知的效果 常见行内元素有span、img、input、select、strong、em、a、b。
2、块元素特点 · 独占一行排斥其他元素跟其位于同一行包括块元素和行内元素 · 块元素内部可以容纳其他块元素或行元素 常见块元素有h1~h6、p、div、ul、ol、li、dl、dt、dd、hr。
3、空元素特点 · 没有内容的HTML元素 · 自闭合标签 常见的空元素有br、hr、img、input、link、meta。
Web Worker 当在 HTML 页面中执行脚本时页面的状态是不可响应的直到脚本已完成。 web worker 是运行在后台的 JavaScript独立于其他脚本不会影响页面的性能。您可以继续做任何愿意做的事情点击、选取内容等等而此时 web worker 在后台运行。 JavaScript采用的是单线程当有多个任务时需要排队执行而web worker的作用是为JavaScript创造多线程环境允许主线程创建Worker线程在主线程运行任务时Worker线程在后台运行其他任务互不干扰。 Web Worker 使用教程
bodyp计数span idresult/span/pbutton onclickstartWorker()开始工作/buttonbutton onclickstopWorker()停止工作/buttonscriptvar wkr;function startWorker() {//检测是否存在 Workerif (typeof (Worker) ! undefined) { if (typeof (wkr) undefined) {wkr new Worker(demo_workers.js) //创建Web Worker对象}//向 web worker 添加一个 onmessage 事件监听器wkr.onmessage function (event) {document.getElementById(result).innerHTML event.data}} else {document.getElementById(result).innerHTML 抱歉您的浏览器不支持Web Workers...}}function stopWorker() {wkr.terminate() //终止 Web Workerwkr undefined}/script
/bodyHTML5离线存储
离线存储通过将网页的资源如 HTML、CSS、JavaScript、图像等保存在用户的设备上允许用户在没有网络连接的情况下仍然能够访问和使用网页。在用户连接网络之后更新用户机器上的缓存文件。
过程
1、创建一个Cache Manifest文件在其中列出需要在离线时缓存的资源以及网络策略并在需要离线存储功能的HTML文件中通过html langen manifestindex.manifest引入该文件。
2、在线时当用户第一次访问这个页面时浏览器会根据页面头部manifest属性的信息下载并解析Cache Manifest文件的内容。浏览器会根据CACHE部分列出的资源进行下载并保存到本地。当再次访问时浏览器会使用离线资源加载页面并且通过对比新的manifest文件与旧的manifest文件进行下载并更新需要更新的资源。
3、离线时浏览器会直接使用离线存储资源。
CACHE MANIFEST
# Version 1.0CACHE:
styles.css
script.js
images/logo.pngNETWORK:
*FALLBACK:
.manifest 文件由多个部分组成包括 “CACHE”、“NETWORK” 和 “FALLBACK”。其中 CACHE 部分列出了需要在离线时缓存的资源。 NETWORK 定义了在离线状态下需要从网络加载的资源。通常使用 * 表示所有资源都需要从网络加载也就是离线时不使用本地缓存。但当CACHE和NETWORK中有一个相同的资源那么这个资源还是会被离线存储即CACHE的优先级更高。 FALLBACK 可以定义一些在离线时备用的资源。例如如果某个资源在离线时不可用你可以为它指定一个备用的资源。
title与h1、b与strong、i与em的区别
1、title与h1 title通常用于指定文档的标题显示在浏览器的标题栏或标签页上不会在网页内容上显示出来。 h1HTML 标题元素用于表示文档的主要标题。一个页面应该只有一个 h1 元素表示页面的主题或主要内容。 2、b与strong b表示粗体文本的标签它在样式上使文本变粗但没有强调的语义含义。 strong表示强调的语义标签它在样式上通常也会使文本变粗但更重要的是强调文本的重要性或语义上的强调。搜索引擎和屏幕阅读器等工具可能会对 strong 元素给予更大的重视。 3、i与em i表示斜体文本的标签它在样式上使文本变斜但没有强调的语义含义。 em表示强调的语义标签它在样式上通常也会使文本变斜但更重要的是强调文本的重要性或语义上的强调。与 strong 类似em 也可能受到搜索引擎和阅读器的特殊处理。
iframe的优缺点
iframe内联框架是 HTML 中的一个元素用于在当前网页中嵌入另一个网页或内容。
优点 1、异步加载解决加载缓慢的第三方内容如图表、广告等加载问题能并行加载脚本。 2、方便管理 iframe 内部的内容与外部页面相互隔离内部内容的样式和脚本不会影响外部页面且 iframe 允许你将不同的功能模块分开开发和维护。如果有多页面需要用到iframe的内容只要修改iframe的内容就可以实现统一管理。 3、内容嵌入可以在一个页面中完整的嵌入另一个页面或内容。
缺点 1、性能问题如果过多地使用 iframe 会导致页面加载时间延长增加服务器的http请求iframe和主页面共享连接池而浏览器对相同域的连接有限制所以会影响页面的并行加载阻塞父页面的load事件。 2、跨域安全性如果在 iframe 中嵌入了来自其他域的内容可能会受到跨域脚本攻击或其他安全问题的影响。 3、SEO问题搜索引擎可能无法正确解释嵌入在 iframe 中的内容影响搜索引擎优化。 4、可维护性过多地使用 iframe 可能会导致页面的维护变得复杂尤其是当多个嵌套 iframe 之间需要进行交互时。
渐进增强和优雅降级之间的区别
“渐进增强” 和 “优雅降级” 是两种前端设计理念旨在确保网页在不同浏览器和设备上的兼容性和用户体验。
渐进增强 渐进增强主要是针对低版本的浏览器进行页面重构从基本功能开始逐步添加更高级的功能和样式以适应不同浏览器和设备的能力达到更好的用户体验。
优雅降级 优雅降级是从一个完整、丰富的功能和样式出发逐步降低功能和样式以适应旧版浏览器的能力。核心思想是构建一个面向现代浏览器的优化版本然后在老旧浏览器中逐渐降低功能以确保网页在这些浏览器中的可用性。
区别 1、渐进增强是从一个非常基础的能够起作用的版本开始的并在此基础上不断扩充以适应未来环境的需要优雅降级是从复杂的现状开始的并试图减少用户体验的供给。 2、渐进增强是向前看同时保证其根基处于安全地带降级意味着往回看主键降低功能。 3、渐进增强适用于构建跨浏览器兼容的网站强调核心功能和可用性。优雅降级适用于优先关注现代浏览器但仍要确保在旧版本浏览器上有合理的降级方案。
学习文章前端面试题之HTML篇
