电子商务网站建设知识,企业标志设计,企业网站建设一条龙服务内容,广州免费推广网站建设1.说说对html语义化的理解
什么的HTML语义化#xff0c;顾名思义#xff0c;HTML语义化就是可以不通过了解HTML的内容#xff0c;就可以知道这个部分所代表的的意义。
HTML语义化的意义#xff1a;在使用HTML标签构建页面时#xff0c;避免大篇幅的使用无语义的标签。
…
1.说说对html语义化的理解
什么的HTML语义化顾名思义HTML语义化就是可以不通过了解HTML的内容就可以知道这个部分所代表的的意义。
HTML语义化的意义在使用HTML标签构建页面时避免大篇幅的使用无语义的标签。
语义化的优点如下:
语义化标签优势
页面内容结构化,利于开发和维护代码更加优雅可读性高。有利于seo
常见语义化标签
nav标记导航。main页面主要内容一个页面只能使用一次。如果是web应用则包围其主要功能。article定义外部的内容其中的内容独立于文档的其余部分。section定义文档中的节section、区段。比如章节、页眉、页脚或文档中的其他部分。aside定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。footer页脚只有当父级是body时才是整个页面的页脚。address作者、相关人士或组织的联系信息电子邮件地址、指向联系信息页的链接。2.什么是 HTML5它与 HTML4 有何不同?
HTML5 是一种最新版本的 HTML (HyperText Markup Language) 标准用于描述网页内容。它与 HTML4 的主要区别在于
新元素HTML5 增加了很多新元素例如 header、footer、nav、article 等这些元素可以更准确地描述网页内容有助于搜索引擎的更好索引。语义元素HTML5 新增了语义元素这些元素可以使代码更具可读性和可维护性并且可以提高代码的可访问性。媒体元素HTML5 支持视频和音频元素不再需要额外的插件如 Flash来播放媒体。离线存储HTML5 支持离线存储这使得网页应用程序可以在用户没有网络连接的情况下正常工作。多线程HTML5 支持多线程这使得网页应用程序可以更有效地利用多核处理器。
总的来说HTML5 是 HTML4 的一个更新版本拥有更多的功能和更强的性能。
3.HTML5 中有哪些新元素
header表示文档或部分的页眉。footer表示文档或部分的页脚。nav表示导航链接的容器。article表示独立的、可独立于其他内容分发的内容。section表示文档的独立部分例如章节、标题等。aside表示与主内容相关的辅助内容例如侧栏、广告等。canvas表示图形可用于绘制图形、创建动画等。video表示视频。audio表示音频。datalist表示下拉列表。output表示计算结果。progress表示任务的进度。meter表示度量值。
这仅是 HTML5 中的一些新元素它还有很多其他的新元素。 4.HTML5 中“localStorage”和“sessionStorage”的区别?
localStorage 和 sessionStorage 都是 HTML5 中用于存储数据的技术。然而它们在存储的时间、生存周期、作用域等方面有很大的不同。
localStorage
数据存储在浏览器端不会随着浏览器的关闭而消失直到手动清除或用户数据存储限制。作用域为整个域所有页面都可以访问这些数据。
sessionStorage
数据存储在浏览器端但只在当前浏览器会话期间存在关闭浏览器即消失。作用域为当前页面会话不同标签页或窗口中的页面无法访问这些数据。
因此如果你需要存储数据并在多个浏览器会话之间共享数据请使用 localStorage如果你需要存储数据仅供当前浏览器会话使用请使用 sessionStorage。
5.如何在 HTML5 中嵌入视频或音频
在 HTML5 中嵌入视频或音频非常简单可以使用 video 或 audio 元素。
以下是嵌入视频的示例代码
video width320 height240 controlssource srcmovie.mp4 typevideo/mp4source srcmovie.ogg typevideo/oggYour browser does not support the video tag.
/video以下是嵌入音频的示例代码:
audio controlssource srchorse.ogg typeaudio/oggsource srchorse.mp3 typeaudio/mpegYour browser does not support the audio element.
/audio
在上面的代码中使用了 width 和 height 属性设置视频的宽度和高度使用了 controls 属性为视频提供播放控件。
使用 source 元素您可以提供多种视频或音频格式并且浏览器将自动选择最适合的格式进行播放。
此外您还可以使用其他属性例如 autoplay、loop 等以自定义视频和音频的行为。 6.你能描述一下“canvas”元素在 HTML5 中的作用吗
canvas 元素是 HTML5 中的一个新元素它是一个可以编程绘图的图形区域。它允许开发人员使用 JavaScript 编写代码在网页上动态创建图形例如线条、圆形、曲线、图像等。
可以使用 canvas 元素实现很多有趣的图形和动画效果例如
动态生成图表和图形创建游戏实现图像处理和过滤效果
以下是简单的使用 canvas 元素绘制一个圆形的示例代码
canvas idmyCanvas width200 height100/canvasscriptvar canvas document.getElementById(myCanvas);var context canvas.getContext(2d);context.beginPath();context.arc(95, 50, 40, 0, 2 * Math.PI);context.stroke();
/script
在上面的代码中使用 getContext 方法获取 canvas 元素的上下文然后使用 arc 方法绘制一个圆形最后使用 stroke 方法显示出圆形的轮廓。
总的来说canvas 元素是 HTML5 中一个非常强大和灵活的工具可以为 Web 开发带来更多创意和灵活性。 7.如何确保 HTML5 网站中旧浏览器的向后兼容性
为了确保 HTML5 网站中旧浏览器的向后兼容性可以使用以下方法
使用 JavaScript 库或框架例如使用 Modernizr 库可以检测浏览器是否支持 HTML5 元素并在不支持的浏览器中使用替代方案。在不支持 HTML5 特性的浏览器中使用 Polyfill-用来为旧浏览器提供它没有原生支持的较新的功能例如可以使用 HTML5 Shiv 库来支持 HTML5 元素在旧版 Internet Explorer 中的渲染。使用浏览器前缀例如对于 CSS3 属性可以使用浏览器前缀例如-webkit--moz--ms-等以确保浏览器的兼容性。使用替代方案对于不支持 HTML5 特性的浏览器可以使用替代方案例如使用 Flash 和 Silverlight 插件来代替 HTML5 视频和音频元素。
总的来说使用上述方法可以确保 HTML5 网站在旧版浏览器中的兼容性并确保网站的正常工作。 8.常用的meta元素有哪些
charset定义网页使用的字符集。viewport定义移动设备如何显示网页。description定义网页的简短描述常用于搜索引擎优化。keywords定义网页的关键字常用于搜索引擎优化。robots定义搜索引擎如何爬取和索引网页。revisit-after定义搜索引擎多长时间后重新爬取网页。author定义网页作者的姓名。generator定义使用的 HTML 生成器。theme-color定义移动设备的主题颜色。meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1
meta namedescription content这是一个描述网页内容的例子
meta namekeywords content网页, 关键字, 例子
meta namerobots contentindex,follow
meta namerevisit-after content7 days
meta nameauthor content作者的名字
meta namegenerator contentHTML生成器的名字
meta nametheme-color content#4285f4
9.HTML标签中的src和href有什么区别
src 和 href 都是 HTML 标签中常见的属性但它们的作用是不同的。
src是用于在 HTML 文档中嵌入外部资源例如图像、脚本、插件等的属性。它与标签相关联并告诉浏览器在哪里加载该资源。例如img srcimage.jpg 用于嵌入图像资源。href是用于在 HTML 文档中链接其他资源例如另一个网页、邮件地址、文件等的属性。它与链接相关联并告诉浏览器链接的位置。例如a hrefhttps://www.example.comExample/a 用于创建链接。
简而言之src 用于嵌入外部资源,故会导致阻塞而 href 用于链接其他资源不会引起阻塞。 10.script标签中async和defer两个属性有什么用途和区别
async 和 defer 是 script 标签中的两个常见属性它们的目的是影响脚本的加载和执行顺序。
async当脚本设置为 async 时浏览器会异步加载该脚本并在它加载完成后立即执行。使用 async 属性时不会等待页面其他内容完成加载也不会影响页面其他内容的加载。defer当脚本设置为 defer 时浏览器会异步加载该脚本但会等待页面其他内容完成加载之后再执行。使用 defer 属性可以确保脚本在页面其他内容之后执行并且不会影响页面其他内容的加载。
简而言之如果你希望脚本在页面其他内容加载完成后执行使用 defer 属性如果你希望脚本在下载完成后立即执行不管页面其他内容的加载状态使用 async 属性。
async 和 defer 有一个共同点加载这样的脚本都不会阻塞页面的渲染。因此用户可以立即阅读并了解页面内容。但是它们之间也存在一些本质的区别
async 加载优先顺序。脚本在文档中的顺序不重要 —— 先加载完成的先执行就后面的小脚本可能比前面的脚本先执行, DOMContentLoaded 不需要等待async脚本执行完成。
defer按照文档顺序执行 在文档加载和解析完成之后需要等待前面的脚本按顺序执行即在 DOMContentLoaded 之前执行。 11.DOCTYPE标签有什么作用
DOCTYPE (Document Type Declaration) 标签用于声明 HTML 文档的类型和版本。它告诉浏览器如何解析和渲染文档的内容。
在 HTML 文档的开头DOCTYPE 标签必须是文档中的第一行。它充当了一个指示告诉浏览器使用哪种文档类型定义 (DTD) 解析和渲染文档。
比如下面是一个 HTML5 的 DOCTYPE 标签
!DOCTYPE html
在 HTML4 和 XHTML 中DOCTYPE 标签是更复杂的并且需要引用一个外部 DTD。
在 HTML5 中DOCTYPE 标签更简单因为它不需要引用外部 DTD。
总的来说DOCTYPE 标签是非常重要的因为它影响了浏览器如何渲染文档并且确保了文档的兼容性和可靠性。
12.简述html页面渲染过程
HTML 页面的渲染过程包括以下步骤
解析HTM创建DOM树。解析CSS创建CSSOM树。合并DOM树和CSSOM树生成渲染树 (Render Tree)。渲染树是一种树形结构描述了页面的结构和布局以及每个元素的样式和尺寸。布局浏览器通过计算每个元素的位置和大小完成布局。绘制: 最后浏览器绘制页面将渲染树中的元素绘制到屏幕上。以上五个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改以上过程会被重复执行。实际上CSS和JavaScript往往会多次修改DOM或者CSSOM。
渲染过程是浏览器的核心功能因此引出在改变DOM树和CSSOM树时如何优化性能减少重绘和重排回流是至关重要的 ! 13.什么是HTML5以及和HTML的区别是什么?
HTML5 是 HTML的第五个版本。
与早期版本 HTML 相比HTML5 在语法和功能上都有了很大的改进。其中一些重要的改进如下
新增了语义化标签如 article、section、nav 等使得页面结构更加清晰。对于多媒体的支持更加完善比如新增了 video 和 audio 标签可以在网页上直接播放视频和音频。支持了离线存储和数据库基于Web Storage API和IndexedDB实现其实我们常用到Web Storage的API 方法localStorage和sessionStorage可以提高网页的可用性和速度。对于表单的支持更加完善比如input新增了 placeholder 和 required 属性等。对于游戏开发和动画的支持也更加完善比如新增了 Canvas 元素。
总的来说HTML5 更加现代化支持了更多的功能使得网页开发更加简便和高效。 14.如何禁用HTML中a标签的默认事件?
HTML方法
a href οnclickreturn false;return false;
/a
a href# οnclickreturn false;return false;
/a
CSS方法
pointer-events: none;
JavaScript 方法
const link document.querySelector(a);
link.addEventListener(click, function (event) {event.preventDefault();
});
15.前端页面有哪三层结构?
结构层Structure Layer也叫标记层Markup Layer通常使用HTML来描述页面的结构和内容包括标题、段落、列表、图像、表格等。表示层Presentation Layer也叫样式层Style Layer通常使用CSS来描述页面的样式和布局包括字体、颜色、边框、背景等。行为层Behavior Layer也叫脚本层Script Layer通常使用JavaScript来描述页面的交互和动态效果包括响应用户事件、操作DOM元素、修改样式等。
这种分层结构有助于前端页面的模块化和维护可以提高页面的可读性、可扩展性和可维护性。 16.请描述下 SEO 中的 TDK
在 SEO 中所谓的 TDK 其实就是 title、description、keywords。
title浏览器上显示的那些内容不仅用户能看到也能被搜索引擎检索到搜索引擎在抓取网页时最先读取的就是网页标题所以 title 是否正确设置极其重要。title 一般不超过 80 个字符而且词语间要用英文 “-” 隔开因为计算机只对英语的敏感性较高对汉语的敏感性不高。description也就是网页的内容摘要这是对于一个网页的简要内容概况。description 一般不超过 150 个字符描述内容要和页面内容相关。keywords主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此 keywords 的每个词都要能在内容中找到相应匹配才有利于排名。keywords 一般不超过 3 个每个关键词不宜过长而且词语间要用英文 “,” 隔开尽量将重要的关键字靠前放。17.frame 用来干什么的有哪些优缺点 iframe 也称作嵌入式框架嵌入式框架和框架网页类似它可以把一个网页的框架和内容嵌入在现有的网页中。
优点:
重载页面时不需要重载整个页面只需要重载页面中的一个框架页(减少了数据的传输增加了网页下载速度)方便制作导航栏
缺点:
会产生很多页面不容易管理调用外部页面需要额外调用 CSS给页面带来额外的请求次数会阻塞页面的加载window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发浏览器的后退按钮无效无法被一些搜索引擎索引到多数小型的移动设备PDA 手机无法完全显示框架
由于上面诸多缺点因此不符合标准网页设计的理念已经被标准网页设计抛弃目前框架的所有优点完全可以使用 Ajax 实现因此已经没有必要使用 iframe 框架了。 18.什么是可替换元素什么是非可替换元素它们各自有什么特点 可替换元素是指这样一种元素它在页面中的大部分展现效果不由 CSS 决定。
比如 img 元素就是一个可替换元素它在页面中显示出的效果主要取决于你连接的是什么图片图片是什么它就展示什么CSS 虽然可以控制图片的尺寸位置但永远无法控制图片本身。
再比如select 元素也是一个典型的可替换元素它在页面上呈现的是用户操作系统上的下拉列表样式因此它的展现效果是由操作系统决定的。所以同一个 select 元素放到不同操作系统的电脑上会呈现不同的外观。img、video、audio、大部分表单元素都属于可替换元素。
非可替换元素就是指的普通元素它具体在页面上呈现什么完全由 CSS 来决定。 19.页面可见性Page VisibilityAPI 可以有哪些用途 所谓页面可见性就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性Page VisibilityAPI 来判断当前页面是显示状态还是隐藏状态。
常用的 API 有三个document.hidden 返回一个布尔值如果是 true表示当前页面隐藏false 则表示页面可见。不同页面之间来回切换会触发 visibilitychange 事件还有一个 document.visibilityState表示页面所处的状态。
常见的用途
网站有图片轮播效果只有在用户观看轮播的时候才会自动展示下一张幻灯片。显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。页面想要检测是否正在渲染以便可以准确的计算网页浏览量当设备进入待机模式时网站想要关闭设备声音用户按下电源键关闭屏幕
20.什么是锚点
锚点anchor是一种特殊连接能定位到 HTML 文档中某个特定位置通过 HTML 元素的 id 来设置锚点。
