初识HTML

wojianguile

已于 2023-09-20 10:53:36 修改

阅读量64

点赞数 1

文章标签： html 前端

于 2023-09-19 20:12:13 首次发布

本文链接：https://blog.csdn.net/wojianguile/article/details/132994525

版权

本文介绍了HTML的基础知识，包括其含义、互联网原理、服务器与浏览器的工作机制，详细阐述了HTTP请求过程。此外，讲解了HTML与纯文本的区别，HTML骨架结构，以及元数据配置如charset、viewport、meta标签、HTML标签的使用和特性，如h、p、img和a标签的详解。

摘要由CSDN通过智能技术生成

HTML简介

含义

HTML，即超文本标记语言。
主要是通过HTML标记对网页中的文本、图片、声音等内容进行语义化描述
它不是真正的编程语言，而是标记语言

之所以被称为超文本标记语言：
1）是标记语言
2）文本中包含了“超级链接”点

互联网原理

注意：所谓的上网，就是对数据的请求
HTML用来制作网页文件。
在这里插入图片描述
上网过程有实际的、物理文件的传输

服务器

本质
本质上是一种计算机
作用
用来存储网页文件，包括HTML、css、js、图片、音频等

可以通过客户端远程控制服务器，服务器最好24h不关机

浏览器

作用
发送http请求，接受回传的数据，渲染网页
工作原理
在网址栏输入网址后向服务器发送请求，服务器响应后返回数据到浏览器，进行渲染
版本
浏览器根据厂商和版本不同，区分为不同的品牌版本。主流的chrome（谷歌）、Firefox（Mozilla）、IE（微软）、Opera（欧朋）、Safari（苹果）

第一次加载一个网页时，时间较长，从第二速度变快，原因是因为第一次浏览时，已经将大部分文件存储到了本地，第二次会先从本地进行查找

HTTP请求

http是无连接的，每一次都需要进行请求。
一次浏览器的请求如下所示：
在这里插入图片描述

浏览器通过 DNS 把域名解析成对应的IP地址；
根据 IP 地址在互联网上找到对应的服务器，建立连接；
客户端向服务器发送HTTP协议请求包，请求服务器里的资源文档；
在服务器端，进行复杂的业务逻辑。
eg.服务器可能有多台，到底指定哪台服务器处理请求，需要一个负载均衡设备来平均分配所有用户的请求，还有请求的数据是存储在分布式缓存里、静态文件中，或是在数据库里，完成以上操作之后，服务器将相应的数据资源返回给浏览器
客户端与服务器断开。由客户端解析HTML文档，在客户端屏幕上渲染图形结果

HTML学习

纯文本和超文本的区别

纯文本
纯文本只包含文字内容，不能包含文字以外的，例如图片、视频、文字样式等。
常见的纯文本格式文件.txt,.html,.css,.js。
超文本
超文本文件是一种含有特殊标记的文本文件，其作用类似于word中的排版标记，常用格式.doc，.ppt

直观点，txt文件传输过去之后，不管你设置什么样式，对方都无法收到；但doc可以。

HTML骨架

ps.在VSCODE中运行，只需要点击 Run and Debug

<!DOCTYPE html>           ——>具体在DTD中介绍
<html lang="en">     ——>详见语言配置
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

DTD

Document Type Definition，文本类型定义。
必须出现在第一行。
作用：让浏览器知道是什么格式的文件

<!DOCTYPE html>

<!>：警示标签
DOCTYPE：文档类型
html：使用的是HTML超文本标记语言

语言配置

html标签有属性lang，为英语language的缩写，表示网页整体的语言。
en：英语
zh、cn、zh-CN：中文
eg.

<html lang="en">
<html lang="zh-CN">

HTML标签

网页必须被以下内容包裹：

<html></html>

它里面有<head></head>和<body></body>两部分组成

<head></head> ：网页的配置
<body></body> ：网页的正式内容，浏览器可视区域

⭐ <head></head>标签

内含网页配置，几乎所有配置都在meta标签中。
meta：基本配置
1）字符集的配置
变量为charset，是英语character set的缩写，character set是文字集合的意思

<meta charset="UTF-8">

<meta charset="gb2312">

<meta charset="gbk">

注意：修改字符集，不仅要在代码中将charset的值改变，同时，也需要修改vscode编辑器的编码设置

2）视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果不加这个，手机看这个网页会非常丑，加了就像看APP一样

3）浏览器设置

<meta http-equiv="X-UA-Compatible" content="ie=edge">

这句话的意思表示设置兼容性为让edge和ie渲染方式一样

<meta name="renderer" content="webkit">

这句话表示尽可能的用高级核打开页面

4）keywords关键字

网页关键字。浏览器在搜索时，抓取的就是keywords和description。
name属性一定要设置为keywords，content就是关键字的内容，中间用逗号隔开

<meta name="keywords" content="前端,HTML,JavaScript">

5）description
页面描述。
它就是搜索引擎搜到你之后，展示的文字，也用于浏览器搜索时匹配搜索关键字。

