HTML
1. 一套浏览器认识的规则,,
2. 开发者:
学习html 规则
开发后台程序:
写Html文件(充当模板)
数据库获取数据,然后替换到html文件的指定位置(Web框架)
3.本地测试
找到文件路径,直接浏览器打开
pycharm 打开测试
4.编写HTML文件
doctype对应关系
html标签, 标签内部可以写属性 ==html的标签只能有一个
注释:<!-- 注释的内容 -->
类似于HTML 这种格式,标签,html标签<html>CSDN</html>
标签内部的属性<lang="en">
5.标签分类
自闭和标签
<meta charset="UTF-8">
主动闭合标签
<title > </title>
6.
head标签中
<meta -> 编码,跳转,刷新,关键字,描述,IE兼容
<meta charset="UTF-8">
<!--meta http-equiv="Refresh" content="3"-->
<!--meta http-equiv="Refresh" content="3;Url = https://mp.csdn.net/postedit/81407395"-->
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http - eqiv = "X-UA-Compatible" content = "IE=IE10;IE=IE9;"/>
title标签
<link/>
<style/>
<script>
7 . body 标签
------图标 ; ; > :< ;
------ p和br--------------p标签 做段落 ;;;;;br标签换行
--------------总结——————————
所有的标签分为:
块级标签:div(白板);;H系列标签(加大加粗);p标签 (段落和段落之间有间距);
行内标签: span标签(白板)
标签之间可以嵌套
标签存在的意义,css操作 ,js 操作;
ps:chorme审查元素的使用; 定位 ,查看样式;;
h系列
div
span
input系列
input type = ‘text’ ---name 属性,value = “默认值”
input type = ‘password’ ----name属性,value = “默认值”
input type = ‘submit’ -----value='提交' ,提交按钮,表单
input type = ‘button’ -----按钮
input type = "radio" ---单选框value,name,checked = “checked”,属性(name相同则互斥)
input type = 'checkbox' ---复选框 value , checked = “checked”,name 属性(批量获取数据)
input type ='file' 依赖form表单的一个属性enctype="multipart/form-data"
input type= 'rsset' ---重置
<textarea>默认值<textarea/> ---name属性
select标签 ---name,内部option value,提交到后台
a标签 -----跳转 ;锚;-----href=‘#谋个标签的ID’ 标签的ID不能重复;
img : ----src属性;alt属性;title;
列表: ul (li);ol(li);dl(dt,dd);
表格:table,thead (tr,,,,th);tbody(tr;;td) ;;;colspan=",rowspan='';
lable
用于点击文字,使得关联的标签获取光标
<label for="username">用户名:</label>
<input id="username" type="text" name="user"/>
fieldset (legend)
CSS
1.在标签上设置style属性;
background-color: #2459a2;
height: 48px;
2.写在head里面,style标签中写样式
---id选择区
#i1{
background-color:#2459a2;
height: 48px;
}
-----class 选择器
.名称{
-------------------------
}
<标签 class='名称'> </标签>
-----标签选择器
div{
----------
}
所有的div设置上次样式
-------层级选择器(空格)
.c1 .c2 div{
}
--------------------组合选择器(逗号)
#c1 ,.c2 , div{
}
---------------属性选择器
对选择的标签再通过属性再进行一次筛选
input[type='text']{width:100px;height: 200px;}
ps:优先级,标签上style优先,编写顺序,就近原则
-------------css 样式也可以写在单独文件中
<link rell="stylesheet" href="commons.css"/>
3.注释
/* */
4.边框
----宽度,样式, 颜色(border:4px dotted red )
-----border-left
5height, 高度 百分比%
width, 宽度 像素px,百分比%
text-align:center,水平方向居中
line-height,垂直方向根据标签高度
color,字体颜色
font-size, 字体大小
font-weight--字体加粗
height,width,line-height,color,font-size,font-weight
5.背景
6.float
-------让标签飘起来;块级标签也可以 堆叠
------老子管不住:
<div style="clear:both;"></div>
7.display
display:none;;;让标签消失;
display:inline;
display:block;
display:inline-block;(具有inline属性,默认自己有多少占多少;;具有block,
可以设置设置高度,宽度,padding margin,)
行内标签:无法设置高度,宽度,padding margin,
块级标标签:设置高度,宽度,padding margin,
8.padding margin(0,auto)
--边距,
padding 内边距,
margin 外边距;
9.text-align
---颜色
----属性
<!DOCTYPE html> #默认关系
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href = "https://blog.csdn.net/qq_37951246">CSDNBIOG</a>
</body>
</html>
----20个标签
CSS ----颜色----配置
Web框架本质
对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端。
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'))
client.send(bytes("Hello, Seven",encoding='utf-8'))
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()
<body>
<p>1393043=03290439<br/>219379831939194</p>
<p>456</p>
<p>456</p>
<p>456</p>
<h1>ALIX</h1>
<h2>ALIX</h2>
<h6>ALIX</h6>
<span>Hello</span>
<div>1</div>
<div>2</div>
<div>3</div>
<!--<a href="https://blog.csdn.net/qq_37951246">some >body</a>-->
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ALIX zhang</title>
</head>
<body>
ALIXzhng
<div>
<div id="i1" style="position:fixed;bottom:0;right:0;">zhang</div>
<div></div>
<span></span>
</div>
</body>
<body>
<form action="https://blog.csdn.net/qq_37951246" method="GET">
<input type="text" name="user"/>
<input type="text" name="email"/>
<input type="password"name="pwd"/>
<input type="button"value="登入1"/>
<input type="submit"value="登入2"/>
<!-- {'user':'用户输入用户',‘email’:'xx','pwd':'xx'}-->
</form>
<br/>
<form>
<input type="text"/>
<input type="password"/>
<input type="button"value="登入1"/>
<input type="submit"value="登入2"/>
</form>
</body>
<body>
<form action="https://blog.csdn.net/qq_37951246">
<input type="text" name="query"/>
<input type="submit" name="搜索" />
</form>
</body>
<body>
<form enctype="multipart/form-data">
<div>
<input type="text" name="user"/>
<p>请选择性别:</p>
男:<input type="radio" name="gender" value="1"checked="checked"/>
女:<input type="radio" name="gender" value="2"/>
中:<input type="radio" name="gender"value="3"/>
<p>爱好</p>
篮球:<input type="checkbox"name="favour"value="1"/>
足球:<input type="checkbox" name="favour"value="2"/>
台球:<input type="checkbox"name="favour"value="3"/>
网球:<input type="checkbox"name="favour"value="4"/>
<p>技能</p>
c:<input type="checkbox"name="skill"/>
c++:<input type="checkbox"name="skill"/>
java:<input type="checkbox"/>
python:<input type="checkbox"/>
<p>上传文件</p>
<input type="file"name="fname"/>
</div>
<input type ="submit" value = "提交"/>
<input type ="reset" value = "重置"/>
</form>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
<div>
<select name="city" size="10" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3"selected="selected">青岛</option>
<option value="4">烟台</option>
</select>
<input type="text" name="user"/>
<p>请选择性别:</p>
男:<input type="radio" name="gender" value="1"checked="checked"/>
女:<input type="radio" name="gender" value="2"/>
中:<input type="radio" name="gender"value="3"/>
<p>爱好</p>
篮球:<input type="checkbox"name="favour"value="1"/>
足球:<input type="checkbox" name="favour"value="2"/>
台球:<input type="checkbox"name="favour"value="3"/>
网球:<input type="checkbox"name="favour"value="4"/>
<p>技能</p>
c:<input type="checkbox"name="skill"/>
c++:<input type="checkbox"name="skill"/>
java:<input type="checkbox"/>
python:<input type="checkbox"/>
<p>上传文件</p>
<input type="file"name="fname"/>
</div>
<textarea name="meno"></textarea>
<input type ="submit" value = "提交"/>
<input type ="reset" value = "重置"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height: 600px;">第一章的内容</div>
<div id="i2" style="height: 600px;">第二章的内容</div>
<div id="i3" style="height: 600px;">第三章的内容</div>
<div id="i4" style="height: 600px;">第四章的内容</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://blog.csdn.net/qq_37951246">
<img src="1.jpg" title="小美女"style="height: 300px;width: 300px;" alt="美女">
</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://blog.csdn.net/qq_37951246">
<img src="1.jpg" title="小美女"style="height: 300px;width: 300px;" alt="美女">
</a>
<ul>
<li>ALIX</li>
<li>ALIX</li>
<li>ALIX</li>
<li>ALIX</li>
</ul>
<ol>
<li>ALIX</li>
<li>ALIX</li>
<li>ALIX</li>
<li>ALIX</li>
</ol>
<dl>
<dt>tttt</dt>
<dd>dddd</dd>
<dt>tttt</dt>
<dd>dddd</dd>
<dt>tttt</dt>
<dd>dddd</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<td>主机名</td>
<td>端口</td>
<td>操作</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>8000</td>
<td>
<a href="https://blog.csdn.net/qq_37951246">查看详细</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>8000</td>
<td>第二行,第3列</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>8000</td>
<td>第二行,第3列</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<td>主机名</td>
<td>端口</td>
<td>操作</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>8000</td>
<td>
<a href="https://blog.csdn.net/qq_37951246">查看详细</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>8000</td>
<td>第二行,第3列</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>8000</td>
<td>第二行,第3列</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for="username">用户名:</label>
<input id="username" type="text" name="user"/>
<fieldset>
<legend>登录</legend>
<label for="username">用户名:</label>
<input id="username" type="text" name="user"/>
<br/>
<lable for="pwd">密码:</lable>
<input id="pwd" type="text" name="user"/>
</fieldset>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
#i1{
background-color:#2459a2;
height: 48px;
}
#i2{
background-color:#2459a2;
height: 48px;
}
#i3{
background-color:#2459a2;
height: 48px;
}
.c1{
background-color:#2459a2;
height: 10px
}
*/
/*div{
background-color: black;
color: white;
}*/
span div{
background-color: black;
color: red;
}
#i1,#i2,#i3{
background-color: black;
color: red;
}
input[type='text']{width:100px;height: 200px;}
</style>
</head>
<body>
<div class="c1">22</div>
<span class="c1">2328975290989
<div>2343848209</div>
</span>
<div class="c1">3</div>
<input type="text">
<input type="password">
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rell="stylesheet" href="commons.css"/>
<style>
.c1{
background-color: red;
color:white;
}
.c2{
font-size: 48px;
color:black;
}
</style>
</head>
<body>
<div class="c1 c2" style="color:pink;">148645</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 10px solid red;">26545</div>
<div style="height:48px;
width:80%;
border: 10px solid red;
font-size: 16px;
font-weight: bold;
text-align:center;
line-height: 48px;
">655546566</div>
</body>
</html>
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height:38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto;">
<div class="pg-header">
<div style="float:left;">收藏本站</div>
<div style="float:right;">
<a>登录</a>
<a>注册</a>
</div>
</div>
<div style="width: 300px;border:1px solid red;">
<div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
<div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
<div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
<div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
<div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
<div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--div style="background-color: red;display: inline;">56112312</div>
<span style="background-color: red;display:block;">56551651353</span-->
<span style="display:inline-block;background-color:red;height: 50px;width:60px;">ALIX</span>
<a style="background-color: red;">ZHANG</a>
</body>
</html>