HTML # 1.HTML中行内素、块级素和空素的区别？分别都有哪些（各写5个）？ 答： (1) 行内素：与其它行内素并列一行，设置宽高不起作用，默认宽度为文字宽度。如span、a、b、strong、i、em、u、ins、s、del。 (2) 块级素：独占一行，设置宽高起作用，默认宽度为父级素宽度的100%。如div、p、h1-h6、ul、ol、li、dl、dt、dd。 (3) 空素：没有内容，在开始标签中关闭。如br、hr、img、input、link、meta。 * # 2.img素的alt和title有什么区别？ (1) alt：图片无法显示时的替代文本。可提高图片可访问性，除了纯装饰性图片外都需要设置有意义的值，搜索引擎会重点分析。 (2) title：鼠标经过图片时的显示文本。 * # 3.title和h1的区别、b和strong的区别、i和em的区别？ 答： (1) title和h1：title属性没有明确的标题，只是HTML语义化的一个标签；而h1则是层次明确的标题，h1标签里的文字，字体较大，并且会加粗。 (2) b和strong：二者都有加粗字体的作用，但strong更加语义化（加重语气）。 (3) i和em：em是强化文本的内容，而所有浏览器对重要内容都是以斜体形式显示的；i则是表示，标签内文本为斜体。 * # 4.input焦点时会有默认的border属性，如何去掉默认属性？ 答： (1) CSS设置outline: none，去掉边框。 (2) 如果使用Bootstrap框架, 添加box-shadow: none;属性, 否则仍有边框。 * # 5.如何让一个素垂直、水平都居中？ 答： (1) 外边距 + 绝对定位：设置margin为auto，设置绝对定位4个方向为0。如下： “` margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; “` (2) 绝对定位 + 平移：设置绝对定位垂直、水平方向为50%，设置transform平移X、Y轴各-50%。如下： “` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); “` (3) flex（弹性）布局：父素有固定宽高，设置flex布局，主轴、交叉轴对齐方式均为center。如下： “` display: flex; justify-content: center; align-items: center; “` (4) table-cell（单格）布局：父素有固定宽高，设置table-cell布局，text-align为center、vertical-align为middle；子素设置display: inline-block;属性。如下： “` // 父素 display: table-cell; text-align: center; vertical-align: middle; // 子素 display: inline-block; “` * # 6.如何让一个素水平居中？ 答： (1) 外边距：设置属性margin为0 auto。如下： `margin: 0 auto;` (2) flex（弹性）布局：父素有固定宽高，设置flex布局，主轴对齐方式为center。如下： “` display: flex; justify-content: center; “` * # 7.margin与padding的区别？ 答： (1) margin：外边距，素与素之间的距离。 (2) padding：内边距，素与内容之间的距离。 * # 8.margin、padding的百分比是怎么计算的？ 答： 素的margin、padding设置为百分比时，则相对于父素的width进行计算。 * # 9.给一个div设置它的宽度为100px，然后再设置它的padding-top为20%。问：现在这个div有多高？ 答： div高度为块级父素宽度的20%，div是否脱离文档流其父素可能不同。 * # 10.如何实现满屏品字布局？ 答： 上面素设置宽度100%，下面两个素设置宽度50%、浮动。如下： “` // 上面div width: 100%; // 下面两个div width: 50%; float: left; “` * # 11.如何实现非满屏品字布局？ 答： 给三个素设置固定宽高，上面素设置margin: 0 auto;，下面两个素设置左浮动、水平偏移量取-100%，下面左侧素的左外边距为50%。如下： “` // 三个div width: 100px; height: 100px; // 上面div margin: 0 auto; // 下面两个div float: left; transform: translateX(-100%); // 下面左侧div margin-left: 50%; “` * # 12.行内块的li与li之间不可见的空白间隙是由什么原因引起？怎么解决？ 答： (1) 原因：因为li变为行内块进行排列时，浏览器的默认把行内素间的空白字符（空格、换行、tab）渲染成一个空格，空格会占用一个字符的宽度。 (2) 解决方法：   ① 将li代码全部写在一排，不要换行。   ② 给li设置浮动（float: left;）。   ③ 将ul的字符间距设置为小于等于-5的值（letter-spacing: -5px;），再将li的字符间距设置回默认值（letter-spacing: normal;）。   ④ 将ul的字体尺寸设置为0（font-size: 0;），再将li的字体尺寸设置回默认值（font-size: 16px;）。（Safari浏览器不支持） * # 13.简述一下你对HTML语义化的理解？ 答： 用正确的标签做正确的事情，HTML语义化可以让页面的内容结构更加简单易懂，便于搜索引擎解析，便于阅读维护和理解。 * # 14.Label的作用是什么？如何使用？ 答： (1) 作用：label标签用来定义表单控件间的关系，当用户label里面的文字时，浏览器会自动把焦点（光标）转到和标签相关的表单控件上。 (2) 使用：label标签的for属性与input标签的id属性名称要一致，二者才能绑定到一起。如下： “` <label for=”my-label”> Number: </label> <input type=”text” name=”my-name” id=”my-label”/> “` * # 15.页面可见性（visibility API）有哪些用途？ 答： (1) 可以通过visibilityState检测当前页是否可见，以及打开网页的时间。 (2) 可以控制页面在被切换后，停止视频和音频的播放。 * # 16.如何在页面上实现一个圆形的可区域？ 答： (1) 通过border-radius实现。 (2) 通过JS实现，需要求一个点在不在圆上的算法，鼠标坐标等。 * # 17.HTML 中 style 标签与 script 标签的位置？ 答： (1) style 标签：   ① 一般是写在 body 标签前、 head 标签内。   ② 如果写在 body 标签内，则会导致 CSS 重新渲染一次页面，占用一定的时间。   ③ 如果写在 body 标签后，在这之前的素样式就不会生效，会导致页面结构出来了，而CSS还没开始渲染。 (2) script 标签：   ① 一般是写在 body 标签内的最底部。（浏览器会在解析完整个页面内容之后再执行 JS 代码，确保在执行 JS 代码之前，页面的 DOM 结构已经完全加载并可用，这样可以避免在执行 JS 代码时出现“未找到素”的错误。但是，对于一些高度依赖于 JS 的网页，这样就会显得很慢。）   ② 如果写在 body 标签前、 head 标签内，则会使页面内容呈现滞后（页面阻塞），用户体验差。（浏览器解析 HTML 文档，解析到 script 标签时，会先下载完所有 JS，再往下解析其它页面内容；另外，多个 JS 不能一起下载，并且会阻塞解析其它页面内容。）   ③ 如果写在 body 标签后，与写在 body 标签内的打印结果一样，但从 HTML 2.0 起写在 body 闭标签后是不合标准的。（浏览器不会报错，因为在 body 标签后再出现任何素的开始标签都是 parse error（语法错误/解析错误）、浏览器会忽略之前的 body 闭合标签（</body>），即视作仍在 body 标签内。） (3) 总结：一般来说，style 标签写在 body 标签前、 head 标签内；如果是依赖、页面布局等 JS，则 script 标签写在 body 标签前、 head 标签内，否则 script 标签都写在 body 标签内的最底部；同时，使用 HTML5 的 async（脚本可以在加载时立即执行，而不会阻塞页面的渲染）、defer （脚本可以在文档解析完成后执行，而不会阻塞页面的渲染）属性，实现异步加载脚本。 * # 17.HTML 转义符是什么？常用的转义符有哪些？ 答： (1) HTML 转义符：转义字符以“&”开始，以“;”结束，区分大小写。各字符间不能出现空格，且单独的“&”不被视为转义符的开始。 (2) 常用的转义符：   ①` `：不断行的空格。   ②` `：半方大的空格。   ③` `：全方大的空格。   ④`<`：小于符号（<）。   ⑤`>`：大于符号（>）。   ⑥`&`：与符号（&）。   ⑦`"`：双引号（”）。   ⑧`©`：版权符号（©）。   ⑨`®`：已注册商标（®）。   ⑩`™`：美国商标（TM）。   ⑪`×`：乘号（×）。   ⑫`÷`：除号（÷）。 * # 18.XHTML 和HTML 有什么区别？ 答： (1) 功能：XHTML 可兼容各大浏览器、手机和PDA，并且浏览器也能快速正确地编译网页。 (2) 书写：XHTML 素必须被正确嵌套、闭合、区分大小写，文档必须拥有根素。 * # 19.如何区分HTML和HTML5？ 答： 通过Doctype声明、HTML5新增结构素或HTML5新增功能素等，来区分HTML和HTML5。 * # 20.HTML5新特性有哪些？ 答： (1) HTML5素：   ①`<bdi>`：设置文本，使其脱离父素的文本方向设置。   ②`<command>`：命令按钮，比如单选按钮、复选框或按钮。   ③`<details>`：用于描述文档或文档某个部分的细节。   ④`<summary>`：标签包含details素的标题。   ⑤`<dialog>`：定义对话框，比如提示框。   ⑥`<figure>`：规定独立的流内容，如图像、图表、照片、代码等。   ⑦`<figcaption>`：定义figure素的标题。   ⑧`<mark>`：定义带有记号的文本。   ⑨`<meter>`：定义度量衡，仅用于已知最大和最小值的度量。   ⑩`<progress>`：定义任何类型的任务的进度。   ⑪`<ruby>`：定义ruby注释。   ⑫`<rt>`：定义字符的解释或发音。   ⑬`<rp>`：在ruby注释中使用，定义不支持ruby素的浏览器所显示的内容。   ⑭`<time>`：定义日期或时间。   ⑮`<wbr>`：规定在文本中的何处适合添加换行符。 (2) HTML5语义化素：   ①`<header>`：定义了文档的头部区域。   ②`<nav>`：定义导航链接的部分。   ③`<section>`：定义文档中的节或区段。   ④`<article>`：定义页面独立的内容区域。   ⑤`<aside>`：定义页面侧边栏内容。   ⑥`<footer>`：定义section或document的页脚。 (3) HTML5绘图： `<canvas>`：图形绘制容器，通过脚本来完成。 (4) HTML5拖放：   ①`draggable: true;`：抓取对象拖到另一个位置。   ②`ondragstart + setData()`：拖动什么。   ③`ondragover`：放到何处。   ④`ondrop`：进行放置。 (5) HTML5地理定位：通过Geolocation API获得用户的地理位置。 (6) HTML5音频： `<audio>` (7) HTML5视频： `<video>` (8) HTML5表单控件（Input类型）：calendar、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week、color。 (9) HTML5表单素：   ①`<datalist>`：与input素配合使用，用于定义input可能的值。   ②`<keygen>`：规定用于表单的密钥对生成器字段。   ③`<output>`：定义不同类型的输出，比如脚本的输出。 (10) HTML5表单属性：    ①`<form>`的新属性：autocomplete、novalidate。    ②`<input>`的新属性：autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step。 (11) HTML5 Web存储：使用sessionStorage、localStorage替代cookie。 (12) HTML5离线Web应用：HTML5 引入了应用程序缓存（Application Cache），具有一些优势。    ① 离线浏览：用户可在应用离线时使用它们。    ② 速度：已缓存资源加载得更快。    ③ 减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。 (13) HTML5 Web Worker：运行在后台的JavaScript，独立于其它脚本，不会影响页面的性能。 (14) HTML5 SSE：即Server-Sent事件，网页自动来自服务器的更新。 (15) HTML5 WebSocket：一种在单个TCP连接上进行全双工通讯的协议。 * # 21.HTML5的form如何关闭自动完成功能？ 答： 给form或某个input设置autocomplete = off。 * # 22.如何处理HTML5新标签的兼容性问题？ 答： (1) IE6、IE7、IE8支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签。 (2) 使用成熟的框架，如html5shim框架。如下： “` <!–[if lt IE 9]> <script src=https://www.kancloud.cn/gadda/front-end_development/”http://html5shim.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> “` * # 23.input标签的placeholder会出现文本位置偏上的情况，如何解决？ 答： (1) PC端：设置line-height等于height。 (2) 移动端：设置line-height：normal;。 # 24.Canvas和Svg有什么区别？ 答： (1) Canvas：输出标量画布，类似一张图片，放大会失真或有锯齿。 (2) Svg：输出矢量图形，每个图形的素都是独立DOM节点，方便绑定事件或通过修改参数来自由放大缩小，不会失真和有锯齿。 * # 25.Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验，如何修改？ 答： (1) 方法一： “` input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ background-color: #fff; // 设置成素原本的颜色 background-image: none; color: rgb(0, 0, 0); } “` (2) 方法二： “` input:-webkit-autofill { -webkit-box-shadow: 0px 0 3px 100px #ccc inset; // 背景色 } “`
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/58061.html
