web day1"/>
web day1
Web前端
包含HTML, CSS, Javascript。
框架jQuery, Vue
HTML
HTML(HyperText Markup Language), 超文本标记语言。用于在浏览器上显示内容
扩展名:html, htm
用浏览器来显示html文件
主流的浏览器内核(引擎):IE、Chrome、Firefox
W3C(World Wide Web Consortium):万维网联盟,规定HTML标准
HTML版本:目前最新5.0(WEB前端 == H5)
**参考:**/
.html
HTML开发工具
Hbuildx
VSCode
Webstorm
Hbuildx下载:.html
解压即可使用
- 创建HTML
在项目上右键–》新建 --》 html文件
html页面的结构:
Head里面的这两个标签跟搜索有关:
<meta name="keywords" content="html, 学习,web">
<meta name="description" content="网页的描述文字,在搜索的时候显示的内容">
常用标签
html的标签成对出现,每个标签以结尾。有些标签没有内容,标签开始和结束合并到一起,如:<br/>,这种标签也称为单标签
-
标题标签 h
二级标题
<h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
-
段落 p
<p>这是我的作文的第一个自然段,这是我的作文的第一个自然段,这是我的作文的第一个自然段,这是 我的作文的第一个自然段,这是我的作文的第一个自然段,这是我的作文的第一个自然段,</p>
-
超链接 a
href(Hypertext Reference的缩写) 是标签的属性,指定点击该链接之后显示的网页的地址
<a href="">百度</a> <!-- target属性指定打开页面的窗口方式: _blank - 打开一个新窗口; _self - 当前窗口; _parent - 父窗口;top - 最顶 层窗口 --> <a href="" target="_blank">华清远见</a> <!-- target还可以是iframe的name --> <a href="" target="hqyj">华清远见(iframe)</a> <iframe name="hqyj" src="" width="500px" height="500px"></iframe> <h3 id="num1">三级标题</h3> <!-- 锚点:href属性用#开头,后面跟上标签的id的值,点击这个链接,网页显示第一行就会跳转到 id标签位置(三级标题) --> <a href="#num1">链接到本页的锚点</a>
-
内联框架(浏览器窗口) iframe
<iframe name="hqyj" src="" width="500px" height="500px"></iframe>
练习 : 书籍目录
-
图片标签 img
<!-- src属性图片资源的路径,可以是网上的图片,也可以是工程中的一个本地图片 HTML中的路径有两种方式: 1,相对路径(./img/boy.jpg 或 img/boy.jpg; 返回上级目录用..); 2,绝对路径(以/开始, 通常/代表url到端口的位置) alt属性:如果图片显示有问题,在图片位置就会显示alt内容 width,height属性指定图片的宽高 --> <img src="./img/boy.jpg" width="100px" height="100px" alt="男孩">
练习:新闻详情页面
-
换行 br
7月26日,武汉市应急管理局地震监测中心报警称,<br/> 该中心发现部分地震速报数据前端台站采集点网络设备 <br/> 被植入后门程序,此事引起外界广泛关注。国家计算机 <br> 病毒应急处理中心和360公司随即组成联合调查组赴武 <br>
-
分割线 hr
-
特殊格式文字
<!-- 下标文字 --> H<sub>2</sub>O <br> <!-- 上标文字 --> x<sup>2</sup> <br> <!-- 删除线 --> <del>删除的文字</del> <br> <!-- 下划线 --> 请输入姓名:<ins>张三</ins> <br> <!-- 字体加粗 --> <b>粗体</b> <br> <!-- 斜体 --> <i>斜体</i>
-
内容块 div
用于布局
-
文字标签 span
用于设置文字的样式
-
字符实体(特殊字符)
显示的结果 描述 实体 空格 < 小于号 < > 大于号 > & 与 & ¥ 人民币 ¥ © 版权 © ® 注册商标 ®
CSS初步
CSS(Cascading Style Sheets)层叠样式表,用于渲染HTML标签的样式(大小,颜色,位置)
CSS的三种书写位置:
- 内联样式,直接写在标签
- 内部样式,写在head里,用style标签
- 外部样式,单独写为一个css文件
(注:三种样式的优先顺序 内联 > 内部 > 外部)
样式中的注释: /* */
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 2.内部样式:写在style标签里,一般放在head里面大括号前面是样式选择器(对哪些标签起作用),里面是样式内容*/p{color: blue;}</style><!-- 3, 外部样式, 用link标签引入外部样式文件 --><link rel="stylesheet" href="css/mycss.css"></head><body><!-- 1.内联样式 --><span style="color: red;">第一个样式</span><p>内部样式</p><b>粗体</b><div>外部样式</div></body>
</html>
选择器
- id选择器
- class选择器
- 标签名选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* id选择器,以#开头,后面紧跟id的值一般用于单个标签设置样式,因为id不能重复*/#sp1{color: red; //颜色的名字} /* class选择器,以.开头,后面紧跟class名字class选择器可以重复使用,只要标签加了该class属性,就会受到影响*/.b{color: rgb(0, 0, 255); //rgb(reg, green, blue),每种颜色的值是0~255} /* 标签名选择器, 用标签名作为选择器名对该页面上的所有的同名标签起作用*/p{color: #00FF00; //十六进制颜色表示方式,每两位代表一种颜色, 0:00; 255:FF}</style></head><body><span id="sp1">ID选择器</span><br><span class="b">第一个class选择器</span><br><span class="b">第二个class选择器</span><p>标签名选择器</p></body>
</html>
常用样式
-
文字样式
- color 文字颜色
- background-color 背景颜色
- font-size 文字大小
- font-family 字体类型
- text-align 文字对齐方式,center居中
-
边框样式
- width 宽度
- height 高度
- border 边框线
- border-radius 圆角
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用样式</title><style type="text/css">.sp1{color: yellow;/* 背景颜色 */background-color: red;/* 字体大小,单位是像素px,默认是16 */font-size: 20px;/* 字体类型 */font-family: 宋体;} .d1{width: 100px;height: 100px;background-color: darkgray;/* 边框线: 1px 粗细; solid 实线; red 线条颜色 */border: 1px solid red;/* 边框圆角, 正方形的圆角设为边长的一半50%, 显示圆型 */border-radius: 5px;}</style></head><body><!-- 字体相关样式 --><span class="sp1">字体相关样式</span><div class="d1"></div></body>
</html>
列表标签
无序列表
<!-- 几种图标的类型:
square: 方形图标
circle: 空心圆圈
disc: 实心圆点,默认值
-->
<ul type="disc">
<li>Java</li>
<li>HTML</li>
<li>SQL</li>
</ul>
有序列表
<!-- 有序列表的几种序号:
1: 阿拉伯数字, 默认值
A: 大写的英文字母
a: 小写的英文字母
I: 大写罗马数字
i: 小写的罗马数字
-->
<ol type="i">
<li>第一名</li>
<li>第二名</li>
<li>第三名</li>
</ol>
列表可以嵌套
<!-- 列表嵌套 -->
<ul><li>Java基础<ul><li>Java基础</li><li>面向对象</li><li>Java高级</li></ul></li><li>web前端</li><li>数据库</li><li>框架</li>
</ul>
拓展:
1,什么是HTTP?HTTP请求头和响应头包含哪些常见内容?
HTTP是超文本传输协议( Hypertext Transfer Protocol ,HTTP),HTTP的消息头包括请求和响应消息的头部内容(HTTP Header),通常是冒号分隔的键值对
- 请求头
回复中的,是否 使用缓存机制。 | Cache-Control: no-cache | |
---|---|---|
Connection | 客户端(浏览器)想要优先使用的连 接类型 | Connection: keep alive``Connection: Upgrade |
Cookie | 由之前服务器通过 Set-Cookie (见 下文)设置的一个HTTP协议Cookie | Cookie: $Version=1; Skin=new; |
Content Length | 以8进制表示的请求体的长度 | Content-Length: 348 |
Content-MD5 | 请求体的内容的二进制 MD5 散列值 (数字签名),以 Base64 编码的结 果 | Content-MD5: oD8dH2sgSW50ZWdyaIEd9D== |
Content-Type | 请求体的MIME类型 (用于POST和 PUT请求中) | Content-Type: application/x-www form-urlencoded |
Date | 发送该消息的日期和时间(以RFC 7231中定义的"HTTP日期"格式来发 送) | Date: Dec, 26 Dec 2015 17:30:00 GMT |
Expect | 表示客户端要求服务器做出特定的行 为 | Expect: 100-continue |
From | 发起此请求的用户的邮件地址 | From: user@itbilu |
协议头 | 说明 | 示例 |
---|---|---|
Host | 表示服务器的域名以及服务器所监听 的端口号。如果所请求的端口是对应 的服务的标准端口(80),则端口号 可以省略。 | Host: www.itbilu:80``Host: www.itbilu |
If-Match | 仅当客户端提供的实体与服务器上对 应的实体相匹配时,才进行对应的操 作。主要用于像 PUT 这样的方法 中,仅当从用户上次更新某个资源 后,该资源未被修改的情况下,才更 新该资源。 | If-Match: “9jd00cdj34pss9ejqiw39d82f20d0ikd” |
If-Modified Since | 允许在对应的资源未被修改的情况下 返回304未修改 | If-Modified-Since: Dec, 26 Dec 2015 17:30:00 GMT |
If-None Match | 允许在对应的内容未被修改的情况下 返回304未修改( 304 Not Modified ),参考 超文本传输协议 的实体标 记 | If-None-Match: “9jd00cdj34pss9ejqiw39d82f20d0ikd” |
If-Range | 如果该实体未被修改过,则向返回所 缺少的那一个或多个部分。否则,返 回整个新的实体 | If-Range: “9jd00cdj34pss9ejqiw39d82f20d0ikd” |
If Unmodified Since | 仅当该实体自某个特定时间以来未被 修改的情况下,才发送回应。 | If-Unmodified-Since: Dec, 26 Dec 2015 17:30:00 GMT |
Max Forwards | 限制该消息可被代理及网关转发的次 数。 | Max-Forwards: 10 |
Origin | 发起一个针对跨域资源共享的请求 (该请求要求服务器在响应中加入一 个 Access-Control-Allow-Origin 的 消息头,表示访问控制所允许的来 源)。 | Origin: |
Pragma | 与具体的实现相关,这些字段可能在 请求/回应链中的任何时候产生。 | Pragma: no-cache |
Proxy Authorization | 用于向代理进行认证的认证信息。 | Proxy-Authorization: Basic IOoDZRgDOi0vcGVuIHNlNidJi2== |
Range | 表示请求某个实体的一部分,字节偏 移以0开始。 | Range: bytes=500-999 |
Referer | 表示浏览器所访问的前一个页面,可 以认为是之前访问页面的链接将浏览 器带到了当前页面。 Referer 其实 是 Referrer 这个单词,但RFC制作 标准时给拼错了,后来也就将错就错 使用 Referer 了。 | Referer: |
协议头 | 说明 | 示例 |
---|---|---|
TE | 浏览器预期接受的传输时的编码方 式:可使用回应协议头 Transfer Encoding 中的值(还可以使 用"trailers"表示数据传输时的分块方 式)用来表示浏览器希望在最后一个 大小为0的块之后还接收到一些额外 的字段。 | TE: trailers,deflate |
User-Agent | 浏览器的身份标识字符串 | User-Agent: Mozilla/…… |
Upgrade | 要求服务器升级到一个高版本协议。 | Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11 |
Via | 告诉服务器,这个请求是由哪些代理 发出的。 | Via: 1.0 fred, 1.1 itbilu (Apache/1.1) |
Warning | 一个一般性的警告,表示在实体内容 体中可能存在错误。 | Warning: 199 Miscellaneous warning |
响应头 | 说明 | 示例 |
---|---|---|
Access Control Allow-Origin | 指定哪些网站可以 跨域源资源共享 | Access-Control-Allow-Origin: * |
Accept Patch | 指定服务器所支持的文档补丁格 式 | Accept-Patch: text/example;charset=utf-8 |
Accept Ranges | 服务器所支持的内容范围 | Accept-Ranges: bytes |
Age | 响应对象在代理缓存中存在的时 间,以秒为单位 | Age: 12 |
Allow | 对于特定资源的有效动作; | Allow: GET, HEAD |
Cache Control | 通知从服务器到客户端内的所有 缓存机制,表示它们是否可以缓 存这个对象及缓存有效时间。其 单位为秒 | Cache-Control: max-age=3600 |
Connection | 针对该连接所预期的选项 | Connection: close |
- 响应头
响应头 | 说明 | 示例 |
---|---|---|
Content Disposition | 对已知MIME类型资源的描述,浏 览器可以根据这个响应头决定是 对返回资源的动作,如:将其下 载或是打开。 | Content-Disposition: attachment; filename=“fname.ext” |
Content Encoding | 响应资源所使用的编码类型。 | Content-Encoding: gzip |
Content Language | 响就内容所使用的语言 | Content-Language: zh-cn |
Content Length | 响应消息体的长度,用8进制字节 表示 | Content-Length: 348 |
Content Location | 所返回的数据的一个候选位置 | Content-Location: /index.htm |
Content MD5 | 响应内容的二进制 MD5 散列 值,以 Base64 方式编码 | Content-MD5: IDK0iSsgSW50ZWd0DiJUi== |
Content Range | 如果是响应部分消息,表示属于 完整消息的哪个部分 | Content-Range: bytes 21010- 47021/47022 |
Content Type | 当前内容的 MIME 类型 | Content-Type: text/html; charset=utf-8 |
Date | 此条消息被发送时的日期和时间 (以RFC 7231中定义的"HTTP日 期"格式来表示) | Date: Tue, 15 Nov 1994 08:12:31 GMT |
ETag | 对于某个资源的某个特定版本的 一个标识符,通常是一个 消息散 列 | ETag: “737060cd8c284d8af7ad3082f209582d” |
Expires | 指定一个日期/时间,超过该时间 则认为此回应已经过期 | Expires: Thu, 01 Dec 1994 16:00:00 GMT |
Last Modified | 所请求的对象的最后修改日期(按 照 RFC 7231 中定义的“超文本传 输协议日期”格式来表示) | Last-Modified: Dec, 26 Dec 2015 17:30:00 GMT |
Link | 用来表示与另一个资源之间的类 型关系,此类型关系是在RFC 5988中定义 | Link: ; rel=“alternate” |
Location | 用于在进行重定向,或在创建了 某个新资源时使用。 | Location: |
P3P | P3P策略相关设置 | P3P: CP="This is not a P3P policy! |
响应头 | 说明 | 示例 |
---|---|---|
Pragma | 与具体的实现相关,这些响应头 可能在请求/回应链中的不同时候 产生不同的效果 | Pragma: no-cache |
Proxy Authenticate | 要求在访问代理时提供身份认证 信息。 | Proxy-Authenticate: Basic |
Public-Key Pins | 用于防止中间攻击,声明网站认 证中传输层安全协议的证书散列 值 | Public-Key-Pins: max-age=2592000; pin sha256=“……”; |
Refresh | 用于重定向,或者当一个新的资 源被创建时。默认会在5秒后刷新 重定向。 | Refresh: 5; url= |
Retry-After | 如果某个实体临时不可用,那么 此协议头用于告知客户端稍后重 试。其值可以是一个特定的时间 段(以秒为单位)或一个超文本传输 协议日期。 | 示例1:Retry-After: 120示例2: Retry-After: Dec, 26 Dec 2015 17:30:00 GMT |
Server | 服务器的名称 | Server: nginx/1.6.3 |
Set-Cookie | 设置 HTTP cookie | Set-Cookie: UserID=itbilu; Max Age=3600; Version=1 |
Status | 通用网关接口的响应头字段,用 来说明当前HTTP连接的响应状 态。 | Status: 200 OK |
Trailer | Trailer 用户说明传输中分块编 码的编码信息 | Trailer: Max-Forwards |
Transfer Encoding | 用表示实体传输给用户的编码形 式。包括: chunked 、 compress 、 deflate 、 gzip 、 identity 。 | Transfer-Encoding: chunked |
Upgrade | 要求客户端升级到另一个高版本 协议。 | Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11 |
Vary | 告知下游的代理服务器,应当如 何对以后的请求协议头进行匹 配,以决定是否可使用已缓存的 响应内容而不是重新从原服务器 请求新的内容。 | Vary: * |
Via | 告知代理服务器的客户端,当前 响应是通过什么途径发送的。 | Via: 1.0 fred, 1.1 itbilu (nginx/1.6.3) |
响应头 | 说明 | 示例 |
---|---|---|
Warning | 一般性警告,告知在实体内容体 中可能存在错误。 | Warning: 199 Miscellaneous warning |
WWW Authenticate | 表示在请求获取这个实体时应当 使用的认证模式。 | WWW-Authenticate: Basic |
2,什么是HTTPS, HTTP与HTTPS的区别?
HTTP(默认端口80)是超文本传输协议,所有内容传输都是明文的,因此不法分子可以截取传输数据,当传输敏感信息时就非常不安全,比如登录或支付时输入的密码。
HTTPS(默认端口443)就是加上了SSL(Secure Sockets Layer)协议的HTTP,以加密方式传输数据,
即便被截取数据,也不易破译,所以对安全要求高的数据都应该使用HTTPS协议传输。
HTTPS的原理:
- 客户使用https的URL访问Web服务器,要求与Web服务器建立SSL连接。
- Web服务器收到客户端请求后,会将网站的证书信息(证书中包含公钥)传送一份给客户端。
- 客户端的浏览器与Web服务器开始协商SSL连接的安全等级,也就是信息加密的等级。
- 客户端的浏览器根据双方同意的安全等级,建立会话密钥,然后利用网站的公钥将会话密钥加密,
并传送给网站。
- Web服务器利用自己的私钥解密出会话密钥。
- Web服务器利用会话密钥加密与客户端之间的通信。
更多推荐
web day1
发布评论