2. 科技
    3. HTML常见的标签问题

    HTML常见的标签问题

    科技2025-02-11  13

    文章目录

    1.table和 div 区别2.说说你对HTML语义化的理解3.iframe有哪些缺点？4.label的作用是什么？怎么使用？5. title与h1的区别、b与strong的区别？i与em的区别？6. 行内元素、块级元素、空元素有哪些？7.如何在页面上实现一个圆形的可点击区域？8.聊聊meta9.svg是什么？10.canvas和svg图形的区别是什么？

    1.table和 div 区别

    核心：速度和加载方式方面的区别。

    div:

    加载方式是即读即加载，遇到< div > 没有遇到</ div > 的时候一样加载< div > 中的内容，读多少加载多少；

    table:

    加载方式是完成后加载，遇到< table > 后，在读到</ table > 之前，< table > 中的内容不加载

    2.说说你对HTML语义化的理解

    用正确的标签做正确的事情！html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

    3.iframe有哪些缺点？

    iframe 会阻塞主⻚⾯的 Onload 事件搜索引擎的检索程序⽆法解读这种⻚⾯，不利于 SEOiframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe ，最好是通过javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题

    4.label的作用是什么？怎么使用？

    作用：label 元素不会向用户呈现任何特殊效果。但它能提高用户体验，如果您在 label 元素内点击文本，就会触发此控件。 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。 <form> <label for="male">男</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="sex" id="female" /> </form>

    5. title与h1的区别、b与strong的区别？i与em的区别？

    title 属性没有明确意义只表示是个标题，H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：< strong >会重读，而< b >是展示强调内容。i 内容展示为斜体，em 表示强调的文本；

    6. 行内元素、块级元素、空元素有哪些？

    行内元素：

    abspanimginputselectstrong（强调的语气）

    块级元素：

    divulollidldtddh1h2h3h4p

    较常用的空元素(即非闭合标签)：

    brhrimginputlinkmetaareacol

    7.如何在页面上实现一个圆形的可点击区域？

    三种方案：

    1.html : 图像映射(image-map-area)指带有可点击区域的一幅图像。 思路：map-area或者svg

    <img src="task6.jpg" width="1366" height="768" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" /> </map>

    2.css:（使用border-radius）

    <style> .disc{ width:100px; height:100px; background-color:dimgray; border-radius: 50%; cursor: pointer; position: absolute; left:50px; top:50px; line-height: 100px; text-align: center; color: white; } </style> <div class="disc">点击区域</div>

    3.纯js

    <script> document.onclick = function(e){ var r = 50; //圆的半径 var x1 = 100, y1 = 100; var x2 = e.clientX, y2 = e.clientY; var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2))); if(len<=50){ console.log("Inner"); }else{ console.log("Outer"); } } </script>

    8.聊聊meta

    核心：提供给页面的一些元信息（名称 / 值对），有助于 SEO。

    属性值：

    name:名称 / 值对中的名称。author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。http-equiv:没有 name 时，会采用这个属性的值。content-type、expires、refresh、set-cookie。把 content 属性关联到 http 头部content:名称 / 值对中的值， 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用scheme:用于指定要用来翻译属性值的方案

    示例：

    <head> <meta name="description" content="免费在线教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="runoob"> <meta charset="UTF-8"> </head>

    9.svg是什么？

    svg

    SVG 表示（scalable vector graphics）可缩放矢量图形。这是一个基于文本的图形语言，它可以绘制使用文本、线、点等的图形，因此可以轻巧又快速地渲染。

    核心：SVG 可以成为任何复杂的组合图形。SVG 支持渐变、旋转、滤镜效果、JavaScript 接口等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。

    代码示例：

    <h1>My first SVG</h1> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

    10.canvas和svg图形的区别是什么？

    注意：

    SVG 绘制的图像在图片质量不下降的情况下被放大。SVG 图像经常在网页中制作小图标和一些动态效果图。
    Processed: 0.016, SQL: 8