HTML基础

最新推荐文章于 2024-11-06 16:04:23 发布

x040123

最新推荐文章于 2024-11-06 16:04:23 发布

阅读量62

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/x040123/article/details/128464667

版权

1.网页

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本要素，它通常有图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html后缀结尾的文件，因此将其俗称为HTML文件。

1.2 什么是HTML

HTML指的是超文本标记语言，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。

所谓超文本，有2层含义：
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

1.3 网页的形成

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。

2.浏览器

网页是通过浏览器来展示的。

2.1 常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐、谷歌、Safair和Opera等，称为五大浏览器。

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

目前国内一般浏览器都会使用Webkit/Blink内核。

3.Web标准

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

3.1为什么需要Web标准

浏览器不同，他们显示页面或者排版就有些许差异。

遵循Web标准的优点：
1.可以让不同的开发人员写出的页面更标准、更统一。
2.让Web的发展前景更广阔。
3.内容能被更广泛的设备访问。
4.更容易被搜寻引擎搜索。
5.降低网站流量费用。
6.使网站更易于维护。
7.提高页面浏览速度。

3.2 Web标准的构成

主要包括结构、表现和行为三个方面。
结构：结构用于对网页元素进行整理和分类，如HTML
表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为：行为是指网页模型的定义及交互的编写，如JavaScript

Web标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

HTML标签

1.HTML语法规范

1.1 基本语法概述

1.HTML标签是由尖括号包围的关键词，例如< html >。
2.HTML标签通常是成对出现的，称为双标签。标签对中的第一个标签是开始标签，第二个是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），称为单标签。

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系。
包含关系：

<head>
    <title></title>
</head>

并列关系：

<head></head>
<body></body>

2.HTML基本结构标签

2.1 第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。
在这里插入图片描述

<html>
   <head>
       <title>第一个页面</title>
   </head>
   <body>
   </body>
</html>

在这里插入图片描述

3.开发工具

在这里插入图片描述

4.vscode插件使用

在这里插入图片描述

字符集：多个字符的集合
在< head >标签内，可以通过< meta >标签的chaarset属性来规定HTML文档应该使用哪种字符编码。
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也称为万国码。
注：上面语法是必须要写的代码，否则可能会引起乱码的情况。

5.HTML常用标签

5.1 标签语义

在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

5.2 标题标签< h1 >-< h6 >

为使网页更具语义化，我们常会在页面中使用到标题标签。HTML提供了六个等级的网页标题，即< h1 >-< h6 >。
标签语义：作为标题使用，并且依据重要性递减。
特点：
1.加了标题的文字会加粗，字号也会依次变大；
2.一个标题独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题标签</h1>
</body>
</html>

5.3 段落和换行标签

在HTML标签中，< p >标签用于定义段落，将整个网页分成若干个段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p></p>
</body>
</html>

特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落与段落之间保有空隙。

在HTML中，可以使用 < br/ >进行强制换行。
特点：
1.< br/ >是个单标签。
2.< br/ >标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

5.4 文本格式化标签

在网页中，有些文字需要设置粗体、斜体或下划线等效果，需要用到HTML中的文本格式化标签。
标签语义：突出重要性，比普通文字更重要。
在这里插入图片描述

5.5 < div >和< span >标签

< div >和< span >是没有语义的，它们就是一个盒子，用来装内容的。
特点：
1.< div >标签用来布局，一行只能放一个< div >。大盒子
2.< span >标签用来布局，一行上可以放多个< span >。小盒子

5.6图像标签和路径

图像标签
在HTML标签中，< img >标签用于定义HTML页面中的图像。

<img src=""/>

src是< img >标签的必须属性，它用于指定图像文件的路径和文件名
所谓属性：简单理解就是属于这个图像标签的特性。

其他属性：
在这里插入图片描述
图像标签属性注意点：
1.图像标签可以拥有多个属性，必须写在标签名的后面。
2.属性之间不分前后顺序，标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式，即key="value"的格式，属性=“属性值”。

目录文件夹和根目录
目录文件夹：就是普通文件夹，里面只不过存放了做页面所需要的相关素材。
根目录：打开目录文件夹的第一层就是根目录。

路径
可以通过采用“路径”的方式来查找指定图像文件的位置。
路径可以分为相对路径和绝对路径。
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。即：图片相对于HTML页面的位置。

相对路径是从代码所在的文件出发，去找目标文件的。
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

5.7 超链接标签

在HTML标签中，< a >标签用于定义超链接，作用是从一个页面链接到另一个页面。

链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在这里插入图片描述
2. 链接分类：
(1)外部链接
(2)内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。
(3)空链接：如果当时没有确定链接目标时，< a href=“#” >首页< /a >。
(4)下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
(5)网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加链接。
(6)锚点链接：点击链接，可以快速定位到页面中的某个位置。（在链接文本的href属性中，设置属性值为 #名字 的形式；找到目标位置标签，里面添加一个id属性=名字）