html笔记
网页的基本信息
- DOCTYPE标签:告诉浏览器,使用什么规范
<!--告诉浏览器,使用规范是html-->
<!DOCTYPE html>
- html注释格式:
<!--注释内容-->
- html标签:总标签,包含网页显示的内容
<html>
<!--网页显示的内容-->
</html>
- head标签:定义网页的头部
<head>
<!--定义网页的头部-->
</head>
- title标签:定义网页的标题
<title>网页的标题</title>
- meta标签:描述网站信息
<meta charset="utf-8">
- body标签:定义网页显示的内容
<body>
网页内容
</body>
网页的基本标签
- 标题标签:
<h1>一级标题 </h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 段落标签:
<p>段落内容</p>
- 换行标签:
<br/>
- 水平线标签:
<hr> 或者<hr/>
- 粗体:
<strong> 粗体内容 </strong>
- 斜体
<em> 斜体内容</em>
- 块元素:无论内容多少,该元素独占一行
- 行内元素:
特殊符号
- 空格符号:
- 大于符号:
>
- 小于符号:
<
图像标签
- 图像标签:
<img src="path" alt="text" title="text" width="x" heihgt="y">
- src:表示图片的存放路径,有绝对路径和相对路径两种
- 绝对路径:从磁盘开始的路径
- 相对路线:相对于html文件的相对地址,其中 …/ 表示该html文件的上级目录
- alt:如果文件没有加载出来,所提示的文字内容
- title:当鼠标悬停在图片上时,所提示的文字内容
- width:图片的宽度
- heihgt:图片的高度
链接标签
- 链接标签的格式:
<a href="path" target="目标窗口的位置">链接的文本或图像</a>
- href:必填,表示跳转到哪个网页或者网页的网站地址
- target=“_blank”:表示在新标签中打开链接
- target=“_self”:表示在自己的网页中打开链接
- 锚链接:
1.需要一个锚标记
<a name="锚标记名">顶部</a>
2.跳转到标记
<a href="#锚标记名">回到顶部</a>
- 邮箱链接
<a href="mailto:邮箱" target="目标窗口的位置">链接的文本或图像</a>
列表
- 有序列表:
<ol>
<li>列表第一行</li>
<li>列表第二行</li>
<li>列表第三行</li>
......
<li>列表第n行</li>
</ol>
- 无序列表:
<ul>
<li>列表第一行</li>
<li>列表第二行</li>
<li>列表第三行</li>
......
<li>列表第n行</li>
</ul>
- 自定义列表:
<dl>
<dt>列表名</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
.......
<dd>列表内容</dd>
</dl>
表格
- 表格标签:
<!--border="1px":给表格一个边框-->
<table border="1px">
</teble>
- 行标签:
<tr>
</tr>
- 列标签:
<td>
</td>
- 跨行:
<td rowspan="夸行的行数">
</td>
- 跨列
<td colspan="夸列的列数">
</td>
视频和音频
视频标签:
<video src="path" controls autoplay></video>
- src:表示视频的存放路径
- controls:控制视频的播放
- autoplay:打开时,自动播放视频
音频标签:
<audio src="path" controls autoplay></audio>
- src:表示音频的存放路径
- controls:控制音频的播放
- autoplay:打开时,自动播放音频
页面结构
- header:标题头部区域的内容,用于页面或页面中的一块区域
- footer:标记脚部区域的内容,用于整个页面或页面中的一块区域
- section:Web页面中一块独立区域
- article:独立的文章内容
- aside:相关内容和或应用,常用于侧边栏
- nav:导航类辅助内容
iframe内联框架
- 内联框架格式:
<iframe src="" name="mainFrame" width="x" heihgt="y"></iframe>
- src:引用网页的地址
- mainFrame:框架标识名
- width:引用网页的宽度
- heihgt:引用网页的高度
表单语法
表单标签:
<form method="" action="">
</form>
- method:表单递交的方式,有post和get两种
- get方式提交:可以在url上面看到提交的信息,不安全
- post方式提交:不可以在url上面看到提交的信息,安全
- action:提交表单的位置,可以是一个网站,也可是一个请求处理地址
文本框标签
<input type="" name="" value="" size="" maxlength="">
- type:指定元素的类型
- type=“text”:表示输入文本
- type=“password”:表示输入数字,且要隐藏
- type=“submit”:表示递交输入框
- type=“reset”:表示重置输入框
- type=“radio”:表示文本框是个单选框,必须有value属性,并且name属性相同
- type=“checkbox”:表示文本框是个多选框,必须有value属性,并且name属性相同
- type=“button”:表示该文本框是个按钮
- type=“image”:表示该图片是个按钮
- name:文本框的名字
- value:元素初始值
- size:指定表单元素的初始宽度
- maxlength:当type="text"或者type="password"时,输入的最大字符数
- checked:
下拉框
- 下拉框标签:
<select name="下拉框名字"> </select>
- 下拉框选项标签:
<option value="">选项名</option>
文本域
- 文本域标签:
<textarea name="" cols="X" rows="Y">文本内容</textarea>
- name:文本域名字
- cols:文本域的宽度
- rows:文本域的长度
验证
- 邮箱验证:
<input type="email" name="email">
- URL验证:
<input type="url" name="url">
- 数字验证:
<input type="number" name="number" man="100" min="10" step="5">
特殊属性
- hidden:将表单隐藏
- readonly:将表单设置为只能读取,不能输入
- disabled:禁用该表单
表单的验证
- placeholder:提示输入框的输入信息
- requied:对输入框,进行非空判断
- pattern:正则表达式
http笔记
http/https简介
- http/https是应用层协议,用于 Web 浏览器与 Web 服务器之间的通信而设计的。
- 与http相比,https是一种安全通信的传输协议。https是在http的基础上,使用ssl或tls对数据包进行加密,提供身份认证、保护交换资料的隐私与完整性服务。
- http使用端口 80,而 https认使用端口443。
- http工作过程:
1.浏览器分析URL
2.浏览器向DNS请求解析IP地址
3.DNS解析出IP地址
4.浏览器与服务器建立TCP连接
5.浏览器发出取文件命令
6.服务器响应
7.释放TCP连接
8.浏览器显示
http消息结构
- http客户端请求消息由请求行(request line)、请求头部(header)、空行和请求数据四个部分组成。
- http服务器响应消息也由四个部分组成,分别是:状态行、消息报头、空行和响应正文
http的请求方法
-
http的请求方法一共有8种,分别是GET、POST、PUT、DELETE、EHAD、OPTIONS、TRACE、CONNECT
-
GET请求:只是用来查询获取数据,不对服务器的数据做任何的修改,新增,删除等操作。但是GET请求,会把请求的参数附加在URL后面,这样是不安全的,在处理敏感数据时不用,或者参数做加密处理。
-
POST请求:客户端将数据发送给服务器,以创建或更新数据,更侧重于更新数据。
-
PUT请求:客户端将数据发送给服务器,以创建或更新数据,侧重于创建数据。
-
DELETE请求:请求服务器删除指定的数据。
-
EHAD请求:只是用来查询获取数据,但响应报文中没有具体的内容,只能用于获取报头。
-
OPTIONS请求:在服务器的响应报文中,显示服务器对目标资源所支持的HTTP请求方法。或者向web服务器发送‘*’的请求,来测试服务器的功能性。
-
TRACE请求:显示服务器收到的请求,主要用于测试或诊断。
-
CONNECT请求:在HTTP/1.1 协议中,预留给能够将连接改为管道方式的代理服务。
-
注意:
1、get 取,是查询数据。
2、post 贴,常用于修改数据。
3、put 放,常用于新增数据。
4、delete 删,是删除数据。
HTTP 响应头信息
- Allow:表示服务器支持哪些请求方法,例如GET、POST等。
- Content-Encoding:表示网页文档的编码(Encode)方法。
- Content-Length:表示响应报文内容的长度
- Content-Type:表示后面的文档属于什么类型
- Date:表示是服务器是在什么时候响应回浏览器
- Expires:应该在什么时候认为文档已经过期,从而不再缓存它。
- Last-Modified:文档的最后改动时间。
- Server:服务器名字
- Set-Cookie:设置和页面关联的Cookie
http消息状态码
- web服务器收到http请求的时候,首先回返回一个包含 HTTP 状态码的信息,来向客户端说明资源或者链接的情况。
- 1xx :表示请求已接收,需要继续处理。
- 2xx :表示请求已经成功被服务器接收、理解、并接受。例如200 - 请求成功
- 3xx :为完成请求,客户端需要进一步操作。例如301 - 资源(网页等)被永久转移到其它URL
- 4xx :客户端的请求有错误,例如404 - 请求的资源(网页等)不存在
- 5xx :服务器端出现错误,例如500 - 内部服务器错误
RUL
- 统一资源定位符URL:唯一标识资源,一般形式:<协议>://<主机 >:<端口>/<路径>,端口和路径可以没有,例如https://www.bilibili.com
- 常见URL请求协议:http、https、ftp、pop3等
思考
-
GET请求 和POST 请求的差别
1.GET请求,会把请求的参数附加在URL后面,不安全。而POST请求,不会把请求的参数附加在URL后面,更安全。
2.GET 请求是用来获取资源的,也就是进行查询操作。而POST请求,是用来对数据的增添、删除、修改。
3.GET请求产生一个TCP数据包,而POST请求产生2个TCP数据包。因为GET
请求会把http httper和data一起发送。而POST请求,会先将http httper发出去,收到服务器状态码为200的响应时,再发data。 -
日常生活中什么时候会用GET,什么时候会用POST?
1.GET请求,用于从服务器中获得数据显示。例如查询存款余额、查询成绩等。
2.POST请求,用于修改服务器的数据。例如修改QQ和微信的密码、个人信息等。 -
简述你目前对web的认知
web 即全球广域网 World Wide Web ,也称万维网,是一种基于超文本和 HTTP 的、全球性的、动态交互的、跨平台的分布式图形信息系统。