HTML语言最全知识点总结：HTML语言最全知识点总结

火客 2023-01-26 08:16:31 278

HTML语言最全知识点总结：HTML语言最全知识点总结JavaScript是一门脚本语言。（3）JavaScriptHTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。（2）CSSCSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

HTML语言最全知识点总结：HTML语言最全知识点总结(1)

HTML语言最全知识点总结：HTML语言最全知识点总结(2)

HTML最全知识点（超级详细）

HTML语言最全知识点总结：HTML语言最全知识点总结(3)

网页三剑客最主要由三部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、css和JavaScript。

HTML语言最全知识点总结：HTML语言最全知识点总结(4)

【web前端开发最核心的3个技术】：

（1）HTML是什么？

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

（2）CSS

CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

（3）JavaScript

JavaScript是一门脚本语言。

【学习路线图】：

学习路线：html入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP入门（或PHP入门）→Ajax→ASP进阶（或PHP进阶）

HTML语言最全知识点总结：HTML语言最全知识点总结(5)

一、网页基础知识：你对我们常用的浏览器了解多少？

HTML语言最全知识点总结：HTML语言最全知识点总结(6)

HTML语言最全知识点总结：HTML语言最全知识点总结(7)

HTML语言最全知识点总结：HTML语言最全知识点总结(8)

为什么会有web标准：

HTML语言最全知识点总结：HTML语言最全知识点总结(9)

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML语言最全知识点总结：HTML语言最全知识点总结(10)

HTML骨架格式：

HTML语言最全知识点总结：HTML语言最全知识点总结(11)

【注释解析】：

1.html结构：包括<head> < body>
2.HTML标签是以尖括号包围的关键字.
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写建议小写。

在网页编辑中经常会用到的工具软件：

HTML语言最全知识点总结：HTML语言最全知识点总结(12)

目前HTML编辑器可以说是种类繁多特别是国外开源的商业的各种版本 . 我只是简单介绍几个常见的免费/开源的可视化HTML编辑器 (WYSIWYG)。

HTMLArea

功能一般文件不大支持是几种语言比较容易定制使用广泛支持IE/Firefox/Mozilla等多种浏览器. 遵循BSD版权目前最新版是3.0.

官方网站: htmlarea/

FCKEditor

庞大功能强大加载慢. 在很多地方使用广泛比如CSDN的blog就是使用的这个. 功能也可以定制. 支持多种浏览器遵循LGPL版权. 目前最新版是2.0

官方网站: fredck/

演示: fckeditor/demo/default.html

FreeTextBox

定制编辑器界面包括Office 2000/Office XP/Office 2003 等界面运行速度一般功能还不错能够支持多种浏览器. 主要应用于ASP. 目前最新版是3.0.6.

官方网站: freetextbox/

演示: freetextbox/Default.aspx

aynHTML

界面比较象Windows 美观度一般加载速度尚快遗憾的是只支持IE 目前最新的版本是

官方网站: aine.be/aynhtml/

演示: aine.be/aynhtml/editor.html

SPAW Ediotr

支持多种浏览器界面比较漂亮类似MAC风格功能一般加载速度中等支持PHP比较好. GPL版权

官方网站: solmetra/

演示: solmetra/spaw/demo/demo.php

TinyMCE

界面相当清新很适合素雅主义使用功能比较强大不逊色于FCKEditor 但是加载速度委实比较慢支持多种浏览器使用LGPL版权目前最新版本是2.0

官方网站: tinymce.moxiecode/

演示: tinymce.moxiecode/example_full.php?example=true

XinHa

界面还可以加载速度比较慢但是比TinyMCE强点定制功能相当强大而且本身支持的功能也很强大支持多种浏览器也可以把它跟HTMLArea比较一下. 基于BSD授权

官方网站: xinha.python-hosting/

演示地址: xinha.gogo.co.nz/xinha-nightly/examples/full_example.html

skyWriter

功能比较强大使用比较复杂. 开发源代码. 有兴趣可以尝试下.

官方网站: wysiwyg.skybuilders/

演示: wysiwyg.skybuilders/demos/skyWriter.html

————————————————

有兴趣的小伙伴也可以在评论区留言推荐你觉得好用的编辑器，我们相互学习交流。

HTML是什么？

