1 前端概要
前端三大利器
1.html 赤裸裸的人
2.css 穿上华丽的衣服
3.js 让人生动起来
2 HTML本质及在web程序中的作用
2.1 介绍
HTML
1.一套规则，浏览器认识的规则
2.开发者：学习HTML规则，写HTML文件（充当模板作用），从数据库获取数据，替换到html指定位置（web框架）
3.本地测试：a.找到文件路径，直接浏览器打开b.pycharm打开测试
2.2 Web应用本质
众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。
Web.py
import socket
def handle_request(client):
buf = client.recv(1024)
client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding=‘utf-8‘))
f = open(‘index.html‘, ‘r‘, encoding=‘utf-8‘)
data = f.read()
f.close()
client.send(data)
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind((‘localhost‘, 8000))
sock.listen(5)
while True:
connection, address = sock.accept()
handle_request(connection)
connection.close()
if __name__ == ‘__main__‘:
main()
index.html
<h1 style=‘background-color:red;‘>HTML入门<h1>
<table border=‘1‘>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
2.3 Html标准格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
3 HTML标签
3.1 head标签
head标，签相当于大脑的标签，外面看不到(除了title标签)
title标签：标题
3.1.1 meta标签
1.页面编码（告诉浏览器是什么编码）
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
2.刷新和跳转
<meta http-equiv="Refresh" Content="30" > <meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com" >
3.关键词
<meta name="keywords" content="网站,知名网站,网络小说" />
4.描述
<meta name="description" content="网络小说..." />
5.X-UA-Compatible
专门为IE浏览器设置
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
3.1.2 title标签
在浏览器器中显示的标题
3.1.3 link标签
链接标签
1.css
<link rel="stylesheet" type="text/css" href="style.css" />
2.icon
<link rel=”shortcut icon” href=”image/favicon.ico”>
3.2 body标签
3.2.1 各种符号
不需要记忆，只需知道
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
3.2.2 p与br标签
p标签：段落 默认段落之间是有间隙的
br标签：换行
<p>北京欢迎您<br />天安门、故宫历史古迹</p> <p>美丽的人文风景</p>
3.2.3 h标签
h标，主要用作标题，自带样式；从h1到h6依次减小
<h1>北京欢迎您</h1> <h2>北京欢迎您</h2> <h3>北京欢迎您</h3> <h4>北京欢迎您</h4> <h5>北京欢迎您</h5> <h6>北京欢迎您</h6>
效果
3.2.4 div标签
块级标签
用的非常广泛；主要作用网页的布局
3.2.5 input系列标签
input系列标签，是做表单必不可少的，主要形式是：<input type="text" name="user" />，主要有以下：
text 文本框
password 密码框
button 普通按钮
submit 提交按钮
radio 单选框
checkbox 多选框
file 附件
reset 重置按钮
form表单，默认是GET提交，是通过url的方式提交
<form action="http://localhost:8888/login">
<input type="text" name="user" />
<input type="password" name="pwd" />
<input type="button" value="登录" />
<input type="submit" value="提交" />
</form>
单选框
<div>
<p>性别：</p>
男：<input type="radio" name="gender" value="1" />
女：<input type="radio" name="gender" value="2" />
</div>
复选框
<div>
<p>爱好：</p>
足球：<input type="checkbox" name="favor" value="1" checked="checked" />
篮球：<input type="checkbox" name="favor" value="1" />
排球：<input type="checkbox" name="favor" value="1" />
</div>
普通按钮，提交，重置
<input type="button" value="普通按钮" /> <input type="submit" value="提交" /> <input type="reset" value="重置" />
3.2.6 textarea
textarea，可以输入多行文本
<textarea name="explain">多行文本输入位置</textarea>
3.2.7 基本下拉框
select标签，是下拉框标签，内部有option value。
基本形式
<select name="course">
<option value="1">语文</option>
<option value="2">数学</option>
<option value="3">政治</option>
<option value="4">物理</option>
</select>
多选下拉框形式
<select name="course" size="5" multiple="multiple">
<option value="1">语文</option>
<option value="2" selected="selected">数学</option>
<option value="3">政治</option>
<option value="4">物理</option>
</select>
3.2.8 a标签
a标签，也就是超链接标签；主要有两个作用：跳转、锚
a标签作为锚点
<div>
<a href="#id1">标题1</a>
<a href="#id2">标题2</a>
<a href="#id3">标题3</a>
<a href="#id4">标题4</a>
<div id="id1" style="height:600px;background-color:yellow">第一部分</div>
<div id="id2" style="height:600px;background-color:red">第二部分</div>
<div id="id3" style="height:600px;background-color:green">第三部分</div>
<div id="id4" style="height:600px;background-color:red">第四部分</div>
</div>
3.2.9 img标签
图片标签，属性：
- src 图片链接
- title 鼠标悬停显示内容
- alt 图片找不到显示内容
- syle 设置图片样式
<a href="http://www.baidu.com">
<img src="images.jpg" style="height:100px;width:100px;" alt="风景图片" />
</a>
3.2.10 列表
列表主要有：
ul li
ol li
dl dt dd
无序列表
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
有序列表
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
分层列表
<dl>
<dt>first</dt>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dt>second</dt>
<dd>ss</dd>
<dd>ss</dd>
<dd>ss</dd>
</dl>
3.2.11 表格
规范的table，包括thead、tbody、tr、th、td
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
</table>
合并单元格
<tr>
<td colspan="2">占两列</td>
<td>111</td>
</tr>
<tr>
<td rowspan="2">占两行</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
</tr>
3.2.12 label标签
label，用户点击文件，使得关联的标签获取光标；通过for，与input创建关联关系
<label for="username">用户名：</label> <input type="text" id="username" name="username" />
3.2.13 fieldset
<fieldset>
<legend>登录</legend>
<label for="username">用户名：</label>
<input id="username" type="text" name="username" />
<br />
<label for="pwd">密码：</label>
<input id="pwd" type="text" name="user" />
</fieldset>