HTML5之基础、元信息标签

Wesley13
• 阅读 594

标签

       <!DOCTYPE> 声明位于文档中最前面的位置,处于标签之前。<!DOCTYPE> 声明不是一个HTML标签,它是告知Web浏览器该页面使用了哪种HTML版本(规范),浏览器用此版本(规范)对该文档进行解析,渲染。        <!DOCTYPE> 可声明的 DTD 有三种:分别是严格版本(strict)过渡版本(transitional)、以及基于框架的版本(frameset),若文档不遵循其DTD规范,则此文档中的代码不但不能通过代码校验,并且有可能无法正常显示。

<!DOCTYPE html>
<html>
    <head>
        <!--HTML5示例-->
        <meta charset="utf-8"> 
        <title>文档标题</title>
    </head> 
    <body>
        文档内容......
    </body>
</html>

标签的使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在以上声明中,此文档的根元素被声明为HTML,他在公共标识符被定义为 "-//W3C//DTD HTML 4.01//EN" 的DTD中进行了定义,浏览器会明白如何寻找与该公共标识符匹配的DTD,如果找不到,浏览器将会使用公共标识符后面的 URL 来寻找DTD的位置。

  • -/+:"-"表示组织名称未注册,Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织,"+"表示组织名称已注册;
  • DTD:指公开文本类,即所用的对象类型。默认为DTD;
  • HTML:公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML;
  • URL: 指定所引用对象的位置。

 

HTML的文档类型

HTML4.01 的文档类型

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset

严格版本(strict) 的DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

过渡版本(transitional) 的DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(eg:font ),框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

基于框架的版本(frameset) 的DTD 与 HTML 4.01 Transitional 相同,但是允许使用框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5 的文档类型

HTML4.01 中的DOCTYPE需要对 DTD 进行引用,因为 HTML4.01 基于 SGML。而 HTML5 不基于SGML,因此不需要对 DTD 进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。

<!DOCTYPE html>

XHTML1.0 的文档类型

XHTML 1.0 规定了三种文档类型:Strict、Transitional 以及 Frameset

严格版本(strict) 的DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

过渡版本(transitional) 的DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

基于框架的版本(frameset) 的DTD 与 XHTML 1.0 Transitional 相同,但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 的文档类型

该DTD 与 XHTML 1.0 Strict 相同,但是允许您添加模块(例如为东亚语言提供 ruby 支持)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

三种类型文档的区别

       严格版本:               它将文档结构与表现形式实现了更高的分离,所以,页面的外观要用CSS来控制。

       过渡版本:               它包含了HTML4.01版本的全部标记,方便网页开发者顺利地从HTML的使用过渡到XHTML

       基于框架的版本:               它使用<**frameset**>以框架的形式将网页分为多个文档。W3C是推荐使用XHTML的,而且使用XHTML的话可以更顺利地通过W3C对网页页面的验证  

注意

       1. 页面引用哪种规范就要用那种规范允许或推荐使用的标签。

       2. 如果没有指定有效的DOCTYPE声明,大多数浏览器都会使用一个内建的默认dtd。在这种情况下, 浏览器会用内建的dtd来试着显示你所指定的标记,这将违背HTML规范的意义,不建议使用这种方式。        3. 当doctype申明缺失或者格式不正确时,文档会以兼容模式呈现。            标准模式:排版以及js运行模式都是以浏览器支持的最高标准运行;            兼容模式:页面以宽松的向后兼容(向老版本兼容)方式显示,模拟老浏览器的行为防止(老)站点无法正常工作。

其他

        是 HTML5 中唯一的 DOCTYPE,也被视作将网页 "升级" 到HTML5的第一步。很多国外网站的 <**!DOCTYPE html**>和<**HEAD**>之间都会有一段注释,如:

<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—>
<!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—>
<!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—>
<!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—>
<!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>

       该代码作用于CSS,来写一些针对IE各版本的样式差异。先判断用户用的哪个IE版本,然后在标签上加上该版本的 class,这样可以方便 hack。这是目前最好的 hack 方式之一。 css 文件是这样写的:

.ie6 xxx {};
.ie7 xxx {};
标签 ========

常用属性:          [manifest]:定义一个URL,该URL上记录了此文档的缓存信息 作用:          该标签用来告知浏览器这是一个HTML文档,浏览器在读取该标签后将会以HTML的规则对此文档进行解析 说明:          在一个HTML文档中一般会在该标签中添加 [lang] ,用来指定该文档语言类型,常见的语言代码 中文:zh    中文简体:zh-CN    中文繁体:zh-TW    中国香港:zh-HK    中国澳门:zh-MO    英语:en    法语:fr    德语:de    俄语:ru  考虑浏览器和操作系统的兼容性,目前仍然使用zh-CN 全局属性: 支持 事件属性: 不支持

<!DOCTYPE html>
<html lang="zh-CN"></html>
标签 ========

