python 入门学习
一周掌握 python 入门知识
学习目标：Day 7
Web开发初探
1、 认识网页开发三剑客
2、认识HTML
3、初识CSS样式
4、网页布局
5、HTML表单
6、CSS常用样式
学习内容：
1、网页开发三剑客
- Html 超文本标记语言：是一种用于创建网页的标准标记语言。主要负责编写页面架构，就像建房子时，建的毛坯房。
- CSS ：用于渲染HTML元素标签的样式。让你的网页样式变得丰富多彩，可以改变字体、颜色、排列方式、背景颜色等。就像给你的毛坯房做装修。
- JavaScript :网络脚本语言，可以让你的网页动起来，比如一张图片鼠标放上去自动变大，一个按钮自动变色、提交表单时或填错了字段会提示报错等，都是JavaScript实现的。
2、HTML — 超文本标记语言
- 不是编程语言，是一种标记语言，是一套标记标签
- 使用标记标签来描述网络
- HTML文档包含了HTML标签及文本内容
- HTML文档也叫作web页面
-
HTML标签（HTML tag）：是由尖括号包围的关键词，比如<html> ;它通常是成对出现的，比如<b>和</b> ,标签对中第一个标签是开始标签，第二个是结束标签
-
HTML网页结构初识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zypf's first web page</title>
</head>
<body>
<h2>zypf的第一篇web网页</h2>
<h3>balbala.....</h3>
<p>好好学习，天天向上</p>
</body>
</html>
- HTML常用元素
HTML标题
HTML段落
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zypf's first web page</title>
</head>
<body>
<h2>zypf的第一篇web网页</h2>
<h3>balbala.....</h3>
<p>好好学习，天天向上</p>
<a href="https://blog.csdn.net/zypf_lover" target="_blank ">zypf_Blogspot</a>
</body>
</html>
//加target会重新打开一个页面进行跳转
<img src="Goodluck.jpg" width="600px" >
显示图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何写网页</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
<img src="Goodluck.jpg" width="600" height="500">
</body>
</html>
自动换行：
<br>
HTML 表格
<table border="1" cellpadding="10px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<th>zypf</th>
<th>18</th>
<th>女</th>
</tr>
</table>
列表
<ol>
<li>strawberry</li>
<li>coffee</li>
<li>milk</li>
</ol>
<ol start="20">
<li>strawberry</li>
<li>coffee</li>
<li>milk</li>
</ol>
<ul>
<li>strawberry</li>
<li>coffee</li>
<li>milk</li>
</ul>
运行效果：
<ul>
<li>strawberry</li>
<li>coffee
<ul>
<li>星巴克</li>
<li>瑞幸</li>
</ul>
</li>
<li>milk</li>
</ul>
Div区块元素
HTML区块元素：大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
HTML内联元素：在显示时通常不会以新行开始。
<ol>
<li>strawberry</li>
<li><b>coffee</b></li>
<li>milk</li>
</ol>
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zypf's first web page</title>
</head>
<body>
<div style="border: 1px dashed red;width:800px;margin-bottom: 50px;position:relative;left:350px">
<h2>zypf的第一篇web网页</h2>
<h3>balbala.....</h3>
<p>好好学习，天天向上</p>
<a href="https://blog.csdn.net/zypf_lover" target="_blank ">zypf_Blogspot</a>
<br>
<img src="Goodluck.jpg" width="600px" >
</div>
<table border="1" cellpadding="10px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<th>zypf</th>
<th>18</th>
<th>女</th>
</tr>
</table>
<ol>
<li>strawberry</li>
<li><b>coffee</b></li>
<li>milk</li>
</ol>
<ol start="20">
<li>strawberry</li>
<li>coffee</li>
<li>milk</li>
</ol>
<ul>
<li>strawberry</li>
<li>coffee
<ul>
<li>星巴克</li>
<li>瑞幸</li>
</ul>
</li>
<li>milk</li>
</ul>
</body>
</html>
3、CSS样式初识
-
内部样式表
-
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择，使用外部样式表，你就可以通过它来改变整个站点的外观。
<head>
<meta charset="UTF-8">
<title>zypf's first web page</title>
<style type="text/css">
div {
border: 1px dashed red;
width:800px;
margin-bottom: 50px;
position:relative;
left:350px
}
p {
background-color: yellow;
font-size: 18px;
font-family:"PingFang HK"
}
</style>
</head>
也可从外部的模块去引用CSS样式：
<head>
<meta charset="UTF-8">
<title>zypf's first web page</title>
<style type="text/css">
/*div {*/
/* border: 1px dashed red;*/
/* width:800px;*/
/* margin-bottom: 50px;*/
/* position:relative;*/
/* left:350px*/
/*}*/
/*p {*/
/* background-color: yellow;*/
/* font-size: 18px;*/
/* font-family:"PingFang HK"*/
/*}*/
</style>
<link rel="stylesheet" type="text/css" href="CSS样式_test.css"
</head>
4、网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米官网</title>
<style type="text/css">
#menu { /*前边加#号就是用id来选择这个标签*/
background-color: darkgreen;
height:80px;
}
#side_bar { /*前边加#号就是用id来选择这个标签*/
background-color: yellow;
height:500px;
width:15%;
float: left;/*让底下的浮动起来*/
}
#content_box { /*前边加#号就是用id来选择这个标签*/
background-color: cadetblue;
height:800px;
width:85%;
float: left;
}
#footer { /*前边加#号就是用id来选择这个标签*/
background-color: black;
height:100px;
clear:both; /*不再按浮动排列*/
}
</style>
</head>
<body>
<div id="menu">
<p>首页</p>
<p>电视</p>
</div>
<div id="side_bar">
<ul>
<li>手机</li>
<li>电视</li>
<li>小家电</li>
</ul>
</div>
<div id="content_box">
<h2>大广告</h2>
</div>
<div id="footer">
<h3>footer...</h3>
</div>
</body>
</html>
5、HTML表单
- 文本框
- 文本域
- 下拉列表
- 单选、复选
- 按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<form action="/test/url/"> /*提交数据到这个网址*/
用户名:<input type="text" name="username"> <br>
密码:<input type="password" name="password"><br>
年龄:<input type="number" name="age"><br>
出生日期:<input type="date"><br>
个人介绍:<br>
<textarea cols="50" row="5" placeholder="请输入不少于50字的个人介绍..."></textarea><br>
性别:<input type="radio">男<input type="radio">女
<br>
<input type="submit" value="注册">
爱好:
<input type="checkbox" name="hob" value="basketball">basketball
<input type="checkbox" name="hob" value="football">football
<input type="checkbox" name="hob" value="dance">dance
<input type="checkbox" name="hob" value="sing">sing
<fieldset>
<legend>Personalia:</legend>
Name:<input type="text"><br>
Email:<input type="text"><br>
Date of birth:<input type="text">
所在专业
<select name="specialty">
<option value="1">计本</option>
<option value="2">网工</option>
<option value="3">软件</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>
5、CSS常用样式
- Id \ class选择器
id 选择器：全局只定义一个就好了，会覆盖
class选择器
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#username {
background-color: yellow;
}
.class_name { /*类选择器*/
background-color: orange;
border :2px dashed blueviolet;
}
</style>
</head>
<body>
<div>
<form action="/test/url/">
用户名:<input id="username" type="text" name="username"> <br>
密码:<input type="password" name="password"><br>
年龄:<input class="class_name" type="number" name="age"><br>
出生日期:<input type="date"><br>
个人介绍:<br>
<textarea cols="50" row="5" placeholder="请输入不少于50字的个人介绍..."></textarea><br>
<fieldset>
<legend>Personalia:</legend>
Name:<input type="text"><br>
Email:<input class="class_name" type="text"><br>
Date of birth:<input type="text">
</select>
</fieldset>
</form>
</div>
</body>
</html>
- 元素名选择器
注意：id & class 选择器的样式优先级，大于 元素名选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#username {
background-color: yellow;
}
.class_name { /*类选择器*/
background-color: orange;
border :2px dashed blueviolet;
}
input { /*给所有的input标签改样式*/
background-color: blue;
}
</style>
</head>
- 组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#layer1 {
height:500px;
width:60%;
padding:30px; /*内边距*/
border: 1px dashed blue;
}
#layer2 {
height:400px;
padding:30px; /*内边距*/
border: 1px dashed yellow;
}
#layer3 {
height:300px;
padding:30px; /*内边距*/
border: 1px dashed red;
}
</style>
</head>
<body>
<div id="layer1">
<h1>first layer.</h1>
<p>第一层</p>
<div id="layer2">
<p>第二层</p>
<h2>layer 2 h2</h2>
<div id="layer3">
<p>第三层</p>
<h3>layer 3 h3</h3>
</div>
</div>
</div>
<p>我不在任何的div里</p>
</body>
</html>
后代选择器
子元素选择器
相邻兄弟选择器
多个元素选择器
-
盒子模型
-
常用CSS属性
（待写）
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
