胖蔡说技术
随便扯扯

[前端面试题] HTML面试题(一)

1、HTML语义化的理解

HTML语义化就是用正确的标签做正确的事

  • Html语义化可以让页面的内容机构化、结构清晰化,以便于浏览器、搜索引擎进行解析
  • 爬虫也依赖HTML标签来确定上下文和关键字的权重,利于SEO的优化
  • 对开发者友好,让人更容易读懂,利于代码可读性

2、块状元素和行内元素有哪些?如何相互转换?

块状元素是指独占一行,默认宽度为100%,可以设置宽高。高度由自身内容决定,可以设置marginpadding属性。常见的块状元素:

  • <address>:定义地址
  • <caption>:定义表格标题
  • <dd>:定义列表中定义条目
  • <div>:定义文档中的分区或节
  • <dl>:定义列表
  • <dt>:定义列表中的项目
  • <fieldset>:对表单中的相关元素进行分组
  • <form>:创建 html 表单
  • <h1> - <h6>:定义标题
  • <hr>:创建一条水平线
  • <li>:定义列表项目
  • <legend>元素用于表示其父元素 <fieldset> 的内容标题。
  • <ol>:有序列表
  • <ul>:无序列表
  • <p>:定义段落
  • <pre>:预格式化的文本
  • <table>: HTML 表格
  • <tbody>:表格主体(正文)
  • <td>:表格中的标准单元格
  • <tfoot>:表格的页脚(脚注或表注)
  • <th>:表头单元格
  • <thead>:表格的表头
  • <tr>:表格中的行

不独占一行,与其他行内元素共享一行;设置宽高无效,高度由自身内容决定;margin 上下无效、左右有效;padding 均有效;行内元素不能包含块元素,除了a元素。常见的行内元素如下:

<span> <a> <srong> <b> <i> <em> <sub> <sup> <mark> <u> <img > <del> <input> <textarea> <select>

行内块元素和相邻的行内元素(包含行内块)在一行上,它们直接会有空白缝隙,一行可以显示多个(行内元素特点),默认宽度就是内容的宽度(行内元素特点),高度、宽度、内外边距都可以自定义(块元素特点)。

如何转换?

  • 转为块状:display: block;
  • 转为行内元素:display: inline;
  • 转为行内块元素:display: inline-block;

3、h5新增哪些元素?

  • canvas:定义绘制图形
  • audio:音频
  • video:视频
  • embed:定义嵌入式内容
  • datalist:定义选项列表
  • nav:定义导航链接的部分
  • section:定义文档中的节(section、区段)
  • footer:定义 section 或 document 的页脚。
  • header:定义了文档的头部区域
  • aside:定义页面的侧边栏内容。

4、src和href的区别?

href表示超文本引用,用于建立当前元素与文档的链接,目的不是为了引用资源,而是为了建立联系,让当前标签能够链接到目标地址。

src指向的内容会嵌入到文档中当前标签所在的位置。src与href的却别如下:

  • href 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中,比如 JavaScript 脚本,img 图片;
  • href 用于在当前文档和引用资源之间确立联系;src 用于替换当前内容;
  • 当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。

5、iframe 的优缺点?

优点

  • 解决加载缓慢的第三方内容,如图标或广告,这些问题可以由iframe来解决
  • iframe能够原封不动的把嵌入的网页展现出来
  • 并行加载脚本
  • 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe嵌套,可以增加代码的可重用

缺点:

  • 阻塞主页面的Onload事件
  • 没有语义,不利于搜索引擎识别
  • 增加http请求,加载也需要时间
  • 移动设备无法完全显示框架,设备兼容性差。

6、常见的浏览器内核有哪些?

  • Gecko(Firefox)内核:Firefox、Netscape6及以上版本、Mozilla 
  • WebKit内核:Safari、Chrome
  • Blink内核:Chrome
  • Trident内核:IE浏览器
  • Presto内核:Opera(Opera内核原为 Presto,现为Blink)

7、DOCTYPE的作用?严格模式和混杂模式的区别?

<!DOCTYPE>声明位于位于HTML文档中的第一行,声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

  • 严格模式(标准模式):是指浏览器按照 W3C 标准解析代码。严格模式是浏览器根据web标准去解析页面,是一种要求严格的DTD,不允许使用任何表现层的语法,如<br/>
  • 混杂模式(兼容模式):又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为,以防止老站点无法工作。

HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5 没有严格和混杂之分)

8、对于WEB标准以及W3C的理解与认识

WEB标准分为结构(structural layer)、表示(presentation layer)和行为(behavior layer)。三部分独立分开,使其更具有模块化:

  • 结构(structural layer):其中主要由HTML标签组成。通俗来说:页面body里面我们写入的标签都是为了页面的结构。
  • 表示(presentation layer):css样式表,通过css可以使页面的结构标签更具美感
  • 行为(behavior layer):指页面和用户具有一定的交互,同时页面结构或者表现发生变化,主要是有js组成

W3Cweb标准提出了规范化的要求:

  • 标签字母要小写 
  • 标签要闭合 
  • 标签不允许随意嵌套
  • -尽量使用外链css样式表和js脚本,让结构、表现和行为分为三块,符合规范,同时提高页面渲染速度,提高用户的体验。
  • 样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性名要做到见文知义,标签越少,加载越快,用户体验更高,代码维护简单,便于改版
  • 不需要变动页面内容,便可提高打印版本而不需要复制内容,提高网站易用性。
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » [前端面试题] HTML面试题(一)
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