美文网首页我爱编程
HTML文档的基本骨架

HTML文档的基本骨架

作者: 饥人谷_Simon | 来源:发表于2017-11-12 10:32 被阅读0次

    这篇博客是对html基本骨架标签的初步了解,如需深入了解各标签的详细使用,请在MDN(国外网站)查找具体的细节,下面开始进入正题

    html页面最基本的组成

    由于html5的文档类型声明是向下兼容的,所以现在基本都是使用html5的文档类型声明。

    下面是一个html页面最基本的三个标签

    <!DOCTYPE html>       这个声明是告诉浏览器,我的html文档类型是什么

    <html>

        <head></head>

        <body></body>

    </html>

    1.<html></html>

    一个html页面的根元素,所有其他元素都必须是他的子元素

    2.<head></head>

    包含html页面的通用信息,包括如文档标题、文档字符编码类型、文档的引入的脚本和样式等

    3.<body></body>

    页面所有的展示的内容都将放入到这个标签中


    head中常用的标签

    4.<title></title>

    此标签用于定义文档的标题,只可以包含文本(如果写了标签,则标签会被当作字符显示)

    5.<meta>

    此标签通过标签中的属性来声明文档的相关信息

    例如:

    <meta charset="utf-8">      这个声明了我的html文档是使用utf-8编码

    6.<link>

    此标签用来引入一个外部的CSS样式文件,通过href属性来指定样式文件的地址

    7.<script></script>

    此标签用于引入一个外部的JS脚本文件,通过src属性来指定脚本文件的地址,标签中间写的JS代码将不会被执行

    如果要想在页面中直接写CSS样式和脚本代码呢,那么在 <style></style> 之间写入CSS即可,在 <script></script> 写入你的JS代码即可


    body中常用的区块划分标签

    html5出来之前,区块划分都是使用 <div></div> 标签设置一个class来划分一个html页面的各个区块,有了html5之后,就有了更加语义化的标签

    8.<header></header>

    此标签表示一个页面的头部区块

    9.<footer></footer>

    此标签表示一个页面的底部区块

    10.<nav></nav>

    此标签表示一个页面导航区块

    11.<article></article>

    此标签一般表示文章、博客内容等的独立内容区块

    12.<aside></aside>

    此标签一般用于和其余部分有联系,但被单独的拆分出来而不会使整体受影响的区块,通常用于表示侧边栏

    13.<section></section>

    页面除了头部区块和尾部区块,其他区块一般使用这个来表示,并会搭配h1-h6中的标签来辨识每个区块

    14.<address></address>

    此标签一般表示一个联系信息的区块


    总结:

    一个html文档由文档声明和一个根元素html组成,根元素html又由head元素body元素组成, head元素中的元素都是用来表示文档相关通用信息body元素中的元素则是html页面的各个区块。至此,就是本篇博客的全部内容。如此博客中有说的不对的地方欢迎批评指正。

    相关文章

      网友评论

        本文标题:HTML文档的基本骨架

        本文链接:https://www.haomeiwen.com/subject/bnygmxtx.html