目录
[1]文档结构 [2]文档声明 [3]文档头部 [4]文档主体
文档结构
一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体。
【最简单的文档结构】
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
【复杂的文档结构】
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>Document</title> <meta name="keywords" content=""/> <meta name="description" content=""/> <meta name="viewport" content="width=device-width"/> <link rel="stylesheet" href="5/style.css"/> <link rel="shortcut icon" href="ico.ico"/></head><body></body></html>
文档声明
告诉浏览器以哪个标准来解析HTML文档
[注意]必须首行、顶格，对大小写不敏感
【HTML版本】
版本 年份
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1996 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2014 |
【常用声明】
【1】HTML5
<!DOCTYPE html>
【2】在HTML5之前，文档声明一般有三种类型：严格型strict、过渡型transitional、框架frameset
【a】HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
【b】XHTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
【c】XHTML1.1 等同于XHTML1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
文档头部
描述了文档的一些基本的属性和信息（可以呈现的是title和icon）
【1】文档标题
<p> 【作用】<br> 【a】定义浏览器工具栏中的标题<br> 【b】提供页面被添加到收藏夹时显示的标题<br> 【c】显示在搜索引擎结果中的页面标题</p> <p> [注意]在所有HTML文档中，</p>
<title>都是必须的 <p> </p> <p> 【2】base标签</p> <p> 为页面上所有链接规定默认地址和默认打开方式</p> <p class="sycode"> <pre class="precsshui"><base href="http://baidu.com" target="_blank"></pre> </p> <p> </p> <p> 【3】link标签</p> <p> 【a】引入图标</p> <p class="sycode"> <pre class="precsshui"><link rel="shortcut icon" href="ico.ico"/></pre> </p> <p> 【b】引入外部CSS样式表 </p> <p class="sycode"> <pre class="precsshui"><link rel="stylesheet" type="text/css" href="mystyle.css" /></pre> </p> <p> </p> <p> 【4】style标签和script标签</p> <p> 【a】引入内部CSS样式</p> <p class="sycode"> <pre class="precsshui"><style> body{background-color: red;}</style></pre> </p> <p> 【b】引入javascript </p> <p class="sycode"> <pre class="precsshui">document.onclick = function(){ alert('hello world;')}</pre> </p> <p> </p> <p> 【5】meta标签</p> <p> 【a】字符编码，文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码</p> <p class="sycode"> <pre class="precsshui"><meta charset="utf-8"/></pre> </p> <p> 【b】SEO常用到的关键词keywords和描述description</p> <p class="sycode"> <pre class="precsshui"><meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" /><meta name="keywords" content="HTML, CSS, XML" /></pre> </p> <p> 【c】作者、版权</p> <p class="sycode"> <pre class="precsshui"><meta name="author" content="littlematch"><meta name="copyright" content=""></pre> </p> <p> 【d】定时跳转(让网页多少秒刷新，或跳转到其他网页)</p> <p class="sycode"> <pre class="precsshui"><meta http-equiv="refresh" content="5"><meta http-equiv="refresh" content="5;url=http://www.baidu.com"></pre> </p> <p> 【e】期限(指定网页在缓存中的过期时间)</p> <p class="sycode"> <pre class="precsshui"><meta http-equiv="Expires" Content="0"><meta http-equiv="Expires" Content="Sat Nov 28 2015 21:19:15 GMT+0800"> </pre> </p> <p> 【f】缓存</p> <p class="sycode"> <pre class="precsshui"><meta http-equiv="Pragma" Content="No-cach">(禁止缓存，访问者无法脱机浏览)</pre> </p> <p> 【g】cookie</p> <p class="sycode"> <pre class="precsshui"><meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT+0800; path=/"></pre> </p> <p> 【h】viewport:视口，移动端常用</p> <p class="sycode"> <pre class="precsshui"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /></pre> </p> <p> </p> <h2>文档主体</h2> <p> 真正可以在页面上看到的内容</p> <p> 【常用标签】</p> <p class="sycode"> <pre class="precsshui"><h1><h2><h3><h4><h5><h6><p><a><img alt="HTML骨架结构_html/css_WEB-ITnose" ><strong><em><br><hr><ul><ol><li><dl><dt><dd><section><header><footer><nav><article><aside><time><table><thead><tbody><caption><tr><th><td><form><input><textarea><button><select><option><label></pre> </p> <p> [注意]在HTML5标准下，哪些标签可以使用，哪些标签不可以使用，请移步HTML元素和有效的DTD</p> <p> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p>
<p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p>
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
