Web之旅—— 初识HTML文档(9)

作者: 葉糖糖 | 来源:发表于2017-10-12 13:57 被阅读49次
    一、HTML基本文档结构(骨架)

    一个符合规范的html文档会包含DOCTYPE、html、head、body这些基本的文档元素。当然即使没有显式的元素标签,网页也是可以显示,但是不建议这么去做。

    1、基础的HTML5文档结构

    <!DOCTYPE html>
    <html lang="en">
    <head></head>
        <body>
        </body>
    </html>
    

    如上代码中演示了,用以确定HTML文档骨架的4种文档元素的使用方法。初学者只有在理解文档元素和元数据元素之后才会更好的掌握基础知识。

    <!DOCTYPE HTML>
    

    !DOCTYPE元素主要有两个作用第一是告诉浏览器,它即将处理的是一份HTML文档;第二是用来标记HTML的版本。通常这样的声明都在文档的第一行。

    <html></html>
    

    html元素是文档的根元素。

    <head></head>
    

    head元素是文档的头部(通俗的理解),在head元素中可以使用title元素和其他的元数据元素,也可以在head中引用js、css和定义js、css。

    <body></body>
    

    body元素(容器)中是文档的展示内容。

    简单的看一个示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <!--元数据元素-->
        <meta charset="UTF-8">
        <!--title元素-->
        <title>HTML5演示</title>
        <!--引入外部js-->
        <script type="text/javascript" src="day2-3.js"></script>
        <!--引入外部css-->
        <link rel="stylesheet" href="day2.css">
    </head>
    <body>
       <a href="###">这是一个普通的超链接</a>
       <br>
       <div>这是一个简单的DIV元素</div>
    </body>
    </html>
    

    2、link元素使用

    正常情况下link会在引入CSS样式的时候使用的比较频繁,其实link元素还可以处理一些有趣的事情,比如预先加载资源文件、添加网页图标。

    <!--添加图标-->
    <link rel="icon" href="web.ico" type="image/x-icon"/>
    

    效果如下图:

    添加图标

    获取预先需要加载的资源。

    <!--预先加载资源-->
    <link rel="prefetch" href="../button.html">
    

    3、使用JavaScript脚本

    在网页上使用脚本的最简单的方式就是直接在页面中编写javascript,为了程序的美观度和开发中的分工合作,更多的是用的是外部javascript文件。

    示例中演示了2种使用方式,学习阶段可以在网页中直接编写脚本,当然为了养成良好的习惯最好将js分离出html页面,采用外部引入的方式使用。

    PS:恭喜小伙伴,又学到一点关于html的小知识。加油,坚持就会有所收获!

    相关文章

      网友评论

        本文标题:Web之旅—— 初识HTML文档(9)

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