HTML基础-01

最新推荐文章于 2024-11-08 10:30:00 发布

tttxxl

最新推荐文章于 2024-11-08 10:30:00 发布

阅读量108

点赞数

分类专栏： HTML5 文章标签： html web

本文链接：https://blog.csdn.net/tttxxl/article/details/116721375

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础-01

1.认识WEB
- 1.1.常见浏览器
- 1.2.WEB标准
2.HTML初识

1.认识WEB

网页只要是由文字，图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频，视频以及Flash等。

浏览器时网页显示和运行的平台。

浏览器内核：包括排版引擎，解释引擎，渲染引擎。负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

1.1.常见浏览器

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器右
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。是webkit的二次开发。
Opera	blink	现在跟随chrome用blink内核。

1.2.WEB标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C万维网是国际最著名的标准化组织。

1.为什么需要Web标准：

浏览器是解析网页和运行网页的平台，不同的浏览器就有不同的解析规则。由于不同浏览器解析出来的效果可能不一致，开发者可能需要针对不同浏览器做不同的开发，任务繁重。

所以需要一个通用的，开发者共同遵循的WEB标准。只要符合这个标准，那么开发者写出的页面，经过不同的浏览器渲染解析得到的效果是一样的。

遵循Web标准可以让不同的开发人员写出的页面更标准，更统一。

2.Web标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为	行为是指网页模型的定义以及交互的编写，现阶段主要学的是JavaScript。

3.Web标准提出的最佳体验方案：结构、样式、行为相分离。

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
4.Web标准的优点

易于维护：只需更改CSS文件，就可以改变整站的样式。
页面响应快：HTML文档体积变小，响应时间短。
可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别。
设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式。
搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名。

2.HTML初识

HTML：Hyper Text Markup Language超文本标记语言。

超文本：俩层含义。

1.它不仅仅是文本，还可以加入图片，声音，动画，多媒体等内容。超越文本的限制。
2.不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接。超级链接文本。

目标：

1.能够说出标签的书写注意规范。
2.能够写出HTML骨架标签。
3.能够写出超链接标签
4.能够写出图片标签，并说出alt和title的区别
5.能够说出相对路径的三种形式。

2.1Html基本结构标签

1.骨架标签:

每个页面都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写的。

HTML页面也称为HTML文档。

< html >：HTML标签，页面中最大的标签，跟标签。
< head >：文档的头部，在head标签中我们必须设置title标签。
< title >：文档的标题，head的子标签。
< body >：文档的主题，主要是页面的具体内容。

2.文档类型声明标签：就叫文档类型声明标签，不属于HTML的标签。

< !DOCTYPE html >：文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。
这句代码的意思是：当前页面采用的是HTML5版本来显示网页。
注意：

< !DOCTYPE html >声明唯一文档中的最前面的位置；其不是一个HTML标签，它就是文档类型声明标签。

被< html > < html/ >包裹住的标签才是HTML标签；< !DOCTYPE html >在< html > 上面。

3.<html lang="en">：用来定义当前文档显示的语言。

1.en：定义语言为英文
2.zh_CN：定义语言为中文。
简单来说定义为en就是英文网页，定义为zh-CN就是中文网页。
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示成英文。

4.<meta charset="UTF-8">：

在< head >标签内，可以通过< meta >标签的charset属性来规定HTML文档应该使用哪种字符编码。

2.2Html标签

2.2.1.段落标签和换行标签

1.< p >< p/ >：段落标签。 paragraph
2.< br/ >：换行标签。break
3.< h1 >< h1/ >：标题标签。独占一行，不用换行。

2.2.2.文本格式化标签

在这里插入图片描述

2.2.3.div和span

div和span是没有语义的，它们就是一个盒子，用来装内容的。用来布局网页的。

1.一个div独占一行
2.span是小盒子：一行可以放多个。

2.2.4.图片标签

< img src="" />：自闭和标签，src属性必填。

src：图片路径，必填属性。
alt：当图片显示不出来是，替换的文字。
title：提示文本，鼠标放到图像上，显示的文字。
width：像素，设置图像的宽度
height：像素，设置图像的高度。
border：像素，设置图像的边框粗细。
注意：宽度和高度，一般只修改一个，只修改宽度，高度会等比例压缩，不会有太大的压缩失真问题。同时修改会造成压缩失真的情况。

2.2.5.相对路径

以这两个文件所处关系为例：在同一级。
在这里插入图片描述

1.写法一：同一级路径：

<img src="帅哥1.jpg"/><br/>
<img src="和html所在同一级的文件夹/帅哥2.jpg" />
2.写法二：当前目录路径：./

<img src="./帅哥1.jpg" /><br/>
3.上一级目录：../
<img src="../HTML/帅哥1.jpg"/><br/>
4.项目路径：/
<img src="/VSCode_Project/HTML/帅哥1.jpg"/>
5.绝对路径：

以盘符开始，而且是\斜杠。相对路径是/斜杠。

网络中的绝对地址：<img src="https://i2.hdslb.com/bfs/face/e11811315acb3eef69c91ae6708d3e4048b86bf9.jpg@96w_96h_1c.webp">