乐趣区

关于java:前端面试HTML面试题汇总

jiezi

前端面试—HTML 面试题汇总

<!– more –>

博客阐明

文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！

1、语义化

为什么要语义化?

a. 为了在没有 CSS 的状况下，页面也能呈现出很好地内容构造、代码构造: 为了裸奔时难看；

b. 用户体验：例如 title、alt 用于解释名词或解释图片信息的标签尽量填写有含意的词语、label 标签的活用；

c. 有利于 SEO：和搜索引擎建设良好沟通，有助于爬虫抓取更多的无效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

d. 不便其余设施解析（如屏幕阅读器、盲人阅读器、挪动设施）以有意义的形式来渲染网页；

e. 便于团队开发和保护，语义化更具可读性，遵循 W3C 规范的团队都遵循这个规范，能够缩小差异化。

2. 写 HTML 代码时，应留神什么？
  1. 尽可能少的应用无语义的标签 div 和 span；
  2. 在语义不显著时，既能够应用 div 或者 p 时，尽量用 p, 因为 p 在默认状况下有高低间距，对兼容非凡终端无利；
  3. 不要应用纯款式标签，如：b、font、u 等，改用 css 设置。
  4. 须要强调的文本，能够蕴含在 strong 或 em 标签中，strong 默认款式是加粗（不要用 b），em 是斜体（不要用 i）；
  5. 应用表格时，题目要用 caption，表头用 thead，主体局部用 tbody 突围，尾部用 tfoot 突围。表头和个别单元格要辨别开，表头用 th，单元格用 td；
  6. 表单域要用 fieldset 标签包起来，并用 legend 标签阐明表单的用处
  7. 每个 input 标签对应的阐明文本都须要应用 label 标签，并且通过为 input 设置 id 属性，在 lable 标签中设置 for=someld 来让阐明文本和绝对应的 input 关联起来。
  8. 补充一点：不仅写 html 构造时，要用语义化标签，给元素写 css 类名时，也要遵循语义化准则，不要，轻易起个名字就用，那样等当前，再重构时，十分难读。最禁忌的是不会英文，用汉语拼音代替。别那么 LOW。

HTML5 新增了哪些语义化标签？

1、header 元素

header 元素代表“网页“和”section”的页眉。通常蕴含 H1~H6 元素或者 hgroup 元素。作为整个页面或者内容块的题目，也能够包裹一节的目录局部，一个搜寻框，一个 nav，或者任何相干 logo。整个页面没有限度 header 元素的个数，能够领有多个，能够为每个内容块减少一个 header 元素

header 应用留神：

  • 能够是“网页”或任意“section”的头部局部；
  • 没有个数限度。
  • 如果 hgroup 或 h1-h6 本人就能工作的很好，那就不要用 header。

2、footer 元素

footer 元素代表“网页”或“section”的页脚，通常含有该页面的一些根本信息，例如：文档创作者的姓名、文档的版权信息、应用条款的链接、分割信息等等。。

footer 应用留神：

  • 能够是“网页”或任意“section”的底部局部；
  • 没有个数限度，除了包裹的内容不一样，其余跟 header 相似。

3、hgroup 元素

hgroup 元素代表“网页”或“section”的题目，当元素有多个层级时，该元素能够将 h1 到 h6 元素放在其内，譬如文章的主题目和副标题的组合

hgroup 应用留神：

  • 如果只须要一个 h1-h6 标签就不必 hgroup
  • 如果有间断多个 h1-h6 标签就用 hgroup
  • 如果有间断多个题目和其余文章数据，h1-h6 标签就用 hgroup 包住，和其余文章元数据一起放入 header 标签

4、nav 元素

nav 元素代表页面的导航链接区域。用于定义页面的次要导航局部。然而我在有些时候却不由自主的想用它，譬如：侧边栏上目录，面包屑导航，搜寻款式，或者下一篇上一篇文章，然而事实上标准上说 nav 只能用在页面次要导航局部上。页脚区域中的链接列表，尽管指向不同网站的不同区域，譬如服务条款，版权页等，这些 footer 元素就可能用了。

nav 应用留神：

  • 用在整个页面次要导航局部上，不适合就不要用 nav 元素；

5、aside 元素

aside 元素被蕴含在 article 元素中作为次要内容的从属信息局部，其中的内容能够是与以后文章无关的相干材料、标签、名词解释等。（非凡的 section）

在 article 元素之外应用作为页面或站点全局的从属信息局部。最典型的是侧边栏，其中的内容能够是日志串连，其余组的导航，甚至广告，这些内容相干的页面。

aside 应用总结：

  • aside 在 article 内示意次要内容的从属信息，
  • 在 article 之外则可做侧边栏，没有 article 与之对应，最好不必。
  • 如果是广告，其余日志链接或者其余分类导航也能够用

6、article 元素

article 元素最容易跟 section 和 div 容易混同，其实 article 代表一个在文档，页面或者网站中自成一体的内容，其目标是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的 widget 小工具。（非凡的 section）

除了它的内容，article 会有一个题目（通常会在 header 里），会有一个 footer 页脚。

article 应用留神：

  • 本身独立的状况下：用 article
  • 是相干内容：用 section
  • 没有语义的：用 div

HTML5 的十大新个性

(1) 语义标签

(2) 增强型表单

(3) 视频和音频

4)Canvas 绘图

(5)SVG 绘图

(6) 天文定位 Geolocation

(7) 拖放 API

(8)Web Worker

(9)Web Storage

(10)WebSocket

input 与 textarea 的区别

input 是单行文本框，不会换行。通过 size 属性指定显示字符的长度，留神：当应用 css 限定了宽高，那么 size 属性就不再起作用。value 属性指定初始值，Maxlength 属性指定文本框能够输出的最长长度。能够通过 width 和 height 设置宽高，然而也不会减少行数。

textarea 是多行文本输入框，文本区中可包容有限数量的文本，无 value 属性，其中的文本的默认字体是等宽字体（通常是 Courier），能够通 过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的方法是应用 CSS 的 height 和 width 属性。

用 div 模仿 textarea

在 div 标签外面退出 contenteditable=”true”

<style>
  .textarea{
    min-height: 100px;
    border: 1px solid #a0b3d6; 
    width: 300px;
    font-size: 14px;
    max-height: 300px;
    overflow-y: auto;
  }
</style>
 
<body>
  <!-- 用 div 模仿 textarea-->
  <div class="textarea" contenteditable="true">

  </div>
</body>

感激

万能的网络

以及勤奋的本人，集体博客，GitHub

退出移动版