HTML5文件结构、格式、加载

源码下载
在线测试显示效果

不论的你的基础怎么样，不论你是否了解互联网，本教程采用自上而下，先实验代码后解析的教学方法，既照顾没有基础的读者，也照顾有基础的同学，好的教程就像电影一样，虽然不同读者面对的内容一样，不同基础的人看到的不同，但是至少保证所有人自我感觉是理解了，但理解深度取决于你的知识基础和学习认知能力。

1    <!DOCTYPE html>
2    <html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <title>第一个HTML文件</title>
6    </head>
7    <body>
8    <h1>过零丁洋</h1>
9    <p>
10        辛苦遭逢起一经，干戈寥落四周星。
11        <br>
12        山河破碎风飘絮，身世浮沉雨打萍。
13       <br>
14        惶恐滩头说惶恐，零丁洋里叹零丁。
15       <br>
16        人生自古谁无死，留取丹心照汗青。
17   </p>
18   </body>
19   </html>

体验测试

单机上面的"在线测试显示效果"，查看在线显示效果
下载上面的源码文件，解压后你可以查看文件的扩展名是.html吗
右键选择文本编辑器打开该文档，查看代码
右键选择任意浏览器打开该文档，查看显示效果
尝试更改第5行代码title标签里面的文字，查看浏览器上方标题栏位置显示变化
你可以随意找一首诗，去替换第8~16行中的文字，刷新浏览器查看效果
对比在线打开html文件和在本地打开html文档浏览器地址栏显示区别
删掉第11、13、15行的br标签，刷新浏览器查看显示效果

通过上面的测试，我相信不同基础的不同领域的人会有不同的体会，如果从不了解计算机编程和计算机通信，你至少可以感受到，简单的网页设计和普通的word文档编辑一样，所写即所得，并没有太深的逻辑。如果你非常了解计算机编程，对标记语言，解释器概念非常了解，你虽然不了解具体的html标准，但是你会从底层去思考html文档。html文档中的html、head、body、title、h1、p等标签都是超文本语言HTML的语言标准，当你用浏览器打开这个html文档时，浏览器会逐行读取里面的代码，这时候浏览器相当于HTML的解释器，解释器就像翻译机把你写的语句翻译成网页上的文字图像等视觉效果。第一行的<!DOCTYPE html>是文档声明，当浏览器读取到该符号时，知道这是一个遵循HTML5标准的文档，当浏览器阅读到第11、13、15行的br标签，会执行换行操作，可以简单类比word文档编辑时的回车键。具体标签的解释翻译机理不必深究，只需要记住每一个标签对应的显示效果即可，随着时间的推移，本课程会逐渐解释，除非你想写一个浏览器。

文档结构

最外层的标签是html，第2行的html标签是开始标签，最后一行的html标签时闭合标签，html开始结束标签里面包裹的是head和body标签
第3行代码的是head的开始标签，第6行是head结束标签，head标签里面有一些没有包含关系、顺序排列的标签，每个标签都有自己的意义，现在不理解也没有关系，有个印象就可以
第7行代码的是body的开始标签，第17行是body结束标签，多数时候都是body标签里面编辑内容。

基本语法

上面的代码中html、head、body等标签有开始标签语法，有结束标签，称为闭合标签，闭合标签出现的目的是为了实现标签嵌套，第2行html开始标签高速浏览器后面是html代码，最后一行html结束标签告诉浏览器html的代码已经解析完，可以在网页上渲染出来了。
有些标签只有开始标签，属于自闭和标签，比如第四行代码的meta标签，这句话的意思是编码格式为UTF-8，br标签表示换行，没有必要嵌套其他东西，所以没有必要有结束标签
开始标签的格式:<标签名>，结束标签格式:</标签名>
body、h1、p等标签开始标签结束标签以及标签中的内容称为元素，body元素包含h1元素，对于body元素而言h1元素就是子元素。

标签意义

h1：表示标题，第8行代码的h1标签中包裹的就是诗的名字，类似的还有h2~h6，你可以尝试输入不同的标题标签h，查看视觉效果，不同的标题标签浏览器默认的字体大小不同
p：表示段落的意思，上面的代码中整首诗都包含在其中，p标签来源于英文单词paragraph，表示段落的意思。其实标签也可以用汉语的偏旁部首或日语的片假名表示，有母语优势学习压力小，既然为了"国际接轨",大家就老老实实学英语吧。
br:功能是换行，如果把代码里面的br标签全部删掉，整首诗的汉字就会堆在一起

这时候可能你会认为h1标签也可以用p代替啊，为什么要用h表示，从视觉上来看都是显示文字，其实这里有多方面的考量，其一视觉角度，其二SEO角度，你打开一本书可以看到书的标题一般比正文字体大，浏览器也是这样默认，网站部署后，百度或360的搜索引擎读取到h1代码就会知道，里面的文字是文章一级标题，方便他人搜索你的文章。一般桌面软件开发时，GUI的设计并不考虑SEO，互联网是互联一切，自然不能仅仅考虑视觉效果。

文档加载过程

学习过计算机网络的很容易理解的互联网的域名、IP地址、URL等概念，如果你的工作领域用不到底层的网络通信技术，也没必要深入学习，所以在这里仅仅简单解释下，对于普通网页设计 WebAPP开发，WebGL开发已经够用了。大家平时上网都有网址的概念，你可以在网页上随意打开一个链接，可以看到浏览器地址栏的域名都是唯一的，开发好的html文件都放在服务器上，通过域名可以访问服务器，域名后面后缀的URL地址，也就是就是html文件的名字，会告诉服务器把相关的html发送到本地浏览器也就是客户端。这里涉及到域名解析、http、DCP等相关通信问题，如果你不清楚也不必关心，如果你想建立个人站点，申请一个域名，租一个服务器，解析下域名，就可以搞定，即使没有系统学过网络通信技术也没有关系。