1、Internet互联网以一组标准的网络协议组相连,形成逻辑上的单一巨大国际网络。
WWW万维网是一个超文本相互链接而成的全球性系统,是Internet所能提供的服务之一。
2、HTTP是一个客户端(用户)和服务器端(网站)之间进行请求和应答的标准。
客户代理user agent(客户端)
(HTTP请求)---->
源服务器origin server(应答服务器存储资源码e.g.HTML文件、图像)
UA - OS 之间可能存在多个“中间层”e.g.代理服务器、网关、隧道tunnel
3、HTTP的主要请求方法:
-
GET:向指定资源发出“显示”请求。
只用于读取数据。不用于“副作用”的操作中e.g.Web Application【GET可能会被网络蜘蛛等随意访问】 -
HEAD:想服务器发出指定资源的请求,但服务器不会传回资源的内容部分
不必传输内容的情况下,将获取到其中“关于该资源的信息”(元信息或元数据) -
POST:向指定资源提交数据,请求服务器进行处理e.g.提交表单、上传文件
数据被包含在请求文本中 ----> 请求可能会创建新的资源或修改现有资源、或两者都有 -
PUT:向指定资源位置上传输最新内容
-
DELETE:请求服务器删除Request-URL所标识的资源,或二者皆有
-
TRACE:回显服务器收到的请求,主要用于测试或诊断
-
OPTIONS:使服务器传回该资源所支持的所有HTTP请求方法。
“*” --> 资源名称向Web服务器发送OPTIONS请求,可以测试服务器共能是否正常 -
CONNECT:HTTP/1.1 协议中预留给能够将廉洁改为管道方式的代理服务器。
常用于SSL加密服务器的连接(经非加密的HTTP代理服务器)
/方法名称区分大小写
/当某个请求所针对的资源不支持对应的请求方法时,服务器返回状态码405(Method Not Allowed),当服务器不认识或者不支持对应的请求方法时,返回状态码501(Not Implemented)
4、网页组成 - HTML\CSS\JavaScript
-
HTML:搭建整个网页的骨架
-
CSS:美化页面e.g.颜色、每个模块的大小、位置
-
JavaScript:让网页“动起来”
/网页的数据动态交互
/动画 -
F12开发者工具
-
Elements:网页的源代码i.e.HTML代码
-
不同类型的文字通过不同类型的标签表示
图片 < img > / 视频< video > / 段落< p > —> 之间的布局用布局标签嵌套组合而成 —> 各种标签通过不同的排列和嵌套形成网页的框架 -
Style标签页:当前选中的HTML代码标签的CSS层叠样式
“层叠”:当在HTML中引用了数个样式文件,且当样式发生冲突时,浏览器能依据层叠顺序处理
“样式”:网页中文字大小、颜色、元素间距、排列等格式 -
JavaScript:在HTML代码中常使用
This is Blair
#
#< html > < /html > —> 表示闭和/删除不影响/使用为语义明确
- 整个HTML文件分为head和body两个部分
- head:指定当前的编码格式为UTF-8,使用title定义网页的标题(会显示在浏览器的标签上)
- body:内容为整个html文档的正文
- html的标签由< h1 >到< h6 >六个标签构成,字体由大到小递减,换行标签为< br >,链接使用< < a >来创建,herf属性包含链接的URL地址,e.g.< aherf=“www.baidu.com” >一个指向百度的链接< /a >
一个指向百度的链接
- 大多数元素的属性以“名称-值”的形式出现,由“=”连接并写在开始标签元素名之后。
值一般由单引号或双引号包围,有些值的内容包含特定字符,在html中可以去掉引号。不加引号的属性值被认为是不安全的。
许多元素存在的共性:
-
id属性为元素提供在全文档内的唯一标识。
用于识别元素,以便样式表可以改变其外观属性,脚本可以改变、显示或者删除其内容或格式化。
添加到页面的URL,为元素提供了一个全局唯一识别,常为页面的子章节。 -
class:提供了一种将类似元素分类的方式,常被用于语义化或格式化。
e.g.一个HTML文档可指定class=“标识” —> 所有具有这一类值的元素都属于文档的主文本。
格式化后,这样的元素可能会聚集在一起,并作为页面脚注而不会出现在HTML代码中。类值也可以多值声明。
e.g.class="标识 重要"将元素同时放入"标识"与"重要"两类中 -
style:将表现性质赋予一个特定角色。
比id或class属性从样式表中选择元素,"style"为更好的做法 -
tile:给元素一个附加的说明。大多数浏览器中这一属性为工具提示
5、HTML DOM
- 在HTML中,所有标签定义的内容为节点,构成了一个HTML DOM树
根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点:
- 整个文档为一个文档节点
- 每个HTML元素是元素节点
- HTML元素内的文本是文本节点
- 每个HTML属性是属性节点
- 注释是注释节点
通过HTML DOM,树中的所有节点均可通过JavaScript进行访问。
所有HTML元素(节点)都可被修改,也可以创建或删除节点。
- 节点树中的节点彼此拥有层级关系。
父(parent)、子(child)、同胞(sibling)等术语用于描述这些关系。
父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点,除了根(没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
6、CSS
Hello World
在< head >中添加< style >标签
-
内容含义:让文本居中显示
< style type=“text/css” >
.wrapper {
text-align: center;
}
< /style > #并注明其中的内容解析方式为CSS -
CSS选择器:定位节点
e.g. 上例中
< div id=“container” >
< div class=“wrapper” >
< h1 >Hello World< /h1 >
< div >Hello Python.< /div >
< /div >
< /div >
div节点的id为container,则可以表示为#container,#开头代表选择id,其后紧跟id的名称。
若想选择class为wrapper的节点,则可以使用.wrapper,点.开头代表选择class,其后紧跟class名称。 -
CSS选择器支持嵌套选择,各个选择器之间加上空格分隔开即可表达嵌套关系。
e.g.#container.wrapper p —> 先选择id为container的节点,然后选中其内部的class为wrapper的节点,再进一步选中其内部的p节点。
如不加空格,则代表并列关系。
e.g. div#container.wrapper p.text代表先选择id为container的div节点,然后选中其内部的class为wrapper的节点,再进一步选中其内部的class为text的p节点。 -
CSS选择器筛选功能强大