开发日志（Day 1）

最新推荐文章于 2024-07-16 20:50:21 发布

Aurora.墨玖

最新推荐文章于 2024-07-16 20:50:21 发布

阅读量478

点赞数 5

文章标签： html

本文链接：https://blog.csdn.net/weixin_54911224/article/details/139099683

版权

HTML

1—页面架构

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定意一个段落

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MJKF</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

2—基础

2.1-标题

HTML的表题是通过<h1>—<h6>标签来定义的

例如：

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

2.2-段落

HTML的段落是通过标签<P>来定义的

例如：

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

2.3-链接

HTML的链接是通过标签<a>来定义的

例如：

<a href="https://www.baidu.com">这是一个链接</a>

拓展：

链接共分为1.图像链接 2.文本链接 3.锚点链接 4.下载链接

例如：

1：
<a href="https://www.example.com">
  <img src="mj。jpg" alt="示例图片">
</a>
2：
<a href="https://www.bilibili.com/">访问示例网站</a>
3：
<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>
4：
<a href="document.pdf" download>下载文档</a>

并且，链接可分为原网页跳转与新开网页跳转

例如：

<a href="https://www.bilibili.com" target="_blank">B站</a>

2.4-图片

HTML的图片

是通过标签<img>来定义的

例如：

<img src="I/微信图片_20240402002121.jpg" width="64" height="64">

3—常见标签

3.1 双标签

格式：<标签名属性1=“值1” 属性2=“值2” … >内容</标签名>

注意： 1、双标签必须成对出现 2、标签名用尖括

号括起来 3、结束标签以“/标签名”结束

例如：

<h1 class=“text”>Hello World</h1>

3.2 单标签

格式：<标签名属性1=“值1” 属性2=“值2” … />

注意： 1、标签名用尖括号括起来 2、以“/>”结束 3、属性与属性之间用空格隔开 4、属性值用英文双引号括起来

例如：

<input type=“text”  class=“b1” />

3.3 Meta标签

例如：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="文本">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">

3.4 title标签

在 HTML/XHTML 文档中是必需的。

定义了浏览器工具栏的标题

当网页添加到收藏夹时，显示在收藏夹中的标题

显示在搜索引擎结果页面的标题

例如：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

3.5 baes标签

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

例如：

<head>
<base href="https://www.bilibili.com/" target="_blank">
</head>

3.6 link标签

定义了文档与外部资源之间的关系，通常用于链接到样式表

例如：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

3.7 style标签

定义了HTML文档的样式文件引用地址，可以直接添加样式来渲染 HTML 文档。

例如：

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

笔记

笔记
——在浏览器中打开一个URL页面发生了什么

当在浏览器中输入一个URL（例如：https://www.bilibili.com/）时

1，浏览器会先进行域名解析（优先查看浏览器缓存，查看近期是否访问过该网站。有则会拦截请求，返回该资源的副本，并直接结束该请求。没有则会查看系统缓（windows里是gethostbyname），还有路由器缓存·，如果都没有，则会进入到网络请求过程）

2，域名解析 —浏览器从获取到的URL中将域名子段抽取出来（这个就是我们要访问的主机名），并将其发送给DNS相应的客户端，然后DNS客户端向DNS服务端发送一份查询报文，报文中包含要访问的主机字段名（包括一系列缓存查询以及分布式DNS集群工作）而后该DNS服务端会收到一份回答报文，其中包含该主机名对应的IP地址。

3，获取端口号，因为同一域名下可能会有多个端口号，所以在DNS解析后，浏览器会获取端口号以获取需要的服务

4，通过域名解析后获得该网站IP地址，然后向该IP地址的HTTP服务器发起TCP（三次握手）链接，链接成功后会向浏览器返回资源包（例如TMTL中的各种标签，图片等）

——TCP链接

服务端通过socker ，bind与listen准备好接受外来链接，此时服务端状态为Listen，客户端通过调用connect来发起主动连接，导致客户端TCP发送一个SYN（同步）字节，告知服务器客户将在（待建立）连接中发送数据的初始序列号，客户端状态为SYN-SENT。服务器确认（ACK）客户的SYN，并自己也发送一个SYN，它包含服务器将在同一链接中发送数据的初始序列号。客户段确认服务的ACK和SYN，向服务器发送ACK，客户端状态ESTABLISHED。服务器接受ACK，服务器状态ESABLISHED。

Aurora.墨玖

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
开发日志（Day 1）

实例：HTML的表题是通过<h1>—<h6>标签来定义的例如：2.2-段落HTML的段落是通过标签<P>来定义的例如：HTML的链接是通过标签<a>来定义的例如：拓展：链接共分为1.图像链接 2.文本链接 3.锚点链接 4.下载链接例如：并且，链接可分为原网页跳转与新开网页跳转例如：2.4-图片HTML的图片是通过标签<img>来定义的例如：3—常见标签3.1 双标签格式：<标签名属性1=“值1” 属性2=“值2” … >内容</标签名>注意：
复制链接

扫一扫