HTML
昨日复习
- 进程池与线程池的常见方法
- 池的创建：直接导入模块即可
- 任务提交：pool.submit()
- 异步回调机制：pool.submit().add_done_callback()
- 返回值：.redult
- 协程的概念及代码实现
- 进程：资源单位
- 线程：工作单位
- 协程：意淫单位(单线程下实现并发)
- 前端简介
- 前端与后端的概念
- 前端学习的思路
- 前端三剑客
- HTML，CSS，JS
- HTTP协议
- 由来：因为浏览器要充当各种服务端的客户端，但客户端代码都不相同，那么怎么才能实现呢？
- 解决：浏览器可以做成可以兼容各种服务端的客服端，不同用户通过浏览器访问不同客户端，但这样浏览器太消耗资源了不可取，那怎么办呢？这时候出现了THHP协议，大家的服务端链接浏览器的方式统一起来(统一思想)
- 方案：
- 四大特性：
- 基于请求响应（你球球我，我回应你）
- 基于TCP，IP作用于应用层之上（通过网络传输和IP地址找到对方（你顺着网线打我啊））
- 无状态（打多少次都记不住）
- 无连接（打完你还不报复）
- 数据格式：
- 浏览器给服务端
- 请求首行（请求状态，请求方式）
- 请求头（一堆K:V键值对）
- 这是是空格PS：\r\n（这么写的）
- 请求体（求我要带礼物的，可以没有）
- 服务端给浏览器
- 响应首行（响应状态码）
- 响应头
- 空格
- 响应体（发送的数据）
- 浏览器给服务端
- 响应状态码：
- 1xx：这是请求成功，服务端正在准备数据，可以继续请求，也可以等待
- 2xx：比如200 OK 这是请求成功，数据已经发送过来了
- 3xx：这是重定向比如你看一个小电影的网站，明明点进去了，跳转的却是别的网站
- 4xx：常见的403这是你可能没有访问权限，404这是你访问的资源没有
- 5xx：服务器出现了问题，可能机房爆炸啊，机房被水淹啊总之就是出现了问题，访问别的网站吧
- 四大特性：
HTML简介
HTML就是构成一个网站的骨架，没有这个骨架，几乎所有的网站都是基于HTML搭建的
THML中文翻译大概是：超文本标记语言（没有任何的逻辑，只有固定的标记功能，多写，多看，多实践）
HTML的简单分类：
1.双标签：有头有尾
例如：<h1>这是一级标题标签</h1>
2.单标签：只有一对<>符号
例如：<img/>这样，准确的说这个叫做“单闭合标签”见名知意吧，直接在里面书写即可
HTML文档的结构
<html>
<head>这是是给计算机看的，这里的东西计算机会自动处理，然后可能会展示出来</head>
<body>这是就是用户会看到的内容</body>
</html>
这是HTML最基本的结构，任何文档都要存着这个
HTML的语法注释：
<!--这样就是单行注释：注释称之为代码之母，要会使用注释，会让你的代码层次，可读性瞬间提升-->
--------------------------------------------------------人工智能手动分割线（没有任何含义）---------------------------------------------------------------------------
<!--
这样就是多行注释
这样就是多行注释：能看懂吧，这要是看不懂的话就别看了。
-->
HTML的创建与展示：
普通txt文本文件：
打开文件，写入内容，保存。之后更改文件后缀名为：html。之后文件就会自动更改为浏览器的图标，然后点击进入即可
也可以通过pycharm创建html的文件
总之很好创建，自己慢慢玩吧
HTML内的head内常见标签
title：这是自定义网页标题
<title>喜甜汁日志</title>（这么写就行，别问为啥。）
style：内部支持css代码
<style> h1 {假如这里是CSS代码}</style>（先对付看，CSS代码后面有）
script：内部支持写JS代码，还可以通过src导入外部js文件（js文件就是JavaScriipt）
<script src="“这里写外部js文件的路径，可以是相对路径，也可是绝对路径”>这里写js代码</script>（别问那是啥，后面都有）
link：通过href属性导入外部css文件
<link href="“css路径”/>
meta：定义网页源信息
<meta name=“keywords” content=“内容”/ >（只要你在浏览器中输入内容，就可能会被浏览器显示出你的网站信息。注：只是可能，应为有rmb玩家给搜索引擎充值。）
<meta name="description" content="内容"/>（如果真的那么巧，你的网站被所搜出来了，那么这里的内容将会是显示出来被用户看到）
注：在HTML文件中，不推荐直接编写css和js代码，最好是引入外部文件，这样有利于后期维护，扩展
body内的基本标签
h1~h6：标题标签
看到上面的body了吗，为啥那么黑，那么粗，因为人家是h2级标签怎么表现出来呢,看下面。
<h1>这是一级标题</h1> 其他标题怎么写知道了吧
p：段落标签
这是什么意思呢，为啥这行跟上一行分为两行呢？因为我按回车了，换行了，懂吗
再看这里，为什么又换行了呢，为了让你更加明确的看到效果，上面那一行可以称之为段落，一段话，为一行。
这时候你说了：我怎么知道你骗没骗我。好的，看下面截图。
看看红色框框内的内容，看到那些<p>看到了没，知道怎么用了没？</p>
b：加粗
不是标题标签，但也能加粗加黑，看到效果没，这就是<b>效果</b>标签的魅力，这既是你看到的效果。
i：斜体
看到斜体应该懂了吧，就是<i>倾斜</i>了，
u：下划线
这是<u>下划线</u>
s：删除线
这是<s>删除线，眼熟不，有没有想到不要999不要99</s>只要9.99
br：换行
<br>换行标签，怎么解释？看到上面的空格了吗，这就是br的效果
hr：水平分割线
看到下面的那一条线了吗。
<hr>这就是效果，立竿见影
body内的特殊符号
 ； 这是空格
