HTML骨架结构_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML骨架结构_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

文档结构

　　一个完整的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='brush:php;toolbar:false;'><base href="http://baidu.com" target="_blank"></pre> </p> <p>　　</p> <p>　　【3】link标签</p> <p>　　　　【a】引入图标</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><link rel="shortcut icon" href="ico.ico"/></pre> </p> <p>　　　　【b】引入外部CSS样式表 </p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><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='brush:php;toolbar:false;'><style>　　body{background-color: red;}</style></pre> </p> <p>　　　　【b】引入javascript </p> <p class="sycode"> <pre class='brush:php;toolbar:false;'>document.onclick = function(){　　alert('hello world;')}</pre> </p> <p> </p> <p>　　【5】meta标签</p> <p>　　　　【a】字符编码，文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><meta charset="utf-8"/></pre> </p> <p>　　　　【b】SEO常用到的关键词keywords和描述description</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><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='brush:php;toolbar:false;'><meta name="author" content="littlematch"><meta name="copyright" content=""></pre> </p> <p>　　　　【d】定时跳转(让网页多少秒刷新，或跳转到其他网页)</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><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='brush:php;toolbar:false;'><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='brush:php;toolbar:false;'><meta http-equiv="Pragma" Content="No-cach">(禁止缓存，访问者无法脱机浏览)</pre> </p> <p>　　　　【g】cookie</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><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='brush:php;toolbar:false;'><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 id="文档主体">文档主体</h2> <p>　　真正可以在页面上看到的内容</p> <p> 　　【常用标签】</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><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

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

See all articles