<meta name="description" content=" 网页的描述" />

title标签
在浏览器选项卡的区域显示的文字

 <title>我是网页标题</title>

HTML基本语法

标签概述

标签名必须书写在一对尖括号<>内部。
标签分为单标签和双标签，双标签必须成对出现，有开始标签和结束标签。
结束标签必须有关闭符号/。
根据标签的种类区分两个等级：容器级和文本级
容器级：元素内部除了可以存放文本之外，还可以嵌套标签
文本级：元素内部只能存放文本或者文本级标签
标签查询

常见标签：

标签符号	单/双标签	级别	作用	应用实例
img	单标签	文本级	插入图片	`<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" /`>
br	单标签		在文本中生成一个换行（回车）符号	`<br />`
hr	单标签		在 HTML 页面中创建一条水平线	`<hr />`
h1-h6	双标签	容器级	标题
div	双标签	容器级	定义文档中的分区或节	`<div style="color:#00FF00"> </div>`
span	双标签	文本级	被用来组合文档中的行内元素	`<p><span>some text.</span>some other text.</p>`
p	双标签		定义段落	`<p>This is some text in a very short paragraph</p>`
a	双标签		定义超链接	`<a href="http://www.w3school.com.cn">W3School</a>`
ul+li	双标签	容器级	定义无序列表	`<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>`

标签属性

标签身上的一些特殊性质

书写位置：在开始标签或单标签的标签名后面，添加一个空格，空格后面书写属性。
属性包含属性名（key）和属性值（value）两部分，根据英文表示，习惯将属性写法称为键值对写法，标签属性的键值对写法是：k=”v”

eg.

    <a href="www.baidu.com" title="继续努力！">我是超级链接</a>

标签之间的缩进

标签之间对空白换行、缩进不敏感
文字的位置不会根据标签的位置决定，而是根据标签的种类决定

标签与其他标签之间对空白、换行、缩进等不敏感，有没有空白不影响浏览器加载效果
HTML语法中，只根据标签开始结束换行（就像C语言只认;）
标签之间还可以识别嵌套关系
在上传代码过程中，为了提高传输速度，压缩文件大小，可以将代码进行压缩，删除多余的空白

文本的空白折叠现象

什么是空白折叠
普通文字之间，如果有空格、换行、缩进导致的空白，在浏览器中加载时会被折叠成一个空格显示，这就是空白折叠现象
怎么在浏览器中正常显示空白
一些空白要想在浏览器中正常显示，需要使用一些替换写法书写不同的空白。
空格：可以使用字符实体替换书写，在代码中书写 替换空格
换行：可以使用br单标签进行书写

eg.

<p>
        你好               我是张三
</p>

你好之后的空格会被折叠为一个空格，即空白折叠

<p>
        你好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是张三
</p>

增加了字符实体后，浏览器显示了多个空格

HTML标签详解

标签查询

主要讲解4个主要的标签：

h系列标签，又称为标题标签，主要作用是给页面文本添加标题语义
P标签，又称为段落标签，主要是给页面的文本添加段落的语义
Img标签，作用是在页面内部引入图片地址
a标签，作用是设置文本的超级链接和锚点

h标签

标题标签，是英文headline的缩写。

一共包含h1-h6总共6级标签
双标签
容器级
作用：给内部内容添加对应级别标题的语义
各种标签重要性不同，权重不同。所有的标题标签的重要性都比别的标签要高
eg.

<h1>我是h系列标签</h1>
<h2>我是h系列标签</h2>
<h3>我是h系列标签</h3>
<h4>我是h系列标签</h4>
<h5>我是h系列标签</h5>
<h6>我是h系列标签</h6>

下面来解释一下什么是权重

权重是对文字而言的
在浏览器的角度，权重影响了它的搜索引擎优化。
搜索引擎的优化除了会抓取meta标签配置的keywords之外还会优先抓取标题的内容
h1标签的权重是最高的，一个页面只使用一个h1，通常用来制作网页的logo，如果你在页面中设置了多个h1标签，搜索引擎会认为你在作弊，从而降低排名。

p标签

段落标签，是paragraph的缩写

双标签
文本级标签
作用：添加一个完整段落的语义
基本使用：

<p>
    周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市
</p>
<p>
    2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。
</p>

img标签

图片标签，是image的缩写

文本级
单标签
例子：

 <img src="D:\network_safe\note\chap2\pic\1.png" alt="文婧的图片" width="220px" height="10px" title="远景" border="10">

标签属性：

src: 作用是引入图片的路径
alt: 图片加载不出来时候的替换文本
width: 设置图片的宽度
height：设置图片的高度
注意：实际中，width和height不会同时设置。这是因为单独设置两者之一时，比如宽度，图片会等比例进行缩放。
title：作用是设置鼠标以上图片时候的悬停文本
border：作用是给图片添加边框，单位为像素（真正制作网页时，用CSS，该属性了解就可）

a标签

锚点标签，是anchor的缩写

双标签
文本级标签
作用：在指定位置添加一个超级链接，从而实现相应的跳转