文章目录

  • ​​一. HTML简介​​
  • ​​1. 为什么要学习HTML5​​
  • ​​2. 什么是HTML​​
  • ​​3. HTML标签​​
  • ​​4. HTML 元素​​
  • ​​5. Web 浏览器​​
  • ​​6. HTML 网页结构​​
  • ​​3. HTML版本​​
  • ​​(1). HTML5新特性​​
  • ​​4. 编写一些简单的例子​​
  • ​​第一个网页的例子：一首诗​​
  • ​​第二个网页的例子：自结束标签和注释的解释​​
  • ​​第三个网页中例子：标签中的属性​​
  • ​​网页的第四个例子：文档声明+进制解释+字符编码解释+设置网页字符集​​
  • ​​网页的第五个例子：网页的基本结构​​
  • ​​二. 详解一个HTML结构​​
  • ​​1. <!DOCTYPE >声明​​
  • ​​通用声明​​
  • ​​2. <html> </html>​​
  • ​​3. <head> </head>​​
  • ​​4. <body> </body>​​
  • ​​5. 引入CSS样式文件​​
  • ​​6. 引用JavaScript脚本文件​​

一. HTML简介

超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

Web前端——HTML概述_html5

  • 网页本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器显示其中的内容（如：文字如何处理，画中画如何安排，图片如何显示）

1. 为什么要学习HTML5

Web前端——HTML概述_html5_02

2. 什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

3. HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

例如：<标签>内容<标签>

4. HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

HTML 元素实例：<p>这是一个段落</p>

5. Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

6. HTML 网页结构

Web前端——HTML概述_HTML_03

Web前端——HTML概述_HTML_04


只有<body>区域才会在浏览器中显示

3. HTML版本

版本

发布时间

HTML

1991

HTML+

1993

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML 1.0

2000

HTML5

2012

XHTML5

2013

(1). HTML5新特性

Web前端——HTML概述_html_05

4. 编写一些简单的例子

Web前端——HTML概述_HTML5_06

第一个网页的例子：一首诗

```html
<html>
  <head>
    <title>哈哈，走一个</title>
  </head>
  <body>
    <h1>回乡偶书（二首）</h1>
    <h2>其一</h2>
    <h2>贺知章</h2>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p>儿童相见不相识</p>
    <p>笑问客从何处来</p>
  </body>
</html>
```
结果：

Web前端——HTML概述_html5_07

第二个网页的例子：自结束标签和注释的解释

```html
<html>
  <head>
    <title>这是我的第二个网页</title>
  </head>
  <body>
    
    <!-- 这个东西很重要-->
    <h1>这是我的第二个网页</h1>
    
    <!--
    HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，
      但是可以在源码中查看注释，注释用来对代码进行解释说明的。
      开发中一定要养成良好的编写注释的习惯，注释要求简单明了
      
    注释还可以将一些不希望显示的内容隐藏
    
    注释不能嵌套
      
    标签一般成对出现，但是也存在一些自结束标签
    
    以下是自结束标签：自己把自己结束了，只有开始标签
    <img>或者写成<img />
    
    <input>或者写成<input />
    
    -->
    
  </body>
</html>
```


结果：

Web前端——HTML概述_HTML_08

第三个网页中例子：标签中的属性

```html
<html>
  <head>
    <title>标签的属性</title>
  </head>
  <body>
  
  <!--
    属性，在标签中（开始标签或自结束标签）还可以设置属性
      属性是一个名值对（x=y）
      属性用来设置标签中的内容如何显示
      
      属性和标签名或其他属性应该使用空格隔开
      
      属性不能瞎写，应该根据文档中的规定编写
        有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号括起来
  -->
  
    <h1>这是我的<font color="red" size='10'>第三个</font>网页！</h1>
  </body>
</html>
```
结果：

Web前端——HTML概述_HTML5_09

网页的第四个例子：文档声明+进制解释+字符编码解释+设置网页字符集

