【第一部分 | HTML】1：揭露HTML的神秘面纱

我会带着你远行 2023-09-26 09:22 29阅读 0赞

**目录**

| 课程导论

| HTML骨架

| DOCTYPE lang 字符设定

| 标签的学习技巧

--------------------

### | 课程导论 ###

![9d61e5411b384a4f8501ad76d26723b2.png][]

HTML的开发使用 VScode

基本配置：安装插件

![efecf9a01ec5429495ca0a794843c94a.png][]

基本操作：创建新文件、写代码（！快速生成骨架）、Ctrl+-缩放页面

--------------------

### | HTML骨架 ###

![3298643a631d441b9df0eadce4a8fd63.png][]

一个最简单的HTML网页

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        Hello Html
    </body>
    </html>

![5181e9de8ae444999e64ce7eb9b0ade8.png][]

--------------------

### | DOCTYPE lang 字符设定 ###

HTML基本骨架为

![381b61f7feb5453e95f323b046ac7de5.png][]

然而VS自动生成的骨架多了这几行：

从上到下，含义依次是：

第1行：当前页面采用HTML5版本 （必须写在第一行，这个是文档类型声明标签 不属于HTML）

第2行：表示当前页面的默认语言（但是EN，照样可以写英文）

第4行：设置字符集

第5、6行：和移动端页面开发有关，以后再学

--------------------

### | 标签的学习技巧 ###

HTML的标签非常多！

“掌握标签的语义（干什么用的）、标签的位置（放在哪里），然后多加练习” 就OK了

[9d61e5411b384a4f8501ad76d26723b2.png]: https://img-blog.csdnimg.cn/9d61e5411b384a4f8501ad76d26723b2.png
[efecf9a01ec5429495ca0a794843c94a.png]: https://img-blog.csdnimg.cn/efecf9a01ec5429495ca0a794843c94a.png
[3298643a631d441b9df0eadce4a8fd63.png]: https://img-blog.csdnimg.cn/3298643a631d441b9df0eadce4a8fd63.png
[5181e9de8ae444999e64ce7eb9b0ade8.png]: https://img-blog.csdnimg.cn/5181e9de8ae444999e64ce7eb9b0ade8.png
[381b61f7feb5453e95f323b046ac7de5.png]: https://img-blog.csdnimg.cn/381b61f7feb5453e95f323b046ac7de5.png