web day1

A码

已于 2023-09-19 23:56:25 修改

阅读量180

点赞数

分类专栏： Web 文章标签：前端

于 2023-09-18 00:47:10 首次发布

本文链接：https://blog.csdn.net/qq_41255707/article/details/132960341

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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）

**参考：**https://www.w3school.com.cn/
https://www.runoob.com/html/html-tutorial.html

HTML开发工具

Hbuildx
VSCode
Webstorm

Hbuildx下载：https://www.dcloud.io/hbuilderx.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="http://www.baidu.com">百度</a>
<!-- target属性指定打开页面的窗口方式：
_blank - 打开一个新窗口； _self - 当前窗口； _parent - 父窗口；top - 最顶
层窗口 -->
<a href="http://www.hqyj.com" target="_blank">华清远见</a>
<!-- target还可以是iframe的name -->
<a href="http://www.hqyj.com" 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.com

协议头	说明	示例
Host	表示服务器的域名以及服务器所监听的端口号。如果所请求的端口是对应的服务的标准端口（80），则端口号可以省略。	Host: www.itbilu.com:80``Host: www.itbilu.com
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: http://www.itbilu.com
Pragma	与具体的实现相关，这些字段可能在请求/回应链中的任何时候产生。	Pragma: no-cache
Proxy Authorization	用于向代理进行认证的认证信息。	Proxy-Authorization: Basic IOoDZRgDOi0vcGVuIHNlNidJi2==
Range	表示请求某个实体的一部分，字节偏移以0开始。	Range: bytes=500-999
Referer	表示浏览器所访问的前一个页面，可以认为是之前访问页面的链接将浏览器带到了当前页面。 Referer 其实是 Referrer 这个单词，但RFC制作标准时给拼错了，后来也就将错就错使用 Referer 了。	Referer: http://itbilu.com/nodejs

协议头	说明	示例
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.com.com (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: http://www.itbilu.com/nodejs
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=http://itbilu.com
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.com (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的原理：