1. HTML语法规范
1.1 基本语法概述
- HTML标签是由尖括号包围的关键词
- 所有的标签都包含在 <> 中,大部分情况下是成对出现的。
双标签:
<html></html>
前面的叫开始标签,后面的叫结束标签。(结束标签有 / )
单标签:
<br />
1.2 标签关系
双标签关系可分为:包含关系 并列关系
- 包含关系:
<head>
<title> </title>
</head>
- 并列关系
<head> </head>
<body> </body>
2. HTML基本结构标签
2.1 第一个HTML网页
每个网页都会有一个基本的结构标签(即骨骼标签)。
3.网页开发工具
- VSCode的使用
- VSCode工具生成骨架标签新增代码
3.1 文档类型声明标签
<!DOCTYPE html>
告诉浏览器使用哪种HTML版本来显示网页
3.2 lang语言种类
<html lang="en">
1.en定义语言为英语(英文网页)
2.zh-CN定义语言为中文(中文网页)
3.3 字符集
HTML charset 属性
为了正确显示 HTML 页面,Web 浏览器必须知道页面中使用的字符集。
<meta charset="UTF-8">
采用UTF-8来保存文字,如果不写就会乱码
如果未规定,UTF-8 则是 HTML 中的默认字符集。
4.HTML常用标签
4.1 标签语义
标签的语义,即标签的含义。
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。
4.2 标题标签
-
<h1>标题标签</h1>
标签语义:作为标题使用,并且依据重要性递减。
< h1 align=“center”>:标题居中。
< hr /> 标签在 HTML 页面中创建水平线。(可用于分割内容)
4.3 段落和换行标签
- 段落标签:
<p>段落</p>
标签语义:可以把HTML文档分割为若干段落
- 换行标签:
<br />
标签语义:强制换行。
在开始标签中添加斜杠,比如
,是关闭空元素的正确方法
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
4.4 文本格式化标签
标签语义:突出重要性,比普通文字更重要。
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
适合显示计算机代码时使用。
4.5
和 标签
结构化标签:span和div标签包裹的内容并没有特殊的呈现效果,这两个标签起到的是规划的作用,和家里用作容器的衣柜、书架等的作用类似,通常用于规划html结构和为多个标签内容统一添加样式和行为。
可以通过 < div> 和 < span> 将 HTML 元素组合起来。
大多数HTML元素被定义为块级元素或内联元素。
- HTML 块级元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:< h1>, < p>, < ul>, < table> - HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子:< b>, < td>, < a>, < img>
没有语义,它们是一个盒子,用来装内容的,可以布局网页。
- 特点:
- < div>标签用来布局,但是一行只能放一个< div>。(大盒子)
< div> 是一个块级元素。换行是 < div> 固有的唯一格式表现。可以通过 < div> 的 class 或 id 应用额外的样式。
class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。 - < span>标签用来布局,一行可以有多个。(小盒子)
< div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。
4.6 图像标签和路径
- 图像标签
<img