陕西省交通建设集团公司招聘网站,邯郸移动网站建设公司,dw做网站链接数据库,照片展示网站模板免费下载行内元素有哪些#xff1f;块级元素有哪些#xff1f; 空(void)元素有那些#xff1f;
HTML 中的行内元素#xff08;inline elements#xff09;通常用于在一行内显示#xff0c;不会独占一行的空间。常见的行内元素有#xff1a; span#xff1a;用于对文本…行内元素有哪些块级元素有哪些 空(void)元素有那些
HTML 中的行内元素inline elements通常用于在一行内显示不会独占一行的空间。常见的行内元素有 span用于对文本或其他内联元素进行分组或添加样式。 strong表示强调的文本。 em表示斜体强调的文本。 a用于创建超链接。 img用于插入图像。 input用于创建用户输入字段。
块级元素block-level elements通常会独占一行的空间并且会在前后创建换行。常见的块级元素有 div用于将内容分组。 p用于段落。 h1-h6用于标题。 ul 和 ol用于无序和有序列表。 li用于列表项。 table用于创建表格。
空元素void elements是指没有闭合标签的元素。它们在 HTML 中没有内容只有一个开启标签。常见的空元素有 br用于插入换行符。 img用于插入图像。 input用于创建用户输入字段。 meta用于指定页面元数据。 link用于引入外部资源。 hr用于创建水平分隔线。 如何理解HTML5结构语义化 简单说就是用正确的标签做正确的事情 段落用p标签标题用h系列标签图片用img主要内容用main标签等 对开发者 便于团队的开发和维护 在没有加载CSS的情况下也能呈现较好的内容与代码结构易于阅读 对浏览器 有利于SEO搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重 方便其他设备的解析 (如屏幕阅读器、盲人阅读器等)有利于无障碍阅读提高可访问性。
HTML5的新特性 新增 语义化标签nav、header、footer、aside、article、section 媒体的audio 音频、video 视频 数据存储的localstorage、sessionStorage 表单控件date、time、email、url、search、color、range等 新的技术canvas画布、Geolocation地理位置、websocket通信协议、webworker history APIgo、forward、back、pushstate 移除的元素 纯表现的元素basefont、big、center、font、s、strike、tt、u 对可用性产生负面影响的元素frame、frameset、noframes 支持HTML5新标签的浏览器 在IE8/IE7/IE6浏览器中可以通过document.createElement方法创建标签让这些浏览器支持HTML5的新标签 也可以使用成熟的框架如html5shim 通过DOCTYPE声明、新增的结构元素、功能元素可以区分HTML5 标签上title和alt属性的区别是什么 这两个属性都可以用在img标签中的 title是元素的注释信息给用户看的当鼠标放到图片或者文字上时会显示。在IE浏览器中alt起到了title的作用变成文字提示 alt是当图片不显示时的替代文字给搜索引擎识别的 src和href的区别 src是用于替换当前元素 src是source的缩写 指向外部资源的位置在请求src资源时会将其指向的资源下载并应用到文档内如js、img、frame等元素 当浏览器解析到该元素时会暂停其他资源的下载和处理知道将该资源加载、编译、执行完毕图片和框架等元素也是如此类似于将所指向资源嵌入当前标签内。 href是用于在当前文档和引用资源之间确立联系 href是Hypertext Reference的缩写 指向网络资源所在位置建立和当前元素或当前文档之间的链接如link元素 浏览器会识别文档并下载资源且不会停止对当前文档的处理 label标签
label的for属性和input的id配合使用当我们点击label时浏览器会自动将焦点这个input框中
label formobileNumber:/label
input typetext idmobile/
labelDate:input typetext//label 锚点
对于锚点可以在 HTML 中使用 a 标签的 name 属性来设置锚点然后在页面中通过a 标签的 href 属性使用#进行跳转。 浏览器的渲染机制一般分为几个步骤网页渲染到浏览器发生了什么一个网页怎么渲染到浏览器端的 处理HTML 并构建 DOM 树 处理 css 构建 CSSOM 树 将 DOM 与 CSSOM 合并成一个渲染树 根据渲染树来布局计算每个节点的位置 调用 GPU 绘制合成图层显示在屏幕上 注意: 在构建 CSSOM 树时会阻塞渲染直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程所以应该尽量保证层级扁平减少过度层叠越是具体的 CSS 选择器执行速度越慢 当HTML 解析到 script 标签时会暂停构建 DOM完成后才会从暂停的地方重新开始。也就是说如果你想首屏渲染的越快就越不应该在首屏就加载JS 文件。 iframe的理解 iframe是一个框架标签在网页中嵌入其他文件可以嵌入广告与超链接或表单的target配合展示不同的内容。 优点 解决加载缓慢的第三方内容如图标和广告等加载问题 并行加载脚本 缺点 iframe会阻塞主页面的OnLoad事件 即使内容为空加载也需要事件 没有语义
如果有两个iframe怎么进行数据传递 使用postMessage API 可以使用本地缓存localStorage、sessionStorage和cookie
cookies、sessionStorage、localStorage的区别 cookie是网站为了标识用户身份而储存在用户本地终端上的数据。cookie数据始终在同源的http请求中携带即会在浏览器和服务器间来回传递 sessionStorage和localStorage不会自动把数据发给服务器仅在本地保存 存储大小 cookie数据大小不能超过4k sessionStorage和localStorage比cookie大可以达到5M或更大 储存时间 cookie可以设置过期时间在用户关闭浏览器后仍保留 sessionStorage在当前会话期间有效关闭浏览器后数据被清除临时缓存页面中的分页保存当前页码和每页显示的条数 localStorage可以长期保留数据除非手动删除或清除缓存历史记录、收藏夹或者离线存储 常用API Cookies document.cookie获取或设置当前页面的 cookie。 encodeURIComponent()编码字符串以便放到cookie中。 decodeURIComponent()解码cookie中的字符串。 max-age设置Cookie的过期时间。 sessionStorage sessionStorage.setItem(key, value)存储一个键值对。 sessionStorage.getItem(key)根据键名获取存储的值。 sessionStorage.removeItem(key)删除某个键值对。 sessionStorage.clear()清空所有键值对。 localStorage localStorage.setItem(key, value)存储一个键值对。 localStorage.getItem(key)根据键名获取存储的值。 localStorage.removeItem(key)删除某个键值对。 localStorage.clear()清空所有键值对 渐进式增强和优雅降级 这两个都和前端开发中的跨浏览器的兼容性有关 简单地说就是描述了一种处理不同浏览器对网站或应用程序支持程度不同的方法 渐进式增强从简单到复杂的设计策略。指在设计和开发的过程中在保证基本功能可用的情况下逐步添加高级的功能。确保网站在就得浏览器或设备可以正常工作并且在新的浏览器或设备上可以得到更好的用户体验。 注重于提供核心经验并逐步添加额外功能 优雅降级从复杂到简单的设计策略。假设网站或应用程序具有完整高质量并且复杂的特点在尽可能多的平台上运行良好当某些客户端设备无法处理所有的特性时会优雅地回退到一个更为简单但仍满足基本需求的版本 立足于完整和复杂的设计并在必要的时候简化他们确保网站或者应用程序的使用
!DOCTYPE DOCTYPE是HTML5中的一种文档类型声明告诉浏览器应该用哪个HTML版本解析网页 浏览器渲染页面有两种模式 标准模式默认模式浏览器使用W3C的标准解析渲染页面以最高的标准呈现页面 混杂模式就是页面以一种比较宽松的向后兼容的方式显示 html5的离线存储资源 在线情况下通过请求mainfest文件如果是第一次访问浏览器就根据mainfest文件的内容进行下载并进行离线存储那如果是之前访问mainfest文件没有改变的情况过就会使用离线缓存的内容如果mainfest文件进行更新了就会重新下载并进行缓存 离线情况下浏览器直接使用离线存储 自定义属性 / 全局属性 自定义属性指在HTML标签中自己定义的属性。命名要以data-前缀开头然后用js获取或者css设置这个属性的值使用dataset来获取或者设置 全局属性比id、class、style、title、lang等适用于任何HTML元素 script 标签为什么建议放在 body 标签的底部defer、async 因为浏览器在渲染html的时候是从上到下执行的当遇到js文件的时候就会停止当前页面的渲染转而去下载js文件。 如果将script标签放在头部在文件很大的情况下将导致首屏加载时间延长影响用户体验。 style写在body前和写在body后有什么区别 因为我们的代码是从上往下执行的style写在前面会逐步渲染 当把style写后面的时候浏览器解析完html文档解析到尾部的css时会导致浏览器停止之前的渲染等待加载解析完css后重新渲染会导致页面出现FOUC现象即页面闪烁的问题 什么是HTML5以及和HTML的区别是什么 HTML5是HTML的新标准其主要目标是无需任何额外的插件如Flash、Silverlight等就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。 HTML5是由万维网联盟W3C和 Web Hypertext Application Technology Working Group 合作创建的HTML新版本。 区别 从文档声明类型上看 HTML是很长的一段代码很难记住。 HTML5却只有简简单单的声明方便记忆 从语义结构上看 HTML4.0没有体现结构语义化的标签通常都是这样来命名的 div idheader/div这样表示网站的头部。 HTML5在语义上却有很大的优势。提供了一些新的标签比如headerarticlefooter。 HTML5 有哪些 drag 相关的 API dragstart事件主体是被拖放元素在开始拖放被拖放元素时触发。 darg事件主体是被拖放元素在正在拖放被拖放元素时触发。 dragenter事件主体是目标元素在被拖放元素进入某元素时触发。 dragover事件主体是目标元素在被拖放在某元素内移动时触发。 dragleave事件主体是目标元素在被拖放元素移出目标元素是触发。 drop事件主体是目标元素在目标元素完全接受被拖放元素时触发。 dragend事件主体是被拖放元素在整个拖放操作结束时触发。
canvas和svg 通过Javascript来绘制2D图形是逐像素进行渲染的。其位置发生改变就会重新进行绘制 svg是缩放矢量图不依赖分辨率支持事件处理器不适合游戏应用 如何实现浏览器内多个标签页之间的通信 localStorage localStorage是浏览器多个标签共用的存储空间所以可以用来实现多标签之间的通信(pssession是会话级的存储空间每个标签页都是单独的 WebSocket通讯 全双工full-duplex通信自然可以实现多个标签之间的通信 postMessage 两个需要交互的tab页面具有依赖关系。比如iframe标签可以使用 定时器setInterval cookie 在页面A设置一个使用setInterval定时器不断刷新检查Cookies的值是否发生变化如果变化就进行刷新的操作。 由于Cookies是在同域可读的所以在页面B审核的时候改变Cookies的值页面A自然是可以拿到的。 Broadcast Channel 顾名思义“广播频道”官方文档里的解释为“用于同源不同页面之间完成通信的功能”该方法无法完成跨域的数据传输在其中某个页面发送的消息会被其他页面监听到。 SharedWorker SharedWorker可以被多个window共同使用但必须保证这些标签页都是同源的(相同的协议主机和端口号) input上传文件怎么实现的可以多选吗
type属性值设置为file当我们选择文件的时候触发change事件将选择的文件上传到服务器。通过multiple属性实现同时选择多个
