Rumah >hujung hadapan web >html tutorial >HTML骨架结构_html/css_WEB-ITnose

HTML骨架结构_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:32:45944semak imbas

目录

[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>
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn