HTML第一步-理解HTML文档

HTML第一步-理解HTML

今天在这里整理前端体系中看似最简单,却又暗藏玄机的HTML

HTML的前世今生

HTML 的全称是超文本标记语言(HyperText Markup Language),这并不是编程语言而是一种标记语言,通过各种标签来构成一个网页中的内容。

到目前位置,比较有影响力的 HTML 的版本有:

  • 1991年:html
  • 1999年:html4.01
  • 2000年:xhtml1.0(开始趋于标准严格)
  • 2001年:xhtml1.1
  • 2005年:xhtml2.0
  • 2008年:html草案
  • 2014年:html5正式版本
  • 2017年:html5.2(目前普遍使用的版本)

理解HTML文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style></style>
    <link rel="stylesheet" href="">
</head>
<body>
    <!-- body -->
    <div>
        <p>欢迎浏览我的博客</p>
    </div>
    <script></script>
</body>
</html>

文档声明

一份 HTML 文档的第一行应当以文档声明开始:
文档声明的作用是告知浏览器应当以什么方式来解析这份文档,在不同的版本有不同的文档声明:

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

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

<!-- html5 -->
<!DOCTYPE html>

(我拒绝接受需要兼容远古浏览器,并使用 html4/xhtml)

注意: 文档声明并不强制区分大小写,但是上面的例子是推荐的写法

html文档

文档声明之后就是 html 文档的主体部分,以 html 标签包裹,其中有 head 部分和 body 部分。

<html>
    <head>
    </head>
    <body>
    </body>
</html>

head 部分是文档头部, body部分是文档主体。

head文档头部

head 文档头部中包含了 文档元数据 其中包含了文档的一系列属和信息。

<head>
    <meta charset="UTF-8">
    <!-- 在这里定义标题 -->
    <title></title>
    <link rel="stylesheet" href="">
    <style></style>
</head>

其中,除了 title 和 icon (参考文章 -> 文档标题)

元数据的详细内容我们下一篇文章再进行总结

body文档主体

这部分内容是用户真正可以在页面上看到的部分,包含页面上的文本、图片、媒体等等。

<body>
    <!-- body -->
    <div>
        <p>欢迎浏览我的博客</p>
    </div>
    <script></script>
</body>

另外,我们会习惯性的将页面中的 js代码 放在 body的尾部,具体原因请参考前端优化部分~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值