创建HTML文档之元数据解析

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangpmy/article/details/62887766

HTML文档创建

     1.文档类型声明:<!DOCTYPE HTML> 这是HTML5标准的文档类型声明

             他告诉了浏览器两件事:  本文档处理的是HTML文档

                                                      用来标记文档内容的HTML所属版本(在HTML5中版本号已经不在书写了,浏览器能够自动的探索出这里使用的是HTML5)

     2.html元素  即根元素  此处表示文档HTML部分的开始 

             该元素包含两个子元素 head body

     3.head元素  此处包含着文档的元数据(此处要总结的主要内容)

               元数据向浏览器提供了有关文档内容、标记的信息、js脚本和对外部资源的引用(css样式表)。

           head元素下面所包含的元素由title、base、meta、link、style、script、noscript

             1.title元素 

                  作用:设置文档的标题或者名称。浏览器通常将该元素的内容显示在窗口顶部或者标签页上。

                       每个HTML文档只能有一个,必须有一个title元素

          2.base元素

                  作用:设置基准URL,让html文档的相对链接在此基础进行解析。

                       如果不用此元素,那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。

                       属性:href:设置基准URL              

                                  target    打开该HTML文档的方式

           3.meta元素  用来定义文档的各种元数据

                 属性:name  content charset  http-equiv name属性用来表示元数据的类型  content属性用来提供值

                 用法1   <meta name="Author" content="鹏">   指定当前文档的作者

                               <meta name="Keywords" content="html,前端,哇啦啦">  用来描述当前网页的内容(已经被用来制造假象)可以让搜索引擎通过关键字搜索到

                               <meta name="Description" content="这是一段前端的测试文件,这是漫漫人生路的第一步">  当前也面的说明

                               <meta name="Generator" content="EditPlus®">    用来说明当前文档的生成工具

                               <meta name="application name" content="webworket"/>  如果将HTML网页看作一个应用程序 这里将指明 web程序的名称

                                还有一些扩展值 大家可以去W3C网站去找  例如:

                                <meta  name="robots" content=" noindex"/>  表示不要索引本网页  还可以取值为noarchive 表示不要将本页存档或缓存   nofollow 表示不要顺着本页中的链接继续搜索下去

                 用法2  <meta charset="UTF-8"> 声明字符的编码格式

                 用法3  模拟HTTP标头字段

                            <meta http-equiv="refresh" content="10">  在指定的时间里刷新页面(如果在时间后面添加上一个URL ,则是在指定的时间之后另外再载入一个页面)

                            <meta http-equiv="default-style" content="css1">   指定页面的优先使用样式表,对应的content属性值应该和同一文档中style元素和link元素的title属性值相同

                            <meta http-equiv="content-type" content="text/html charset=utf-8"> 另一种指定文档编码方式的方法

              4.link元素  指定外部资源

                            允许具有的父元素head noscript

                            局部属性 :href 指定link元素指向的资源的URL 

                                             : hreflang   说明所光联的资源使用的语言

                                            :media   指定所关联的内容使用哪种设备

                                            :rel  说明HTML文档所关联资源的关系类型 

                                            :sizes(这是HTML5新属性)指定关联图标的大小

                                            :type 指定所关联资源的MIME类型 可以省

                             rel属性的可取值   stylesheet  载入外部样式表 

                                                          help   链接倒当前文档的说明文档

                                                          author   链接倒当前文档的作者

                                                          prefetch  预先获取一个资源

                                                          icon   指定图标资源

                      ! 如果网站标志文件位于(web服务器的根目录)浏览器会自动请求网站标志文件。所以一般不用link来载入标志文件

               5 . style元素

                          作用:用来定义HTML文档的内嵌CSS样式

                             局部属性:type 由于浏览器只认识css一种机制,所以该值总是 text/css  可以省略

                                           :edia 指定样式适用的媒体,即媒体查询 

                                                       取值:screen 计算机显示器屏幕  print  打印预览的时候   braill盲文设备   aural  语音合成器    tv电视机(media在使用的时候通常会配合 AND NOT ,一起来配合使用  对于一些修饰width height)

                                             For:<style media="screen AND (max-width:500px)" ><style/>  指的是在PC端 屏幕最大宽度为500px的设备使用,媒体查询多用于响应式网页的制作

                          style元素可以出现在HTML文档的各个部分,一个文档可以包含多个style元素,在使用模板引擎生成页面的情况下这个特性很有帮助,可以用页面特有的样式为模板定义样式提供补充

           6. script 元素 

                          作用:在文档中定义脚本或者引用外部脚本

                          局部属性:type (可有可无 浏览器会自动的认为加载了javascript )

                                        :src 指定外部脚本文件的URL

                                        :defer  async(确定啥时候加载解析脚本文件 只可以和src一起使用)

                                        :charset (指定外部资源的编码格式 只可以和src一起使用)

     4.body元素 此元素里面包含着文档内容

 由以上四部分就可以组成基本的HTML文档

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页