pythonpython开发-html和css
智汇君html和css
前端的这些东西能看得懂就可以，有专业的前端人员
html
hyper text mark-up langauge 超文本标记语言
超文本：可以表示图片、视频、音频、链接等
(标记)标签：<标签名></标签名>，大多数标签都成对出现(双标签)
基本结构
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>网页标题</title>
</head>
<body>
显示内容
</body>
</html>
|
文件后缀：.html .htm
vs
插件
chinese language pack for vs
open in browser(安装后快捷键alt+B打开浏览器)
快捷键
1
2
3
4
5
6
7
8
| 注释：ctrl + /
文件->自动保存
快速创建标签：
- 标签名：属性
- 标签名.属性名*3 #div.box1*3 创建三个带box1类属性class的div标签
- div>div*2
|
标签
成对出现的标签里面都可以包含一些其他标签
单标签没有内容
div标签容器标签，可以包含其它标签
标签不区分大小写，推荐小写
有的标签可以带有属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<img src="images/pic.jpg" alt="图片加载失败会显示">
<br> 换行
<hr> 水平分割线
<h1>
</h1>
<h6>
</h6>
<div>
</div>
<p> 段落标签
</p>
<a href="http://www.baidu.com">百度网</a>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>h1</h1>
<h6>h6</h6>
<div>div</div>
<p>p</p>
<hr>
<img src="images/图片.jpg" alt="图片加载失败会显示">
<img src="images/图片.jpg" alt="图片加载失败会显示">
<a href="www.baidu.com">百度</a>
</body>
</html>
|
资源路径
相对路径：推荐用相对路径，绝对路径把项目拷贝给别人不一定能使用
绝对路径
列表
无序列表
1
2
3
4
5
| <ul>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
|
有序列表
1
2
3
4
5
| <ol>
<li>x</li>
<li>y</li>
<li>z</li>
</ol>
|
表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Address</th>
<th>Email</th>
<th>Age</th>
<th>Language</th>
<th>Create Date</th>
<th></th>
<th></th>
</tr>
</thead>
</table>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>田勇</td>
<td>男</td>
<td>44</td>
</tr>
</table>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>田勇</td>
<td>男</td>
<td>44</td>
</tr>
</tbody>
</table>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table style="border: 1px solid black; border-collapse: collapse;">
<thead>
<tr>
<th style="border: 1px solid black;">姓名</th>
<th style="border: 1px solid black;">性别</th>
<th style="border: 1px solid black;">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black;">田勇</td>
<td style="border: 1px solid black;">男</td>
<td style="border: 1px solid black;">44</td>
</tr>
</tbody>
</table>
|
表单(重要)
收集用户输入数据，并且可以提交到web服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <form></form> 标签表示表单标签，定义整体的表单区域
<label></label> 标签表示表单元素的文字标注标签·定义文字标注
<textarea></textarea> 标签表示表单元素的多行文本输入框标签定义多行文本输入框
<select> </select> 标签表示表单元素的下拉列表标签定义下拉列表
<option>标签与<select>标签配合定义下拉列表中的选项
<input> 标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
type属性:
type='text'定义单行文本输入框
type='password'定义密码输入框
type='radio'定义单选框
type='checkbox'定义复选框
type='file'定义上传文件
type='submit'定义提交按钮
type='reset'定义重置按钮
type="button"定义一个普通按钮
|
name属性是用于表单提交数据时的参数名，服务端根据它的设定的值去取输入的值
value：表单元素的值，用于作为提交表单数据时参数名对应的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p>
<label for="name">用户名：</label>
<input type="text" name="username" id="name">
</p>
<p>
<label>密码：</label>
<input type="password" name="password" id="">
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" id="" value="0">男
<input type="radio" name="gender" id="" value="1">女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="python" id="">python
<input type="checkbox" name="like" value="java" id="">java
<input type="checkbox" name="like" value="c" id="">c
</p>
<p>
<label>照片：</label>
<input type="file" name="photo" id="">
</p>
<p>
<label>个人描述</label>
<textarea name="about"></textarea>
</p>
<p>
<label for="">籍贯：</label>
<select name="site" id="">
<option value="0">北京</option>
<option value="1">重庆</option>
<option value="2">广东</option>
<option value="3">上海</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</p>
</form>
</body>
</html>
|
get方式提交数据到web服务器以地址栏的方式提交给服务器不安全，能看到提交的数据，严谨的说是以查询参数的方式提交给web服务器
post方式提交表单数据会放到请求体里面
get和post方式提交表单数据都是以http协议的方式提交数据给web服务器
css
css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言
css的作用
1.美化界面，比如:设置标签文字大小、颜色、字体加粗等样式。
2.控制页面布局.比如:设置浮动、定位等样式
css基本语法
选择器{
样式规则
}
样式规则:
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
…
选择器:是用来选择标签的，选出来以后给标签加样式。
css样式表可以由一个或者多个选择器组成
1
2
3
4
5
| div{
width:100px;
height:100px;
backgroud:gold;
}
|
注释
css里的注释是/* xxx */
css引入的三种方式
1.行内式
1
2
3
| <div style="width:100px; height:100px; backgroud:red">
hello
</div>
|
2.内嵌式(内部样式)
优点:在同一个页面内部便于复用和维护。缺点:在多个页面之间的可重用性不够高。
1
2
3
4
5
6
7
| <head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
|
实例：
1
| <link rel="stylesheet" type="text/css" href="css/main.css">
|
3.外链式
将css代码写在一个单独的css件中，在
标签中使用标签直接引入该文件到页面
优点:使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。缺点:css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。
css引入方式选择
1.行内式几乎不用
2.内嵌式在学习css样式的阶段便用
3.外链式在公司开发的阶段使用，可以对css样式和html页面分别进行开发
Document
