HTML笔记
上周回顾:
web运行本质
基于的协议是Http协议, 底层都是socket
TCP UDP协议都是在网络传输协议的第4层传输层的协议
http 协议是在网络传输7层模型的第7层应用层的协议,其底层也是要走TCP协议的
浏览器 (本质是一个socket客户端)
url地址
博客园(本质是socket服务端)
Http协议: (很重要*****************************)
请求头:
GET / HTTP/1.1
Host: localhost:8000
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: Pycharm-ed91cad7=93847e52-e290-42ae-ac89-b08da95066ed
请求体:
dbsjabdsabda
响应头:
HTTP/1.1 200 OK\r\n\r\n
响应体:
浏览器呈现的内容
参考:
Http图解
html本质:
- 浏览器认识的一组规则
- 100个 学20个
html的运行的原理:
因为浏览器内置了一个html解析引擎,就像python解释器一样能识别这种特定的语法规则.
html的书写的方法:
- 本地书写 .html结尾
- pycharm写
html的运行方式:
- 本地运行
- pycharm运行
html相关概念
- 全程: hypertext markup language (超文本标记语言)
- w3c制定的
html的发展历史
- 90年 1.0
- html5 html4.0.1
html5:
<!DOCTYPE html>
html4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
主流浏览器及其份额
chrome firefox IE 360 搜狗
开发人员一般用前面两个三个,因为附带的插件多,比较方便.功能强大
html文件结构以及标签格式
html常用标签之Meta
<!DOCTYPE html> #### html5的规则
<html lang="en">
<head> ### 头标签
<meta charset="UTF-8"> ### meta: 描述网页的元信息 对搜索引擎 seo 比较有用
<title>Title</title> ### title: 网页的标题
link 今天讲
script 欠
</head>
<body> ### 具体的内容
</body>
</html>
html常用标签之字体以及排版标签 (*********************)
p : 段落标签
br: 换行
hr: 华丽的分割线
#marquee: 跑马灯??????????????????????
h1---h6 : 设置字体内容大小,数字越大,字体越小
html常用标签之列表
ul : 无序列表 (*****************************)
<ul>
<li></li>
<li></li>
<li></li>
.....
</ul>
ol: 有序列表
<ol>
<li></li>
<li></li>
<li></li>
.....
</ol>
html常用标签之a标签 (*********************)
a: 超链接
<a href='跳转的资源' target='_balnk'>
html常用标签之img标签
img: 图片标签
<img src='图片资源'>
html常用标签之div和span元素
块级标签
div, h1-h6, hr
行内标签:
span, a, img
div 和 span 配合css才能发挥最大的作用
html常用标签之table标签
<table>
<thead>
## 表头内容
<tr>
<th>ID</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>zekai</td>
<td>18</td>
</tr>
<tr>
<td>1</td>
<td>zekai</td>
<td>18</td>
</tr>
<tr>
<td>1</td>
<td>zekai</td>
<td>18</td>
</tr>
<tr>
<td>1</td>
<td>zekai</td>
<td>18</td>
</tr>
</tbody>
</table>
border : 边框 1px
width : 300px 20%
height: 400px 40%
align: center/left/right 同样适用于thead, tbody
html常用标签之form表单元素标签
1.form表单的基本概念
和后台进行交互的元素
2.常见的input标签
<form action='url地址' method='get/post'>
文本框: <input type='text' name='username'>
密码框: <input type='password' name='pwd'>
复选框: <input type='checkbox' name='hobby'> 足球
<input type='checkbox' name='hobby'> 篮球
<input type='checkbox' name='hobby'> 羽毛球
单选框: <input type='radio' name='gender'> 男
<input type='radio' name='gender'> 女
性别: <input type="radio" name="gender" value="1" checked>男
<input type="radio" name="gender" value="0">女
<input type="file" >
<input type="hidden" name="token" value="dsadnsajdnskandksandskankdsandsjakndsa" /><br>
<select name="city" >
<option value="bj">北京</option>
<option value="tj" selected="selected">天津</option>
<option value="hb">河北</option>
<option value="sd">山东</option>
<option value="nm">内蒙</option>
</select><br>
<textarea cols="50" rows="30" name="content">
</textarea>
普通按钮: <input type='button' value='普通按钮'>
提交按钮: <input type='submit' value='提交'>
重置按钮: <input type='reset' value='重置'>
</form>
http的两种常见方式:
get / post
get方式:
- form表单中, method如果不写, 默认是get方式, 还可以method='get'
缺点:
- 传输的内容明文 , 不太安全
- 浏览器对url的长度有限制 (chrom 限制4096个字节 其他限制1024)
http底层:
请求头:
GET / HTTP/1.1
Host: localhost:8000/?username=zekai&pwd=123qwe
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: Pycharm-ed91cad7=93847e52-e290-42ae-ac89-b08da95066ed
post方式:
- form表单中, method必须指定为 method=post
优点:1,没有使用明文传输,相对于get方法安全一些
2,不采用拼接URL的方式,所以,回避了URL长度限制这一问题
http底层:
请求头:
POST / HTTP/1.1
Host: localhost:8000
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: Pycharm-ed91cad7=93847e52-e290-42ae-ac89-b08da95066ed
请求体:
username=zekai&pwd=123qwe
属性:
value: 默认值
placeholder : 提示语句.可以设置默认提示,请输入用户名等信息,一旦开始填写输入,这个提示就会消失
但是注意这个仅仅是html5 的规则 html4不适应.
默认选中的属性:
select:
selected
checkbox / radio:
checked
ps:
当一个中有“上传文件域”，必须指定MIME类型enctype=“multipart/form-data”>，否则无法上传文件上传文件域，只在method=“post”下才有效
type=hidden : 提交一些不想让用户看到的东西到后台, 比如说: token, id
3.select下拉列表
4.textarea多行文本框
