HTML、css学习

第二周作业

回答问题：从在浏览器上输入网址，按下回车，到屏幕上显示出网页的内容的过程中，发生了什么？

一、基本过程：

当输入网址时，浏览器会从URL（网址）中解析提取到主机名，并且将主机名转换为IP地址（服务器的IP地址），从URL中提取到端口号，然后向目标服务器发出TCP连接（简称“三次握手”），浏览器向服务器发送一条 HTTP请求报文，服务器返回来一条HTTP请求报文，随后断开连接，浏览器开始解析文档。

二、过程中部分详细注解

三次握手
首先A向B发SYN（同步请求），然后B回复SYN搜索+ACK（同步请求应答），最后A回复ACK确认。
第一次握手：
建立连接时,浏览器发送SYN到服务器，等待服务器确认
第二次握手：
服务器收到SYN包,必须确认客户的SYN,同时自己也发送一个SYN包,即SYN+ACK包
第三次握手：
客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK，发送完毕，浏览器和服务器的关系确立，完成三次握手
（SYN：同步序列编号 ACK：确认字符）
“三次握手”拟人小故事
A：我可以和你握手吗？（递上“礼品”）
B：（思考了一下）握吧。（回送“礼品”）
A：我真的可以跟你握手吗？
B：别墨迹！握就完事儿了！ （然后就完事儿了。。。）

ps：HTML以及css学习做静态网页

本次制作静态网页主要运用了HTML以及css中插入方框文字以及改变大小位置颜色等功能，运用a href插入网址，button插入按钮，p插入文字，img插入图片，div布局，br换行等等，其中还使用了部分语法对选中的元素进行位置、大小、颜色、透明度等方面的运用和修改。
部分代码如下：

<style>
	h1{color:#CBEC77;font-size: 50px;}
	h2{color:#E9AEAF;font-size: 35px;}
	body{
		background-image:url(背景.jpg);
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	p{
		line-height: 30px;
		padding-right: 25px;
		padding-left: 40px;
		font-size: 20px;
	}
	img{
		left:0px;
		top:0px;
	}
	button{
		background-color:#89E3E4;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
	}
</style>

<div style="font-family: verdana;padding:150px;width: 20px; border-radius: 0px;border:5px solid #71E594"></div>
<div style="font-family: verdana;padding:70px;width: 10px; border-radius: 100px;float:left;border:5px solid #C5D370"></div>

<a href="https://baike.baidu.com/item/%E9%AD%8F%E6%99%A8/4106156?fr=aladdin"><button class="button">我的偶像是谁呢？</button></a><br><br>

	<a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B1%F9%E4%BF%C1%DC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=111111"><button class="like">我喜欢吃什么呢？</button></a><br><br>

	<a href="http://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%D0%A1%B0%D7%BB%A2&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=000000"><button class="animal">我喜欢什么动物呢？</button></a><br><br>

 <a href="https://image.baidu.com/search/index?ct=201326592&cl=2&st=-1&lm=-1&nc=1&ie=utf-8&tn=baiduimage&ipn=r&rps=1&pv=&fm=rs1&word=%E6%B3%95%E5%9B%BD%E6%99%AE%E7%BD%97%E6%97%BA%E6%96%AF%E6%9C%80%E7%BE%8E%E5%B0%8F%E9%95%87&oriquery=%E6%99%AE%E7%BD%97%E6%97%BA%E6%96%AF&ofr=%E6%99%AE%E7%BD%97%E6%97%BA%E6%96%AF&hs=2&sensitive=0"><button class="where">我想去哪里呢？</button></a><br><br><br><br><br><br><br><br><br>

网页网址：
https://wyxkl.github.io/1/哇一的网页.html

遇到的问题：
在最初的时候做网页基本无从下手，后来听学长的先在纸上画出大体框架，然后对这些地方进行元素的补充和修改，渐渐完善。其中遇到的最大的问题是我插入的四个超链接只有第一个打得开，其他三个都没有反应，经过学长的提醒和个人的反思，改变了网页中插入的两张图片的位置及大小，避免遮挡住了按键，最后解决了问题。