非零基础自学前端最后一遍一 HTML+CSS 1 你的第一个网页 1.1 开发自己的第一个网页

偏执的太偏执、 2024-03-26 18:57 45阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  1 你的第一个网页
         *   *  1.1 开发自己的第一个网页
             *   *  1.1.1 开发第一个网页 – 记事本
                 *  1.1.2 案例 – 显示一条新闻

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

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

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

##### 1.1 开发自己的第一个网页 #####

###### 1.1.1 开发第一个网页 – 记事本 ######

*  新建一个.txt的文件
    
     *  在其中添加一些文字，比如HelloWorld
     *  保存文件
        
        ![在这里插入图片描述][ed7e8b05e9da4ecc8f7850cddd4ec060.png_pic_center]
     *  修改文件的扩展名为.html文件
        
        ![在这里插入图片描述][5c416edc78984aab90ea345327c74b9e.png_pic_center]
     *  使用浏览器打开页面
        
        ![在这里插入图片描述][602bf39c333942e89456244f563af074.png_pic_center]
 *  这个网页有什么缺点？
    
     *  只能显示一段普通的文本；
     *  浏览器不知道是否要对这段文本加粗、放大、段落之间的间距；

###### 1.1.2 案例 – 显示一条新闻 ######

如果我们现在有一条新闻需要显示，那么可以通过某些“元素”来告知浏览器这部分内容如何显示。

<h1>蔚来回应新能源车张价潮：目前蔚来没有涨价打算</h1>
    <p>Tech星球3月21日消息，继今年1月份新能源车集体涨价之后，新一轮的新能源车张价潮已经全面爆发。继特斯拉、比亚迪、哪氏汽车官宣涨价之后，3月17日至3月19日晚，小鹏汽车、威冯汽车、零跑汽车等也加入了涨价阵营中。3月19日晚间，理想汽车CEO李想通过社交媒体表示，二季度电池成本上涨的幅度非常离谱。还没涨价的品牌，大部分是张价幅度尚未谈妥，等谈妥后也普遍会立刻涨价。</p>
    <p>对此，蔚来汽车联合创始人、总裁秦力洪告诉好看商业：蔚来不涨价，至少目前还没这个打算。</p>
    <p>据了解，此前特斯拉Model Y)后轮驱动版基础售价上调15060元至31.69万元；哪吒汽车对在售车型价格上调3000-5000元不等；小鹏汽车价格上调幅度为10100-20000元不等：威马汽车综合补贴后售价上调幅度为7000-26000元不等；比亚迪多款新能源汽车价格再次调整，张幅3000-6000元不等。</p>

我们编写的<h2></h2>，<p></p>就是HTML元素；

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

浏览器渲染

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

[5b32edca21684de98d335f098e14bd78.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bb54ca78aa5f42b181b1c1706ce456d4.png
[ed7e8b05e9da4ecc8f7850cddd4ec060.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a5df0b7215874f5da99f15a3e79a191b.png
[5c416edc78984aab90ea345327c74b9e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6ed6df09822c4ceba4de87f9e0752183.png
[602bf39c333942e89456244f563af074.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f3cfccda52f44f22853e7992d02850be.png
[3230b3380a4743f697081aaf748a9fc3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5f08d162bd4548a3bceef6088d71476e.png
[eb6262ad19ae4c09a1c848098827b1d9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/441fc42716bb4d57a618db001dc73d12.png