HTML超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。

HTML 指的是超文本标记语言: HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

HTML的基本标签：

HTML文档由4个主要标记组成，包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。

HTML语言最全知识点总结：HTML语言最全知识点总结(13)

为了方便记忆配图结合加深记忆，HTML标签间的相互关系：

HTML语言最全知识点总结：HTML语言最全知识点总结(14)

HTML语言最全知识点总结：HTML语言最全知识点总结(15)

【html基本标签规则】：

用<>尖括号包括英文单词的关键词

HTML 标签通常是成对出现的，比如 <b> 和 </b>、

标签对中的第一个标签是开始标签，以开始标签起始。第二个标签是结束标签，也是结束标签。

1 HTML标签：

作用所有HTML中标签的一个根节点。通常以<html>开头 </html>结尾。

2 head标签：

作用：用于存放：

title meta base style script link

注意在head标签中我们必须要设置的标签是title

3.title标签：

作用：让页面拥有一个属于自己的标题。

4.body标签：

作用：页面在的主体部分，用于存放所有的HTML标签：

p h a b u i s em del ins strong img

【属性】：

color:文本的颜色

bgcolor:背景色

background:背景图片

【颜色的表示方式】：

第一种方式：使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。

aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow

第二种方式：RGB模式

第三种：十六进制：#000000 #ffffff #325687 #377405

HTML语言最全知识点总结：HTML语言最全知识点总结(16)

平时我们在浏览网页时候可以按住键盘上的F12快捷键，打开我们所浏览网页的编码详情，大家可以简单的明白一个网页的构成是怎样的结构。

以百度为例简单演示：

HTML语言最全知识点总结：HTML语言最全知识点总结(17)

是不是感觉一个百度搜索页，怎么会有这么多英文代码构成，是不是有点一头雾水呢？

HTML语言最全知识点总结：HTML语言最全知识点总结(18)

那么我们又该如何解读这些内容呢？他们又是一个怎样的结构关系，组合到一起。通过网页的形势呈现的呢？带着这些疑问开始我们今天的内容分享吧。

文档类型<!DOCTYPE>（重点）

还是用刚才截图的百度搜索页截图做个简单说明，我们看到开头有这样一串英文代码。<!DOCTYPE html>，该如何解读呢？

HTML语言最全知识点总结：HTML语言最全知识点总结(19)

HTML语言最全知识点总结：HTML语言最全知识点总结(20)

<!DOCTYPE html>

这句话就是告诉我们使用的哪个html版本？我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

————————————————

HTML标签的语义化（重点）

白话：所谓标签语义化，就是指标签的含义。

为什么要有语义化标签：

1、方便代码的阅读和维护

2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

使用语义化标签会具有更好的搜索引擎优化：

核心：合适的地方给出一个最为合理的标签。

语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

不管是谁都能看懂这块内容是什么。

【遵循的原则】：先确定语义的HTML ，再选合适的CSS。

总结：（重要知识点）

双标签：

单标签：

————————————————

文档结构：

包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。

HTML语言最全知识点总结：HTML语言最全知识点总结(21)

(1)HTML标签

<html>标记是HTML文件的开头。

在整个网页代码编辑中是从<html>这里开始的，然后到</html>结束。

标记虽然没有实质性的功能，但却是HTML必不可少的部分。

所有的HTML文件都以标记开头，以标记结束，即HTML页面的所有标记都要放置在与标记中。

(2)head标签

<head>标记是HTML文件的头标记，用于存放HTML文件的信息，如定义CSS样式的代码可放置在与标记之中。

HTML语言最全知识点总结：HTML语言最全知识点总结(22)

<title>标记

<title>标记为标题标记。

可将网页的标题定义在标记之中

(3)body标签

body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。

HTML页面的主体标记。

页面中的所有内容都定义在标记中。

标记本身也具有控制页面的一些特性，如控制页面的背景图片和颜色等。

HTML常用标记：换行标记：

在HTML中，换行标记是<br>

排版标签：

1.注释标签：<!–注释–>

2.换行标签：<br/>

3.段落标签：<p>文本文字

特点：段与段之间有行高

属性：align对齐方式

(left：左对齐 center：居中 right：右对齐)

4.水平线标签:<hr/>

属性:

width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)

