您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

Html 常见题汇总分享

时间：12-14来源：作者：点击数：

1 html 语义化

意义：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。注意：

尽可能少的使用无语义的标签 div 和 span
在语义不明显时，既可以使用 div 或者 p 时，尽量用 p，因为 p 在默认情况下有上下间距，对兼容特殊终端有利
不要使用纯样式标签，如：b、font、u 等，改用 css 设置
需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用 CSS 指定就不用他们），strong 默认样式是加粗（不要用 b），em 是斜体（不用 i）
使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 td
表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途
每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置 id 属性，在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来

2 meta viewport 相关

<!DOCTYPE html>  H5 标准声明，使用 HTML5 doctype，不区分大小写
<head lang="en"> 标准的 lang 属性写法
<meta charset=’utf-8′>    声明文档使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome
<meta name="description" content="不超过150个字符"/> 页面描述
<meta name="keywords" content=""/> 页面关键词
<meta name="author" content="name, email@gmail.com"/> 网页作者
<meta name="robots" content="index,follow"/> 搜索引擎抓取
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 为移动设备添加 viewport
<meta name="apple-mobile-web-app-title" content="标题"> iOS 设备 begin
<meta name="apple-mobile-web-app-capable" content="yes"/> 添加到主屏后的标题（iOS 6 新增）

是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telphone=no, email=no"/> 设置苹果工具栏颜色
<meta name="renderer" content="webkit">  启用360浏览器的极速模式(webkit)
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 避免IE使用兼容模式
<meta http-equiv="Cache-Control" content="no-siteapp" /> 不让百度转码
<meta name="HandheldFriendly" content="true"> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name="MobileOptimized" content="320″> 微软的老式浏览器
<meta name="screen-orientation" content="portrait"> uc 强制竖屏
<meta name="x5-orientation" content="portrait"> QQ 强制竖屏
<meta name="full-screen" content="yes"> UC 强制全屏
<meta name="x5-fullscreen" content="true"> QQ 强制全屏
<meta name="browsermode" content="application"> UC 应用模式
<meta name="x5-page-mode" content="app"> QQ 应用模式
<meta name="msapplication-tap-highlight" content="no"> windows phone 点击无高光

设置页面不缓存

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0″>

3 canvas 相关

使用前需要获得上下文环境，暂不支持 3d
常用 api:
1.fillRect(x,y,width,height) 实心矩形
2.strokeRect(x,y,width,height) 空心矩形
3.fillText("Hello world",200,200) 实心文字
4.strokeText("Hello world",200,300) 空心文字

新标签兼容低版本

ie9 之前版本通过 createElement 创建 html5 新标签
引入 html5shiv.js

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:CSS 常见题汇总分享下一篇:HTML 文本类标签

考了这些证书的可享个	怎样用 PS 把电子文档
记录在本地电脑部署自	围棋入门教程十天即