HTML学习第一天（总结）

互联网原理（上网请求数据)

在浏览器输入一个网址，浏览器会通过http协议向服务器发送请求，服务器响应后，将文件传输到浏览器端，把文件放在缓存文件夹中。
在这里插入图片描述

1.服务器（sever）

功能比普通计算机强大，数据更改和上传在本地计算机完成，通过管理软件（例如：FTP）远程控制服务器，服务器24小时开机，保证用户随时访问。

2.浏览器（brower）

作用：用于发起http请求，接收服务器传输的文件，渲染网页。
五大浏览器：谷歌（Chrome），火狐（Firefox），IE，苹果浏览器（Safari），欧朋（opera）
在这里插入图片描述
临时协议：临时储存网页文件。任何网页第二次打开都会变快，因为的一次打开时有大部分文件缓存到自己的计算机中。

3.http协议（hypertext transfer protool）

发起请求的方法：输入网址或点击网址链接。
发起（request）：相对应服务器发送请求
相应（response）：服务器根据请求响应文件，将数据传输后渲染。
浏览器一般多个http请求同时发送。
打开浏览器控制台用F12

HTML基础概念

HTML：hypertext markup language
作用：制作网页的页面，负责描述文档语义的语言。

HTML 结构

1.基本骨架

在这里插入图片描述
html（双标签）:最根本的标签表示整个网页；
head（双标签）：网页的头部，里面是网页的配置，除了title标签里的内容，其他的不可见；
title（双标签）：网页的标题，搜索时作为关键字；
body（双标签）：网页用户可以看见的部分；

2.文档DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD：DocTyPe Definition （声明文档类型）；告知html规范的版本；

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>

3.html 标签（双标签）

xmlns：声明命名规范；
lang：规定文本用英文；

4.meta标签（单标签）

作用：定义字库（常用UTF-8）；
UTF-8：基本包括世界所有语言，中文占3个字节；
gb2312 / gak：中文字库，包括基本简体，大部分繁体，当网页信息大量中文且要求速度快时使用；

HTML 语法

1.html对换行和空格不敏感，对标签的嵌套敏感

在这里插入图片描述

2.空间折叠现象

在普通文本中的换行，空格，在浏览器中被折叠为一个空格；
在这里插入图片描述
”&nbsp；“：表示一个空格；

3.html标签

1.必须在<>里；
2.双标签必须成对出现；
3.尾标签必须写关闭符 ”/“；
4.标签分类：容器级（可以放置任意类型的标签，还可嵌套），文本级（只能放置文字图片表单元素，废弃文字，不能放容器级）

4.标签属性（键：k（key）；值：v（value））

1.每个标签都有自己属性，写在起始标签的内部，标签与标签，属性与属性之间用空格隔开；
2.键值对书写格式：k=”v“，中间不能有空格；
3.属性值必须用双引号包裹，可以有多个；

HTML标签

1.h标签（双标签，由六个等级和h1-h6）

语义：给文本添加1-6级标题；（随着级别降低，重要性也降低；h1 一般给logo，还便于搜索）
在这里插入图片描述

2.p标签（文本级）

paragraph的首字母，一个p标签只能作用于一个段落，若有多个段落分别标记。
作用：内部放置文本，图片，表单或废弃的font；

3.img标签（单标签）

image缩写；
样式：
在这里插入图片描述

属性：

src        source表示图片路径；
width     图片宽度，单位px，可省略；
height    图片高度，单位px，可省略；
border   边框属性，决定边框厚度；
title        设置提示文本，属性值就是具体文本；
alt          设置图像没有时的替换文本；

4.路径

查找相关文件位置的方法
种类：相对路径，绝对路径；

相对路径（从本身出发，查找文件位置）

同级查找：直接书写文件的名字（包括文件名和扩展名）
子集查找：进入文件查找（用/表示进入）
上级查找：…/ 表示打开上一级文件夹；
注意不能跨盘符进行查找；

绝对路径（从盘符出发查找，或直接写网址）

常用相对路径和网址形式的绝对路径。

来源：CSDN

作者：上上谦507

链接：https://blog.csdn.net/weixin_45883291/article/details/104110922

标签

html语言