1010-1011 前端之html
浏览器
浏览器也是一个客户端
# 这是一个服务器，我们通过浏览器就可以访问的到服务器发送的"hello"
import socket
soc = socket.socket()
soc.bind(('127.0.0.1',8080))
soc.listen(5)
while True:
conn,addr = soc.accept()
data = conn.recv(1024)
conn.send(b"HTTP//1.1 200 ok
") # 必须要加上这一句，不然浏览器不认识
conn.send(b"hello")
conn.close()
浏览器不通过服务器也可以渲染文本
什么是HTML
HTML全称Hyper Text Markup Language，超文本标记语言，是一种描述性的标记语言。
- 超文本：音频、视频、图片
- 标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
HTML的作用
负责描述文档语义的语言
编写html的规范
1、所有标记元素都要正确的嵌套，不能交叉嵌套，例如：<h1><a></a></h1>
2、所有标记都必须小写
3、所有标记都必须关闭
- 双标签：
<b></b> - 单标签：
<img src="URL"/>
4、所有属性值必须加引号。eg：<h1 id="head"></h1>'
5、所有属性必须有值。eg：<a href="01.html" target="_blank">首页</a>
HTML结构
用pycharm新建一个HTML文件，文件会自动生成如下的一个HTML模板
<!DOCTYPE html>
<!--文档声明头，告诉浏览器它应该用什么版本的html去解析以下代码-->
<html lang="en">
<!--文档的开始标记和结束标记，lang="en"表示用英语或者其他国家的语言，在它们之间是文档的头部（head）和主体（body）-->
<head>
<!--定义了HTML文档的开头部分，不会再浏览器的文档窗口显示-->
<meta charset="UTF-8">
<!--HTML的编码格式-->
<title>Title</title>
<!--网页标题，在浏览器标题栏显示-->
</head>
<body>
<!--文本主体，他们之间的文本是可见的网页主题内容-->
</body>
</html>
常用标签
head内常用标签
基本标签
| 标签 | 意义 |
|---|---|
<title></title> |
定义网页标题 |
<style></style> |
定义内部样式表 |
<script></script> |
定义JS代码或引入外部JS文件 |
<link/> |
引入外部样式表文件 |
<meta/> |
定义网页原信息 |
meta标签
<meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/">
<!--2秒过后跳到 https://www.cnblogs.com/yanjiayi098-001 网页-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<!--对网页并没有什么影响，就是给网页关键字,便于搜索引擎机器人查找信息和分类信息用的-->
<meta name="description" content="老男孩教育Python学院">
<!--这个也没有什么影响，就是给网页一个描述,便于搜索引擎机器人查找信息和分类信息用的-->
<meta http-equiv="content-Type" charset=UTF8">
<!--指定文档的编码类型-->
<meta http-equiv="x-ua-compatible" content="IE = edge">
<!--告诉IE以最高级模式渲染文档-->
body内常用标签
1、加粗标签
<b></b>
2 、斜体标签
<i></i>
3、下划线标签
<u></u>
4、标题标签
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
5、换行标签
<br>换行</br>
6、水平线标签
<hr></hr>
7、段落标签
<p>段落</p>
8、图片标签(重点) -->其中的属性
<img src="C:/Users/Lenovo/Desktop/图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时的提示信息">
9、链接标签(重点)
a标签又叫做超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
<a href="网页地址" target="在哪个网页跳转"></a>
属性：href:指定目标网页地址；该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
href="#b1"表示b1是id属性，#b1表示回到id属性为b1的这个位置；
href="body内常用标签.html"表示会跳到body内常用标签.html这个网页； target="_blank"表示重新打开一个网页进行跳转；
target="_self"表示就在当前网页进行跳转
eg:
<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">点我会跳转哦！</a>
<!--target="_blank"表示重新打开一个网页进行跳转-->
<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_self">点我会跳转哦！</a>
<!--target="_self"表示就在当前网页进行跳转-->
<a href="https://www.cnblogs.com/yanjiayi098-001/">点我会跳转哦！</a>
<!--默认target="_self"-->
<a href="#b1">点我回到加粗</a>
<!--b1是id属性，#b1表示回到id属性为b1的这个位置，这个位置就是<b id = "b1">加粗</b> -->
<a href="body内常用标签.html">点我转到这个网页哦！</a>
<!--他会跳到 body内常用标签.html 网页-->
10、无序列表标签(重点)
<ul type="disc"></ul>
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
type属性：
- type="disc"(实心圆点，默认值)
- type="circle"(空心圆圈)
- type="square"(实心方块)
- type="none"(无样式)
11、有序列表标签(重点)
<ol type="1" start="3"></ol>
<ol type="1" start="3">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
属性：type属性：1：数字列表，默认值；A：大写字母；a：小写字母；Ⅰ：大写罗马；i：小写罗马
start属性：start="3" 表示只能写数字，表示从第3个开始
12、标题列表标签
<dl>
<dt>标题1</dt>
<dd>内容</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
13、表格标签(重点)
<table>
<thead> <!--表头-->
<tr> <!--行-->
<th>表内的标题</th>
</tr>
</thead>
<tbody> <!--表标题下的内容-->
<tr>
<td>数据</td> <!--表内的内容-->
</tr>
</tbody>
</table>
属性：
在<table>中设置
border:表格边距
cellpadding:内边距
cellspacing:外边距
像素 百分比
在<td>中设置
rowspan:单元格竖跨多少行(上下合并单元格)
colspan:单元格横跨多少行(左右合并单元格)
特殊字符
html中特殊符号
空格：
>：>
<：<
&：&
¥：¥
版权：©
注册：®
块级标签（div标签）和行内(内联)标签（span标签）
div标签:
<div>
<!--块级标签，无意义，通过CSS样式为其赋予不同的表现-->
</div>
span标签:
<span>
<!--内联标签，无意义，通过CSS样式为其赋予不同的表现-->
</span>
块级标签和行内标签的区别
块级标签：另起一行开始渲染元素
内联标签：不需要另起一行
如果单独在网页中插入这两个元素，不会对页面产生任何的影响，他们是专门为定义CSS样式而生的
注意
1、块级标签可以嵌套内联标签或者某些块级标签
2、内联标签不能嵌套块级标签
3、p标签不能嵌套块级标签，也不能嵌套p标签
form表单（很重点）
form表单功能
- 表单用于向服务器传输数据，从而实现用户与Web服务器的交互
- 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等
- 表单还可以包含textarea、select、fieldset和label标签
form表单属性
| 属性 | 描述 |
|---|---|
| action | 规定向何处提交表单的地址(URL)（提交页面） |
| method | 规定在提交表单时所用的HTTP方法（默认：GET） |
| name | 规定识别表单的名称 |
| target | 规定action属性中地址的目标（默认：_self） |
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集） |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启） |
| enctype | 规定被提交数据的编码（默认：url-encoded） |
| novalidate | 规定浏览器不验证表单 |
表单元素
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
input标签
<input/>元素会根据不同的type属性，变化为多种形态
<form>
姓名：<input value="呵呵" >小可爱<br>
昵称：<input value="哈哈" readonly=""><br>
名字：<input type="text" value="name" disabled=""><br>
密码：<input type="password" value="pwd" size="50"><br>
性别：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="sing">唱
<input type="checkbox" name="love" value="jump">跳
<input type="checkbox" name="love" value="rap">rap
</form>
| 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" /> |
属性说明：
1）type="属性值"：文本类型。属性值可以是：
-
text（默认） -
password：密码类型 -
radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。 -
checkbox：多选按钮，名字相同的按钮作为一组进行选择。 -
checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。 -
hidden：隐藏框，在表单中包含不希望用户看见的信息 -
button：普通按钮，结合js代码进行使用。 -
submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。 -
reset：重置按钮，清空当前表单的内容，并设置为最初的默认值 -
image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。 -
file：文件选择框。
提示：如果要限制上传文件的类型，需要配合JS来实现验证。
对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
2）value="内容"：文本框里的默认内容（已经被填好了的）
3）size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。
4）readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
5）disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。
select标签（下拉标签）
<form>
<select name="city" id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
label标签（非重点）
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
- label 元素不会向用户呈现任何特殊效果。
<label>标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<!--与在<input/>前直接写用户名：作用一样-->
</form>
textarea多行文本框
<textarea name="memo" id="memo" cols="30" rows="10">默认内容</textarea>
属性说明：
- name：名称
- cols：列数
- rows：行数
表单的语义化举例
我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
<form>
<fieldset>
<legend>必填信息</legend>
姓名：<input value="呵呵">逗比
<br>
昵称：<input value="哈哈哈说的就是你" readonly="">
<br>
名字：<input type="text" value="name" disabled="">
<br>
密码：<input type="password" value="pwd" size="50">
<br>
性别：<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
邮箱：<input type="email" name="user_email">
<!--type="email" name="user_email"在提交时会提醒你，必须要符合邮箱的规范-->
</fieldset>
<fieldset>
<legend>其他信息</legend>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="buy">买买买
</fieldset>
</form>
HTML标签总结
1、块级标签：块级大多为结构性标记
- 总是从新的一行开始
- 高度、宽度都是可控的
- 宽度没有设置时，默认为100%
- 块级标签中可以嵌套行内标签和某些块级标签
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<p>...</p> 段落
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
<div>...</div>
2、行内标签：行内大多为描述性标记
- 和其他元素都在一行
- 高度、宽度以及内边距都是不可控的
- 宽高就是内容的高度，不可以改变
- 行内标签只能嵌套行内标签，不能嵌套块级标签
==p标签不能嵌套块级标签，也不能嵌套p标签
<span>...</span>
<a>...</a> 链接
<br> 换行
<b>...</b> 加粗
<strong>...</strong> 加粗
<img > 图片
<i>...</i> 斜体
<em>...</em> 斜体
<del>...</del> 删除线
<u>...</u> 下划线
<input>...</input> 文本框
<textarea>...</textarea> 多行文本
<select>...</select> 下拉列表