```html
<!doctype html>
<html>
  <head>
  <!-- 可以通过meta标签来设置网页的字符集，避免乱码问题 -->
    <meta charset="utf-8">
    <title>网页的基本结构</title>
  </head>
  <body>
  
  <!--
    迭代
      网页的版本
        HTML4
        XHTML2.0
        HTML5
        ... 
      文档声明（doctype）
        -文档声明用来告诉浏览器当前网页的版本
        -HTML5的文档声明
        <!doctype html>
        <!Doctype HTML>
    
    进制
      十进制(日常使用)
        - 特点：满10进1
        - 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20
        - 单位数字：10个（0-9）
        
      二进制（计算机底层的进制）
        - 特点：满2进1
        - 计数：0 1 10 11 100 101 110 111
        - 单位数字：2个（0-1）
        - 扩展
          - 所有数据在计算机底层都会以二进制的形式保存
          - 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0
            这一个小格子在内存中被称为一位（bit）
            
            8bit = 1byte（字节）
            1024byte = 1kb（千字节）
            1024kb = 1mb（兆字节）
            
      八进制（很少用）
        - 特点：满8进1
        - 计数：0 1 2 3 4 5 6 7 10 12 ... 17 20
        - 单位数字：8个（0-7）
      
      十六进制（一般显示一个二进制数字时，都会转换为十六进制）
        - 特点：满16进1
        - 计数：0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 ... 1A 1B 1C 1D 1E 1F 20...
        - 单位数字：16个（0-F）
    
    字符编码
      超哥 -> 111000110101
      111000110101 -> 超哥
      
      -所有的数据在计算机中存储时都是以二进制的形式存储的，文字也不例外。
        所以一段文字在存储到内存中时，都需要转换为二进制编码
        当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读
        
      - 编码
        - 将字符转换为二进制码的过程称为编码
      -解码
        - 将二进制码转换为字符的过程称为解码
      - 字符集（charset）
        - 编码和解码所采用的规则称为字符集
      - 乱码问题
        - 如果编码和解码所采用的字符集不同就会出现乱码问题
      - 常见的字符集：
        ASCII(7位)
        ISO88591（8位）
        GB2312（中国）
        GBK（中国）
        UTF-8（万国码），在开发时我们使用的字符集都是UTF-8
  -->
  
  </body>
</html>
```

网页的第五个例子：网页的基本结构

```html
<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写到根元素里面 -->
<html>
  
  <!-- head是网页中的头部，head中的内容不会再网页中直接出现，主要用来帮助浏览器或搜素引擎来解析网页 -->
  <head>

    <!-- meta标签用来设置网页元数据，这里meat用来设置网页的字符集，避免出现乱码问题 -->
    <meta charset="utf-8">
    
    <!-- title的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
    <title>网页的标题</title>
    
  </head>
  
  <!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里面 -->
  <body>
  
    <!-- h1是网页的一级标题 -->
    <h1>网页的大标题</h1>
  
  </body>
  
</html>

```

结果：

Web前端——HTML概述_HTML_10

二. 详解一个HTML结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>第一个例子</title>
</head>
<body> 
  <h1>我的第一个标题</h1>
 
  <p>我的第一个段落。</p> 
</body>
</html>

1. <!DOCTYPE >声明

<!DOCTYPE html> 它是 HTML5 标准网页声明，全称为 Document Type HyperText Mark-up Language，是一条标示语言。支持 HTML5 标准的主流浏览器都认识这个声明。表示网页采用 HTML5， 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

注：声明中的html不区分大小写

通用声明

HTML5

<!DOCTYPE html&>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. <html> </html>

<html>元素是 HTML 页面的根元素

<html>元素定义了整个 HTML 文档。
表示创建一个超文本标签语言文档

这个元素拥有一个开始标签 ，以及一个结束标签 .

3. <head> </head>

<head> 元素包含了文档的元（meta）数据
用来设置文档的标题和其他在网页中不显示的信息

如 <meta charset="utf-8"> 定义网页编码格式为 utf-8

​​下面这些标签可用在 head 部分​​

Web前端——HTML概述_html_11

4. <body> </body>

<body>元素包含了可见的页面内容
表示网页的主体，即网页文档可见部分

5. 引入CSS样式文件

CSS（Cascading Style Sheets）翻译为层叠样式表

优点：使用CSS语言设计网页的优点能够真正做到将网页内容与表现形式进行分离

CSS语言能够支持全部字体风格与字号大小，能够对网页中的对象位置进行像素级别精确定位，对网页对象的样式进行动态编辑，能够进行简单的人机交互设计

CSS语言基本有3种形式：外链式(linking)、嵌入式(embedding)、内联式(lnline)

在HTML头部标签中：

外链式(linking)：通过link标签
嵌入式(embedding)：通过style标签
内联式(lnline)：通过style标签

6. 引用JavaScript脚本文件

JavaScript是一种解释型编程语言，其解释器通常也称为JavaScript引擎，目前，业内主流浏览器均内置了JavaScript引擎，且该引擎的性能优劣直接影响到浏览器的性能，进而直观地体现到用户体验上

JavaScript作用：使信息和用户之间不仅只是一种显示浏览的关系，而是实现了一种实时的、动态的、可交互式的表达能力

JavaScript脚本使用HTML <script> 标签

JavaScript脚本语言使用方法：

  1. 内嵌式JavaScript脚本
  2. 引入外部JavaScript脚本

JavaScript脚本执行顺序原则：

按顺序载入
载入即执行
执行时会阻塞后续内容