HTML5之基础、元信息标签

时间:2019-10-21
本文章向大家介绍HTML5之基础、元信息标签，主要包括HTML5之基础、元信息标签使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

<!DOCTYPE>标签

       <!DOCTYPE> 声明位于文档中最前面的位置，处于<html>标签之前。<!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>标签的使用

<!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运行模式都是以浏览器支持的最高标准运行；
           兼容模式：页面以宽松的向后兼容（向老版本兼容）方式显示，模拟老浏览器的行为防止（老）站点无法正常工作。

其他

       <!DOCTYPE html> 是 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 {};

<html>标签

常用属性：
         [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>

<head>标签

作用：
         元素是所有头部元素的容器。
说明：
         该标签内添加了多种内容，这些内容不会展示到页面中去，而对于文档来说却至关重要。它必须包含文档的标题<title>，可以包含脚本(script)、样式(style,link)、 meta(元信息) 以及其他更多的信息。
全局属性： 支持
事件属性： 不支持
注意：
         一个HTML文档只有一个head标签
html <!DOCTYPE html> <html lang="zh-CN"> <head></head> </html>
 

<meta>标签

常用属性：
        [name]： 定义网页关键字、作者、描述等信息，有利于搜索引擎分类和查找
        [content]： 与name或者http-equiv对应，此标签内含有name所声明类型的具体内容
        [charset]： 定义该文档编码所用的字符集，告知浏览器以何种字符集来解析此文档
        [http-equiv]： 把content属性关联到HTTP头部
作用：
        该标签提供了HTML文档的元数据，这些内容同样不会展示到页面中去，对于文档来说同样至关 重要
全局属性： 不支持
事件属性： 不支持
详见： <meta>标签详解

<!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="//img.alicdn.com">

    <title>HTML学习</title>
</head>
</html>

<base>标签

常用属性：
         [href]： 该属性指定了页面上所有链接的默认URL，换句话说，文档所有url在调用资源时都会先去找他要地址，不论本身是否定义了url，可理解为url拼接
         [target]： 该属性指定了页面上所有打开新页面的方式
作用： 为页面上的所有的相对链接规定默认URL或默认目标
说明： 如果使用了该标签，则必须具备href属性或者target属性或者两个属性都具备，另外target会被行内的target属性覆盖掉
全局属性： 支持
事件属性： 不支持

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>HTML学习</title>
    <base href="http://localhost/8080/demo/" target="_blank"/>
</head>
</html>

<title>标签

作用：
        1.定义浏览器工具栏中的标题
        2.提供页面被添加到收藏夹时的标题
        3.显示在搜索引擎结果中的页面标题
全局属性： 支持
事件属性： 不支持
注意：
         1.一个HTML文档中不能有一个以上的title标签
         2.如果遗漏了title标签，文档作为 HTML 是无效的

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>HTML学习</title>
</head>
</html>

<body>标签

作用：
         标签定义文档的主体
说明：
         该标签包含文档对外可见的所有内容（比如文本、超链接、图像、表格和列表等等）
全局属性： 支持
事件属性： 支持
注意：
         1.在一个HTML文档中，只允许存在一个，虽然文档有时在该标签不唯一的情况下也能正常显示（那是因为现代浏览器容错机制较好），但放在老版本浏览器上则会崩溃

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML学习</title>
</head>
<body>
</body>
</html>

<h1>-<h6>标签

类别：
         容器级标签
作用：
         被用来定义整篇文档以及article、section等标签中的标题
说明：
         h1定义重要等级最高的标题。h6定义重要等级最低的标题
全局属性： 支持
事件属性： 支持

<!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>

<p>标签

类别：
         容器级标签
作用：
         被用来定义一个段落
说明：
         元素会自动在该段落上下创建一些空白。浏览器会自动添加这些空间，也可以在 样式表（CSS） 中进行控制
全局属性： 支持
事件属性： 支持

<!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>

<br>标签

作用：
         被用来插入一个简单的换行符
说明：
         应该使用br标签来输入空行，而不是分割段落
全局属性： 支持
事件属性： 支持

<!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>

<hr>标签

作用：
         该标签显示为一条水平线，用来定义HTML页面中的主题变化（比如话题的转移）
说明：
         标签仅仅显示为一条水平线，可以用CSS控制它
全局属性： 支持
事件属性： 支持

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML学习</title>
</head>
<body>
    你<hr/>
    好<hr/>
    啊<hr/>
</body>
</html>

<!-- -->标签

作用：
         用来在源文档中插入注释。注释不会在浏览器中显示
说明：
         对代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。也可以在注释内容存储针对程序所定制的信息。在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的
全局属性： 不支持
事件属性： 不支持

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML基础标签学习</title>
</head>
<body>
    <h6 style="border: 1px solid;">这里是标题</h6>
    <!-- 这里是注释 -->
</body>
</html>

原文地址：https://www.cnblogs.com/wbyang/p/11713351.html

随机文章
WEB前端知识点必读
最近更新