文章目录1. src和href的区别2. 对HTML语义化的理解3. DOCTYPE(⽂档类型) 的作⽤3.1、浏览器解析文档有哪几种解析模式呢3.2、如何快速检查页面的解析模式4. script标签中defer和async的区别5. 常⽤的meta标签有哪些6. HTML5有哪些更新7. img的srcset属性的作⽤8. 行内元素有哪些块级元素有哪些 空(void)元素有那些9. 说一下 web worker10. title与h1的区别、b与strong的区别、i与em的区别11. iframe 有那些优点和缺点12. label 的作用是什么如何使用13. Canvas和SVG的区别14. head 标签有什么作用其中什么标签必不可少15.表单类型、属性及方法1. src和href的区别相同点src和href都是用于引用外部资源的属性但它们的应用场景和目的有所不同。src属性src属性主要用于嵌入外部资源到当前文档中。它通常用于img, iframe, script, 和 video等标签用于指定这些元素要加载的外部资源。imgsrcimage.jpgalt示例图片iframesrchttps://www.example.comtitle示例iframe/iframescriptsrcscript.js/scriptvideosrcmovie.mp4controls/videohref属性href属性用于定义超文本引用它主要用于a链接、link定义文档关联的外部资源和base标签。它指向一个URL当用户点击或激活这些元素时浏览器会加载或跳转到指定的URL。ahrefhttps://www.example.com访问示例网站/alinkhrefstyles.cssrelstylesheetbasehrefhttps://www.example.com/2. 对HTML语义化的理解HTML语义化是指使用合适的HTML标签来清晰地描述页面内容的结构、功能和目的分为两方面一方面对与人来说语义化使得我们更容易理解代码使得项目页面更结构化另一方面对于浏览器来说SEO依赖于html标记html语义化有利于浏览器的SEO如使用h1到h6标签来表示标题使用p标签来表示段落使用ul和ol来表示列表,使用article、section、nav、header、footer表示文章结构3. DOCTYPE(⽂档类型) 的作⽤作用DOCTYPE标签是一种标准通用标记语言的文档类型声明且必须声明在文档的第一行来告知浏览器用何种文档标准来解析这个网页不同的渲染模式会影响浏览器对CSS和js的解析标准。3.1、浏览器解析文档有哪几种解析模式呢怪异模式quirks mode此种模式会模拟更旧的浏览器的行为。如果没有声明DOCTYPE浏览器默认会以这种模式解析文档。标准模式standards mode浏览器使用W3C的标准解析渲染页面。3.2、如何快速检查页面的解析模式HTML文档对象有个compatMode属性用于记录页面的解析模式如果文档处于“混杂模式”则该属性值为BackCompat如果文档处于“标准模式”或者“准标准模式(almost standards mode)”则该属性为CSS1Compatconstmodedocument.compatMode;// 页面的解析模式if(modeBackCompat){// 渲染模式为混杂模式}4. script标签中defer和async的区别defer 和 async属性都是去异步加载外部的JS脚本文件它们都不会阻塞页面的解析其区别如下执行顺序多个带async属性的标签不能保证加载的顺序多个带defer属性的标签按照加载顺序执行脚本是否并行执行async属性脚本则不应依赖于其他脚本的执行顺序因为它们可能并行执行defer属性浏览器指示脚本在文档被解析后执行5. 常⽤的meta标签有哪些meta标签由name和content两个属性来定义来描述一个HTML网页文档的元信息例如作者、日期和时间、网页描述、关键词、页面刷新等除了一些http标准规定了一些name作为大家使用的共识开发者也可以自定义name常用的meta标签charset用来描述HTML文档的编码类型keywords页面关键词description页面描述refresh页面重定向和刷新viewport适配移动端可以控制视口的大小和比例其中content参数有widthviewport 宽度(数值/device-width)heightviewport 高度(数值/device-height)initial-scale初始缩放比例maximum-scale最大缩放比例minimum-scale最小缩放比例user-scalable是否允许用户缩放(yes/nometacharsetUTF-8metanamekeywordscontent关键词/metanamedescriptioncontent页面描述内容/metahttp-equivrefreshcontent0;url/metanameviewportcontentwidthdevice-width, initial-scale1, maximum-scale16. HTML5有哪些更新全面支持CSS3加了一些语义化元素header、mainer、footer、section、nav等表单能力加强input的新类型date、email、url等、新属性autocomplete、autofocus、required等新的属性ping用于a与area、charset用于meta、async用于script等定位能力navigator.geolocation多媒体支持video视频poster默认显示当前视频文件的第一针画面 controls 控制面板widthheightaudio音频controls 控制面板 autoplay 自动播放 loop‘true’ 循环播放2D/3D 制图支持支持svg、canvas绘图和动画等新的缓存策略Localstorage长期存储浏览器关闭数据不丢失、SessionStorage浏览器关闭后自动删除、IndexedDB等新的网络协议WebSocket…7. img的srcset属性的作⽤**作用**根据屏幕密度设置不同的图片srcset可以接受多个图片资源每个资源后面可以跟一个描述符描述符通常包括图片的宽度w和像素密度x(设置不同屏幕密度下img 会自动加载不同的图片)sizes定义不同屏幕尺寸下图片的最佳显示宽度!--图片的宽度w--imgsrcimage-1000w.jpgsrcsetimage-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200walt示例图片!--像素密度x--imgsrcimage-1x.jpgsrcsetimage-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3xsizes(max-width: 600px) 300px, (max-width: 900px) 600px, 1200pxalt示例图片8. 行内元素有哪些块级元素有哪些 空(void)元素有那些行内元素有a b span img input select strong设置宽高无效不会自动换行块级元素有div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p可设宽高自动换行空(void)元素有br、hr、img、input、link、meta没有闭合标签9. 说一下 web workerWeb Worker是一种允许在后台线程中运行 js 脚本的技术从而避免长时间运行的任务阻塞主线程。它的主要作用是提升网页性能和用户体验特别是在处理计算密集型任务时。创建及使用检查浏览器是否支持 Web Worker使用new Worker()构造函数创建一个 Worker 实例传入脚本文件路径使用postMessage()向 Worker发送数据使用onmessage监听来自 Worker 的返回结果使用terminate()方法终止 Worker线程。注意事项Worker不能直接访问 DOM也不能使用 alert、confirm等方法Worker 线程不能读取本地文件只能加载网络脚本不应过度使用 Worker因为其创建和通信也有资源开销10. title与h1的区别、b与strong的区别、i与em的区别title与h1的区别titletitle属性没有明确意义只表示是个标题h1H1则表示层次明确的标题对页面信息的抓取有很大的影响b与strong的区别bb标签只是一个简单加粗标签strongstrong标签有语义是起到加重语气的效果strong标签加强字符的语气都是通过粗体来实现的i与em的区别i内容展示为斜体em强调的文本11. iframe 有那些优点和缺点作用iframe内联框架是一种HTML标签用于在当前网页中嵌入另一个网页或文档。它在网页开发中常用于嵌入第三方内容、广告、视频、地图等。优点用来加载速度较慢的内容如广告可以使脚本可以并行下载可以实现跨子域通信缺点iframe 会阻塞主页面的 onload 事件无法被一些搜索引擎索识别会产生很多页面不容易管理iframesrcurlwidth宽度height高度/iframe12. label 的作用是什么如何使用label 标签主要作用是为表单控件提供标签或说明文本从而增强表单的可访问性和用户体验。labelforusername用户名:/labelinputtypetextidusernamenameusernamelabel用户名:inputtypetextnameusername/label13. Canvas和SVG的区别核心区别图形类型Canvas绘制位图缩放易失真SVG描述矢量图无限缩放不失真。渲染方式Canvas通过js脚本动态绘制过程式SVG通过XML标记静态描述声明式可通过CSS或脚本修改。DOM关联Canvas是单个HTML元素绘制的图形不生成独立DOM节点SVG每个图形元素都是DOM的一部分可直接操作。使用场景Canvas“画像素的画布”—— 适合动态、高频刷新的场景操作繁琐但像素级控制灵活。如图像密集型游戏、数据可视化、实时动画、像素级操作。SVG“写规则的图纸”—— 适合静态、可交互的场景操作直观且缩放不失真。如图标、地图、响应式设计、可交互图表、高质量矢量图形。3特性CanvasSVG图形性质位图像素矢量图几何描述缩放效果放大后失真无限缩放不失真DOM 关联性无独立 DOM 元素每个图形是独立 DOM 元素可操作性需重绘整个场景可直接修改单个图形事件支持需手动实现点击检测原生支持事件绑定性能高频绘制更优静态图形或少量动画更优内存占用较低较高适用场景游戏、图像处理、动画图标、图表、响应式设计画一个红色圆形canvasidmyCanvaswidth200height200/canvasscript// 获取 Canvas 上下文绘制工具constctxdocument.getElementById(myCanvas).getContext(2d);// 开始绘制设置填充色为红色ctx.fillStylered;// 画圆x坐标、y坐标、半径、起始角度、结束角度ctx.beginPath();ctx.arc(100,100,80,0,Math.PI*2);ctx.fill();// 填充圆形完成绘制/scriptsvgwidth200height200xmlnshttp://www.w3.org/2000/svg!-- 直接用 circle 标签描述圆形无需 JavaScript --circlecx100cy100r80fillred//svg14. head 标签有什么作用其中什么标签必不可少head标签的作用 是作为HTML 文档的头部容器用于定义文档的元数据即关于数据的数据这些内容不会直接显示在网页正文中但对浏览器解析、搜索引擎优化SEO、字符编码、页面标题、外部资源引用等至关重要15.表单类型、属性及方法表单类型email 能够验证当前输入的邮箱地址是否合法url 验证URLnumber 只能输入数字其他输入不了而且自带上下增大减小箭头max属性可以设置为最大值min可以设置为最小值value为默认值。search 输入框后面会给提供一个小叉可以删除输入的内容更加人性化。range 可以提供给一个范围其中可以设置max和min以及value其中value属性可以设置为默认值color 提供了一个颜色拾取器time 时分秒data 日期选择年月日datatime 时间和日期(目前只有Safari支持)datatime-local 日期时间控件week 周控件month月控件表单属性placeholder 提示信息autofocus 自动获取焦点autocomplete“on” 或者 autocomplete“off” 使用这个属性需要有两个前提表单必须提交过必须有name属性。required要求输入框不能为空必须有值才能够提交。pattern 里面写入想要的正则模式例如手机号patte“^(86)?\d{10}$”multiple可以选择多个文件或者多个邮箱form form表单的ID表单事件oninput 每当input里的输入框内容发生变化都会触发此事件。oninvalid 当验证不通过时触发此事件。
面试题- html篇
文章目录1. src和href的区别2. 对HTML语义化的理解3. DOCTYPE(⽂档类型) 的作⽤3.1、浏览器解析文档有哪几种解析模式呢3.2、如何快速检查页面的解析模式4. script标签中defer和async的区别5. 常⽤的meta标签有哪些6. HTML5有哪些更新7. img的srcset属性的作⽤8. 行内元素有哪些块级元素有哪些 空(void)元素有那些9. 说一下 web worker10. title与h1的区别、b与strong的区别、i与em的区别11. iframe 有那些优点和缺点12. label 的作用是什么如何使用13. Canvas和SVG的区别14. head 标签有什么作用其中什么标签必不可少15.表单类型、属性及方法1. src和href的区别相同点src和href都是用于引用外部资源的属性但它们的应用场景和目的有所不同。src属性src属性主要用于嵌入外部资源到当前文档中。它通常用于img, iframe, script, 和 video等标签用于指定这些元素要加载的外部资源。imgsrcimage.jpgalt示例图片iframesrchttps://www.example.comtitle示例iframe/iframescriptsrcscript.js/scriptvideosrcmovie.mp4controls/videohref属性href属性用于定义超文本引用它主要用于a链接、link定义文档关联的外部资源和base标签。它指向一个URL当用户点击或激活这些元素时浏览器会加载或跳转到指定的URL。ahrefhttps://www.example.com访问示例网站/alinkhrefstyles.cssrelstylesheetbasehrefhttps://www.example.com/2. 对HTML语义化的理解HTML语义化是指使用合适的HTML标签来清晰地描述页面内容的结构、功能和目的分为两方面一方面对与人来说语义化使得我们更容易理解代码使得项目页面更结构化另一方面对于浏览器来说SEO依赖于html标记html语义化有利于浏览器的SEO如使用h1到h6标签来表示标题使用p标签来表示段落使用ul和ol来表示列表,使用article、section、nav、header、footer表示文章结构3. DOCTYPE(⽂档类型) 的作⽤作用DOCTYPE标签是一种标准通用标记语言的文档类型声明且必须声明在文档的第一行来告知浏览器用何种文档标准来解析这个网页不同的渲染模式会影响浏览器对CSS和js的解析标准。3.1、浏览器解析文档有哪几种解析模式呢怪异模式quirks mode此种模式会模拟更旧的浏览器的行为。如果没有声明DOCTYPE浏览器默认会以这种模式解析文档。标准模式standards mode浏览器使用W3C的标准解析渲染页面。3.2、如何快速检查页面的解析模式HTML文档对象有个compatMode属性用于记录页面的解析模式如果文档处于“混杂模式”则该属性值为BackCompat如果文档处于“标准模式”或者“准标准模式(almost standards mode)”则该属性为CSS1Compatconstmodedocument.compatMode;// 页面的解析模式if(modeBackCompat){// 渲染模式为混杂模式}4. script标签中defer和async的区别defer 和 async属性都是去异步加载外部的JS脚本文件它们都不会阻塞页面的解析其区别如下执行顺序多个带async属性的标签不能保证加载的顺序多个带defer属性的标签按照加载顺序执行脚本是否并行执行async属性脚本则不应依赖于其他脚本的执行顺序因为它们可能并行执行defer属性浏览器指示脚本在文档被解析后执行5. 常⽤的meta标签有哪些meta标签由name和content两个属性来定义来描述一个HTML网页文档的元信息例如作者、日期和时间、网页描述、关键词、页面刷新等除了一些http标准规定了一些name作为大家使用的共识开发者也可以自定义name常用的meta标签charset用来描述HTML文档的编码类型keywords页面关键词description页面描述refresh页面重定向和刷新viewport适配移动端可以控制视口的大小和比例其中content参数有widthviewport 宽度(数值/device-width)heightviewport 高度(数值/device-height)initial-scale初始缩放比例maximum-scale最大缩放比例minimum-scale最小缩放比例user-scalable是否允许用户缩放(yes/nometacharsetUTF-8metanamekeywordscontent关键词/metanamedescriptioncontent页面描述内容/metahttp-equivrefreshcontent0;url/metanameviewportcontentwidthdevice-width, initial-scale1, maximum-scale16. HTML5有哪些更新全面支持CSS3加了一些语义化元素header、mainer、footer、section、nav等表单能力加强input的新类型date、email、url等、新属性autocomplete、autofocus、required等新的属性ping用于a与area、charset用于meta、async用于script等定位能力navigator.geolocation多媒体支持video视频poster默认显示当前视频文件的第一针画面 controls 控制面板widthheightaudio音频controls 控制面板 autoplay 自动播放 loop‘true’ 循环播放2D/3D 制图支持支持svg、canvas绘图和动画等新的缓存策略Localstorage长期存储浏览器关闭数据不丢失、SessionStorage浏览器关闭后自动删除、IndexedDB等新的网络协议WebSocket…7. img的srcset属性的作⽤**作用**根据屏幕密度设置不同的图片srcset可以接受多个图片资源每个资源后面可以跟一个描述符描述符通常包括图片的宽度w和像素密度x(设置不同屏幕密度下img 会自动加载不同的图片)sizes定义不同屏幕尺寸下图片的最佳显示宽度!--图片的宽度w--imgsrcimage-1000w.jpgsrcsetimage-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200walt示例图片!--像素密度x--imgsrcimage-1x.jpgsrcsetimage-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3xsizes(max-width: 600px) 300px, (max-width: 900px) 600px, 1200pxalt示例图片8. 行内元素有哪些块级元素有哪些 空(void)元素有那些行内元素有a b span img input select strong设置宽高无效不会自动换行块级元素有div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p可设宽高自动换行空(void)元素有br、hr、img、input、link、meta没有闭合标签9. 说一下 web workerWeb Worker是一种允许在后台线程中运行 js 脚本的技术从而避免长时间运行的任务阻塞主线程。它的主要作用是提升网页性能和用户体验特别是在处理计算密集型任务时。创建及使用检查浏览器是否支持 Web Worker使用new Worker()构造函数创建一个 Worker 实例传入脚本文件路径使用postMessage()向 Worker发送数据使用onmessage监听来自 Worker 的返回结果使用terminate()方法终止 Worker线程。注意事项Worker不能直接访问 DOM也不能使用 alert、confirm等方法Worker 线程不能读取本地文件只能加载网络脚本不应过度使用 Worker因为其创建和通信也有资源开销10. title与h1的区别、b与strong的区别、i与em的区别title与h1的区别titletitle属性没有明确意义只表示是个标题h1H1则表示层次明确的标题对页面信息的抓取有很大的影响b与strong的区别bb标签只是一个简单加粗标签strongstrong标签有语义是起到加重语气的效果strong标签加强字符的语气都是通过粗体来实现的i与em的区别i内容展示为斜体em强调的文本11. iframe 有那些优点和缺点作用iframe内联框架是一种HTML标签用于在当前网页中嵌入另一个网页或文档。它在网页开发中常用于嵌入第三方内容、广告、视频、地图等。优点用来加载速度较慢的内容如广告可以使脚本可以并行下载可以实现跨子域通信缺点iframe 会阻塞主页面的 onload 事件无法被一些搜索引擎索识别会产生很多页面不容易管理iframesrcurlwidth宽度height高度/iframe12. label 的作用是什么如何使用label 标签主要作用是为表单控件提供标签或说明文本从而增强表单的可访问性和用户体验。labelforusername用户名:/labelinputtypetextidusernamenameusernamelabel用户名:inputtypetextnameusername/label13. Canvas和SVG的区别核心区别图形类型Canvas绘制位图缩放易失真SVG描述矢量图无限缩放不失真。渲染方式Canvas通过js脚本动态绘制过程式SVG通过XML标记静态描述声明式可通过CSS或脚本修改。DOM关联Canvas是单个HTML元素绘制的图形不生成独立DOM节点SVG每个图形元素都是DOM的一部分可直接操作。使用场景Canvas“画像素的画布”—— 适合动态、高频刷新的场景操作繁琐但像素级控制灵活。如图像密集型游戏、数据可视化、实时动画、像素级操作。SVG“写规则的图纸”—— 适合静态、可交互的场景操作直观且缩放不失真。如图标、地图、响应式设计、可交互图表、高质量矢量图形。3特性CanvasSVG图形性质位图像素矢量图几何描述缩放效果放大后失真无限缩放不失真DOM 关联性无独立 DOM 元素每个图形是独立 DOM 元素可操作性需重绘整个场景可直接修改单个图形事件支持需手动实现点击检测原生支持事件绑定性能高频绘制更优静态图形或少量动画更优内存占用较低较高适用场景游戏、图像处理、动画图标、图表、响应式设计画一个红色圆形canvasidmyCanvaswidth200height200/canvasscript// 获取 Canvas 上下文绘制工具constctxdocument.getElementById(myCanvas).getContext(2d);// 开始绘制设置填充色为红色ctx.fillStylered;// 画圆x坐标、y坐标、半径、起始角度、结束角度ctx.beginPath();ctx.arc(100,100,80,0,Math.PI*2);ctx.fill();// 填充圆形完成绘制/scriptsvgwidth200height200xmlnshttp://www.w3.org/2000/svg!-- 直接用 circle 标签描述圆形无需 JavaScript --circlecx100cy100r80fillred//svg14. head 标签有什么作用其中什么标签必不可少head标签的作用 是作为HTML 文档的头部容器用于定义文档的元数据即关于数据的数据这些内容不会直接显示在网页正文中但对浏览器解析、搜索引擎优化SEO、字符编码、页面标题、外部资源引用等至关重要15.表单类型、属性及方法表单类型email 能够验证当前输入的邮箱地址是否合法url 验证URLnumber 只能输入数字其他输入不了而且自带上下增大减小箭头max属性可以设置为最大值min可以设置为最小值value为默认值。search 输入框后面会给提供一个小叉可以删除输入的内容更加人性化。range 可以提供给一个范围其中可以设置max和min以及value其中value属性可以设置为默认值color 提供了一个颜色拾取器time 时分秒data 日期选择年月日datatime 时间和日期(目前只有Safari支持)datatime-local 日期时间控件week 周控件month月控件表单属性placeholder 提示信息autofocus 自动获取焦点autocomplete“on” 或者 autocomplete“off” 使用这个属性需要有两个前提表单必须提交过必须有name属性。required要求输入框不能为空必须有值才能够提交。pattern 里面写入想要的正则模式例如手机号patte“^(86)?\d{10}$”multiple可以选择多个文件或者多个邮箱form form表单的ID表单事件oninput 每当input里的输入框内容发生变化都会触发此事件。oninvalid 当验证不通过时触发此事件。
