HTML介绍与基本标签

一、HTML介绍

HTML：超文本标记语言（hyper text markup language）

超文本：指页面内可以包含图片、链接、音乐、视频等非文字元素

标记：一种标记符，告诉浏览器如何显示其中的内容

注意：html不是编程语言（没有变量与流程控制）是一个标记语言

静态网页：html代码和内容书写完毕后，页面显示内容和显示效果基本上不会发生变化了----除非修改页面代码

动态网页：页面代码不变，但是显示内容却是可以随着时间、环境或数据库操作的结果而发生改变。

注意：网页中幻灯片效果，文字滚动效果，如果内容本身没有变化也属于静态网页。

Html发展历史：

HTML4.01——1999.12.24，w3c推荐标准

XHTML1.0——2000.1.26，w3c推荐标准

HTML5——201410.29，保留HTML4所有功能增加很多新功能。

W3c：万维网联盟

Html5（h5）：指hmtl中最新的版本，也是使用做多的版本
开发工具：VS code 、webstorm
开发标准浏览器：Firefox、chrome

都有强大的开发者工具

二、HTML入门

HTML语法
1. 文件格式：.html,.htm(以前后缀名不超过三个)
2. 标签格式：用于表现结构的内容，是网页组成重要部分（骨架）
  1. 大部分标签由开始标签和结束标签组成
    1. 开始标签：是被尖括号包围的元素名。
    2. 结束标签：是被尖括号包围的斜杠和元素名。
  2. 标签分类
    1. 单标签与双标签
      1. 双标签：是由开始标签和结束标签组成如：<b> </b>
      2. 单标签：是指没有结束标签的标签如：<br/>
  3. 标签属性：属性描述标签更多细节
    1. 基本语法（）
      1. 标签属性必须写在开始标签上
      2. 属性写法格式：
        
        单个属性：属性名1=”属性的值1”
        
        多个属性：使用英文空格进行分隔
      3. 属性值，可以使用单引号、双引号或不加引号，推荐使用双引号
HTML基本结构

<!DOCTYPE html>

<html>

<head>

<meta>

</head>

</html>

DOCTYPE: 文档声明

html: 标签告知浏览器其自身是一个 HTML 文档

head: 标签用于定义文档的头部（文档的描述信息）

body: 标签用于定义文档的主体（文档的主体内容）

VS code中元素名+tab 针对双标签进行补全

chartset：设置编码格式。国际通用编码：utf-8（默认设置）中文编码：gbk/gbk212（国标）

<title>标签：表示显示在浏览器选项卡上的名字

<body>标签：表示文档的主要内容，所需要展示的内容都必须要放在body里面

编码问题
1. 文件编码是指HTML文件保存到硬盘中的编码格式，一般在保存的时候设置，常见的开发工具都可以在编辑的时候设置。

注意：2个地方必须保持一致（文件编码+HTML编码声明）

HTML规范
1. HTML标签的尖括号必须是英文输入法中的符号
2. HTML标签通常是成对出现的
3. 不区分大小写（建议小写）
4. 可以嵌套，但是不允许交叉嵌套

三、HTML基本标签

基础标签
1. hn标签（双标签）：是一系列标签n表示1-6
  1. 作用：定义标题
  2. 默认效果：文字加粗，有大小
  3. 注意：
    1. h1和h2一般在同一个页面只能使用一次（SEO权重）
    2. h标签具有明确的语义，建议在同一行中不能使用h标签来控制文字大小
2. p标签：定义段落
  1. 注意：默认p标签自动在前后加入间距
3. br标签：插入一个简单的换行符（类似于回车）
4. hr标签：标签在HTML页面中一条水平分割线
  1. 说明：早期用来制作标题下面的下划线，现在基本不使用，后期使用border（边框样式代替）
文本标签：对文字内容进行修饰
1. b标签和strong标签（双标签）：对文字进行加粗
  1. 注意：两个标签都有加粗效果，在H5中建议使用strong标签
2. i标签和em标签（双标签）：让文字倾斜
  1. 注意两个标签都有斜体效果，在H5中建议使用em标签
3. small标签和big标签
  1. small标签：让文字呈现相对小号字体效果
  2. big标签：让文字呈现相对大号字体效果
  3. 注意：相对性（神对当前文字进行缩小、放大）、small标签有下限值、big标签没有上限值
4. pre标签：预格式化文本（会保留空格和回车）
  1. 作用：一般用于保留计算机代码格式使用
5. u标签：下划线文本
  1. 一般不建议在文字中使用u标签，会混淆超链接
6. del标签：文本中已被删除的的文本（文字上加删除线）
7. sub标签：定义文档中的下标文本
8. sup标签：定义文档中的上标文本
布局标签：网页的排版布局（块级标签和行内标签）
1. span标签（行内标签）：用来组合文档中的行内元素
  1. 作用：主要用于修饰指定内容的细节，如新闻列表中的日期，对文字加颜色时
  2. 行内标签特点：宽度为内容的大小，可以多个行内标签放在一行中
2. div标签（块级标签）：定义文档中的分区和节
  1. 作用：主要用于网站中大型板块或片段的制作
  2. 块级标签特点：默认宽度为100%，会独占一行
特殊符号
1. 作用：主要用于替代HTML中的一些特殊符号或实现效果
2. 语法：&符号名；
3. 常见的特殊符号：
  1.   空格（小空格）
  2. &emsp; 空格（大空格，占一个中文位置）
  3. > 大于 > gt:great than
  4. < 小于 < lt:less than
  5. © 版权所有
  6. ¥ 人民币
4. 提示：特殊符号制作：通过查HTML符号或通过某些输入法输入