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 socketdef 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>
html基础知识介绍
原文地址：http://www.cnblogs.com/goodshipeng/p/7571767.html