前端知识之HTML内容
web服务本质
import socket
sk = socket.socket()
sk.bind(("127.0.0.1",8080))
sk.listen(5)
while True:
conn,addr = sk.accept()
ret = conn.recv(9000)
print(ret)
conn.send(b"HTTP/1.1 200 OK \r\n\r\nhelle,world")
conn.send(b"HTTP/1.1 200 OK \r\n\r\n")
conn.send(b"hello,world")
with open("text.html","rb") as f:
conn.send(f.read())
conn.close()
打开浏览器:输入:127.0.0.1:8080
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
HTML是什么?
超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。不是编辑语言.
本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
网页文件的扩展名:.html或.htm
html文档结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>
- <!DOCTYPE html>声明为HTML5文档。
- <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
- <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
- <title>、</title>定义了网页标题,在浏览器标题栏显示。
- <body>、</body>之间的文本是可见的网页主体内容。
注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。
HTML标签的格式
- HTML标签是由尖括号包围的关键字,如<html>, <div>等
- HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线。
- 也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等。
- 标签里面可以有若干属性,也可以不带属性。
标签的语法:
- <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个很重要的属性:
- id:定义标签的唯一ID,HTML文档树中唯一
- class:为html元素定义一个或多个类名(classname)(CSS样式类名)
- style:规定元素的行内样式(CSS样式)
<h1 id ="i1" class = "c1 c2 c3" style = "font-size:48px">hello,world!</h1>
HTMLZ注释:
<!--注释内容-->
HTML常用标签
head常用标签
标签 | 意义 |
---|---|
<title></title> | 定义网页标题 |
<style></style> | 定义内部样式表 |
<script></script> | 定义JS代码或引入外部JS文件 |
<link/> | 引入外部样式表文件 |
<meta/> | 定义网页原信息 |
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>这是标题</title> </head>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style>h1{color:red;} </style>
</head>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <script>alert(123)</script> </head>
刷新网页后出现以下结果:
Meta标签
Meta标签介绍:
- <meta>元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
- <meta>标签位于文档的头部,不包含任何内容。
- <meta>提供的信息是用户不可见的。
meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址,注意引号--> <meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="教育Python教育学院">
主要关键字,用于网页搜索.
body常用标签 给用户看的
基本标签:块级标签和内联标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--><hr>
h1-h6
<body> <h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <h4>我是四级标题</h4> <h5>我是五级标题</h5> <h6>我是六级标题</h6> </body>
p:
<p>段落标签</p>
<body> <p>让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...</p> </body>
<a></a>跳转网页
当前页面跳转
<body> <a href="http://www.baidu.com">baidu</a> </body>
<body>
<a href="http://www.baidu.com" target="_self">baidu</a>
</body>
跳转到新的页面打开
<body>
<a href="http://www.baidu.com" target="_blank">baidu</a>
</body>
target:
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
页面内跳转
<body>
<a href="#b1">屠龙宝刀,点击就送</a>
<b id = "b1">加粗</b>
</body>
<body> <b>加粗</b> <i>倾斜</i> <u>下划线</u> <s>删除</s> <hr> 换<br>行 </body>
插入图片
<body> <img src="http://img0.imgtn.bdimg.com/it/u=2518341766,3362522136&fm=26&gp=0.jpg" alt ="美女" > </body>
图片的高度和宽度调整
<body> <img src="http://img0.imgtn.bdimg.com/it/u=2518341766,3362522136&fm=26&gp=0.jpg" weight = "120" height = "120" alt ="美女" > </body>
本地插入图片
<img src="1.jpg" alt ="美女" title="鼠标移动上去" >
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>这是标题</title> 标题
<style>h1{color:red; </style> 形式
<!--<script>alert(123)</script>--> 跳转
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> 关键字
<meta name="description" content="教育Python教育学院">
<!--<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">--> 几秒后跳转新连接
</head>
<body>
<a href="#b1">屠龙宝刀,点击就送</a> 本页面跳转
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3> 字体大小
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
换<br>行 ----浏览器解析只是一个空格
<a href="http://www.baidu.com">baidu</a> 本页面跳转到新的链接
<a href="http://www.baidu.com" target="_self">baidu</a> 本页面跳转到新的链接
<a href="http://www.baidu.com" target="_blank">baidu</a> 跳转到新页面打开链接
<p>让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...
让我掉下眼泪的,不是昨夜的酒,让我依依不舍的.....让我在成都的街头走一走,哦,哦,哦,...</p>
<h1 id ="i1" class = "c1 c2 c3" style = "font-size:48px">hello,world!</h1>
<img src="http://img0.imgtn.bdimg.com/it/u=2518341766,3362522136&fm=26&gp=0.jpg" alt ="美女" > 网页地址插入图片
<img src="http://img0.imgtn.bdimg.com/it/u=2518341766,3362522136&fm=26&gp=0.jpg" weight = "120" height = "120" alt ="美女" > 图片的大小更改
<img src="1.jpg" alt ="美女" title="鼠标移动上去" > 本地内存中插入图片
<hr>
<b>加粗</b>
<b id = "b1">加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除</s>
</body>
</html>
特殊字符
内容 | 对应代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权 | © |
注册 | ® |
<body> <p>b<a</p> 小于号 <p>b>a</p> 大于号 <p> </p> 空格号 <p>©</p> 版权 <p>®</p> 注册 <p>¥</p> 钱 <p>&</p> & </body>
div标签和span标签
div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别:
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意:
关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
p标签不能包含块级标签,p标签也不能包含p标签。
<body>
<div>我是div标签</div>
<span>我是div标签</span>
我不是标签
</body>
总结:
二者没有自己的样式,可以让我们方便的通过css去实现标签的展示
二者区别在于div独占一行,是块级标签,span是内联标签
常用标签的分类
1. 独占一行的 块儿级标签
1. h1~h6
2. p
3. div
4. hr
5. li
6. tr
2. 在一行显示的 行内标签/内联标签
1. a
2. span
3. img
4. b/i/u/s
标签的嵌套
<body> <div> <div>div中的div</div> <p>div中的p标签</p> <a href="">div中的a标签</a> </div> <a href=""> <div>a中的div标签</div> </a> <p> <p>p标签中的p标签</p> <div>p中的div标签</div> </p> </body>
总结:
1. 尽量不要用内联标签包块儿级标签
2. p标签不能嵌套p标签
3. p标签不能嵌套div标签
列表
<body> 无序列表 <ul> <li>111</li> <li>222</li> <li>333</li> </ul>
<ul type="circle">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
type属性:
- disc(实心圆点,默认值)
- circle(空心圆圈)
- square(实心方块)
- none(无样式)
<body> 有序列表 <ol> <li>111</li> <li>222</li> <li>333</li> </ol> <ol type ="A" start ="1"> <li>111</li> <li>222</li> <li>333</li> </ol> </body>
type属性:
- 1 数字列表,默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
标题
<body>
<d1>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</d1>
</body>
表格
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:
<body> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>男</td> <td>打篮球</td> </tr> <tr> <td>小军</td> <td>男</td> <td>踢足球</td> </tr> <tr> <td>小红</td> <td>女</td> <td>跳绳</td> </tr> </tbody> </table> </body>
加框 <body> <table border=""> <thead> <tr> <th>姓名</th> <th>性别</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>男</td> <td>打篮球</td> </tr> <tr> <td>小军</td> <td>男</td> <td>踢足球</td> </tr> <tr> <td>小红</td> <td>女</td> <td>跳绳</td> </tr> </tbody> </table> </body>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)
<body>
<table border="" cellpadding="10" cellspacing="20">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>打篮球</td>
</tr>
<tr>
<td>小军</td>
<td>男</td>
<td>踢足球</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>跳绳</td>
</tr>
</tbody>
</table>
</body>
<body> <table border="" cellpadding="10" cellspacing="20"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>男</td> <td rowspan="2">打篮球</td> </tr> <tr> <td>小军</td> <td>男</td> </tr> <tr> <td colspan="2">小红 女</td> <td>跳绳</td> </tr> </tbody> </table> </body>
form
功能:
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
属性 | 描述 |
---|---|
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集)。 |
action | 规定向何处提交表单的地址(URL)(提交页面)。 |
autocomplete | 规定浏览器应该自动完成表单(默认:开启)。 |
enctype | 规定被提交数据的编码(默认:url-encoded)。 |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET)。 |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标(默认:_self)。 |
input
<input> 元素会根据不同的 type 属性,变化为多种形态。
type属性值 | 表现形式 | 对应代码 |
---|---|---|
text | 单行输入文本 | <input type=text" /> |
password | 密码输入框 | <input type="password" /> |
date | 日期输入框 | <input type="date" /> |
checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
radio | 单选框 | <input type="radio" /> |
submit | 提交按钮 | <input type="submit" value="提交" /> |
reset | 重置按钮 | <input type="reset" value="重置" /> |
button | 普通按钮 | <input type="button" value="普通按钮" /> |
hidden | 隐藏输入框 | <input type="hidden" /> |
file | 文本选择框 | <input type="file" /> |
属性说明:
- name:表单提交时的“键”,注意和id的区别
- value:表单提交时对应项的值
- type="button", "reset", "submit"时,为按钮上显示的文本年内容
- type="text","password","hidden"时,为输入框的初始值
- type="checkbox", "radio", "file",为输入相关联的值
- checked:radio和checkbox默认被选中的项
- readonly:text和password设置只读
- disabled:所有input均适用
select
属性说明:
- multiple:布尔属性,设置后为多选,否则默认单选
- disabled:禁用
- selected:默认选中该项
- value:定义提交时的选项值
分组 <body> <select name="city"> <optgroup label="分组1"> <option value="">111</option> <option value="">222</option> </optgroup> <optgroup label="分组2"> <option value="">333</option> <option value="">444</option> </optgroup> </select> </body>
分组 <body> <select name="city"> <optgroup label="分组1"> <option value="">111</option> <option value="">222</option> </optgroup> <optgroup label="分组2"> <option value="">333</option> <option value="">444</option> </optgroup> </select> </body>
label标签
定义:<label> 标签为 input 元素定义标注(标记)。
说明:
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
textarea多行文本
属性说明:
- name:名称
- rows:行数
- cols:列数
- disabled:禁用
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <form action=""> <label for="i1">用户名:</label> <input type="text" id="i1"> <label>密码: <input type="password"> </label> <input type="date"> <input type="email"> <input type="checkbox"> <hr> <input type="radio">"男 <input type="radio">"女 <hr> <input type="radio" name="gender" >男 <input type="radio" name="gender">女 <!--默认保密--> <input type="radio" name="gender"checked>保密 <hr> <input type="reset" value="重置"> <input type="button" value="按钮"> <hr> </form> <form action="http://127.0.0.1:8080" method="post"> <input type="checkbox" name="hobby" value="basketball">篮球 <!--默认选足球--> <input type="checkbox" name="hobby" value="football" checked="checked">足球 <input type="checkbox" name="hobby" value="billiards">台球 <input type="submit"> <hr> <input type="text" name="aaa"> <input type="submit"> <hr> <select name="city"> <!--默认北京--> <option value="010" selected>北京市</option> <option value="020">上海市</option> <option value="030">广州市</option> </select> <select name="city" multiple=""> <option value="010">北京市</option> <option value="020">上海市</option> <option value="030">广州市</option> </select> <hr> <textarea name="" id="" cols="30" rows="10"></textarea> <hr> <input type="file" name="avatar"> </form> </body> </html>
form表单提交数据的注意事项
1. form标签必须把获取用户输入的标签包起来
2. form不是from, form标签必须有action属性和method
3. form中的获取用户输入的标签必须要有name属性