1、HTML语义化的理解
html语义化的含义：根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。(基本上都是围绕着几个主要的标签，像标签H1~H6，li、强调(strong、em)等等)。
语义化的原因：
①为了在没有CSS情况下，页面也能呈现出很好的内容结构、代码结构。(为了裸奔时候好看)。②用户体验：例如title、alt用于解释名词或者解释图片信息、label标签dd的活用。
③有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息(爬虫依赖于标签来确定上下文和各个关键字的权重)。
④方便其它设备解析(如屏幕阅读器，盲人阅读器，移动设备)以意义的方式来渲染网页。
⑤便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
2、HTML5新增了哪些语义化标签
头部：<header></header>
尾部：<footer></footer>
独立结构：<article></article>
主要内容：<main></main>
导航：<nav></nav>
侧边栏：<aside></aside>
节、段、分组：<section></section>
3、H5的新特性
①语义化标签(上面第二题)。
②增强型表单：input 的多个 type
HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证
| input 的 type | 描述 |
| color | 主要用于选取颜色 |
| date | 从一个日期选择器选择一个日期 |
| datetime | 选择一个日期（UTC 时间） |
| 包含 e-mail 地址的输入域 | |
| month | 选择一个月份 |
| number | 数值的输入域 |
| range | 一定范围内数字值的输入域 |
| search | 用于搜索域 |
| tel | 定义输入电话号码字段 |
| time | 选择一个时间 |
| url | URL 地址的输入域 |
| week | 选择周和年 |
html5 也新增以下表单元素
| 表单元素 | 描述 |
| datalist | 元素规定输入域的选项列表，使用 input 元素的 list 属性与 datalist 元素的 id 绑定 |
| keygen | 提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段 |
| output | 用于不同类型的输出，比如计算或脚本输出 |
html5 新增的表单属性
| 表单属性 | 描述 |
|---|---|
| placehoder | 简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失 |
| required | 是一个 boolean 属性。要求填写的输入域不能为空 |
| pattern | 描述了一个正则表达式用于验证 input 元素的值 |
| min 和 max | 设置元素最小值与最大值 |
| step | 为输入域规定合法的数字间隔 |
| height 和 width | 用于 image 类型的 input 标签的图像高度和宽度 |
| autofocus | 是一个 boolean 属性。规定在页面加载时，域自动地获得焦点 |
| multiple | 是一个 boolean 属性。规定 input 元素中可选择多个值 |
html5 新事件
| 事件 | 描述 |
|---|---|
| onresize | 当调整窗口大小时运行脚本 |
| ondrag | 当拖动元素时运行脚本 |
| onscroll | 当滚动元素滚动元素的滚动条时运行脚本 |
| onmousewheel | 当转动鼠标滚轮时运行脚本 |
| onerror | 当错误发生时运行脚本 |
| onplay | 当媒介数据将要开始播放时运行脚本 |
| onpause | 当媒介数据暂停时运行脚本 |
-
块级元素
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5 新增的 header、section、aside、footer 等 -
行内元素
pan、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button
②本地存储(localStorage)。
localStorage.setItem("name",arr);//保存数据
localStorage.getItem("name")//读取数据，也可以根据key值读取
localStorage.removeItem(key)//删除单个数据
localStorage.clear()//数据清空
③播放音频文件的标签。
<audio></audio>音频 <video></video>视频
④Canvas
使用Javascript来绘制图像，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<canvas id="myCanvas" width="200" height="100" style="1px solid #000000"></canvas>
⑤SVG绘图：一种使用XML描述2D图像的语言。
4、input和textarea的区别
<input type="text" value="你好" Maxlength="10">
<textarea cols="20" rows="30"></textarea>
5、用一个div模拟textarea的实现
<div id="textarea" contenteditable="true">
#textarea{
width:300px;
border:1px solid #ccc;
min-height:150px;
max-height:300px;
overflow:auto;
font-size:14px;
outline:none;
}
contenteditable属性，值为Boolean值，true绑定元素可编辑，false(默认)元素不可编辑。
6、移动设备忽略将页面中的数字识别为电话号码的方法
<meta name="format-detection" content="telephone=no">
这个关闭不会影响真正电话号码的识别。
补充：format-detection属性和含义
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：
<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">//以上三者组合
浙公网安备 33010602011771号