HTML标签上

HTML语法规范

基本语法概述

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

标签关系

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

要么是包含关系，要么是并列关系

HTML基本结构标签

第一个HTML网页

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


HTML文档的后缀名必须是.html或.htm,浏览器的作用是读取HTML文档，并以网页的形式显示出它们

开发网页的工具

VSCode的使用

1.双击打开软件
2.新建文件（Ctrl+N)
3.保存（Ctrl+S),注意移动要保存为.html文件
4.Ctrl+加号键，Ctrl+减号键 可以放大缩小视图
5.生成页面骨架结构
输入！ 按下Tab键

VS Code 插件安装

VSCode工具生成骨架标签新增代码
1.<!DOCTYPE>标签
文档类型的声明标签，作用是告诉浏览器使用哪种HTML版本来显示网页
注意

声明位于文档中的最前面的位置，处于标签之前 不是一个HTML标签，他就是文档类型声明标签 文档类型声明标签，告诉浏览器这个页面采用html5版本来显示页面

2.lang语言
用来定义当前文档显示的语言
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页
对于文档显示来说,定义成en的文档也可以显示中文，定义为zh-CN的文档也可以显示英文

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

charset常用的值有：GB2312.BIG5,GBK和UTF-8,其中UTF-8也称为万国码，基本包含了世界所有国家需要用到的字符
注意：字符集没写会导致乱码

HTML常用标签

标签语义

简单理解就是指标签的含义，即这个标签是用来干嘛的

标题标签(重要)

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题
即<h1>-<h6>

<h1>我是一级标题<h1/>

单词head的缩写，意为头部，标题
标签语义：作为标题使用，并且重要性递减

特点：
1、加了标题的文字会变的加粗，字号也会依次变大
2，一个标题独占一行

段落和换行标签（重要）

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干个段落

我是个段落标签

标签语义：可以把HTML文档分割为若干段落

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

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自行换行。如果希望某段文本强制换行显示，就需要使用换行标签

单词break的缩写，意为打断，换行
标签语义：强制换行

特点：
1.
是个单标签
2.
标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

文本格式化标签

在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示

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

重点记住加粗和倾斜

盒子标签

和 是没有语义的，他们就是一个盒子，用来装内容

这是头部

今日价格 div是division的缩写，表示分割，分区。span意为跨度，跨距

特点：
1.

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

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

图像标签和路径

图像标签

在HTML标签中，标签用于定义HTML页面中的图像
<img src="图像URL“/>
单词image的缩写，意为图像
src是标签的必须属性，用于指定图像文件的路径和文件名
所谓属性：简单理解就是属于这个图像标签的特性

图像标签的其他属性

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

重点掌握点
1.图像标签哪个属性必须要写
src属性一定要写

相对路径：简单来说，图片相对于HTML文件的位置
绝对路径：通常从盘符开始的路径
例如：“D:\前端基础第一天-HTML\案例\images"或完整的网络地址"http://www.itcast.cn/2018czgw/images/logo2.png”

超链接标签（重点）

1.超链接的语法格式
文本或图像
单词anchor的缩写，意为：锚

属性 作用
href 用于指定链接目标的地址，出现a，一定要写href
target 用于指定链接页面的打开方式，默认_self当前的页面打开，_blank为在新窗口中打开

target 打开窗口的方式，默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面

2.链接分类：
1.外部链接：例如

<a href="http://www.baidu.com">百度</a>

2.内部链接：

网站内部页面之间的相互链接，直接链接内部页面名称即可，例如

<a href="index.html">首页</a>

3.空链接：如果没有确定链接目标时

<a href="#">首页</a>

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
5.网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
跟文字一样，用a标签把它们包含就可以添加超链接了

6.锚点链接：当我们点击链接，可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为#名字的形式，如

<a href="#two">第2集</a>

找到目标位置标签，里面添加一个id属性=刚才的名字，如：

<h3 id="two">第2集介绍</h3>

HTML中的注释和特殊字符

注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签
HTML中的注释以

快捷键：ctrl +

一句话：注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的
添加注释是为了更好的解释代码的功能，便于开发人员理解和阅读代码

特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
重点记住：空格，大于号，小于号，其余的使用很少，如果需要回头查阅即可