>；> 大于号
<；< 小于号
&；& and符
¥；￥ 羊角符
©；© 版权符
®；® 商标
这时候有人问了，为啥不能直接点呢？弄花里胡哨的干嘛？
请看这里，有没有可能出现极限条件呢？比如：
1 < a > 3：请问a整数是什么？
看到问题没有<a>这是一个链接标签，在HTML中<>这两股符号有很重要的意义。所以需要特殊符号代替
常见标签
网页在制作前需要提前布局，好好处就是搭建的时候可以准确，快速的将需要的地方补充信息
这里就有布局标签
div：块儿级标签
什么是块儿级标签？
一段内容独自占一行，比如：
h1~h6,p,div
span：行内标签
什么是行内标签？
文本多大，就占多大的位置，比如：
i,u,s,b,span
不信吗？看下面图片
重点来了：标签是可以嵌套的，俄罗斯套娃听说过没有？
块儿级标签可以嵌套任意块儿级标签和行内标签，P除外，P只可以嵌套行内标签，别问为啥。记住就行
行内标签理论上是可以嵌套行内标签的，但嵌套之后并无卵。所以随便吧
a标签：链接标签（经历过点击一段文字，然后就跳转到其他页面吧）
用法1：通过href属性指定网址（URL）点击跳转，跳转过程有两种方式
1：在当前页面跳转
<a href="URL" target="_self">点我就跳转了</a> 这里的_self是默认的，不写也可以
2：新建页面跳转
<a href="URL" target="_blank">点我就跳转了</a> 这里的_blank需要手动输入，才可以完成新页面跳转
用法2：锚点功能，问什么是锚点？
就是你创建一个定位，你点击之后直接定位到所指的位置，那么怎么用内容？
<a href="#d2" id="d1">点我就跳转了</a> 所有标签都可以加上自己在这个html页面中独一无二的id。href属性绑定id之后点击就可以跳转当前id号所在的位置
<a href="#d1" id="d2">点我就跳转了</a>
img标签：图片标签
<img src="图片路径或者网上的图片路径都可" alt=“如果图片加载不出来就显示这里的信息” title=“属性文本，鼠标悬停图片之上就显示这里的内容 heigth=“图片大小” width=“图片大小”/> 这只是部分标签属性，图片大小调节的时候调整一个，另一个会自动等比例调节，如果两个都手动调节需要注意比例，不然容易失帧
标签的两个重要的属性
1.id属性
类似身份证号。每个HTML文件中的id值都是唯一的
2.class属性 群体查找
类似于python面向对象中的类的继承
可以将多个标签划分为一类
<h1 class='c1'></h1>
<p class='c1'></p>
并且一个标签可以有很多类
<h1 class='c1 c2 c3'></h1>
<p class='c1 c8 c9'></p>
列表标签
1.无序列表（会这个就行）
前面没有数字用于标识顺序的提示，就是无序列表
<ul> //这是无序列表的标签
<li>这是第一行内容</li> 代表一行
<li>这是第二行内容</li> 代表另一行
</ui> 这是结尾
2.有序列表（看到之后能看懂就行）
<ol>
<li>这是第一行内容</li> 代表一行
<li>这是第二行内容</li> 代表另一行
</ol>
3.标题列表
<dl>
<dt>标题1</dt>
<dd>标题1的内容</dd>
<dt>标题2</dt>
<dd>标题二的内容</dd>
</dl>
表格标签
见名知意：创建表格的。虽然效果很难看，但加上点缀就好了
<table>
<thead></thead> 这是表头
<tbody></tbody> 这是表单
</table> 整体为最基本创建表格标签
内部标签：
tr标签：标识一行
th标签：在表头的字段名称
td标签：普通的单元格数据
怎么写呢？看着
<table>
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>jj</td>
<td>123</td>
<td>18</td>
</tr>
</tbody>
</table>
这是最简单的效果，内部可以添加属性
<table border='1'>
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>jj</td>
<td>123</td>
<td>18</td>
</tr>
</tbody>
</table>
这是效果
表格标签其他属性
border：添加表格
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
注：上述内容纯手撸，如有不对请手下留情，谢谢您嘞。
浙公网安备 33010602011771号