HTML入门必看 HTML基本标签

1.1基本语法概述

1.HTML标签是由尖括号包围的关键词，例如

2…HTML标签通常是成对出现的，例如，我们称为双标签。标签中第一个标签是开始标签，第二个是结束标签。

3.有些特殊的标签必须是单个标签（极少情况），例如
，我们称为单标签。

1.2标签关系

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

2.HTML基本结构标签

标签名	定义	说明
	HTML标签	页面中的最大的标签，我们称为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	让页面拥有一个属于自己的网页标题
	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里的

VScode常用快捷键

shift+ale +下箭头（上箭头） 快速复制一行代码
ctrl+d 选定多个相同的单词
ctrl+alt+上箭头（下箭头） 添加多个光标
ctrl+h 全局替换某些单词
ctrl+g 快速定位到某一行
shift+alt+拖动鼠标 选择一个区块

3.网页开发工具

VScode工具生成骨架标签新增代码

3.1文档类型声明标签

标签 <!DOCTYPE>
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
1.<!DOCTYPE>声明位于文档中的最前面的位置，出于标签之前。
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

3.2 lang语言种类

用来定义当前文档显示的语言。
1.en定义语言为英语
2.zh-CN定义语言为中文

3.3字符集

字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。
在标签内，可以通过标签的属性来来规定HTML文档应该使用哪种字符编码。

4.HTML常用标签

4.1标签语义

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

4.2标题标签

-

标签语义：作为标题使用，并且依据重要性递减。
特点：
1.加了标题的文字会变加粗，字号也会以此变大。
2.一个标题独占一行。

4.3段落和换行标签

段落标签：

我是一个段落标签

标签语义：可以把HTML文档分割成若干段落。
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

换行标签：

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

4.4文本格式化标签

标签语义：突出重要性，比普通文字更重要。

语义	标签	说明
加粗	或者	更推荐使用标签
倾斜	或者	更推荐使用标签
删除线	或者	更推荐使用标签
下划线	或者	更推荐使用标签

4.5

和 标签

<div>和是没有语义的，它们就是一个盒子，用来装内容的。
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：
1.

标签用来布局，但是现在一行只能放一个

。大盒子
2. 标签用来布局，一行可以多个。小盒子

4.6图像标签和路径

1.图像标签

在HTML标签中，标签用于定义HTML页面中的图像。
<img src=“图像URL”>
图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

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

4.7超链接标签

1.链接的语法格式
<a href=“跳转目标” target="目标窗口的弹出方式”>文本或图像

属性	作用
href	用于指定链接目标的url地址，（必须属性）当标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中的打开方式。

2.链接分类
1.外部链接：例如<a href=“http://www.baidu.com”>百度。
2.内部链接：网站内部之间的相互链接，直接链接内部页面名称即可，例如<a href=“index.html”>首页。
3.空链接：如果当时没有确定链接目标时<a href=“#”>首页。
4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接 。
6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。
在链接文本的href属性中，设置属性值为#名字的形式，如<a href=“two”>第二集。
找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id=“two”>第二集介绍。