摘要?

Alex老师说，网页通过代码来实现?，这些代码由浏览器解释并渲染成我们看到的丰富多彩的页面效果。

这个浏览器就相当于 Python 的解释器，专门负责解释和执行 ( 渲染）网页代码。

写网页的代码是专门的语言，主要分为 Hmtl \ CSS \ JavaScript, 被称为网页开发三剑客，作用如

下：

Html

超文本标记语言（ HyperText Markup Language ，简称： HTML ）是?种用于创建网页的标准标

记语言，主要负责编写页面架构

CSS

CSS (Cascading Style Sheets) 用于渲染 HTML 元素标签的样式。

让你的网页样式变的丰富多彩起来，可以改变字体、颜色、排列方式、背景颜色等

JavaScript

页面脚本语言，可以让你的网页动起来

以上为老师带我对网页架构的初步认识，我也写了人生的第一和第二个web，虽然它们很丑（是真的很丑），但作为起点，还是值得记录的！接下来给大家看看吧

web1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my_first_web_page</title>
    <style type="text/css">
<!--    <link rel="stylesheet" type="text/css" href="text.css">-->
        div{
        border:1px dashed red;
        width:300px;
        position:relative;
        left:300px
        }
        p{
        background-color:yellow;
        font-size:18px;
        font-family:"PingFang HK";
        }

    </style>
</head>
<body>
<div>
    <h2>python基础web_page</h2>
    <h3>info_of_me</h3>
    <h4><span style="color:pink">不行我不会</span></h4>
    <p>
        <b>我是滋滋，最帅的滋滋</b>
    </p>
</div>
<table border="1" cellpadding="10">
    <tr>
        <th>姓名</th>
        <th>age</th>
        <th>学校</th>
        <th>专业</th>
    </tr>
    <tr>
        <td>liang</td>
        <td>19</td>
        <td>nw_university</td>
        <td>mathematics</td>
    </tr>
</table>
<p>这是我的照片</p>
<img src="微信图片_20201030132719.jpg" width="300">
<br>
<a href="https://blog.csdn.net/weixin_53664370?spm=1001.2100.3001.5343 " target="_blank">这是我的博客</a>
<ul>
    <li>zizi</li>
    <li>miemie</li>
    <li>羊
        <ul>
            <li>李狡辩</li>
            <li>美羊羊</li>
            <li>咩咩</li>
        </ul>
    </li>
</ul>
</body>
</html>

?web2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
    <style type="text/css">
        #menu{
        background-color:yellow;
        height:50px
        }
        #side_bar{
        background-color:orange;
        height:500px;
        width:10%;
        float:left
        }
        #content_box{
        background-color:greenyellow;
        height:500px;
        width:70%;
        float:left
        }
        #right_pc{
        font-size:18px;
        width:20%;
        float:left
        }
        #footer{
        background-color:pink;
        height:300px;
        clear:both
        }
    </style>
</head>
<body>
<div id="menu">
    <p>首页 电视 手环 笔记本 家电 路由器 智能服务</p>
</div>
<div id="side_bar">
    <ul>
        <li>手机</li>
        <li>家电</li>
        <li>IOT</li>
        <li>咨询</li>
    </ul>
</div>
<div id="content_box">
    <h2>大广告</h2>
</div>
<div id="right_pc">
    <h3 style="color:blue">品牌列表</h3>
    <ul>
        <li>上新精选</li>
        <li>小米众筹</li>
        <li>有品秒杀</li>
        <li>优品生活</li>
        <li>小米自营</li>
    </ul>
</div>
<div id="footer">
    <h3>footer...</h3>
</div>
</body>
</html>