HTML学习笔记(一) 基本介绍

简介: HTML学习笔记(一) 基本介绍

这篇文章将会介绍 HTML 的基本概念,帮助大家快速掌握 HTML 的基础用法



1、HTML 简介


HTML 不同于一般的程序设计语言,它是一种 标记语言,主要用于 定义文档规则和描述文档结构

标准通用标记语言(Standard Generalized Markup Language,SGML)是最基础的标记语言

其它标记语言都是从 SGML 的基础上发展而来的,并根据不同的领域对 SGML 进行一定的拓展

其中超文本标记语言(Hyper Text Markup Language,HTML)就是专门用于编写 Web 文档的语言


2、HTML 文档结构


<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <p>Hello</p>
        <br/>
        <p style = "color: red">Stranger</p>
    </body>
</html>


上面的代码是一个十分简单的例子(创建一个 .html 文件,输入以上代码,在浏览器打开即可看到效果)

但它已具备最基本的 Web 文档结构,我们只需知道该文档由两部分组成:文档描述文档内容


(1)文档描述


<!DOCTYPE html>

以上语句称为 DTD 声明(Document Type Definition),位于 HTML 文档的第一行,用于 定义文档规范

对于 XML 文件而言,因为可以使用自定义的标签,所以没什么标准的规范可言,因此可以不定义 DTD

但是,对于已具备标准语法规范的 HTML 和 XHTML 来说,就必须要声明 DTD,声明的格式如下:

<!DOCTYPE element-name DTD-type DTD-name DTD-url>


  • element-name:DTD 根元素名称
  • DTD-type:若为 PUBLIC,表示 DTD 是标准公用的,若为 SYSTEM,表示 DTD 是私人定制的
  • DTD-name:DTD 文件名称
  • DTD-url  :DTD 文件地址


目前使用最多的就是 HTML5 的 DTD 声明,此外还有一些比较常见的 DTD 声明,列举如下:


HTML5

<!DOCTYPE html>


HTML 4.01 Strict 包含所有 HTML 元素和属性,不包括展示性的和弃用的元素,且不允许框架集

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


HTML 4.01 Transitional 包含所有 HTML 元素和属性,且包括展示性的和弃用的元素,但不允许框架集

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


HTML 4.01 Frameset 包含所有 HTML 元素和属性,且包括展示性的和弃用的元素,并且允许框架集

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


XHTML 1.0 Strict 包含所有 HTML 元素和属性,不包括展示性的和弃用的元素,且不允许框架集

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


XHTML 1.0 Transitional 包含所有 HTML 元素和属性,且包括展示性的和弃用的元素,但不允许框架集

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


XHTML 1.0 Frameset 包含所有 HTML 元素和属性,且包括展示性的和弃用的元素,并且允许框架集

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


(2)文档内容


<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <p>Hello</p>
        <br/>
        <p style = "color: red">Stranger</p>
    </body>
</html>

以上代码是 HTML 文档的主体内容,代码中有许多由尖括号包围起来的关键字,称为 HTML 标签


每个 HTML 标签都有独特的语义,例如 <p> 表示段落,<br> 表示换行,根据语义的不同渲染效果也不同


HTML 标签一般成对出现,其中第一个标签称为开始标签,第二个标签称为结束标签


从开始标签到结束标签的所有代码(包括开始标签和结束标签)称为 HTML 元素,例如:

<p>Hello</p>


虽说 HTML 标签一般成对出现,但也有一个标签单独出现的情况,此时需要在该标签中进行关闭,例如:

<br />


我们还可以通过 元素属性 为 HTML 元素提供附加信息,属性在开始标签中指定,并以键值对的形式出现


根据标准,建议属性与属性值使用小写字母规定,并且属性值始终使用引号包围,例如:

<p style="color: red">Stranger</p>




目录
相关文章
|
前端开发 开发者
HTML+CSS+JS 学习笔记(二)———CSS
HTML+CSS+JS 学习笔记(二)———CSS
196 0
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
7月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
76 0
webgl学习笔记3_javascript的HTML DOM
|
前端开发 UED 容器
|
前端开发
[HTML]HTML学习笔记(四)
[HTML]HTML学习笔记(四)
|
移动开发 前端开发 JavaScript
|
7月前
|
Web App开发
某教程学习笔记(一):04、HTML基础
某教程学习笔记(一):04、HTML基础
35 0
|
前端开发 JavaScript 算法
网络结构与HTML学习笔记
网络结构与HTML学习笔记
185 0
网络结构与HTML学习笔记
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
HTML学习笔记(二)
HTML学习笔记(二)
50 0