html常用标签和属性
内容参考自ANKG 的文章HTML meta 标签
目录
一、html文件结构
1、文档类型声明
<-- html5的声明方式 -->
<!DOCTYPE html>
<-- html4的声明方式 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">
2、html
html标签表示页面的根节点，可以使用 lang 属性指定语言，在网站国际化时可能会用到。
<html lang="en">
</html>
3、head
head标签代表页面的头部，里面可以加入很多子表签来修改页面的显示效果和优化被搜索引擎的搜索的速度。
3.1 meta标签
meta 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等。
| 属性 | 值 | 描述 |
|---|---|---|
| charset( H5 New) | character_set | 定义文档的字符编码。 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-type default-style refresh | 把 content 属性关联到 HTTP 头部。 |
| name | application-name author description generator keywords | 把 content 属性关联到一个名称。 |
| scheme(H5 删除) | format/URI | HTML5不支持。 定义用于翻译 content 属性值的格式 |
整体来看，HTML5之前，meta标签只有两个主要属性，分别是 name 属性和 http-equiv 属性。 HTML5新添加"charset"。
3.1.1 name属性
3.1.1.1 keywords（关键字）
为搜索引擎提供的关键字列表，可以增大被搜索到的机会。
<meta name="keywords" content="程序员,程序猿,攻城狮"/>
3.1.1.2 description（网站简介）
description用来告诉搜索引擎你的网站主要内容。
<meta name="description" content="meta标签是HTML中的一个重要标签，它位于HTML文档头部的<HEAD>标签和<TITL>标签之间。"/>
3.1.1.3 robots（机器人向导）
robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<meta name="robots" content="all"/>
| 参数 | 含义 |
|---|---|
| all | 文件将被检索，且页面上的链接可以被查询 |
| none | 文件将不被检索，且页面上的链接不可以被查询 |
| index | 文件将被检索 |
| follow | 页面上的链接可以被查询 |
| noindex | 文件将不被检索，但页面上的链接可以被查询 |
| nofollow | 文件将被检索，但页面上的链接不可以被查询 |
3.1.1.4 author（作者）
标注网页的作者。
<meta name="author" content="TG,TG@qq.com"/>
3.1.1.5 copyright（版权）
声明版权归属。
<meta name="copyright" content="本网站版权归TG所有"/>
3.1.1.6 generator（编辑器）
说明网站采用什么编辑器制作。
<meta name="generator" content="你所用的编辑器"/>
3.1.1.7 revisit-after（重访）
网站重访时间间隔，即搜索引擎每隔多少天访问一次你的页面。
搜索引擎抓有一个默认的重访时间间隔，如果这个默认间隔时间大于七天，那么实际重访间隔时间为默认的时间间隔，如果默认的小于等于七天，revisit-after设置的重访时间才有效。
<meta name="revisit-after" content="7days"/>
3.1.2 name(html5新增)
3.1.2.1 viewport（视口）
能优化移动浏览器的显示（屏幕的缩放），有助于移动适配。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
参数对照：
| 参数 | 参数值 |
|---|---|
| width | 屏幕的宽度，取值device-width或 pixel_value device-width: 宽度为设备的宽度 pixel_value：大部分的安卓手机不支持，但是ios支持； |
| height | viewport 的高度，数值：233~10000 |
| user-scalable | 是否允许用户缩放， 取值yes/no |
| initial-scale | 初始化比例，数值 0~10 |
| minimum-scale | 允许缩放的最小比例，数值 0~10 |
| maximum-scale | 允许缩放的最大比例，数值 0~10 |
3.1.2.2 format-detection（忽略电话号码和邮箱）
忽略电话号码和邮箱。
//忽略页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no">
//忽略页面中的邮箱格式识别为邮箱
<meta name="format-detection" content="email=no"/>
也可以写成
<meta name="format-detection" content="telphone=no, email=no"/>
3.1.2.3 renderer（指定默认的浏览器内核）
指定默认的浏览器内核。国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。（仅限360浏览器）
<-- 若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
-->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
各渲染内核的技术细节
| 内核 | 内核版本 | HTML5支持 | ActiveX控件支持 |
|---|---|---|---|
| Webkit | Chrome 45 | YES | NO |
| IE兼容 | IE6/7 | NO | YES |
| IE标准 | IE9/IE10/IE11(取决于用户的IE) | YES | YES |
3.1.2.4 WebApp全屏模式
<!-- 启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
3.1.2.5 隐藏状态栏/设置状态栏颜色
只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
3.1.2.5 不同浏览器的适配设置（横竖屏、全屏、点击高光等）
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png"/>
3.1.3 http-equiv 属性
http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<meta http-equiv="参数" content="参数值"/>
3.1.3.1 expires（缓存中的过期时间）
指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新传输。
注意：必须使用GMT的时间格式，或者直接设为0（数字表示多久后过期）
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
3.1.3.2 pragma（cache模式）
禁止浏览器从本地计算机的缓存中访问页面内容。
注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
3.1.3.3 refresh（刷新指向新页面）
自动刷新并指向新页面。
<meta http-equiv="refresh"content="5; url=http://www.baidu.com/"/>
3.1.3.4 set-Cookie（cookie设定）
浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。
如果网页过期，那么存盘的cookie将被删除。
注意：必须使用GMT的时间格式
<meta http-equiv="Set-Cookie"
content="cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">
3.1.3.5 Window-target（显示窗口的设定）
强制页面在当前窗口以独立页面显示，可以用来防止别人在框架里调用你的页面。
<meta http-equiv="Window-target" content="_top"/>
3.1.3.6 content-Type（显示字符集的设定）
设定页面使用的字符集，在HTML5中，我们一般都是utf-8
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
常用字符集:
| charset（字符集） | 字符集支持的语言 |
|---|---|
| GB2312 | 简体中文 |
| BIG5 | 繁体中文 |
| iso-2022-jp | 日文 |
| ks_c_5601 | 韩文 |
| ISO-8859-1 | 英文 |
| UTF-8 | 世界通用的语言编码 |
3.1.3.7 content-Language（显示语言的设定）
显示的语言，可以在html标签加lang=“en”代替
<meta http-equiv="Content-Language" content="zh-cn"/>
3.1.3.8 imagetoolbar(是否显示图片工具栏)
指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
<meta http-equiv="imagetoolbar" content="false"/>
3.1.3.9 优先使用 IE 最新版本和 Chrome（html新增）
<!-- 关于X-UA-Compatible -->
<!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=6" >
<!-- 用于在IE8版本浏览器中使用IE7渲染来避免出错 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<!-- 使用IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" >
3.1.3.10 转码申明
用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
3.1.4 charset （声明网页的编码格式）
声明网页的编码格式，防止浏览器使用错误的字符集解码造成乱码。
字符集对照表
3.1.5 property （社交声明）
用来设置网页被分享时的标题、图片、链接、描述等。
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
3.2 link标签
link标签用于与外部资源建立连接，外部资源可以是css样式表、图片。
语法:
<!-- 在html5中，type可以省略 -->
<link rel="资源的类型" type="文件格式" href="资源的链接">
3.2.1 stylesheet （css样式表）
<link rel="stylesheet" href="style.css">
3.2.2 shortcut icon(添加标题前面和收藏夹的小图标)
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
3.2.3 alternate（添加 RSS 订阅）
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
3.3 title标签
指定网页的标题。
<title>网页标题网页标题</title>
3.4 style标签
里面书写css样式。
<style>
div{
margin-left: 30px;
width: 500px;
height: 400px;
background-color: pink;
}
</style>
4、body标签
body标签是网页结构性标签，代表网页的内容，一般来说，除了标题外的所有内容都应该写在body里面。虽然写在head标签里面也能够显示，但是不建议这么做。
5506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
