# #### 前端的实现原理 socket
前端包含(html css js jquery bootstrap)
import socket
server = socket.socket()
server.bind(("127.0.0.1",9000))
server.listen()
while True:
conn,add = server.accept()
client_msg = conn.recv(1024)
conn.send(b"HTTP/1.1 200 ok\r\n\r\n <h1> welcome to wangzhen </h1>")
conn.close()
server.close()
<------------------------------------------------------------------------------------------>
第一部分 head 标签
(1)html 文件的基本格式
<!DOCTYPE html> 文档声明 H5 html
<html lang="en"> 识别的语言 en代表英文 zh-CN代表中文
<head>
<meta charset="UTF-8"> 字符集编码charset="UTF-8"标签属性 格式：属性名称='属性值' 规定标签的一些格式啊，效果等等
<title>30期皇家赌场</title>
<meta name="keywords" content="30期皇家赌场，皇家赌场，皇家，">
<meta name="description" content="30期皇家赌场xxx有好多什么。。视频供你观看。。。棋牌游戏。。。">
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
</head>
<body>
<h1>xx</h1> 全封闭标签
<img src="" alt=""> 自封闭标签
</body>
</html>
<----------------------------------------------------------------------------------------------------->
第二部分 body 中常用一些基本标签
<b>加粗</b>
<i>斜体</i>
<br> 换行标签
<u>下划线</u>
<hr> 横线独占一行的标签 效果和<br>标签类似
<s>删除</s> 中横线的效果.例如淘宝中删除原价
<p>段落标签</p>
### h系列标签都是独占一行,包括 h1-h6
<h1>标 题1</h1>
<h2>>标题2</h2>
<h3>标©题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<------------------------------------------------------------------------------------------------------->
第三部分 div和span标签 (最常用的两个标签)
<span>xx1
<b>llll</b>
</span>
<span>xx2</span>
<div>xxdiv</div>
<span>xx3</span>
## 如果想要改变颜色,可以在头部标签中设置格式
<head>
<style>
div{background-color:red;}
span{color:green;}
</style>
</head>
块级标签（行外标签），独占一行：p、h1--h6、hr、div
内联标签（行内标签），不独占一行：b、i、u、s、span,img,a
嵌套规则：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的
p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签
<----------------------------------------------------------------------------------------------------------------------------------------->
第四部分 img标签 和 a标签
img 导入图片标签
相对路径引入
<img src="huluwa.png" alt="这是一个葫芦娃！" title="葫芦娃" width="100" height="1000">
远程路径引入
<img src="https://img30.360buyimg.com/pop/s590x470_jfs/t1/137197/25/3060/100495/5ef56640E7e83da2b/08ab19e40eaf87da.jpg.webp" alt="">
a标签 超链接标签
<a href="http://www.baidu.com" target="_blank">百度</a>
target="_blank" 在浏览器新的标签页打开网址链接
target="_self"在当前标签页打开链接，会覆盖当前页面
通过埋点 来实现回到顶部的操作
埋点，两种方式都可以，a标签name属性，其他标签的id属性，值是不可以重复的
<a name="xx">顶部位置</a> 第一种方式
<div id="xx">顶部位置</div> 第二种方式
<a href="#xx">回到顶部</a> 用来跳转锚点,实现回到顶部的操作
<---------------------------------------------------------------------------------------------------------------------------------->
第五部分 列表标签(ul ol dl)
(1)无序列表
<ul type="none">
<li>富强</li>
<li>小林</li>
<li>王振</li>
</ul>
(2)有序列表
<ol start="2" type="I">
<li>富强</li>
<li>小林</li>
<li>王振</li>
</ol>
(3)标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
<------------------------------------------------------------------------------------------------------------------------------->
第六部分 表格标签
<table border="1" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>王振</td>
<td>39</td>
<td rowspan="2">女人</td> 当rowspan = "2",代表合并 列单元格
</tr>
<tr>
<td>小林</td>
<td>48</td>
<td>女人</td>
</tr>
<tr>
<td colspan="2">富强</td> 当colspan = "2",代表合并 行单元格
<td>48</td>
<td>python</td>
</tr>
</tbody>
</table>
<----------------------------------------------------------------------------------------------------------------------------------->
第七部分 input 标签
用户名： <input type="text" readonly>
密码：<input type="password" disabled> 密码是保密显示
<input type="date"> 显示是日期选择框
### 多选框 type = "checkbox"
name的值相同代表是同一组
爱好：
<input type="checkbox" name="hobby"> 男人
<input type="checkbox" name="hobby" checked> 女人
<input type="checkbox" name="hobby"> 二椅子
### 单选框 type = "radio"
name的值相同代表是同一组
单选性别：
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<input type="submit" value="确定"> # submit 提交按钮 value可以修改值
<input type="reset"> # reset 重置按钮
<input type="button" value="普通按钮"> # button 普通按钮,最好指定值
<input type="hidden"> # hidden 隐藏输入框
<input type="file"> # file 选择文件的选择框
<--------------------------------------------------------------------------------------------------------------------------------->
第八部分 下拉框
### 单选下拉框
<select name="">
<option value="">男人</option>
<option value="">女人</option>
</select>
### 多选下拉框 (加一个multiple即可)
<select name="" multiple>
<option value="">男人</option>
<option value="">女人</option>
</select>
<--------------------------------------------------------------------------------------------------------------------------------->
第九部分 label标签 和 textarea标签
当label里面for的值与input标签里面的值相同时候,就产生了连接标记
效果就是选择username就会直接打开输入框
<label for="username">用户名：</label>
<input id="username" type="text">
### 多行文本输入框 textarea
<textarea name="" id="" cols="10" rows="1"></textarea>
cols = "10" 表示一行最多输入10个字符
rows = "1" 表示最初一行显示
128
06-20
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
