HTML面试题

语义化

就是用合理、正确的标签来展示内容，比如h1~h6定义标题。
语义化优点：
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

新标签新特性

• <header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。
• <nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。
• <main> 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。
• <article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
• <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
• <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
• <section>表示文档中的一个区域（或节），比如，内容中的一个专题组。

input和textarea的区别

• <input>元素：
  1.须指定type的值为text
  2.通过size属性指定显示字符长度，value指定默认值，maxlength指定最大输入字符数

<input type="text" value="123" size="10" maxlength="20">

• <textarea>元素:
  1.使用<textarea></textarea>标签对
  2.内容放在<textarea></textarea>标签对中
  3.使用row、cow指定大小

<textarea row="3" col="4">hello,I am textarea content</textarea>

用一个div模拟textarea的实现

<div contenteditable="true"> .....此处省略.....</div>
div{
    width: 400px;
    min-height: 100px;
    max-height: 300px;
    _height: 100px; //IE6
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
    outline: 0;
    border: 1px solid #a0b3d6;
    font-size: 12px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto; //超过最大高度就出现滚动条
    _overflow-y: visible;
}

移动设备忽略将页面中的数字识别为电话号码的方法

加上meta标签，设置 content="telephone=no"：

<meta name="format-detection" content="telephone=no">  //禁止把数字转化为拨号链接
<meta name="format-detection" content="email=no">  //禁止邮箱,禁止发送邮件
<meta name="format-detection" content="adress=no">  //禁止地址跳转至地图
<meta name="format-detection" content="telephone=no,email=no,adress=no">  //合并写法