非零基础自学前端最后一遍一 HTML+CSS 1 你的第一个网页 1.2 HTML语言和基本结构

水深无声 2024-03-26 18:57 38阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  1 你的第一个网页
         *   *  1.2 HTML语言和基本结构
             *   *  1.2.1 认识HTML
                 *  1.2.2 HTML文件的特点 – 扩展名（后缀名）
                 *  1.2.3 HTML文件的特点 – 结构
                 *  1.2.4 改进自己的网页

![在这里插入图片描述][c820bb2d4adb42418ff807cc8c2d930d.png_pic_center]

#### 一 HTML+CSS ####

#### 1 你的第一个网页 ####

##### 1.2 HTML语言和基本结构 #####

###### 1.2.1 认识HTML ######

*  超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
    
     *  HTML元素是构建网站的基石；
 *  什么是标记语言（markup language ）？
    
     *  由无数个标记（标签、tag)组成；
     *  是对某些内容进行特殊的标记，以供其他解释器识别处理；
     *  比如使用<h2></h2>标记的文本会被识别为“标题”进行加粗、文字放大显示；
     *  由标签和内容组成的称为元素（element）
 *  什么是超文本（ HyperText ）呢？
    
     *  表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
     *  还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；

###### 1.2.2 HTML文件的特点 – 扩展名（后缀名） ######

HTML文件的拓展名是.htm.html

*  因历史遗留问题，Win95\\Win98系统的文件拓展名不能超过3字符，所以使用.htm
 *  现在统一使用 .html

###### 1.2.3 HTML文件的特点 – 结构 ######

*  JD官方
    
    ![在这里插入图片描述][081f1bf502a2433d9995eebbea5b7047.png_pic_center]
 *  小米官方
    
    ![在这里插入图片描述][9e3fb56194684978aefe9b89dfca3a7f.png_pic_center]
 *  英雄联盟官网
    
    ![在这里插入图片描述][6acba7fa68b04b6795ab99107bc4ef17.png_pic_center]

![在这里插入图片描述][42d7ea8cb9ef4fd2b692c50b3f2acd14.png_pic_center]

###### 1.2.4 改进自己的网页 ######

修改自己的网页代码，让自己的网页也具备正确的结构

![在这里插入图片描述][5788c49063f44ed9a7ae8ae8e099f821.png_pic_center]

运行效果是一样的，但是我们现在的网站也有正确的结构了

![在这里插入图片描述][94712104b61a4d5fb2106de0d4b36dc3.png_pic_center]

[c820bb2d4adb42418ff807cc8c2d930d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e0b20a2ea4844c8da187228e1b0f2aac.png
[081f1bf502a2433d9995eebbea5b7047.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7f77b45083764d97b556eb893660a0f4.png
[9e3fb56194684978aefe9b89dfca3a7f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7d369531d30b44e4a443c5719de3fe8e.png
[6acba7fa68b04b6795ab99107bc4ef17.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5eaacb61beaf4b65a7eba9b43988b708.png
[42d7ea8cb9ef4fd2b692c50b3f2acd14.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c9bd811616b14c90a37f964005bef203.png
[5788c49063f44ed9a7ae8ae8e099f821.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/05abd4d46aa641809bad9b9c05ab06df.png
[94712104b61a4d5fb2106de0d4b36dc3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e66694fe3faa48648dcb87ee39db395b.png