size: 水平线的粗细 (像素表示，例如：10px)

color: 水平线的颜色

align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)

容器标签

<div>:块级标签，独占一行，换行

<span>:行级标签，所有内容都在同一行作用：

<div>:主要是结合css页面分块布局

<span>:进行友好提示信息

段落与文字(一)、段落标签

(1)、段落与文字标签

HTML语言最全知识点总结：HTML语言最全知识点总结(23)

(2)、文本格式化标签

HTML语言最全知识点总结：HTML语言最全知识点总结(24)

(二)、网页特殊符号

网页特殊符号只需要记忆一个就行了，就是HTML空格“ ”，其他的特殊符号我们不需要记忆，当我们需要的时候再回来查找一下特殊符号表就OK了。

HTML语言最全知识点总结：HTML语言最全知识点总结(25)

(三)、自动闭合标签

HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。

一般标签可以在开始符号和结束符号之间插入其他标签或文字。

自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。

(1)、一般标签

举例：<body></body>

(2)、自动闭合标签

举例：<br/>、<hr/>

HTML语言最全知识点总结：HTML语言最全知识点总结(26)

(四)、块元素和行内元素

(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

(2)、块元素特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；

（2）块元素内部可以容纳其他块元素或行元素；

常见块元素有：h1~h6、p、hr、div等。

(3)、行内元素特点：

（1）可以与其他行内元素位于同一行；

（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

常见行内元素有：strong、em、span等

标签语义对照表

HTML语言最全知识点总结：HTML语言最全知识点总结(27)

HTML语言最全知识点总结：HTML语言最全知识点总结(28)

3种列表的语义记忆：

HTML语言最全知识点总结：HTML语言最全知识点总结(29)

(一)、HTML3种列表

【列表有3种】：有序列表、无序列表和定义列表。

有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是序列表，请大家重点掌握。

目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。

(1)、有序列表

HTML语言最全知识点总结：HTML语言最全知识点总结(30)

有序列表type属性

HTML语言最全知识点总结：HTML语言最全知识点总结(31)

(2)、无序列表

无序列表是三个列表中最为重要的列表。

HTML语言最全知识点总结：HTML语言最全知识点总结(32)

无序列表type属性

HTML语言最全知识点总结：HTML语言最全知识点总结(33)

(3)、定义列表

HTML语言最全知识点总结：HTML语言最全知识点总结(34)

【说明】：

<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。

在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。

5、表格(一)、表格语义记忆

HTML语言最全知识点总结：HTML语言最全知识点总结(35)

通过语义化记忆表格标签：

HTML语言最全知识点总结：HTML语言最全知识点总结(36)

表格结构标签

HTML语言最全知识点总结：HTML语言最全知识点总结(37)

HTML语言最全知识点总结：HTML语言最全知识点总结(38)

(二)、表格基本结构

<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。

HTML语言最全知识点总结：HTML语言最全知识点总结(39)

HTML语言最全知识点总结：HTML语言最全知识点总结(40)

【说明】：

<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着表格的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。

(三)、表格完整结构

表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。

表格语义化之后，使得代码更清晰和更利于后期维护。

HTML语言最全知识点总结：HTML语言最全知识点总结(41)

【语法】：

<table>

<thead>

<tr>

<th>表头单元格1</th>

<th>表头单元格2</th>

</tr>

</thead>

<tbody>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tfoot>

</table>

【说明】：

<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。

(四)、合并行和合并列

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。

(1)、合并行

【语法】：

【举例】

<!DOCTYPE html>

<head>

<title>合并行rowspan</title>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

演示效果

HTML语言最全知识点总结：HTML语言最全知识点总结(42)

(2)、合并列

【语法】：

【举例】：

<!DOCTYPE html>

<head>

<title>合并列colspan</title>

</head>

<body>

<table>

<tr>

<td colspan="2">绿叶学习网精品教程</td>

</tr>

<tr>

<td>HTML教程</td>

<td>CSS教程</td>

</tr>

<tr>

<td>jQuery教程</td>

<td>SEO教程</td>

</tr>

</table>

</body>

</html>

————————————————效果演示————————————————

HTML语言最全知识点总结：HTML语言最全知识点总结(43)

6、图像

(一)、图像标签

在HTML中，图像标签为<img>。<img>是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。

【语法】：

HTML语言最全知识点总结：HTML语言最全知识点总结(44)

src和alt这两个属性是img标签必不可少的属性。其他属性我们一般用不到，所以只需要掌握这两个属性即可，大家要是在别的书籍上看到<img>还有别的属性，你不用去记忆它们。

(二)、相对路径和绝对路径

相对路径，指的是同一个网站下，不同文件之间的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对的路径。

绝对路径，指的是文件的完整路径。

当前文件找目标文件的过程

HTML语言最全知识点总结：HTML语言最全知识点总结(45)

2.绝对路径

HTML语言最全知识点总结：HTML语言最全知识点总结(46)

3.相对路径

用得很多，可移植性很好

同级目录

HTML语言最全知识点总结：HTML语言最全知识点总结(47)

HTML语言最全知识点总结：HTML语言最全知识点总结(48)

HTML语言最全知识点总结：HTML语言最全知识点总结(49)

(三)、图片格式

虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。

1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。

2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。

3、GIF格式图片图像效果很差，但是可以制作动画。

HTML语言最全知识点总结：HTML语言最全知识点总结(50)

7、链接

超链接使用a标签，语法如下：

HTML语言最全知识点总结：HTML语言最全知识点总结(51)

我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。

超链接根据链接对象的不同分为：

（1）外部链接

（2）内部链接：①内部页面链接；②锚点链接；

<!DOCTYPE html>

<head>

</head>

<body>

<div>

</div>

……<br />

<ul>

<li>林俊杰-被风吹过的下图</li>

<li>曲婉婷-在我的歌声里</li>

</ul>

</div>

……<br />

<ul>

<li>蜘蛛侠系列</li>

<li>钢铁侠系统</li>

<li>复仇者联盟</li>

</ul>

</div>

……<br />

<ul>

</ul>

</div>

</body>

</html>

————————————————

锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。如下图：

HTML语言最全知识点总结：HTML语言最全知识点总结(52)

只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接，滚动条就会滚动到相应的版块。

1.a 标签 (Anchor ) : 超链接（锚）

超链接在页面中起到跳转或定位的作用（超链接、锚链接、a链接、a标签）

2. a标签的跳转功能

HTML语言最全知识点总结：HTML语言最全知识点总结(53)

3.a 标签的属性

HTML语言最全知识点总结：HTML语言最全知识点总结(54)

4.a 标签的其他用法

HTML语言最全知识点总结：HTML语言最全知识点总结(55)

5.a标签的定位功能

a标签可以快速定位到当前页面或者其他页面的目标内容（百度百科）

在当前页面进行定位

HTML语言最全知识点总结：HTML语言最全知识点总结(56)

8、表单

表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。

我们通过一张表单来把所有input标签囊括：

HTML语言最全知识点总结：HTML语言最全知识点总结(57)

文本格式化标签

定义粗体文本。

定义大号字。

定义着重文字。

定义斜体字。

定义小号字。

定义加重语气。

定义下标字。

定义上标字。

定义插入字。

定义删除字。

<b> 定义粗体文本。

<big> 定义大号字。

<em> 定义着重文字。

<i> 定义斜体字。

<small> 定义小号字。

<strong> 定义加重语气。

<sub> 定义下标字。

<sup> 定义上标字。

<ins> 定义插入字。

<del> 定义删除字。

HTML5新标签与特性常用新标签

header：定义文档的页眉
nav：定义导航链接的部分
footer：定义文档或节的页脚
article：标签规定独立的自包含内容
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容

HTML语言最全知识点总结：HTML语言最全知识点总结(58)

HTML语言最全知识点总结：HTML语言最全知识点总结(59)

HTML语言最全知识点总结：HTML语言最全知识点总结(60)

HTML语言最全知识点总结：HTML语言最全知识点总结(61)

多媒体标签

embed：标签定义嵌入的内容

audio：播放音频

video：播放视频

多媒体 embed（会使用）

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

\<embed src="player.youku/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">\</embed>

多媒体 audio

HTML5通过<audio>标签来解决音频播放的问题。

并且可以通过附加属性可以更友好控制音频的播放，如：

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放

多媒体 video

HTML5通过<video>标签来解决音频播放的问题。

通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放