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; // 背景色
}
“`
激活谷谷主为您准备了激活教程，为节约您的时间请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/95516.html
