目录
摘要
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>
以上就是提到的史上最丑的web页面了,主要应用的是一些刚入门的基础知识操作,对布局最最初等的认知,以后还要跟着老师学习更多的知识,搭建更好看更美观的网页!
总结
学习代码真的是一件神奇幸福的事!继续加油