HTML的基本结构
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
- <!DOCTYPE html>：告诉浏览器需要一个doctype来触发标准模式。
- <html lang="zh-cn">：指定语言种类为中文，html是根元素。
- <head></head>：头部元素的容器，其中的内容绝大部分都不会直接显示给读者。
- <body></body>：内容载体，里面的标签元素直接显示给读者。
Head包含的内容
在Head中可以引用脚本，样式，标题，元信息等等，下面这些标签可以用在head部分：
-
<meta>：元信息，一个辅助性标签，提供搜索关键字、网页内容描述、文档字符集、使用语言、自动刷新和页面重定向、页面缓冲等等，它共有两个属性：
name、http-equiv，不同的属性又有不同的参数，而content为参数对应的值。-
name：主要用于网页描述，而它主要有以下几种参数：
-
Keywords：该网页的搜索关键字。
<meta name="keywords" content="关键字,关键字.."> -
description：网站内容描述，告诉搜索引擎你的网站主要内容。
<meta name="description" content="网页描述....150words"> -
robots：搜索引擎索引方式。
<!-- all:文件被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索； nofollow：页面上的链接不可以被查询。 --> <meta name="robots" content="index,follow"> -
viewport：优化移动浏览器的显示。
<!-- width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素） height：高度（数值 / device-height）（范围从223 到10,000） initial-scale：初始的缩放比例 （范围从>0 到10） minimum-scale：允许用户缩放到的最小比例 maximum-scale：允许用户缩放到的最大比例 user-scalable：用户是否可以手动缩 (no,yes) --> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> - author：标注网页作者。
- COPYRIGHT：标注网也版权信息。
- generator：标注网页制作软件。
- revisit-after：代表网站重访，7days表示7天，抓取过一次之后就要等7天再来。
-
Keywords：该网页的搜索关键字。
-
http-equiv：头文件作用，帮助显示网页内容，它主要有以下几种参数:
-
content-Type：设定页面使用的字符集。
<!-- UTF-8：世界通用的语言编码，bg2312：简体中文编码 --> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> -
Content-Script-Type：设定页面中脚本类型。
<Meta http-equiv="Content-Script-Type" content="text/javascript"> -
Expires：设置网页过期时间，一旦过期就会重载，必须使用GMT格式，或者直接设置为0。
<meta http-equiv="expires" content="Fri, 12 Jan 2018 18:18:18 GMT"> <!-- 0：加载之后就过期 --> <meta http-equiv="Expires" content="0"> -
Refresh：自动刷新和页面重定向。
<!-- 3秒之后自动刷新，如果填写了URL则重定向到这个URL，反之则不会重定向 --> <meta http-equiv="Refresh" content="3;URL=http://www.jianshu.com/u/03e9c9f9a30f"> -
Pragma：浏览器一般会缓存页面内容，当我们设置为
no-cache就不会进行缓存。<meta http-equiv="Pragma" content="no-cache"> -
Cache-Control：指定请求和响应遵循缓存机制。
<meta http-equiv="Cache-Control" content="no-cache"> <!-- 用百度打开网页可能会对其进行转码（比如贴广告）,添加这两种content可以避免转码 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta http-equiv="Cache-Control" content="no-transform" /> -
X-UA-Compatible：设定浏览器采取何种版本渲染当前页面。
<!-- 指定IE和Chrome使用最新版本渲染当前页面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> -
Set-Cookie：设置cookie，如果网页过期，那么网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="User=Ddpz; path=/; expires=Fri, 12 Jan 2018 18:18:18 GMT">
-
content-Type：设定页面使用的字符集。
-
name：主要用于网页描述，而它主要有以下几种参数：
-
<base>：作为所有链接规定默认地址与默认目标，必须位于head元素内部
<!-- _blank：新建目标，_self：自身目标 --> <base href="http://www.jianshu.com/u/03e9c9f9a30f" target="_blank, _self"> -
<link>：定义文档与外部资源的关系，最常见的用途是链接样式表以及图标，它有以下几种属性：
<!-- 链接外部css样式表 --> <link rel="stylesheet" media="all" href="//cdn2.jianshu.io/assets/web- 05add656961cebea70aa.css" /> <!-- 链接外部图标 --> <link rel="icon" href="//cdn2.jianshu.io/assets/apple-touch-icons/57- 47624b2e2161e8eb144462c85db0a5ff.png" sizes="57x57" />- href：指定需要加载的资源的地址URL。
- media：媒体类型，设定被链接文档将显示在什么设备上。
-
rel：定义当前文档与被链接文档之间的关系，
stylesheet代表css样式表，icon表示图标 -
sizes：设定被链接资源的尺寸，仅适用于
rel="icon"。 -
type：执行所链接文档的MIME类型，css的type一般使用
"text/css"。
-
<title></title>：页面标题。
<title>大大盆子 - 简书</title> -
<style></style>：定义HTML文档样式信息，可以统一定制body中所用到的标签样式，type属性是必须的，且唯一可能的值就是
"text/css"。<style type="text/css"> /*设置nav背景色，宽高，文字排版*/ nav{background: #E0FFFF;width: 100%;height: 40px;text-align: center} /*设置li标签横向排布*/ li{display: inline;} /*去除a标签下滑线*/ a{text-decoration: none;font-size: 20px} </style> -
<script></script>：定义客户端脚本，script元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件，常见于对图像的操作、表单的验证以及动态内容更新。
-
type：规定脚本的MIME类型，对于JavaScript，MIME类型就是
"text/javascript"，它是必须属性。<script type="text/javascript"> alert("hello world!") </script> -
src：链接外部脚本，其中的URL可以是绝对URL（指向其他站点），也可以是相对URL（指向站点内的文件）。
<script type="text/javascript" src="myscripts.js"></script> -
async：规定异步执行脚本，仅适用于外部脚本（src链接）。
<script type="text/javascript" src="demo_async.js" async="async"></script> -
defer：规定是否对脚本执行进行延迟，直到页面加载为止，比如优先加载文字，完成之后再去加载图片。
<script type="text/javascript" src="demo_defer.js" defer="defer"></script>
-
type：规定脚本的MIME类型，对于JavaScript，MIME类型就是
Body包含的内容
body标签中的内容直接展示给读者，标签相对较多，我对它进行了以下归类：
-
布局标签&语义化：
-
<div>：定义块级元素，是一个通用的容器元素，可以把文档分割为独立、不同的的部分，会另起一行，通常使用
class或id给同一类的div统一添加额外的样式与适当的语义，同时也可以设置title:当鼠标放上去的时候显示这个title、dir:设定元素标签内容文字方向。 -
<span>：定义行内元素，在行内定义一个区域，也就是一行可以被span划分成好几个区域，不会另起一行，也可以使用
class或id添加样式和语义，当应用样式时，它才会产生视觉上的变化。 -
<header>：定义页面的头部区域，一个语义化标签，让文档结构层次更清晰，相当于
<div class="header"></div>。 -
<footer>：定义页面的尾部区域，也是一个语义化标签，相当于
<div class="footer"></div>。 - < section >：定义文章中的大纲或章节，通常带有标题与段落内容，不是通用容器元素，相比于div更具语义化，它强调内容上的独立性，div强调形式上的独立性，如果仅仅是用于设置样式或脚本处理则使用div。
- < article >：定义文章，语义化更强，表示是一篇文章，里面可以嵌套其他元素，它可以有自己的头、尾、主体、等内容。
- < aside >：定义页面内容之外的内容，通常用来设置侧边栏，同时也可以嵌套在article元素内部使用，作为主要内容的附属信息，比如参考资料，名词解析等。
- < nav >：定义导航栏、超链接。
- < hgroup >：标题分组，通常放在header里面。
-
<div>：定义块级元素，是一个通用的容器元素，可以把文档分割为独立、不同的的部分，会另起一行，通常使用
-
表格标签
- <table>:定义表格，主要有一下几个属性:
- border
- <caption>:定义表格标题。
- <thead>:定义表格头部。
- <tbody>:定义表格主体。
- <tfoot>:定义表格尾部。
- <caption>:定义表格标题。
-
列表标签
未完待续......
网友评论