作用:          元素是所有头部元素的容器。 说明:          该标签内添加了多种内容,这些内容不会展示到页面中去,而对于文档来说却至关重要。它必须包含文档的标题<strong>,可以包含</strong>脚本(script)<strong>、</strong>样式(style,link)<strong>、 <strong>meta(元信息)</strong> 以及其他更多的信息。 <strong>全局属性:</strong> 支持 <strong>事件属性:</strong> 不支持 <strong>注意:</strong>          <strong>一个</strong>HTML文档只有</strong>一个</strong>head标签</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head></head> </html> </code></pre> <meta>标签 ======== <p><strong>常用属性:</strong>         <strong>[name]:</strong> 定义网页关键字、作者、描述等信息,有利于搜索引擎分类和查找         <strong>[content]:</strong> 与name或者http-equiv对应,此标签内含有name所声明类型的具体内容         <strong>[charset]:</strong> 定义该文档编码所用的字符集,告知浏览器以何种字符集来解析此文档         <strong>[http-equiv]:</strong> 把content属性关联到HTTP头部 <strong>作用:</strong>         该标签提供了HTML文档的<strong>元数据</strong>,这些内容同样不会展示到页面中去,对于文档来说同样至关 重要 <strong>全局属性:</strong> 不支持 <strong>事件属性:</strong> 不支持 <strong>详见:</strong> <a href="https://www.helloworld.net/redirect?target=https://www.oschina.net/action/GoToLink?url=https://www.cnblogs.com/zhuochong/p/11642930.html" rel="nofollow noopener noreferrer" target="_blank"><strong><meta>标签详解</strong></a></p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <!--定义当前文档的编码方式,告诉浏览器如何解析当前页面--> <meta charset="UTF-8"/> <!--设置页面的作者--> <meta name="author" content="xbyang"/> <!--设置让搜索引擎获取网页的关键字--> <meta name="keywords" content="study, webpage, first, hello world"/> <!--设置让搜索引擎获取网页的内容描述--> <meta name="description" content="this is a template webpage!"/> <!--设置让搜索引擎了解哪些页面需要索引,哪些页面不需要索引, all代表文件将被检索页面上的链接可以被查询--> <meta name="robots" content="all"/> <!--设置网站采用制作软件--> <meta name="generator" content="WebStorm 2019.2"/> <!--设置网站的版权信息--> <meta name="COPYRIGHT" content="xbyang"/> <!--控制浏览器窗口的大小和缩放的,由于它在现代浏览器,特别是 Mobile 端浏览器非常常用--> <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"> <!--设置网页的过期时间--> <meta http-equiv="expires" content="Fri May 13 2019 21:39:42 GMT+0800 (CST)" /> <!--设置页面使用的字符集--> <meta http-equiv="content-Type" content="text/html;charset=gb2312" /> <!--强制页面在当前窗口以独立页面显示--> <meta http-equiv="Window-target" content="top" /> <!--设置禁止浏览器从本地缓存中访问页面--> <meta http-equiv="Pragma" content="no-cache" /> <!--文档兼容模式的定义,从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--以下代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面--> <meta http-equiv="X-UA-Compatible" content="IE=7"> <!--以下代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面--> <meta http-equiv="X-UA-Compatible" content="IE=8"> <!--代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <meta http-equiv="X-UA-Compatible" content="IE=7,9"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!--DNS预解析是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度。DNS Prefetch应该尽量的放在网页的前面,推荐放在<meta charset=”/>后面。可以减少DNS的请求次数,进行DNS预先获取--> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://my.oschina.net//img.alicdn.com"> <title>HTML学习</title> </head> </html> </code></pre> <base>标签 ======== <p><strong>常用属性:</strong>          <strong>[href]:</strong> 该属性指定了页面上所有链接的默认URL,换句话说,文档所有url在调用资源时都会先去找他要地址,不论本身是否定义了url,可理解为url拼接          <strong>[target]:</strong> 该属性指定了页面上所有打开新页面的方式 <strong>作用:</strong> 为页面上的所有的<strong>相对链接</strong>规定<strong>默认URL</strong>或<strong>默认目标</strong> <strong>说明:</strong> 如果使用了该标签,则<strong>必须具备href属性</strong>或者<strong>target属性</strong>或者<strong>两个属性都具备</strong>,另外target会被行内的target属性覆盖掉 <strong>全局属性:</strong> 支持 <strong>事件属性:</strong> 不支持</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>HTML学习</title> <base href="http://localhost/8080/demo/" target="_blank"/> </head> </html> </code></pre> <title>标签 ========= <p><strong>作用:</strong>         1.定义浏览器工具栏中的标题         2.提供页面被添加到收藏夹时的标题         3.显示在搜索引擎结果中的页面标题 <strong>全局属性:</strong> 支持 <strong>事件属性:</strong> 不支持 <strong>注意:</strong>          1.一个HTML文档中<strong>不能</strong>有<strong>一个以上</strong>的title标签          2.如果遗漏了title标签,文档作为 HTML 是<strong>无效</strong>的</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>HTML学习</title> </head> </html> </code></pre> <body>标签 ======== <p><strong>作用:</strong>          标签定义文档的<strong>主体</strong> <strong>说明:</strong>          该标签包含文档<strong>对外可见</strong>的所有内容(比如文本、超链接、图像、表格和列表等等) <strong>全局属性:</strong> 支持 <strong>事件属性:</strong> 支持 <strong>注意:</strong>          1.在一个HTML文档中,只允许<strong>存在一个</strong>,虽然文档有时在该标签<strong>不唯一</strong>的情况下也能正常显示(那是因为现代浏览器容错机制较好),但放在<strong>老版本浏览器</strong>上则会崩溃</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML学习</title> </head> <body> </body> </html> </code></pre> <h1>-<h6>标签 =========== <p><strong>类别:</strong>          容器级标签 <strong>作用:</strong>          被用来定义整篇文档以及<strong>article、section</strong>等标签中的标题 <strong>说明:</strong>          h1定义<strong>重要等级最高</strong>的标题。h6定义<strong>重要等级最低</strong>的标题 <strong>全局属性:</strong> 支持 <strong>事件属性:</strong> 支持</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML学习</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h4> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> </body> </html> </code></pre> <p>标签 ===== <p><strong>类别:</strong>          容器级标签 <strong>作用:</strong>          被用来定义一个段落 <strong>说明:</strong>          元素会自动<strong>在该段落上下创建一些空白</strong>。浏览器会自动添加这些空间,也可以在 <strong>样式表(CSS)</strong> 中进行控制 <strong>全局属性:</strong> 支持 <strong>事件属性:</strong> 支持</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML学习</title> </head> <body> <p>In a sense we've come to our nation's capital to cash a check. When the architects of ourrepublic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."</p> </body> </html> </code></pre> <h1 id="标签-1"><br>标签</h1> <p><strong>作用:</strong>          被用来插入一个简单的<strong>换行符</strong> <strong>说明:</strong>          应该使用br标签来<strong>输入空行</strong>,而不是<strong>分割段落</strong> <strong>全局属性:</strong> 支持 <strong>事件属性:</strong> 支持</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML学习</title> </head> <body> <p>In a sense we've come to our nation's capital to cash a check. When the architects of ourrepublic wrote the magnificent words of the Constitution and the Declaration<br/>of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men,<br/>would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her<br/>citizens of color are concerned. Instead of honoring this sacred obligation, America has given<br/>the Negro people a bad check, a check which has come back marked "insufficient funds."</p> </body> </html> </code></pre> <hr>标签 ====== <p><strong>作用:</strong>          该标签显示为一条<strong>水平线</strong>,用来定义HTML页面中的<strong>主题变化</strong>(比如话题的转移) <strong>说明:</strong>          标签仅仅显示为<strong>一条水平线</strong>,可以用<strong>CSS</strong>控制它 <strong>全局属性:</strong> 支持 <strong>事件属性:</strong> 支持</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML学习</title> </head> <body> 你<hr/> 好<hr/> 啊<hr/> </body> </html> </code></pre> <!-- -->标签 <p>==========</p> <p><strong>作用:</strong>          用来在源文档中插入<strong>注释</strong>。注释<strong>不会</strong>在<strong>浏览器</strong>中<strong>显示</strong> <strong>说明:</strong>          对代码进行解释,这样做<strong>有助于</strong>您在以后的时间<strong>对代码的编辑</strong>。特别是代码量很大的情况下很有用。也可以在注释内容存储针对程序所定制的信息。在这种情况下,这些信息对用户是不可见的,但是对程序来说是可用的 <strong>全局属性:</strong> 不支持 <strong>事件属性:</strong> 不支持</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML基础标签学习</title> </head> <body> <h6 style="border: 1px solid;">这里是标题</h6> <!-- 这里是注释 --> </body> </html> </code></pre> </div> </article> <div class="tags-box" data-v-1bdff09d><a href="/tag/html%E4%BB%A3%E7%A0%81.html" target="_blank" class="item" data-v-1bdff09d>html代码</a><a href="/tag/html5.html" target="_blank" class="item" data-v-1bdff09d>html5</a><a href="/tag/%E5%89%8D%E7%AB%AF.html" target="_blank" class="item" data-v-1bdff09d>前端</a><a href="/tag/%E5%89%8D%E7%AB%AF.html" target="_blank" class="item" data-v-1bdff09d>前端</a></div> <div class="blog-btns-box" data-v-7d5edd21><div class="btn-item" data-v-7d5edd21><div class="circle zan" data-v-7d5edd21><IconFont type="icon-Dianzan" class="iconfont" data-v-7d5edd21></IconFont></div> <div class="text" data-v-7d5edd21>点赞</div></div> <div class="btn-item" data-v-7d5edd21><div class="circle favorite" data-v-7d5edd21><IconFont type="icon-Like1" class="iconfont" data-v-7d5edd21></IconFont></div> <div class="text" data-v-7d5edd21>收藏</div></div></div></div> <div id="recommend-lesson"><div class="recommend-lesson-title">推荐课程</div> <div class="horizontal" data-v-ba84c88a><a target="_blank" href="/lesson/detail/4580339128" class="re-course-list" data-v-ba84c88a><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/08af0088ed56c89be6016ce919dd4522.png" alt="avatar" data-v-ba84c88a> <div class="re-info" data-v-ba84c88a><h2 data-v-ba84c88a> Android进阶之旅-(NDK实战篇之数据结构算法进阶)</h2> <div class="des" data-v-ba84c88a><div class="price" data-v-ba84c88a>免费</div> <span data-v-ba84c88a>44人学习</span></div></div></a><a target="_blank" href="/lesson/detail/0876290229" class="re-course-list" data-v-ba84c88a><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/f07b74871fb5111cb052e25356727aa9.png" alt="avatar" data-v-ba84c88a> <div class="re-info" data-v-ba84c88a><h2 data-v-ba84c88a>Android进阶之旅-(NDK实战篇之OpenCV)</h2> <div class="des" data-v-ba84c88a><div class="price" data-v-ba84c88a>免费</div> <span data-v-ba84c88a>45人学习</span></div></div></a></div></div> <div id="anchor" class="comment-container"><div id="comment-panel" class="comment-panel" data-v-25426b80><div class="panel-title" data-v-25426b80>评论区</div> <div class="comment-input-box" data-v-25426b80><img src="/_nuxt/img/default-avatar.38df358.png" alt class="user-avatar" data-v-25426b80> <!----></div> <!----></div></div> <div class="recommend-blog-list"><div class="recommend-title">推荐文章</div> <div class="art-list" data-v-6293c55f><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/cd34cdaab69ede1e2bf28de235151c34.webp" alt="blmius" class="img" data-v-6293c55f> <a href="/blmius" target="_blank" class="name" data-v-6293c55f> blmius </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/2802547579" target="_blank" title="MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1" class="title single-ellipsis" data-v-6293c55f> MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s </div></div> <img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/ed6c6174f1775f65a3fbe98488391419.png" class="item-right" data-v-6293c55f></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>4247</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/4f77da7232573922a580077ad6e6e085.jpg" alt="待兔" class="img" data-v-6293c55f> <a href="/waitrabbit" target="_blank" class="name" data-v-6293c55f> 待兔 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 5个月前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/1863625810" target="_blank" title="手写Java HashMap源码" class="title single-ellipsis" data-v-6293c55f> 手写Java HashMap源码 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22 </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>1137</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/d4566ad9edfb956dba92fc21f5e1561f.webp" alt="Jacquelyn38" class="img" data-v-6293c55f> <a href="/Jacquelyn38" target="_blank" class="name" data-v-6293c55f> Jacquelyn38 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/3468005401" target="_blank" title="2020年前端实用代码段,为你的工作保驾护航" class="title single-ellipsis" data-v-6293c55f> 2020年前端实用代码段,为你的工作保驾护航 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number ) </div></div> <img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/e7130dfd1edf85ccee4a9e73aa0b77dd.jpeg" class="item-right" data-v-6293c55f></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>2446</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/1bad3e5246214111b0d7a482fc5beec5.jfif" alt="Stella981" class="img" data-v-6293c55f> <a href="/Stella981" target="_blank" class="name" data-v-6293c55f> Stella981 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/6635242566" target="_blank" title="PhoneGap设置Icon " class="title single-ellipsis" data-v-6293c55f> PhoneGap设置Icon </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 参考:http://cordova.apache.org/docs/en/latest/config\_ref/images.html通过config.xml中的<icon标签来设置Icon<iconsrc"res/ios/icon.png"platform"ios"width"57"height"57"densi </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>1011</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/1bad3e5246214111b0d7a482fc5beec5.jfif" alt="Stella981" class="img" data-v-6293c55f> <a href="/Stella981" target="_blank" class="name" data-v-6293c55f> Stella981 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/9449721599" target="_blank" title="HTML5新标签与javaScript新方法 " class="title single-ellipsis" data-v-6293c55f> HTML5新标签与javaScript新方法 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> HTML5(0106)1、文档声明<!DOCTYPEhtml2、字符编码设置<metacharset"UTF8"3、验证(http://validator.w3.org/)HTML5新增的语义化标签 </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>711</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/1bad3e5246214111b0d7a482fc5beec5.jfif" alt="Stella981" class="img" data-v-6293c55f> <a href="/Stella981" target="_blank" class="name" data-v-6293c55f> Stella981 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/1693963766" target="_blank" title="KVM调整cpu和内存 " class="title single-ellipsis" data-v-6293c55f> KVM调整cpu和内存 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>1377</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="img" data-v-6293c55f> <a href="/Wesley13" target="_blank" class="name" data-v-6293c55f> Wesley13 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/1550212549" target="_blank" title="HTML5优秀的设计 " class="title single-ellipsis" data-v-6293c55f> HTML5优秀的设计 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 今天有幸发现了一篇外国大神写的文章,详细的介绍了HTML的发展过程,以及HTML5的来源,其中也给我纠正了一个问题\关于DOCTYPYE的真正含义,先把书名发出来,再好好说说这个DOCTYPE的问题,书名《HTML5的设计》。相信很多人都已经知道了<!DOCTYPE html这是HTML5中对于文档类型的规范,DOCTYPE并不是写给浏览器看的( </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>812</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="img" data-v-6293c55f> <a href="/Wesley13" target="_blank" class="name" data-v-6293c55f> Wesley13 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/2102334911" target="_blank" title="MySQL部分从库上面因为大量的临时表tmp_table造成慢查询 " class="title single-ellipsis" data-v-6293c55f> MySQL部分从库上面因为大量的临时表tmp_table造成慢查询 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_ </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>1586</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="img" data-v-6293c55f> <a href="/Wesley13" target="_blank" class="name" data-v-6293c55f> Wesley13 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/2672879011" target="_blank" title="HTML学习笔记1.3" class="title single-ellipsis" data-v-6293c55f> HTML学习笔记1.3 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 定义HTML的文档类型Web世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。HTML也有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确地显示出HTML页面。这就是<!DOCTYPE的用处。<!DOCTYPE声明不是HTML标签,它是指示web浏览器关于页面 </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>477</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/ff45645a048833b06e967323e7411c91.webp" alt="Python进阶者" class="img" data-v-6293c55f> <a href="/pdcfighting" target="_blank" class="name" data-v-6293c55f> Python进阶者 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 11个月前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/7920817787" target="_blank" title="Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除" class="title single-ellipsis" data-v-6293c55f> Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这 </div></div> <img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/aeaded5a375b9d90ad54a2731b017114.png" class="item-right" data-v-6293c55f></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>559</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div> </div></div></div> <div class="blog-right-container"><div class="personal-info" data-v-af95cca0><div class="base-info" data-v-af95cca0><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="avatar" data-v-af95cca0> <div class="info-content" data-v-af95cca0><div onc class="name-level" data-v-af95cca0><div class="name single-ellipsis" data-v-af95cca0> Wesley13 </div> <div class="level-icon level-1" data-v-429e45df data-v-af95cca0> Lv1 </div></div> <!----></div></div> <button type="button" class="follow-btn ant-btn ant-btn-primary ant-btn-background-ghost" data-v-af95cca0><span>关 注</span></button> <div class="signature" data-v-af95cca0>最大的安心是自律温柔和爱自己。</div> <div class="article-fans-stars" data-v-af95cca0><div class="item" data-v-af95cca0><div class="label" data-v-af95cca0>文章</div> <div class="value" data-v-af95cca0> 1.2w </div></div><div class="item" data-v-af95cca0><div class="label" data-v-af95cca0>粉丝</div> <div class="value" data-v-af95cca0> 22 </div></div><div class="item" data-v-af95cca0><div class="label" data-v-af95cca0>获赞</div> <div class="value" data-v-af95cca0> 1.7k </div></div></div> <div class="author-social-info" data-v-af95cca0><!----> <!----> <!----></div></div> <div class="sider-box" data-v-377f20d6><h5 class="common-title" data-v-377f20d6>热门文章</h5> <div class="content-box" data-v-377f20d6><div class="hot-article-list" data-v-5fa70b3e><div class="item" data-v-5fa70b3e><a href="/p/2026823042" title="JavPlayer:AI破坏马赛克,大量马赛克破坏版影片流出 " class="abstract multi-ellipsis-2" data-v-5fa70b3e> JavPlayer:AI破坏马赛克,大量马赛克破坏版影片流出 </a></div><div class="item" data-v-5fa70b3e><a href="/p/2766033731" title="2020年最新可用的磁力搜索引擎&种子搜索网站,持续整理分享 " class="abstract multi-ellipsis-2" data-v-5fa70b3e> 2020年最新可用的磁力搜索引擎&种子搜索网站,持续整理分享 </a></div><div class="item" data-v-5fa70b3e><a href="/p/9442853740" title="8个在线接收手机短信验证码的免费网络服务整理 " class="abstract multi-ellipsis-2" data-v-5fa70b3e> 8个在线接收手机短信验证码的免费网络服务整理 </a></div><div class="item" data-v-5fa70b3e><a href="/p/2494613557" title="IDM 激活破解工具 " class="abstract multi-ellipsis-2" data-v-5fa70b3e> IDM 激活破解工具 </a></div><div class="item" data-v-5fa70b3e><a href="/p/1466098846" title="java.net.ConnectException:Connection timed out:connect 出现连接超时的问题? " class="abstract multi-ellipsis-2" data-v-5fa70b3e> java.net.ConnectException:Connection timed out:connect 出现连接超时的问题? </a></div></div></div></div></div></div></div> <!----></div></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A){return {layout:"default",data:[{}],fetch:{},error:f,state:{showSlideAuth:c,showLogin:c,fromIndex:c,urlConfig:{GET_BLOG_COLLECTION_LIST_URL:k,getAllTag:"\u002Ftag\u002FgetAllTag",CREATE_BLOG_URL:"\u002Fmanage\u002FcreateBlog",PUBLISH_BLOG_URL:"\u002Fmanage\u002FpublishBlog",UPDATE_BLOG_DETAIL:"\u002Fmanage\u002FupdateBlog",GET_BLOG_DETAIL:"\u002Fblog\u002FgetBlogDetail",GET_BLOG_NEWEST_DRAFT:l,UPDATE_CHAPTER_URL:m,GET_CHAPTER_NEWEST_DRAFT:n,PUBLISH_CHAPTER:m,CREATE_BLOG_CATE:"\u002Fcollection\u002Fadd",RENAME_COLLECTION:"\u002Fcollection\u002FrenameCollection",DELETE_COLLECTION:"\u002Fcollection\u002FdeleteCollection",GET_MY_BLOG_LIST_URL:"\u002Fadmin\u002FblogList",FOLLOW_AUTHOR:"\u002Fuser\u002Ffollow",UNFOLLOW_AUTHOR:"\u002Fuser\u002Funfollow",GET_RECOMMEND_BLOG:"\u002Fhome\u002FgetHomeBlogByAction",GET_RECOMMEND_BLOG_BY_CATE:"\u002Fhome\u002FgetHomeBlogListByTag",GET_RECOMMEND_BLOG_BY_TAG:"\u002Fhome\u002FgetBlogListByTag",GET_TAG_LIST:"\u002Fuser\u002FhotWords",GET_CATE_LIST:"\u002Ftag\u002FgetHomeTag",GET_RECOMMEND_AUTHOR:"\u002Fhome\u002FgetRecommendAuthorList",GET_DAILY_ALGORITHM:"\u002Fhome\u002Fdailyalgorithm",LOG_IN:"\u002Faccess\u002Flogin",LOG_OUT:"\u002Faccess\u002FsignOut",CHECK_USER_INFO:"\u002Faccess\u002FcheckUserInfo",REGISTER:"\u002Faccess\u002Fregister",CHANGE_PWD:"\u002Faccess\u002FchangePassword",SEND_CODE:"\u002Faccess\u002FsendCode",ACTION_AUTH:"\u002Faccess\u002FactionAuth",ACTION_AUTH2:"\u002Faccess\u002FactionAuth2",CHECK_USER_AND_BLOG:"\u002Faccess\u002FcheckUserAndBlog",CHECK_TOKEN:"\u002Faccess\u002FcheckToken",SIGN_IN:"\u002Faccess\u002FsignIn",GET_PERSONAL_INFO:"\u002Fuser\u002Fdetail\u002Finfo",GET_PERSONAL_BLOG_LIST:"\u002Fuser\u002Fdetail\u002Fbloglist",FILE_UPLOAD:"\u002Ffile\u002Fupload",DL_AND_UPLOAD:"\u002Ffile\u002FdownloadAndUploadOss",GET_MY_FOLLOW_USER_LIST:"\u002Fadmin\u002FgetMyFollowUserList",GET_MY_FANS_USER_LIST:"\u002Fadmin\u002FgetMyFansUserList",GET_MY_FOLLOW_QUESTION_LIST:"\u002Fadmin\u002FgetMyFollowQuestion",GET_MY_SUBSCIBE_SPECIAL_LIST:"\u002Fadmin\u002FgetMySubscribeSpecialList",TAKE_OFF_BLOG:"\u002Fadmin\u002FtakeOffBlog",TAKE_ON_BLOG:"\u002Fadmin\u002FtakeOnBlog",GET_HOME_RECOMMEND_SPECIAL_LIST:"\u002Fhome\u002FgetRecommendSpecialList",GET_MOST_SPECIAL_COUNT_USER_LIST:"\u002Fspecial\u002FgetSpecialMostUserList",GET_SPECIAL_CATE_LIST_URL:"\u002Fspecial\u002FgetSpecialCateList",GET_SPECIAL_LIST_URL:"\u002Fspecial\u002FgetSpecialList",GET_SPECIAL_LIST_PER_CATEGORY_URL:"\u002Fspecial\u002FgetSpecialListPerCategory",GET_CATEGORY_INFO_BY_ID_URL:"\u002Fhome\u002FgetCategoryInfoById",GET_SPECIAL_COUNT_PER_CATEGORY_URL:"\u002Fspecial\u002FgetSpecialTotalCountPerCategory",GET_SPECIAL_BANNER:"\u002Fspecial\u002FgetBannerList",GET_SPECIAL_DETAIL_CHAPTER_LIST:"\u002Fspecial\u002FgetSpecialSectionList",GET_SPECIAL_DETAIL:"\u002Fspecial\u002FgetMySpecialChapterInfo",GetChapterInfo:"\u002Fspecial\u002FgetSectionDetail",GET_SPECIAL_DETAIL_INFO:"\u002Fadmin\u002FgetSpecialDetail",ADD_CHAPTER_URL:"\u002Fadmin\u002FaddChapter",UPDATE_CHAPTER_INFO:"\u002Fadmin\u002FupdateChapterInfo",UPDATE_CHAPTER_SEQUENCE:"\u002Fadmin\u002FupdateChapterSequence",DELETE_CHAPTER_URL:"\u002Fadmin\u002FdeleteChapter",TAKE_ON_SPECIAL:"\u002Fspecial\u002FpublishSection",TAKE_OFF_SPECIAL:"\u002Fadmin\u002FtakeOffSpecial",RENAME_SPECIAL:"\u002Fadmin\u002FrenameSpecial",GET_SPECIAL_CATE_LIST:"\u002Fadmin\u002FgetSpecialCateList",UPDATE_SPECIAL_INTRO:"\u002Fadmin\u002FupdateSpecialIntro",UPDATE_SPECIAL_INFO:"\u002Fadmin\u002FupdateSpecialCateId",UPDATE_SPECIAL_TITLE:"\u002Fadmin\u002FupdateSpecialTitle",DELETE_SPECIAL:"\u002Fadmin\u002FdeleteSpecial",GET_CHAPTER_COMMENT:"\u002Fcomment\u002FgetChapterCommentList",UPDATE_SPECIALINFO:"\u002Fadmin\u002FupdateSpecialBaseInfo",SUBSCRIBE_SPECIAL:o,UN_SUBSCRIBE_SPECIAL:p,MODIFY_SPECIAL:q,GET_TUTORIAL_BIG_CATEGORY:"\u002Ftutorial\u002FgetTutorialBigCategories",GET_ALL_TUTORIALS:r,GET_CHAPTER_AND_SECTION_BY_PATH:"\u002Ftutorial\u002FgetChapterAndSectionByPath",GET_CONTENT_BY_SECTION_PATH:"\u002Ftutorial\u002FgetSectionContent",GET_TUTORIAL_OVERVIEW:s,GET_UID_BY_PROFILE_PATH:"\u002Fuser\u002FgetUidByProfilePath",GET_USER_DETAIL_USER_INFO:"\u002Fuser\u002Fdetail\u002FuserInfo",GET_SPECIAL_CATEGORY:"\u002Fuser\u002Fdetail\u002FspecialCategory",CREATE_SPECIAL_URL:"\u002Fspecial\u002FcreateSpecial",GET_MY_SPECIAL_LIST_URL:"\u002Fadmin\u002FgetMySpecialList",GET_CHAPTER_LIST_PER_SPECIAL_URL:"\u002Fadmin\u002FgetSpecialChapterList",GET_USER_RELATED_QUESTION_LIST:"\u002Fuser\u002Fdetail\u002FgetUserRelatedQuestionList",Get_BLOG_COLLECT_LIST:"\u002Fuser\u002Fdetail\u002FgetUserBlogCollectList",GET_BLOG_LIST_URL:"\u002Fuc\u002FgetUserBlogList",GET_BLOG_LIST_BY_COLLECT_ID:"\u002Fuser\u002Fdetail\u002FgetCollectBlogList",GET_SPECIAL_LIST_BY_SORT_TYPE:"\u002Fuc\u002FgetUserPublishedSpecialList",GET_USER_BASE_INFO:"\u002Fuc\u002FgetUserInfo",GET_NEWEST_BLOG_LIST:"\u002Fuser\u002Fdetail\u002FgetNewestBlogList",GET_NEWEST_COMMENT_LIST:"\u002Fuser\u002Fdetail\u002FgetNewestCommentList",GET_FAVORITE_BLOG_LIST:"\u002Fuc\u002FgetUserFavoriteBlogList",GET_FOLLOW_USER_LIST:"\u002Fuc\u002FgetFollowList",GET_FOLLOW_USER_FANS:"\u002Fuc\u002FgetFanList",GET_HOT_COMMENTS:"\u002Fuc\u002FgetHotComments",IS_USER_BLOG:"\u002Fuc\u002FisUserBlog",GET_SEARCH_WORD:"\u002Fsearch\u002FsearchWord",GET_QUESTION_COMMON_TAG:"\u002Fquestion\u002FgetHotTagList",GET_QUESTION_LIST:"\u002Fquestion\u002FgetQuestionList",GET_QUESTION_DETAIL:"\u002Fquestion\u002FgetQuestionDetail",UPDATE_QUESTION_INFO:"\u002Fquestion\u002FupdateQuestion",GET_QUESTION_BASE_INFO:"\u002Fquestion\u002FgetQuestionBaseInfo",GET_BLOG_COMMENT_LIST:"\u002Fcomment\u002FgetBlogCommentList",ADD_COMMENT:"\u002Fcomment\u002FaddComment",ADD_REPLY:"\u002Fcomment\u002FaddReply",LIKE_BLOG:"\u002Fblog\u002FzanBlog",FAVORITE_BLOG:"\u002Fblog\u002FfavoriteBlog",GET_USER_LIKE_FAVORITE_INFO:"\u002Fadmin\u002FgetUserAndBlogActionInfo",DAMIT_CHANGE_PWD:"\u002Fadmin\u002FchangePassword",UPDATE_PERSONAL:"\u002Fadmin\u002FmodifyPersonalInfo",SUBMIT_SUGGESTION:"\u002Fsuggestion\u002FsubmitSuggestion",GETALLBLOGID:"\u002Faccess\u002FgetAllBlogId",GETCONTENTBYID:"\u002Faccess\u002FgetContentById",UPDATEHTMLBYID:"\u002Faccess\u002FupdateHtmlById",CHANGE_USER_PWD:t,SEND_USER_SMS:"\u002Faccess\u002FsendSmsCode",GET_WIN_USERS:"\u002Fwin\u002FgetWinUsers",GET_FRIEND_LINKS:"\u002Fhome\u002FgetFriendLinks",GET_SITE_MAP:"\u002Fspider\u002FgetSiteMap",GET_BLOG_BY_TAG_NAME:"\u002Fblog\u002FgetBlogByTagName",GET_BLOG_BY_TAG_ID:"\u002Fsearch\u002FsearchTag",GET_RANDOM_TAGS:"\u002Fblog\u002FgetRandomTags",GET_UPLOAD_SIGNATURE:"\u002Fvod\u002FgetUploadSignature",UPLOAD_MEDIA_INFO:"\u002Fvod\u002FuploadMediaInfo",GET_BLOG_INFO:"\u002Fadmin\u002FgetBlogInfo",GET_HOME_RECOMMEND_TAGS:"\u002Ftag\u002FgetHomeRecommendTags",GET_USER_HOT_BLOG_LIST:"\u002Fuc\u002FgetUserHotBlogList",COMMENT_BLOG:"\u002Fcomment\u002Fcomment",GET_COMMENT_LIST:"\u002Fcomment\u002FgetCommentList",REPLY_COMMENT:"\u002Fcomment\u002FreplyComment",GET_COMMENT_REPLIES:"\u002Fcomment\u002FgetCommentReplies",GET_BACK_IMAGE_LIST:"\u002Fuc\u002FgetBackImageList",UPDATE_BACK_IMAGE:"\u002Fuc\u002FupdateBackImage",GET_MY_SPECIAL_LIST:"\u002Fmanage\u002FgetMySpecialList",GET_SUBCRIBED_SPECLIAL_LIST:"\u002Fmanage\u002FgetMySubscribedSpecialList",GET_MY_SPECIAL_DETAIL:"\u002Fmanage\u002FgetMySpecialDetail",SUBCRIBE_SPECLIAL:o,UNSUBCRIBED_SPECLIAL:p,CREATE_COLLECTION:"\u002Fmanage\u002FcreateCollection",GET_COLLECTION_LIST:k,UPDATE_COLLECTION:"\u002Fmanage\u002FupdateCollection",REMOVE_COLLECTION:"\u002Fmanage\u002FremoveCollection",GET_MY_BLOG_LIST:"\u002Fmanage\u002FgetMyBlogList",GET_FOLLOW_LIST:"\u002Fmanage\u002FgetFollowList",UPDATE_FOLLOW:"\u002Fmanage\u002FupdateFollow",GET_MY_INFO:"\u002Fmanage\u002FgetMyInfo",UPDATE_MY_INFO:"\u002Fmanage\u002FupdateMyInfo",GET_MY_FAVORITE_BLOG_LIST:"\u002Fmanage\u002FgetMyFavoriteBlogList",GET_MY_FAVORITE_LESSON_LIST:"\u002Flesson\u002FfavoriteList",UPDATE_FAVORITE_LESSON:"\u002Flesson\u002Ffavorite",UPDATE_CANCEL_FAVORITE_LESSON:"\u002Flesson\u002FremoveFavorite",GET_RECOMMEND_LESSON_BY_BLOG:"\u002Flesson\u002FrecommendLesson",MODIFY_PASSWORD:t,GET_MY_BLOG_DETAIL:l,GET_MY_BLOG_DETAIL_FOR_ADMIN_PREVIEW:"\u002Fmanage\u002FgetMyBlogDetailForAdminPreview",GET_NEW_NOTIFICATION_COUNT:"\u002Fmanage\u002FgetNewNotificationCount",GET_NOTIFICATION_LIST:"\u002Fmanage\u002FgetNotificationList",READ_NOTIFICATION:"\u002Fmanage\u002FreadNotification",CREATE_SECTION:"\u002Fspecial\u002FcreateSection",MODIFIY_SECTION_TITLE:"\u002Fspecial\u002FmodifySectionTitle",MODIFIY_SPECIAL_TITLE:q,MODIFIY_SECTION_STATUS:"\u002Fspecial\u002FmodifySectionStatus",PUBLISH_SPECIAL:"\u002Fspecial\u002FpublishSpecial",OFFLINE_SPECIAL:"\u002Fspecial\u002FofflineSpecial",UNPUBLISHED_SPECIAL_DETAIL:"manage\u002FgetMySpecialDetail",UNPUBLISHED_SPECIAL_CHAPTER_DETAIL:n,UPDATE_BLOG_TITLE:"\u002Fmanage\u002FupdateTitle",UPDATE_BLOG_STATUS_PUBLISHED:"\u002Fmanage\u002FupdateBlogStatusPublished",DELETE_BLOG:"\u002Fmanage\u002FdeleteBlog",GET_CATELIST_TUTORIAL:"\u002Ftutorial\u002FgetCateList",GET_TUTORIAL_LIST:r,GET_TUTORIAL_DETAIL:s,GET_CHAPTER_INFO:"\u002Ftutorial\u002FgetChapterInfo",FAVORITE_SECTION:"\u002Fmanage\u002FfavoriteSection",ZAN_SECTION:"\u002Fmanage\u002FzanSection",LESSON_LIST_ALL:"\u002Flesson\u002Flist\u002Fall",LESSON_LIST_MY:"\u002Flesson\u002Flist\u002Fmy",LESSON_LIST_BUY:"\u002Flesson\u002Flist\u002Fbuy",LESSON_LIST_REC:"\u002Flesson\u002Flist\u002Frec",LESSON_CREATE:"\u002Flesson\u002Fcreate",LESSON_DETAIL_EDIT:"\u002Flesson\u002Fdetail\u002Fedit",LESSON_DETAIL:"\u002Flesson\u002Fdetail",LESSON_DELETE:"\u002Flesson\u002FdeleteLesson",LESSON_CATEGORIES:"\u002Flesson\u002Fcategories",LESSON_DIRECTIONS:"\u002Flesson\u002Fdirections",LESSON_STORE:"\u002Flesson\u002Fstore",LESSON_CREATE_CHAPTER:"\u002Flesson\u002FcreateChapter",LESSON_UPDATE_CHATPER:"\u002Flesson\u002FupdateChapter",LESSON_DELETE_CHAPTER:"\u002Flesson\u002FdeleteChapter",LESSON_CHAPTER_DELETE_VIDEO:"\u002Flesson\u002Fchapter\u002FdeleteVideo",LESSON_CHAPTER_UPDATE_VIDEO:"\u002Flesson\u002Fchapter\u002FupdateVideo",LESSON_CHAPTER_CREATE_VIDEO:"\u002Flesson\u002Fchapter\u002FcreateVideo",LESSON_CHAPTERS:"\u002Flesson\u002Fchapters",LESSON_CHAPTERS_EDIT:"\u002Flesson\u002Fchapters\u002Fedit",LESSON_VIDEO_ENCRYPT:"\u002Flesson\u002Fvideo\u002Fencrypt",LESSON_VIDEO:"\u002Flesson\u002Fvideo",LESSON_VIDEO_M3U8:"\u002Flesson\u002Fvideo\u002Fm3u8",LESSON_COS_TOKEN:"\u002Flesson\u002Fcos\u002Ftoken",LESSON_NOTE:"\u002Flesson\u002Fnote",LESSON_CREATE_SOURCE:"\u002Flesson\u002FcreateResource",LESSON_UPDATE_RESOURCE:"\u002Flesson\u002FupdateResource",LESSON_RESOURCE:"\u002Flesson\u002Fresource",LESSON_DELETE_RESOURCE:"\u002FlessondeleteResource",LESSON_LEARN_REPORT:"\u002Flesson\u002Flearn\u002Freport",ADD_STUDY_COUNT:"\u002Flesson\u002FaddStudyCount",WXPAY_NATIVE_PAY:"\u002Fwxpay\u002FnativePay",WXPAY_QUERY_ORDER_STATUS:"\u002Fwxpay\u002FqueryOrderStatus",WXPAY_ORDER:"\u002Fwxpay\u002Forder",WXPAY_ORDERS:"\u002Fwxpay\u002Forders",WXPAY_CANCELORDER:"\u002Fwxpay\u002FcancelOrder"},isLoading:c,authPhone:b,friendLink:[],showSpecial:c,specialData:f,navFixedVisible:c,deviceId:190284394507777440,blackList:[],access:{token:b,userInfo:{}},admin:{collectionList:[],specialList:[],notifyCount:{},curTab:"blog",blogDetail:{}},backstage:{blogList:{},typeCount:{collectCount:a,commentCount:a,count:a,followCount:a,subscribeCount:a,zanCount:a},isShow:c},course:{isCollapase:u},personal:{errorMsg:b,handling:c,visible:c,success:c,isSmsCoding:c,sendCodeSuccess:c,uid:f,userDetailInfo:{},personalBlogList:[],blogCount:a,personalSpecialList:[],specialCount:a,newestBlog:[],newestComment:[],personalFavoriteList:[],favoriteCount:a,personalFollowList:[],followCount:a,personalFansList:[],fansCount:a,hotComment:[],routeParams:{profile:b,pageType:b}},question:{commonTags:[],questionList:[],questionDetail:{}},recommend:{recommendBlog:{data:[]},tagList:[],categoryList:{data:[]},recommendAuthorList:{data:[]},todayAlgorithm:b,blogDetail:{blogInfo:{uuid:"6766908983",title:"HTML5之基础、元信息标签 ",intro:"\u003C!DOCTYPE标签       \u003C!DOCTYPE声明位于文档中最前面的位置,处于\u003Chtml标签之前。\u003C!DOCTYPE声明不是一个HTML标签,它是告知Web浏览器该页面使用了哪种HTML版本(规范),浏览器用此版本(规范)对该文档进行解析,渲染。       ",content:"\u003C!DOCTYPE\u003E标签\n============\n\n       \u003C!DOCTYPE\u003E 声明位于文档中**最前面的位置**,处于\u003Chtml\u003E标签之前。\u003C!DOCTYPE\u003E 声明不是一个**HTML标签**,它是告知**Web浏览器**该页面使用了哪种**HTML版本**(规范),浏览器用**此版本**(规范)对该文档进行**解析,渲染**。        \u003C!DOCTYPE\u003E 可声明的 [DTD](https:\u002F\u002Fwww.oschina.net\u002Faction\u002FGoToLink?url=https%3A%2F%2Fbaike.baidu.com%2Fitem%2FDTD) 有三种:分别是**严格版本(strict)**、**过渡版本(transitional)**、以及**基于框架的版本(frameset)**,若文档不遵循其DTD规范,则此文档中的代码不但不能通过代码校验,并且有可能无法正常显示。\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml\u003E\n \t\u003Chead\u003E\n \t\t\u003C!--HTML5示例--\u003E\n \t\t\u003Cmeta charset=\"utf-8\"\u003E \n \t\t\u003Ctitle\u003E文档标题\u003C\u002Ftitle\u003E\n \t\u003C\u002Fhead\u003E \n \t\u003Cbody\u003E\n \t\t文档内容......\n \t\u003C\u002Fbody\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003C!DOCTYPE\u003E标签的使用\n---------------\n\n \u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fstrict.dtd\"\u003E\n \n\n在以上声明中,此文档的**根元素**被声明为HTML,他在公共标识符被定义为 \"**\\-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN**\" 的DTD中进行了定义,浏览器会明白如何寻找与该公共标识符匹配的DTD,如果找不到,浏览器将会使用公共标识符后面的 [URL](https:\u002F\u002Fwww.oschina.net\u002Faction\u002FGoToLink?url=https%3A%2F%2Fbaike.baidu.com%2Fitem%2Furl) 来寻找DTD的位置。\n\n* **\\-\u002F+**:\"**\\-**\"表示组织名称未注册,Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织,\"**+**\"表示组织名称已注册;\n* **DTD**:指公开文本类,即所用的对象类型。默认为DTD;\n* **HTML**:公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML;\n* **URL**: 指定所引用对象的位置。  \n\n### HTML的文档类型\n\n#### HTML4.01 的文档类型\n\nHTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset\n\n**严格版本(strict)** 的DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。\n\n \u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fstrict.dtd\"\u003E\n \n\n**过渡版本(transitional)** 的DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(eg:font ),框架集是不允许的。\n\n \u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd\"\u003E\n \n\n**基于框架的版本(frameset)** 的DTD 与 HTML 4.01 Transitional 相同,但是允许使用框架集内容。\n\n \u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Frameset\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fframeset.dtd\"\u003E\n \n\n#### HTML5 的文档类型\n\nHTML4.01 中的**DOCTYPE**需要对 DTD 进行引用,因为 HTML4.01 基于 [SGML](https:\u002F\u002Fwww.oschina.net\u002Faction\u002FGoToLink?url=https%3A%2F%2Fbaike.baidu.com%2Fitem%2F%25E6%25A0%2587%25E5%2587%2586%25E9%2580%259A%25E7%2594%25A8%25E7%25BD%25AE%25E6%25A0%2587%25E8%25AF%25AD%25E8%25A8%2580%2F10471466%3Ffromtitle%3DSGML%26fromid%3D2901416%26fr%3Daladdin)。而 HTML5 不基于**SGML**,因此不需要对 DTD 进行引用,但是需要**DOCTYPE**来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。\n\n \u003C!DOCTYPE html\u003E\n \n\n#### XHTML1.0 的文档类型\n\nXHTML 1.0 规定了三种文档类型:Strict、Transitional 以及 Frameset\n\n**严格版本(strict)** 的DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。\n\n \u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Strict\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd\"\u003E\n \n\n**过渡版本(transitional)** 的DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。\n\n \u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-transitional.dtd\"\u003E\n \n\n**基于框架的版本(frameset)** 的DTD 与 XHTML 1.0 Transitional 相同,但是允许使用框架集内容。\n\n \u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Frameset\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-frameset.dtd\"\u003E\n \n\n#### XHTML 1.1 的文档类型\n\n该DTD 与 XHTML 1.0 Strict 相同,但是允许您添加模块(例如为东亚语言提供 ruby 支持)。\n\n \u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.1\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml11\u002FDTD\u002Fxhtml11.dtd\"\u003E\n \n\n### 三种类型文档的区别\n\n       **严格版本**:               它将文档结构与表现形式实现了更高的分离,所以,页面的外观要用CSS来控制。\n\n       **过渡版本**:               它包含了HTML4.01版本的全部标记,方便网页开发者顺利地从HTML的使用过渡到XHTML\n\n       **基于框架的版本**:               它使用\u003C**frameset**\\\u003E以框架的形式将网页分为多个文档。W3C是推荐使用XHTML的,而且使用XHTML的话可以更顺利地通过W3C对网页页面的验证  \n\n### 注意\n\n       1. 页面引用哪种规范就要用那种规范允许或推荐使用的标签。\n\n       2. 如果没有指定有效的DOCTYPE声明,大多数浏览器都会使用一个内建的默认dtd。在这种情况下, 浏览器会用内建的dtd来试着显示你所指定的标记,这将违背HTML规范的意义,不建议使用这种方式。        3. 当doctype申明缺失或者格式不正确时,文档会以**兼容模式**呈现。            标准模式:排版以及js运行模式都是以浏览器支持的最高标准运行;            兼容模式:页面以宽松的向后兼容(向老版本兼容)方式显示,模拟老浏览器的行为防止(老)站点无法正常工作。\n\n### 其他\n\n       \u003C!DOCTYPE html\u003E 是 HTML5 中唯一的 DOCTYPE,也被视作将网页 \"**升级**\" 到**HTML5**的第一步。很多国外网站的 \u003C**!DOCTYPE html**\\\u003E和\u003C**HEAD**\\\u003E之间都会有一段注释,如:\n\n \u003C!—[if IE 6 ]\u003E\u003Chtml class=\"ie ielt9 ielt8 ielt7 ie6\" lang=\"en-US\"\u003E\u003C![endif]—\u003E\n \u003C!—[if IE 7 ]\u003E\u003Chtml class=\"ie ielt9 ielt8 ie7\" lang=\"en-US\"\u003E\u003C![endif]—\u003E\n \u003C!—[if IE 8 ]\u003E\u003Chtml class=\"ie ielt9 ie8\" lang=\"en-US\"\u003E\u003C![endif]—\u003E\n \u003C!—[if IE 9 ]\u003E\u003Chtml class=\"ie ie9\" lang=\"en-US\"\u003E\u003C![endif]—\u003E\n \u003C!—[if (gt IE 9)|!(IE)]\u003E\u003C!—\u003E\u003Chtml lang=\"en-US\"\u003E\u003C!—\u003C![endif]—\u003E\n \n\n       该代码作用于CSS,来写一些针对IE各版本的样式差异。先判断用户用的哪个**IE**版本,然后在标签上加上该版本的 class,这样可以方便 hack。这是目前最好的 hack 方式之一。 css 文件是这样写的:\n\n .ie6 xxx {};\n .ie7 xxx {};\n \n\n\u003Chtml\u003E标签\n========\n\n**常用属性:**          \\[manifest\\]:定义一个URL,该URL上记录了此文档的缓存信息 **作用:**          该标签用来**告知浏览器**这是一个HTML文档,浏览器在读取该标签后将会**以HTML的规则**对此文档进行**解析** **说明:**          在一个HTML文档中一般会在该标签中添加 **\\[lang\\]** ,用来指定该文档语言类型,常见的语言代码 中文:**zh**    中文简体:**zh-CN**    中文繁体:**zh-TW**    中国香港:**zh-HK**    中国澳门:**zh-MO**    英语:**en**    法语:**fr**    德语:**de**    俄语:**ru**  考虑浏览器和操作系统的兼容性,目前仍然使用**zh-CN** **全局属性:** 支持 **事件属性:** 不支持\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\u003C\u002Fhtml\u003E\n \n\n\u003Chead\u003E标签\n========\n\n**作用:**          元素是所有头部元素的**容器。** **说明:**          该标签内添加了多种内容,这些内容不会展示到页面中去,而对于文档来说却至关重要。它**必须包含文档的标题\u003Ctitle\u003E**,可以包含**脚本(script)**、**样式(style,link)**、 **meta(元信息)** 以及其他更多的信息。 **全局属性:** 支持 **事件属性:** 不支持 **注意:**          **一个**HTML文档只有**一个**head标签\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\u003C\u002Fhead\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003Cmeta\u003E标签\n========\n\n**常用属性:**         **\\[name\\]:** 定义网页关键字、作者、描述等信息,有利于搜索引擎分类和查找         **\\[content\\]:** 与name或者http-equiv对应,此标签内含有name所声明类型的具体内容         **\\[charset\\]:** 定义该文档编码所用的字符集,告知浏览器以何种字符集来解析此文档         **\\[http-equiv\\]:** 把content属性关联到HTTP头部 **作用:**         该标签提供了HTML文档的**元数据**,这些内容同样不会展示到页面中去,对于文档来说同样至关 重要 **全局属性:** 不支持 **事件属性:** 不支持 **详见:** [**\u003Cmeta\u003E标签详解**](https:\u002F\u002Fwww.oschina.net\u002Faction\u002FGoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2Fzhuochong%2Fp%2F11642930.html)\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\n \t\u003C!--定义当前文档的编码方式,告诉浏览器如何解析当前页面--\u003E\n \t\u003Cmeta charset=\"UTF-8\"\u002F\u003E\n \t\n \t\u003C!--设置页面的作者--\u003E\n \t\u003Cmeta name=\"author\" content=\"xbyang\"\u002F\u003E\n \t\n \t\u003C!--设置让搜索引擎获取网页的关键字--\u003E\n \t\u003Cmeta name=\"keywords\" content=\"study, webpage, first, hello world\"\u002F\u003E\n \t\n \t\u003C!--设置让搜索引擎获取网页的内容描述--\u003E\n \t\u003Cmeta name=\"description\" content=\"this is a template webpage!\"\u002F\u003E\n \t\n \t\u003C!--设置让搜索引擎了解哪些页面需要索引,哪些页面不需要索引, all代表文件将被检索页面上的链接可以被查询--\u003E\n \t\u003Cmeta name=\"robots\" content=\"all\"\u002F\u003E\n \t\n \t\u003C!--设置网站采用制作软件--\u003E\n \t\u003Cmeta name=\"generator\" content=\"WebStorm 2019.2\"\u002F\u003E\n \t\n \t\u003C!--设置网站的版权信息--\u003E\n \t\u003Cmeta name=\"COPYRIGHT\" content=\"xbyang\"\u002F\u003E\n \t\n \t\u003C!--控制浏览器窗口的大小和缩放的,由于它在现代浏览器,特别是 Mobile 端浏览器非常常用--\u003E\n \t\u003Cmeta id=\"viewport\" name=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;\"\u003E\n \t\n \t\u003C!--设置网页的过期时间--\u003E\n \t\u003Cmeta http-equiv=\"expires\" content=\"Fri May 13 2019 21:39:42 GMT+0800 (CST)\" \u002F\u003E\n \t\n \t\u003C!--设置页面使用的字符集--\u003E\n \t\u003Cmeta http-equiv=\"content-Type\" content=\"text\u002Fhtml;charset=gb2312\" \u002F\u003E\n \t\n \t\u003C!--强制页面在当前窗口以独立页面显示--\u003E\n \t\u003Cmeta http-equiv=\"Window-target\" content=\"top\" \u002F\u003E\n \t\n \t\u003C!--设置禁止浏览器从本地缓存中访问页面--\u003E\n \t\u003Cmeta http-equiv=\"Pragma\" content=\"no-cache\" \u002F\u003E\n \t\n \t\u003C!--文档兼容模式的定义,从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置--\u003E\n \t\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"\u003E\n \t\u003C!--以下代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8\u002F9都会以IE7引擎来渲染页面--\u003E\n \t\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=7\"\u003E \n \t\u003C!--以下代码告诉IE浏览器,IE8\u002F9都会以IE8引擎来渲染页面--\u003E\n \t\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=8\"\u003E \n \t\u003C!--代码告诉IE浏览器,IE8\u002F9及以后的版本都会以最高版本IE来渲染页面--\u003E\n \t\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003E \n \t\u003C!--以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame--\u003E\n \t\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=7,IE=9\"\u003E \n \t\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=7,9\"\u003E \n \t\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge,chrome=1\"\u003E\n \t\n \t\u003C!--DNS预解析是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度。DNS Prefetch应该尽量的放在网页的前面,推荐放在\u003Cmeta charset=”\u002F\u003E后面。可以减少DNS的请求次数,进行DNS预先获取--\u003E\n \t\u003Cmeta http-equiv=\"x-dns-prefetch-control\" content=\"on\"\u003E\n \t\u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fmy.oschina.net\u002F\u002Fimg.alicdn.com\"\u003E\n \n \t\u003Ctitle\u003EHTML学习\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003Cbase\u003E标签\n========\n\n**常用属性:**          **\\[href\\]:** 该属性指定了页面上所有链接的默认URL,换句话说,文档所有url在调用资源时都会先去找他要地址,不论本身是否定义了url,可理解为url拼接          **\\[target\\]:** 该属性指定了页面上所有打开新页面的方式 **作用:** 为页面上的所有的**相对链接**规定**默认URL**或**默认目标** **说明:** 如果使用了该标签,则**必须具备href属性**或者**target属性**或者**两个属性都具备**,另外target会被行内的target属性覆盖掉 **全局属性:** 支持 **事件属性:** 不支持\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\n \u003Cmeta charset=\"UTF-8\"\u002F\u003E\n \u003Ctitle\u003EHTML学习\u003C\u002Ftitle\u003E\n \u003Cbase href=\"http:\u002F\u002Flocalhost\u002F8080\u002Fdemo\u002F\" target=\"_blank\"\u002F\u003E\n \u003C\u002Fhead\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003Ctitle\u003E标签\n=========\n\n**作用:**         1.定义浏览器工具栏中的标题         2.提供页面被添加到收藏夹时的标题         3.显示在搜索引擎结果中的页面标题 **全局属性:** 支持 **事件属性:** 不支持 **注意:**          1.一个HTML文档中**不能**有**一个以上**的title标签          2.如果遗漏了title标签,文档作为 HTML 是**无效**的\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\n \u003Cmeta charset=\"UTF-8\"\u002F\u003E\n \u003Ctitle\u003EHTML学习\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003Cbody\u003E标签\n========\n\n**作用:**          标签定义文档的**主体** **说明:**          该标签包含文档**对外可见**的所有内容(比如文本、超链接、图像、表格和列表等等) **全局属性:** 支持 **事件属性:** 支持 **注意:**          1.在一个HTML文档中,只允许**存在一个**,虽然文档有时在该标签**不唯一**的情况下也能正常显示(那是因为现代浏览器容错机制较好),但放在**老版本浏览器**上则会崩溃\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\n \u003Ctitle\u003EHTML学习\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \u003C\u002Fbody\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003Ch1\u003E-\u003Ch6\u003E标签\n===========\n\n**类别:**          容器级标签 **作用:**          被用来定义整篇文档以及**article、section**等标签中的标题 **说明:**          h1定义**重要等级最高**的标题。h6定义**重要等级最低**的标题 **全局属性:** 支持 **事件属性:** 支持\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\n \t\u003Ctitle\u003EHTML学习\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \t\u003Ch1\u003E这是一级标题\u003C\u002Fh1\u003E\n \t\u003Ch2\u003E这是二级标题\u003C\u002Fh2\u003E\n \t\u003Ch3\u003E这是三级标题\u003C\u002Fh4\u003E\n \t\u003Ch4\u003E这是四级标题\u003C\u002Fh4\u003E\n \t\u003Ch5\u003E这是五级标题\u003C\u002Fh5\u003E\n \t\u003Ch6\u003E这是六级标题\u003C\u002Fh6\u003E\n \u003C\u002Fbody\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003Cp\u003E标签\n=====\n\n**类别:**          容器级标签 **作用:**          被用来定义一个段落 **说明:**          元素会自动**在该段落上下创建一些空白**。浏览器会自动添加这些空间,也可以在 **样式表(CSS)** 中进行控制 **全局属性:** 支持 **事件属性:** 支持\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\n \t\u003Ctitle\u003EHTML学习\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \t\u003Cp\u003EIn a sense we've come to our nation's capital to cash a check. When the architects of ourrepublic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the \"unalienable Rights\" of \"Life, Liberty and the pursuit of Happiness.\" It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked \"insufficient funds.\"\u003C\u002Fp\u003E\n \u003C\u002Fbody\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003Cbr\u003E标签\n======\n\n**作用:**          被用来插入一个简单的**换行符** **说明:**          应该使用br标签来**输入空行**,而不是**分割段落** **全局属性:** 支持 **事件属性:** 支持\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\n \t\u003Ctitle\u003EHTML学习\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \t\u003Cp\u003EIn a sense we've come to our nation's capital to cash a check. When the architects of ourrepublic wrote the magnificent words of the Constitution and the Declaration\u003Cbr\u002F\u003Eof Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men,\u003Cbr\u002F\u003Ewould be guaranteed the \"unalienable Rights\" of \"Life, Liberty and the pursuit of Happiness.\" It is obvious today that America has defaulted on this promissory note, insofar as her\u003Cbr\u002F\u003Ecitizens of color are concerned. Instead of honoring this sacred obligation, America has given\u003Cbr\u002F\u003Ethe Negro people a bad check, a check which has come back marked \"insufficient funds.\"\u003C\u002Fp\u003E\n \u003C\u002Fbody\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003Chr\u003E标签\n======\n\n**作用:**          该标签显示为一条**水平线**,用来定义HTML页面中的**主题变化**(比如话题的转移) **说明:**          标签仅仅显示为**一条水平线**,可以用**CSS**控制它 **全局属性:** 支持 **事件属性:** 支持\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\n \t\u003Ctitle\u003EHTML学习\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \t你\u003Chr\u002F\u003E\n \t好\u003Chr\u002F\u003E\n \t啊\u003Chr\u002F\u003E\n \u003C\u002Fbody\u003E\n \u003C\u002Fhtml\u003E\n \n\n\u003C!-- --\u003E标签\n==========\n\n**作用:**          用来在源文档中插入**注释**。注释**不会**在**浏览器**中**显示** **说明:**          对代码进行解释,这样做**有助于**您在以后的时间**对代码的编辑**。特别是代码量很大的情况下很有用。也可以在注释内容存储针对程序所定制的信息。在这种情况下,这些信息对用户是不可见的,但是对程序来说是可用的 **全局属性:** 不支持 **事件属性:** 不支持\n\n \u003C!DOCTYPE html\u003E\n \u003Chtml lang=\"zh-CN\"\u003E\n \u003Chead\u003E\n \t\u003Cmeta charset=\"UTF-8\"\u003E\n \t\u003Ctitle\u003EHTML基础标签学习\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \t\u003Ch6 style=\"border: 1px solid;\"\u003E这里是标题\u003C\u002Fh6\u003E\n \t\u003C!-- 这里是注释 --\u003E\n \u003C\u002Fbody\u003E\n \u003C\u002Fhtml\u003E",html:"\u003C!DOCTYPE\u003E\u003Ch1 id=\"标签\"\u003E标签\u003C\u002Fh1\u003E\n\u003Cp\u003E       <!DOCTYPE> 声明位于文档中\u003Cstrong\u003E最前面的位置\u003C\u002Fstrong\u003E,处于\u003Chtml\u003E标签之前。<!DOCTYPE> 声明不是一个\u003Cstrong\u003EHTML标签\u003C\u002Fstrong\u003E,它是告知\u003Cstrong\u003EWeb浏览器\u003C\u002Fstrong\u003E该页面使用了哪种\u003Cstrong\u003EHTML版本\u003C\u002Fstrong\u003E(规范),浏览器用\u003Cstrong\u003E此版本\u003C\u002Fstrong\u003E(规范)对该文档进行\u003Cstrong\u003E解析,渲染\u003C\u002Fstrong\u003E。        <!DOCTYPE> 可声明的 \u003Ca href=\"https:\u002F\u002Fwww.oschina.net\u002Faction\u002FGoToLink?url=https%3A%2F%2Fbaike.baidu.com%2Fitem%2FDTD\"\u003EDTD\u003C\u002Fa\u003E 有三种:分别是\u003Cstrong\u003E严格版本(strict)\u003C\u002Fstrong\u003E、\u003Cstrong\u003E过渡版本(transitional)\u003C\u002Fstrong\u003E、以及\u003Cstrong\u003E基于框架的版本(frameset)\u003C\u002Fstrong\u003E,若文档不遵循其DTD规范,则此文档中的代码不但不能通过代码校验,并且有可能无法正常显示。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html>\n <head>\n <!--HTML5示例-->\n <meta charset="utf-8"> \n <title>文档标题<\u002Ftitle>\n <\u002Fhead> \n <body>\n 文档内容......\n <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C!DOCTYPE\u003E\u003Ch2 id=\"标签的使用\"\u003E标签的使用\u003C\u002Fh2\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE HTML PUBLIC "-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN" "http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fstrict.dtd">\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003E在以上声明中,此文档的\u003Cstrong\u003E根元素\u003C\u002Fstrong\u003E被声明为HTML,他在公共标识符被定义为 "\u003Cstrong\u003E-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\u003C\u002Fstrong\u003E" 的DTD中进行了定义,浏览器会明白如何寻找与该公共标识符匹配的DTD,如果找不到,浏览器将会使用公共标识符后面的 \u003Ca href=\"https:\u002F\u002Fwww.oschina.net\u002Faction\u002FGoToLink?url=https%3A%2F%2Fbaike.baidu.com%2Fitem%2Furl\"\u003EURL\u003C\u002Fa\u003E 来寻找DTD的位置。\u003C\u002Fp\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003E-\u002F+\u003Cstrong\u003E:"\u003Cstrong\u003E-\u003C\u002Fstrong\u003E"表示组织名称未注册,Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织,"\u003C\u002Fstrong\u003E+\u003C\u002Fstrong\u003E"表示组织名称已注册;\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EDTD\u003C\u002Fstrong\u003E:指公开文本类,即所用的对象类型。默认为DTD;\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EHTML\u003C\u002Fstrong\u003E:公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML;\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EURL\u003C\u002Fstrong\u003E: 指定所引用对象的位置。\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Cp\u003E  \u003C\u002Fp\u003E\n\u003Ch3 id=\"html的文档类型\"\u003EHTML的文档类型\u003C\u002Fh3\u003E\n\u003Ch4 id=\"html401-的文档类型\"\u003EHTML4.01 的文档类型\u003C\u002Fh4\u003E\n\u003Cp\u003EHTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003E严格版本(strict)\u003C\u002Fstrong\u003E 的DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE HTML PUBLIC "-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN" "http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fstrict.dtd">\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003E\u003Cstrong\u003E过渡版本(transitional)\u003C\u002Fstrong\u003E 的DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(eg:font ),框架集是不允许的。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE HTML PUBLIC "-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN" "http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd">\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003E\u003Cstrong\u003E基于框架的版本(frameset)\u003C\u002Fstrong\u003E 的DTD 与 HTML 4.01 Transitional 相同,但是允许使用框架集内容。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE HTML PUBLIC "-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Frameset\u002F\u002FEN" "http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fframeset.dtd">\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Ch4 id=\"html5-的文档类型\"\u003EHTML5 的文档类型\u003C\u002Fh4\u003E\n\u003Cp\u003EHTML4.01 中的\u003Cstrong\u003EDOCTYPE\u003C\u002Fstrong\u003E需要对 DTD 进行引用,因为 HTML4.01 基于 \u003Ca href=\"https:\u002F\u002Fwww.oschina.net\u002Faction\u002FGoToLink?url=https%3A%2F%2Fbaike.baidu.com%2Fitem%2F%25E6%25A0%2587%25E5%2587%2586%25E9%2580%259A%25E7%2594%25A8%25E7%25BD%25AE%25E6%25A0%2587%25E8%25AF%25AD%25E8%25A8%2580%2F10471466%3Ffromtitle%3DSGML%26fromid%3D2901416%26fr%3Daladdin\"\u003ESGML\u003C\u002Fa\u003E。而 HTML5 不基于\u003Cstrong\u003ESGML\u003C\u002Fstrong\u003E,因此不需要对 DTD 进行引用,但是需要\u003Cstrong\u003EDOCTYPE\u003C\u002Fstrong\u003E来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Ch4 id=\"xhtml10-的文档类型\"\u003EXHTML1.0 的文档类型\u003C\u002Fh4\u003E\n\u003Cp\u003EXHTML 1.0 规定了三种文档类型:Strict、Transitional 以及 Frameset\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003E严格版本(strict)\u003C\u002Fstrong\u003E 的DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html PUBLIC "-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Strict\u002F\u002FEN" "http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd">\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003E\u003Cstrong\u003E过渡版本(transitional)\u003C\u002Fstrong\u003E 的DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html PUBLIC "-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Transitional\u002F\u002FEN" "http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-transitional.dtd">\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003E\u003Cstrong\u003E基于框架的版本(frameset)\u003C\u002Fstrong\u003E 的DTD 与 XHTML 1.0 Transitional 相同,但是允许使用框架集内容。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html PUBLIC "-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Frameset\u002F\u002FEN" "http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-frameset.dtd">\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Ch4 id=\"xhtml-11-的文档类型\"\u003EXHTML 1.1 的文档类型\u003C\u002Fh4\u003E\n\u003Cp\u003E该DTD 与 XHTML 1.0 Strict 相同,但是允许您添加模块(例如为东亚语言提供 ruby 支持)。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html PUBLIC "-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.1\u002F\u002FEN" "http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml11\u002FDTD\u002Fxhtml11.dtd">\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Ch3 id=\"三种类型文档的区别\"\u003E三种类型文档的区别\u003C\u002Fh3\u003E\n\u003Cp\u003E       \u003Cstrong\u003E严格版本\u003C\u002Fstrong\u003E:               它将文档结构与表现形式实现了更高的分离,所以,页面的外观要用CSS来控制。\u003C\u002Fp\u003E\n\u003Cp\u003E       \u003Cstrong\u003E过渡版本\u003C\u002Fstrong\u003E:               它包含了HTML4.01版本的全部标记,方便网页开发者顺利地从HTML的使用过渡到XHTML\u003C\u002Fp\u003E\n\u003Cp\u003E       \u003Cstrong\u003E基于框架的版本\u003C\u002Fstrong\u003E:               它使用<**frameset**>以框架的形式将网页分为多个文档。W3C是推荐使用XHTML的,而且使用XHTML的话可以更顺利地通过W3C对网页页面的验证  \u003C\u002Fp\u003E\n\u003Ch3 id=\"注意\"\u003E注意\u003C\u002Fh3\u003E\n\u003Cp\u003E       1. 页面引用哪种规范就要用那种规范允许或推荐使用的标签。\u003C\u002Fp\u003E\n\u003Cp\u003E       2. 如果没有指定有效的DOCTYPE声明,大多数浏览器都会使用一个内建的默认dtd。在这种情况下, 浏览器会用内建的dtd来试着显示你所指定的标记,这将违背HTML规范的意义,不建议使用这种方式。        3. 当doctype申明缺失或者格式不正确时,文档会以\u003Cstrong\u003E兼容模式\u003C\u002Fstrong\u003E呈现。            标准模式:排版以及js运行模式都是以浏览器支持的最高标准运行;            兼容模式:页面以宽松的向后兼容(向老版本兼容)方式显示,模拟老浏览器的行为防止(老)站点无法正常工作。\u003C\u002Fp\u003E\n\u003Ch3 id=\"其他\"\u003E其他\u003C\u002Fh3\u003E\n\u003Cp\u003E       \u003C!DOCTYPE html\u003E 是 HTML5 中唯一的 DOCTYPE,也被视作将网页 "\u003Cstrong\u003E升级\u003C\u002Fstrong\u003E" 到\u003Cstrong\u003EHTML5\u003C\u002Fstrong\u003E的第一步。很多国外网站的 <**!DOCTYPE html**>和<**HEAD**>之间都会有一段注释,如:\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—>\n<!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—>\n<!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—>\n<!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—>\n<!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003E       该代码作用于CSS,来写一些针对IE各版本的样式差异。先判断用户用的哪个\u003Cstrong\u003EIE\u003C\u002Fstrong\u003E版本,然后在标签上加上该版本的 class,这样可以方便 hack。这是目前最好的 hack 方式之一。 css 文件是这样写的:\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E.ie6 xxx {};\n.ie7 xxx {};\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Chtml\u003E标签\n========\n\n\u003Cp\u003E\u003Cstrong\u003E常用属性:\u003C\u002Fstrong\u003E          [manifest]:定义一个URL,该URL上记录了此文档的缓存信息 \u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E          该标签用来\u003Cstrong\u003E告知浏览器\u003C\u002Fstrong\u003E这是一个HTML文档,浏览器在读取该标签后将会\u003Cstrong\u003E以HTML的规则\u003C\u002Fstrong\u003E对此文档进行\u003Cstrong\u003E解析\u003C\u002Fstrong\u003E \u003Cstrong\u003E说明:\u003C\u002Fstrong\u003E          在一个HTML文档中一般会在该标签中添加 \u003Cstrong\u003E[lang]\u003C\u002Fstrong\u003E ,用来指定该文档语言类型,常见的语言代码 中文:\u003Cstrong\u003Ezh\u003C\u002Fstrong\u003E    中文简体:\u003Cstrong\u003Ezh-CN\u003C\u002Fstrong\u003E    中文繁体:\u003Cstrong\u003Ezh-TW\u003C\u002Fstrong\u003E    中国香港:\u003Cstrong\u003Ezh-HK\u003C\u002Fstrong\u003E    中国澳门:\u003Cstrong\u003Ezh-MO\u003C\u002Fstrong\u003E    英语:\u003Cstrong\u003Een\u003C\u002Fstrong\u003E    法语:\u003Cstrong\u003Efr\u003C\u002Fstrong\u003E    德语:\u003Cstrong\u003Ede\u003C\u002Fstrong\u003E    俄语:\u003Cstrong\u003Eru\u003C\u002Fstrong\u003E  考虑浏览器和操作系统的兼容性,目前仍然使用\u003Cstrong\u003Ezh-CN\u003C\u002Fstrong\u003E \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 不支持\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN"><\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Chead\u003E标签\n========\n\n\u003Cp\u003E\u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E          元素是所有头部元素的\u003Cstrong\u003E容器。\u003C\u002Fstrong\u003E \u003Cstrong\u003E说明:\u003C\u002Fstrong\u003E          该标签内添加了多种内容,这些内容不会展示到页面中去,而对于文档来说却至关重要。它\u003Cstrong\u003E必须包含文档的标题\u003Ctitle\u003E\u003Cstrong\u003E,可以包含\u003C\u002Fstrong\u003E脚本(script)\u003Cstrong\u003E、\u003C\u002Fstrong\u003E样式(style,link)\u003Cstrong\u003E、 \u003Cstrong\u003Emeta(元信息)\u003C\u002Fstrong\u003E 以及其他更多的信息。 \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 不支持 \u003Cstrong\u003E注意:\u003C\u002Fstrong\u003E          \u003Cstrong\u003E一个\u003C\u002Fstrong\u003EHTML文档只有\u003C\u002Fstrong\u003E一个\u003C\u002Fstrong\u003Ehead标签\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head><\u002Fhead>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cmeta\u003E标签\n========\n\n\u003Cp\u003E\u003Cstrong\u003E常用属性:\u003C\u002Fstrong\u003E         \u003Cstrong\u003E[name]:\u003C\u002Fstrong\u003E 定义网页关键字、作者、描述等信息,有利于搜索引擎分类和查找         \u003Cstrong\u003E[content]:\u003C\u002Fstrong\u003E 与name或者http-equiv对应,此标签内含有name所声明类型的具体内容         \u003Cstrong\u003E[charset]:\u003C\u002Fstrong\u003E 定义该文档编码所用的字符集,告知浏览器以何种字符集来解析此文档         \u003Cstrong\u003E[http-equiv]:\u003C\u002Fstrong\u003E 把content属性关联到HTTP头部 \u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E         该标签提供了HTML文档的\u003Cstrong\u003E元数据\u003C\u002Fstrong\u003E,这些内容同样不会展示到页面中去,对于文档来说同样至关 重要 \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 不支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 不支持 \u003Cstrong\u003E详见:\u003C\u002Fstrong\u003E \u003Ca href=\"https:\u002F\u002Fwww.oschina.net\u002Faction\u002FGoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2Fzhuochong%2Fp%2F11642930.html\"\u003E\u003Cstrong\u003E\u003Cmeta\u003E标签详解\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <!--定义当前文档的编码方式,告诉浏览器如何解析当前页面-->\n <meta charset="UTF-8"\u002F>\n \n <!--设置页面的作者-->\n <meta name="author" content="xbyang"\u002F>\n \n <!--设置让搜索引擎获取网页的关键字-->\n <meta name="keywords" content="study, webpage, first, hello world"\u002F>\n \n <!--设置让搜索引擎获取网页的内容描述-->\n <meta name="description" content="this is a template webpage!"\u002F>\n \n <!--设置让搜索引擎了解哪些页面需要索引,哪些页面不需要索引, all代表文件将被检索页面上的链接可以被查询-->\n <meta name="robots" content="all"\u002F>\n \n <!--设置网站采用制作软件-->\n <meta name="generator" content="WebStorm 2019.2"\u002F>\n \n <!--设置网站的版权信息-->\n <meta name="COPYRIGHT" content="xbyang"\u002F>\n \n <!--控制浏览器窗口的大小和缩放的,由于它在现代浏览器,特别是 Mobile 端浏览器非常常用-->\n <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">\n \n <!--设置网页的过期时间-->\n <meta http-equiv="expires" content="Fri May 13 2019 21:39:42 GMT+0800 (CST)" \u002F>\n \n <!--设置页面使用的字符集-->\n <meta http-equiv="content-Type" content="text\u002Fhtml;charset=gb2312" \u002F>\n \n <!--强制页面在当前窗口以独立页面显示-->\n <meta http-equiv="Window-target" content="top" \u002F>\n \n <!--设置禁止浏览器从本地缓存中访问页面-->\n <meta http-equiv="Pragma" content="no-cache" \u002F>\n \n <!--文档兼容模式的定义,从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置-->\n <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n <!--以下代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8\u002F9都会以IE7引擎来渲染页面-->\n <meta http-equiv="X-UA-Compatible" content="IE=7"> \n <!--以下代码告诉IE浏览器,IE8\u002F9都会以IE8引擎来渲染页面-->\n <meta http-equiv="X-UA-Compatible" content="IE=8"> \n <!--代码告诉IE浏览器,IE8\u002F9及以后的版本都会以最高版本IE来渲染页面-->\n <meta http-equiv="X-UA-Compatible" content="IE=edge"> \n <!--以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame-->\n <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> \n <meta http-equiv="X-UA-Compatible" content="IE=7,9"> \n <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">\n \n <!--DNS预解析是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度。DNS Prefetch应该尽量的放在网页的前面,推荐放在<meta charset=”\u002F>后面。可以减少DNS的请求次数,进行DNS预先获取-->\n <meta http-equiv="x-dns-prefetch-control" content="on">\n <link rel="dns-prefetch" href="https:\u002F\u002Fmy.oschina.net\u002F\u002Fimg.alicdn.com">\n\n <title>HTML学习<\u002Ftitle>\n<\u002Fhead>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cbase\u003E标签\n========\n\n\u003Cp\u003E\u003Cstrong\u003E常用属性:\u003C\u002Fstrong\u003E          \u003Cstrong\u003E[href]:\u003C\u002Fstrong\u003E 该属性指定了页面上所有链接的默认URL,换句话说,文档所有url在调用资源时都会先去找他要地址,不论本身是否定义了url,可理解为url拼接          \u003Cstrong\u003E[target]:\u003C\u002Fstrong\u003E 该属性指定了页面上所有打开新页面的方式 \u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E 为页面上的所有的\u003Cstrong\u003E相对链接\u003C\u002Fstrong\u003E规定\u003Cstrong\u003E默认URL\u003C\u002Fstrong\u003E或\u003Cstrong\u003E默认目标\u003C\u002Fstrong\u003E \u003Cstrong\u003E说明:\u003C\u002Fstrong\u003E 如果使用了该标签,则\u003Cstrong\u003E必须具备href属性\u003C\u002Fstrong\u003E或者\u003Cstrong\u003Etarget属性\u003C\u002Fstrong\u003E或者\u003Cstrong\u003E两个属性都具备\u003C\u002Fstrong\u003E,另外target会被行内的target属性覆盖掉 \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 不支持\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <meta charset="UTF-8"\u002F>\n <title>HTML学习<\u002Ftitle>\n <base href="http:\u002F\u002Flocalhost\u002F8080\u002Fdemo\u002F" target="_blank"\u002F>\n<\u002Fhead>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Ctitle\u003E标签\n=========\n\n\u003Cp\u003E\u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E         1.定义浏览器工具栏中的标题         2.提供页面被添加到收藏夹时的标题         3.显示在搜索引擎结果中的页面标题 \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 不支持 \u003Cstrong\u003E注意:\u003C\u002Fstrong\u003E          1.一个HTML文档中\u003Cstrong\u003E不能\u003C\u002Fstrong\u003E有\u003Cstrong\u003E一个以上\u003C\u002Fstrong\u003E的title标签          2.如果遗漏了title标签,文档作为 HTML 是\u003Cstrong\u003E无效\u003C\u002Fstrong\u003E的\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <meta charset="UTF-8"\u002F>\n <title>HTML学习<\u002Ftitle>\n<\u002Fhead>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cbody\u003E标签\n========\n\n\u003Cp\u003E\u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E          标签定义文档的\u003Cstrong\u003E主体\u003C\u002Fstrong\u003E \u003Cstrong\u003E说明:\u003C\u002Fstrong\u003E          该标签包含文档\u003Cstrong\u003E对外可见\u003C\u002Fstrong\u003E的所有内容(比如文本、超链接、图像、表格和列表等等) \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E注意:\u003C\u002Fstrong\u003E          1.在一个HTML文档中,只允许\u003Cstrong\u003E存在一个\u003C\u002Fstrong\u003E,虽然文档有时在该标签\u003Cstrong\u003E不唯一\u003C\u002Fstrong\u003E的情况下也能正常显示(那是因为现代浏览器容错机制较好),但放在\u003Cstrong\u003E老版本浏览器\u003C\u002Fstrong\u003E上则会崩溃\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <title>HTML学习<\u002Ftitle>\n<\u002Fhead>\n<body>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Ch1\u003E-\u003Ch6\u003E标签\n===========\n\n\u003Cp\u003E\u003Cstrong\u003E类别:\u003C\u002Fstrong\u003E          容器级标签 \u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E          被用来定义整篇文档以及\u003Cstrong\u003Earticle、section\u003C\u002Fstrong\u003E等标签中的标题 \u003Cstrong\u003E说明:\u003C\u002Fstrong\u003E          h1定义\u003Cstrong\u003E重要等级最高\u003C\u002Fstrong\u003E的标题。h6定义\u003Cstrong\u003E重要等级最低\u003C\u002Fstrong\u003E的标题 \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 支持\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <title>HTML学习<\u002Ftitle>\n<\u002Fhead>\n<body>\n <h1>这是一级标题<\u002Fh1>\n <h2>这是二级标题<\u002Fh2>\n <h3>这是三级标题<\u002Fh4>\n <h4>这是四级标题<\u002Fh4>\n <h5>这是五级标题<\u002Fh5>\n <h6>这是六级标题<\u002Fh6>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003E标签\n=====\n\n\u003Cp\u003E\u003Cstrong\u003E类别:\u003C\u002Fstrong\u003E          容器级标签 \u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E          被用来定义一个段落 \u003Cstrong\u003E说明:\u003C\u002Fstrong\u003E          元素会自动\u003Cstrong\u003E在该段落上下创建一些空白\u003C\u002Fstrong\u003E。浏览器会自动添加这些空间,也可以在 \u003Cstrong\u003E样式表(CSS)\u003C\u002Fstrong\u003E 中进行控制 \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 支持\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <title>HTML学习<\u002Ftitle>\n<\u002Fhead>\n<body>\n <p>In a sense we've come to our nation's capital to cash a check. When the architects of ourrepublic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."<\u002Fp>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Ch1 id=\"标签-1\"\u003E\u003Cbr\u003E标签\u003C\u002Fh1\u003E\n\u003Cp\u003E\u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E          被用来插入一个简单的\u003Cstrong\u003E换行符\u003C\u002Fstrong\u003E \u003Cstrong\u003E说明:\u003C\u002Fstrong\u003E          应该使用br标签来\u003Cstrong\u003E输入空行\u003C\u002Fstrong\u003E,而不是\u003Cstrong\u003E分割段落\u003C\u002Fstrong\u003E \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 支持\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <title>HTML学习<\u002Ftitle>\n<\u002Fhead>\n<body>\n <p>In a sense we've come to our nation's capital to cash a check. When the architects of ourrepublic wrote the magnificent words of the Constitution and the Declaration<br\u002F>of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men,<br\u002F>would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her<br\u002F>citizens of color are concerned. Instead of honoring this sacred obligation, America has given<br\u002F>the Negro people a bad check, a check which has come back marked "insufficient funds."<\u002Fp>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003Chr\u003E标签\n======\n\n\u003Cp\u003E\u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E          该标签显示为一条\u003Cstrong\u003E水平线\u003C\u002Fstrong\u003E,用来定义HTML页面中的\u003Cstrong\u003E主题变化\u003C\u002Fstrong\u003E(比如话题的转移) \u003Cstrong\u003E说明:\u003C\u002Fstrong\u003E          标签仅仅显示为\u003Cstrong\u003E一条水平线\u003C\u002Fstrong\u003E,可以用\u003Cstrong\u003ECSS\u003C\u002Fstrong\u003E控制它 \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 支持\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <title>HTML学习<\u002Ftitle>\n<\u002Fhead>\n<body>\n 你<hr\u002F>\n 好<hr\u002F>\n 啊<hr\u002F>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C!-- --\u003E标签\n\u003Cp\u003E==========\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003E作用:\u003C\u002Fstrong\u003E          用来在源文档中插入\u003Cstrong\u003E注释\u003C\u002Fstrong\u003E。注释\u003Cstrong\u003E不会\u003C\u002Fstrong\u003E在\u003Cstrong\u003E浏览器\u003C\u002Fstrong\u003E中\u003Cstrong\u003E显示\u003C\u002Fstrong\u003E \u003Cstrong\u003E说明:\u003C\u002Fstrong\u003E          对代码进行解释,这样做\u003Cstrong\u003E有助于\u003C\u002Fstrong\u003E您在以后的时间\u003Cstrong\u003E对代码的编辑\u003C\u002Fstrong\u003E。特别是代码量很大的情况下很有用。也可以在注释内容存储针对程序所定制的信息。在这种情况下,这些信息对用户是不可见的,但是对程序来说是可用的 \u003Cstrong\u003E全局属性:\u003C\u002Fstrong\u003E 不支持 \u003Cstrong\u003E事件属性:\u003C\u002Fstrong\u003E 不支持\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <meta charset="UTF-8">\n <title>HTML基础标签学习<\u002Ftitle>\n<\u002Fhead>\n<body>\n <h6 style="border: 1px solid;">这里是标题<\u002Fh6>\n <!-- 这里是注释 -->\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n",tags:"[{\"id\":11387,\"uuid\":\"38116655\",\"name\":\"html代码\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T22:41:24.978614+08:00\",\"updateTime\":\"2022-09-23T22:41:24.978614+08:00\"},{\"id\":13691,\"uuid\":\"21836915\",\"name\":\"html5\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T23:51:28.404783+08:00\",\"updateTime\":\"2022-09-23T23:51:28.404783+08:00\"},{\"id\":11120,\"uuid\":\"51380297\",\"name\":\"前端\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T22:35:22.489653+08:00\",\"updateTime\":\"2022-09-23T22:35:22.489653+08:00\"},{\"id\":11120,\"uuid\":\"51380297\",\"name\":\"前端\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T22:35:22.489653+08:00\",\"updateTime\":\"2022-09-23T22:35:22.489653+08:00\"}]",homeImg:b,createTime:v,updateTime:"1970-01-01T08:00:00+08:00",publishTime:v,readCount:594,favoriteCount:a,zanCount:a,isAuthorBlog:c},otherBlogList:[{uuid:"2026823042",title:"JavPlayer:AI破坏马赛克,大量马赛克破坏版影片流出 "},{uuid:"2766033731",title:"2020年最新可用的磁力搜索引擎&种子搜索网站,持续整理分享 "},{uuid:"9442853740",title:"8个在线接收手机短信验证码的免费网络服务整理 "},{uuid:"2494613557",title:"IDM 激活破解工具 "},{uuid:"1466098846",title:"java.net.ConnectException:Connection timed out:connect 出现连接超时的问题? "}],recommendBlogList:[{uuid:"2802547579",title:"MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1",title2:b,intro:"文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\\mode:sql\\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s",createTime:d,updateTime:d,publishTime:"2021-08-20T13:55:40+08:00",homeImg:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fed6c6174f1775f65a3fbe98488391419.png",readCount:4247,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:w,nicker:w,avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Fcd34cdaab69ede1e2bf28de235151c34.webp",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"1863625810",title:"手写Java HashMap源码",title2:b,intro:"HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22",createTime:d,updateTime:d,publishTime:"2024-07-08T22:15:50.892629+08:00",homeImg:b,readCount:1137,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:"waitrabbit",nicker:"待兔",avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F4f77da7232573922a580077ad6e6e085.jpg",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"3468005401",title:"2020年前端实用代码段,为你的工作保驾护航",title2:b,intro:"有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: \"OK\",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )",createTime:d,updateTime:d,publishTime:"2021-06-03T22:46:22+08:00",homeImg:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fe7130dfd1edf85ccee4a9e73aa0b77dd.jpeg",readCount:2446,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:x,nicker:x,avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Fd4566ad9edfb956dba92fc21f5e1561f.webp",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"6635242566",title:"PhoneGap设置Icon ",title2:b,intro:"参考:http:\u002F\u002Fcordova.apache.org\u002Fdocs\u002Fen\u002Flatest\u002Fconfig\\_ref\u002Fimages.html通过config.xml中的\u003Cicon标签来设置Icon\u003Ciconsrc\"res\u002Fios\u002Ficon.png\"platform\"ios\"width\"57\"height\"57\"densi",createTime:d,updateTime:d,publishTime:"2021-10-11T23:11:02+08:00",homeImg:b,readCount:1011,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:g,nicker:g,avatar:i,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"9449721599",title:"HTML5新标签与javaScript新方法 ",title2:b,intro:"HTML5(0106)1、文档声明\u003C!DOCTYPEhtml2、字符编码设置\u003Cmetacharset\"UTF8\"3、验证(http:\u002F\u002Fvalidator.w3.org\u002F)HTML5新增的语义化标签",createTime:d,updateTime:d,publishTime:"2021-10-11T18:36:46+08:00",homeImg:b,readCount:711,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:g,nicker:g,avatar:i,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"1693963766",title:"KVM调整cpu和内存 ",title2:b,intro:"一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将\u003Cnamecentos7\u003C\u002Fname\u003Cuuid2220a6d1a36a4fbb8523e078b3dfe795\u003C\u002Fuuid",createTime:d,updateTime:d,publishTime:"2021-10-11T20:01:02+08:00",homeImg:b,readCount:1377,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:g,nicker:g,avatar:i,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"1550212549",title:"HTML5优秀的设计 ",title2:b,intro:"今天有幸发现了一篇外国大神写的文章,详细的介绍了HTML的发展过程,以及HTML5的来源,其中也给我纠正了一个问题\\关于DOCTYPYE的真正含义,先把书名发出来,再好好说说这个DOCTYPE的问题,书名《HTML5的设计》。相信很多人都已经知道了\u003C!DOCTYPE html这是HTML5中对于文档类型的规范,DOCTYPE并不是写给浏览器看的(",createTime:d,updateTime:d,publishTime:"2021-10-11T10:09:49+08:00",homeImg:b,readCount:812,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:e,nicker:e,avatar:h,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"2102334911",title:"MySQL部分从库上面因为大量的临时表tmp_table造成慢查询 ",title2:b,intro:"背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_",createTime:d,updateTime:d,publishTime:"2021-10-11T11:24:10+08:00",homeImg:b,readCount:1586,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:e,nicker:e,avatar:h,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"2672879011",title:"HTML学习笔记1.3",title2:b,intro:"定义HTML的文档类型Web世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。HTML也有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确地显示出HTML页面。这就是\u003C!DOCTYPE的用处。\u003C!DOCTYPE声明不是HTML标签,它是指示web浏览器关于页面",createTime:d,updateTime:d,publishTime:"2021-10-11T10:10:18+08:00",homeImg:b,readCount:477,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:e,nicker:e,avatar:h,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"7920817787",title:"Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除",title2:b,intro:"大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这",createTime:d,updateTime:d,publishTime:"2024-01-18T17:34:27.824977+08:00",homeImg:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Faeaded5a375b9d90ad54a2731b017114.png",readCount:559,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:"pdcfighting",nicker:"Python进阶者",avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Fff45645a048833b06e967323e7411c91.webp",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b}],userInfo:{profile:e,avatar:h,nicker:e,level:a,job:b,company:b,sex:j,slogan:"最大的安心是自律温柔和爱自己。",blogCount:12157,fansCount:22,zanCount:1653,followed:c,isZaned:c,isFavorited:c,webEnable:a,website:b,websiteDomain:b,wechatQrcode:b,wechatOfficialAccount:b}},currentCateId:b,recommendSpecialList:[],userAndBlogActionInfo:{},isLoading:c,isFinished:c,searchList:[],isLoadingSearch:c,isFinishedSearch:c,recommendLessonList:[],recommendLessonListByBlog:[{id:72,uuid:"4580339128",userId:y,name:" Android进阶之旅-(NDK实战篇之数据结构算法进阶)",subtitle:"Android进阶之旅,NDK实战篇,带你熟悉数据结构算法",content:b,html:b,price:a,discountAmount:a,status:z,reason:b,level:A,type:j,mark:a,canRefund:a,cover:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F08af0088ed56c89be6016ce919dd4522.png",payCount:44,updatedAt:"2023-09-06T17:28:23.19228+08:00",createdAt:"2023-09-02T11:23:17.85951+08:00",deletedAt:f},{id:73,uuid:"0876290229",userId:y,name:"Android进阶之旅-(NDK实战篇之OpenCV)",subtitle:"Android进阶之旅-(NDK实战篇之OpenCV )",content:b,html:b,price:a,discountAmount:a,status:z,reason:b,level:A,type:j,mark:a,canRefund:a,cover:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Ff07b74871fb5111cb052e25356727aa9.png",payCount:45,updatedAt:"2023-09-06T17:28:35.528252+08:00",createdAt:"2023-09-02T18:34:37.841812+08:00",deletedAt:f}]},special:{mostSpecialCountUserList:[],specialList:[],specialCateList:[],bannerList:[],specialDetail:{},specialDetailList:{},chapterList:[],specialListByCate:[],mySpecialDetail:f,isLoading:c,isFinished:c},tutorial:{bigCateList:[],tutorialData:[],tutorialDetail:{},chapterList:[],tutorialOverview:{}}},serverRendered:u,routePath:"\u002Fp\u002F6766908983",config:{_app:{basePath:"\u002F",assetsPath:"\u002F_nuxt\u002F",cdnURL:f}}}}(0,"",false,"0001-01-01T00:00:00Z","Wesley13",null,"Stella981","https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F46847d754406b0102dee7a1f54d14f92.jfif","https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F1bad3e5246214111b0d7a482fc5beec5.jfif",1,"\u002Fmanage\u002FgetCollectionList","\u002Fmanage\u002FgetMyBlogDetail","\u002Fspecial\u002FupdateSection","\u002Fmanage\u002FgetMySectionDetail","\u002Fspecial\u002FsubscribeSpecial","\u002Fspecial\u002FunSubscribeSpecial","\u002Fspecial\u002FmodifySpecial","\u002Ftutorial\u002FgetTutorialList","\u002Ftutorial\u002FgetTutorialDetail","\u002Faccess\u002FmodifyPassword",true,"2021-10-11T10:09:47+08:00","blmius","Jacquelyn38",7689,30,4));</script><script src="/_nuxt/hw.165.js?t=1727528274054" defer></script><script src="/_nuxt/hw.116.js?t=1727528274054" defer></script><script src="/_nuxt/hw.0.js?t=1727528274054" defer></script><script src="/_nuxt/hw.1.js?t=1727528274054" defer></script><script src="/_nuxt/hw.2.js?t=1727528274054" defer></script><script src="/_nuxt/hw.166.js?t=1727528274054" defer></script><script src="/_nuxt/hw.14.js?t=1727528274054" defer></script><script src="/_nuxt/hw.171.js?t=1727528274054" defer></script><script src="/_nuxt/hw.15.js?t=1727528274054" defer></script> </body> </html>