HTML知识点汇总

Posted 2021-04-04 前端雇佣军

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML知识点汇总相关的知识，希望对你有一定的参考价值。

html知识点汇总

第一章 HTML基础知识

1、HTML简介

HTML(Hypertext Markup Language)，超文本标记语言，HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(StandardGeneralized Markup Language，标准通用标识语言)中的一个子集演变而来的。

2、HTML的标记组成

HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来，而且是成对出现的，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。如<body></body>、<p></p>等

单标记：有些标记能完整的表达标记里的意思，只须在尖括号中输入标记名即可，这类标记叫单标记。XHTML中要求单标记也必须闭合，即在标记“>”前添加斜杠。常见的单标记如<br />、<hr />等。
双标记：双标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线，语法形如：<标记>内容</标记>。例如：<p>段落</p>
XHTML要求所有标记均为小写，且所有标记属性必须添加双引号
标记对不能交叉

3、HTML基本结构

<html>

<head>

</head>

<body>

</body>

</html>

<title>标记对不能放在<body>标记对中，同理，其它表示内容的标记也不能放在<head>标记对中
<html></html>表示HTML语言，在<html></html>里面包含头部(<head></head>)和内容体(<body></body>)。
HTML注释表示为

第二章文字与图像

1、设置文字字体、大小与颜色

语法：<font face=”宋体” size=”1” color=”red”>文字</font>

设置文字的字体、大小、颜色需要使用<font>标签
Face属性设置文字字体，多种字体用逗号隔开
Size属性设置文字大小
Color属性设置文字颜色，参数值可以是RGB颜色值，如#000000，也可以用颜色的单词表示，如red

2、设置正文的标题

语法：<h#>主题文字</h#>，其中“#”代表数字1-6中的任意一个，从数字1到数字6，标题大小排列由大到小(数字越大，标题字号就越小)。

3、设置段落

语法：<p>这里表示段落</p>

4、强制换行与不换行

强制换行：<br/>
强制不换行：<nobr />

5、字体标记

物理字体

<b>…</b> 设置成粗体 <i>…</i> 设置成斜体

<u>…</u> 增加下划线 <s>…</s> 增加删除线

<sup>…</sup> 设置成上标字体 <sub>…</sub> 设置成下标字体

<tt>…</tt> 设置成打字机字体

逻辑字体

<em>…</em> 强调文字 <strong>…</strong> 字体加重

<code>…</code> 显示编程代码 <samp>…</samp> 显示救命文字

<kbd>…</kbd> 显示键盘按键文字 <small>…</small> 缩小文字

<big>…</big> 放大文字

6、文字对齐

文字对齐使用标签的align属性，例如：<p align=”#”>对齐文字</p>，其中“#”代码表示方位，可选择”left”(向左)、”right”(向右)、”center”(居中)。Align属性可用于<p>、<div>、<table>、<td>等标签。
居中对齐可使用<center>标签，例如：<center>居中文字</center>

7、列表

无序列表

</ul>

Type=”#”取值可为disc(默认，实心黑点)、square(实心黑方块)、circle(空心圆)

有序列表

</ol>

Type=”#”取值可为A、a、I、i、1等

定义列表

<dl>

</dl>

<dt>标签定义了定义列表中的项目，<dd>标签在定义列表中定义条目的定义部分，可以理解为对定义条目进行特征描述。

无序列表、有序列表、定义列表间可以相互嵌套，但一定要注意嵌套时不能交叉

8、其它方式修饰文本

欲格式化文本：<pre>…</pre>
代码样式斜体字渲染：<var>…</var>
表示它所包含的文本对某个参考文献的引用：<cite>…</cite>

9、图像

插入图像基本语法：<img src=”#”/>，其中#代表图像的URL路径，示例：<img src=”c.jpg”/>
图像无法显示时的提示信息，使用alt属性，如：<img src=”c.jpg” alt=”风景”/>
图像的大小：<img src=”c.jpg”width=”400px” height=”300px” />，width属性定义图像的宽度，height属性定义图像的高度
图像和文字对齐：<img src=”c.jpg”align=”top” />，align属性的取值为top(顶部)、middle(中间)、bottom(默认，底部)
图像的边框：<img src=”c.jpg”border=”0” />，border设置为0时表示图像不显示边框，否则设置成需要的边框大小

10、移动的字体和图片

移动基本语法：<marquee>移动文字或图片</marquee>，默认是向左循环移动，移动范围在其父对象的有效区域内。
文本移动的方向：<marquee direction=”#”>…</marquee>，其中#可以选择left、right、up、down
文本的滚动循环：<marquee behavior=”#”>…</marquee>，其中#可以选择scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。
如果设置文本来回移动，还可以设置循环次数：<marquee loop=”#”>…</marquee>，其中#为代表循环的次数。
文本的移动速度：<marquee scrollamount=”#”>…</marquee>，其中#设置移动的速度，取正整数。数值越大，速度越快。
移动对象的延时：<marquee scrolldelay=”1000”>我走一走，停一停</marquee>，scrolldelay以时间为单位，用毫秒表示。
移动的区域和背景：<marquee width=”100” height=”100”bgcolor=”pink”>…</marquee>

第三章超级链接

1、基本概念

绝对路径：HTML绝对路径指带有域名文件的完整路径
文档相对路径：当前文档与在的位置与其他文件或文件夹的关系。用../表示源文件所在目录的上一级目录。
站点根目录相对路径：提供从站点的根文件夹到文档的路径。站点根目录相对路径以”/”开始，表示站点根文件夹。

2、文字链接

语法：<a href=”URL”target=”target”>链接文字</a>

target属性定义链接网页的打开方式，其值可以为_blank(新窗口)、_parent(父框架)、_self(当前窗口)、_top(清除所有被包含的框架并将文档载入整个浏览器窗口)

3、链接的注释title属性

4、图片链接

<a href=”URL”><img src=”c.jpg”></a>将链接文字改成插入图像即可

5、锚点链接

定义锚点：<a name=”锚点”></a>

链接锚点：<a href=”#锚点”>链接文字</a>

7、图像映射

</map>

1）图像映射实现单击同一图像中的不同位置，出现不同的链接，有矩形、圆形和多边形，分别用rect、circle、poly表示。

2）图像映射有分为两步：

在图像标签中使用usemap属性，其值为#号加上map标签的名称，即map标签的name属性（如#map）。

第四章表单

1、创建表单

语法：<form name=”form”action=”url” method=”post”></form>

2、文本框和密码框

文本框：<inputtype=”text” name=”text” size=”6” maxlength=”6”value=”文字” disabled=”disabled” readonly=”readonly”/>

说明：name属性给文本框命名，size属性设置文本框的显示大小，maxlength属性设置文本框最大可接受的字符数，value属性设置文本框默认显示值，disabled属性设置文本框是否可用，readonly属性设置文本框是否只读。

密码框：<inputtype=”password” />

密码框的属性除了type设置成password，与文本框不一致外，其它属性与文本框一致。

3、单选框和复选框

单选框：<inputtype=”radio” name=”radio” checked=”checked” value=”v” />

说明：设置checked属性表示单选框被选中

复选框：<inputtype=”checkbox” name=”ck” checked=”checked” value=”v” />

4、下拉列表和文本域

下拉列表：

<optionvalue=”1”selected=”selected”>列表项一</option>

</select>

说明：select标签的size属性表示下拉列表的可见选项数，默认为1，multiple属性规定可以选择多个选项。Option标签的selected标签表示当前选被默认选中，即在1个可见选项数时下拉列表显示此值。

文本域

说明：textarea标签的rows属性表示文本区内的可见行数，cols属性表示文本区内的可见宽度。

5、按钮

普通按钮：<inputtype=”button” name=”bt” value=”按钮” />

提交按钮：<inputtype=”submit” name=”sm” value=”提交” />
重置按钮：<inputtype=”reset” name=”rs” value=”重置” />

6、图像域与文件域

图像域：<inputtype=”image” name=”image” src=”c.jpg” alt=”描述” />
文件域：<inputtype=”file” name=”file” />定义输入字段和浏览按钮，用于文件上传

7、隐藏表单

<input type=”hidden” name=”hi” value=”v” />隐藏表单用于在浏览器与服务器之间传递一些必要的参数或选项，而这些参数或选项不需要显示在页面中。

第五章表格

1、表格的基本语法

</table>

在HTML中创建表格使用<table>标签对，可对其设置宽度、高度、边框、背景等。
<caption>标签为整个表格的标题，它不占用表格行，是位于表格外的一个对整个表格进行说明的大标题，可以使用align属性设置标题相对于表格的位置，值为left、right、top、bottom。
使用tr定义表格行，然后用th或td定义表格单元格。
可以使用thead定义表头，tbody定义表格主体，tfoot定义表尾，只需要把相应的行（tr和td都需要）放置在标记对中即可。

2、跨多行、多列表元

跨多行表元

跨多行表元语法是在th和td上加rowspan表示，rowspan后面的值是数字，数字表示跨多少行表元。
跨多列表元

跨多列表元与跨多行表元一样，也是放在th和td上，表示在一行中跨多少列表元，语法是用colspan表示。

3、设置表格大小

设置表格宽度和高度

表格宽度用width属性定义，表格高度用height属性定义，其取值可以为像素值或百分比。
设置表格边框

表格边框使用table标记的border 属性定义，其后面的值是宽度值，表示对象的边框宽度，数值越大，宽度越大。

4、设置表格背景

设置整个表格背景

设置整个表格的背景是定义<table>标签的bgcolor属性，其值可为颜色名、十六进制颜色值或者rgb代码的背景颜色。
设置表格中单元格的背景

设置单元格的背景颜色只需在td和th标签上定义bgcolor属性，如果设置某一行的背景颜色，也可以在tr标签中定义bgcolor属性。

5、设置单元格边距

设置单元格与内容之间的距离

设置单元格与内容之间的距离只需在td和th标签上定义cellpadding属性，其值为像素值。
设置两个单元格之间的距离

定义两个单元格之间的空白在td和th标签上使用cellspacing属性，其值同样为像素值。

6、表格对齐

1）表格内文字对齐

文字对齐使用align属性定义，取值可为left、center、right。
在表格内，文字对齐有在tr、th、td中对齐，在tr设置对齐方式后，tr内的th和td都按设置的要求对齐，同理在多行中可以设置不同的tr对齐方式，th和td都可以设置其里面的文字或图片的对齐。

2）表格在网页中对齐

表格在网页中的对齐是在<table></table>标记对中使用align属性定义。

第六章框架

1、框架基本语法

</frameset>

框架的基本语法是由<frameset></frameset>标记对表示，标记对放在<head></head>标记对后面，使用了框架，就不再需要使用<body></body>标记对，即<frameset>与<body>标记对不能同时出现在一个页面中。
<frame>标记对表示在框架内载入什么文件，用src属性指定。

2、框架分栏

垂直分栏

垂直分栏是在<frameset>中使用cols属性表示，后面的数字表示列宽，可用数值、百分比和通配符*（只能用于最后一个数字）表示
水平分栏

水平分栏是在<frameset>中使用rows属性表示，注意一个框架不能同时出现垂直分栏和水平分栏，即cols和rows不能同时出现，如果想又有垂直分栏又有水平分栏，可以使用框架嵌套实现

3、框架的常用属性

1）设置不可调节框架大小

默认框架大小是可以调节的，如果不需要用户去对框架窗口进行大小调节，必须设置框架的noresize属性

2）浏览器不支持框架

<noframes>对不起，您的浏览器不支持框架！</noframes>

<noframes>标记对用在<frameset>标记对之外，当浏览器不支持<frameset>标记时，将不显示框架内容，而是显示<noframes>标记对中的内容。

3）设置框架边框

框架的边框设置可由frameborder属性来完成，默认有边框，它有两种表示方法，英语表示法：yes(有边框)、no(无边框)，数字表示法：1(有边框)、0(无边框)
当设置了框架的边框时，可用border属性来设置边框的宽度

4）设置滚动条

设置滚动条是在<frame>标签里，用scrolling属性，可取值auto(默认，自动)、yes(有滚动条)、no(无滚动条)

4、框架链接

1）导航框架

<framesrc=”导航框架链接.html” />

<framesrc=”main.html”name=”myFrame” />

</frameset>

<a href=”1.html” target=”myFrame”>导航框架链接</a>

2）内联框架（浮动框架）

内联框架存在于<body></body>的单个HTML文件中，可以链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面的内容。
浮动框架用<iframe></iframe>标记对或<iframe />表示，可以用width和height属性设置其大小。

第七章网页多媒体

1、插入网页多媒体

基本语法：<embedsrc=”1.mp3” />，src指定插入网页的多媒体路径

2、设置自动播放

<embedsrc=”1.mp3” autostart=”true”/>

Autostart表示自动播放，可取值true(默认值，自动播放)、false(不自动播放)

3、设置循环播放

<embedsrc=”1.mp3” loop=”true” />

Loop属性用来设置多媒体文件的循环播放，可取值true(无限次数)、false(不循环播放)、<数值>(规定循环的次数)

4、隐藏控制面板

<embedsrc=”1.mp3” hidden=”true” />

Hidden属性用来设置多媒体控制面板的显示与隐藏，可取值true(隐藏)、false(显示)、no(效果与false一样)

5、设置面板大小

<embedsrc=”1.mp3” width=”400” height=”300” />

6、对齐方式

<embedsrc=”1.mp3” align=”left” />

Align属性可以设置多媒体控制面板的对齐方式，取值为：

Center：控制面板居中
Left：控制面板居左
Right：控制面板居右
Top：控制面板的顶部与当前行中的最高对象的顶部对齐
Bottom:控制面板的底部与当前行中的对象的基线对齐
Baseline：控制面板的底部与文本的基线对齐
Texttop：控制面板的顶部与当前行中的最高的文字顶部对齐
Middle：控制面板的中间与当前行的基线对齐
Absmiddle：控制面板的中间与当前文本或对象的中间对齐
Absbottom：控制面板的底部与文字的底部对齐

参考资料：

[1] 张熠等，《零基础学习HTML+CSS》，机械工业出版社，2012.3(2)

[2] 曾立，《Dreamweaver MX网页设计与制作》，人民邮电出版社，2010.6

[3] w3cschool在线教程，http://www.w3school.com.cn/

附录一：

HTML标签列表(版本v4.01)

DTD：指示在哪种 XHTML 1.0 DTD 中允许该标签。S=Strict,T=Transitional, F=Frameset.

标签	描述	DTD
<!--...-->	定义注释。	STF
<!DOCTYPE>	定义文档类型。	STF
<a>	定义锚。	STF
<abbr>	定义缩写。	STF
<acronym>	定义只取首字母的缩写。	STF
<address>	定义文档作者或拥有者的联系信息。	STF
<applet>	不赞成使用。定义嵌入的 applet。	TF
<area>	定义图像映射内部的区域。	STF
<b>	定义粗体字。	STF
<base>		STF
<basefont>	不赞成使用。定义页面中文本的默认字体、颜色或尺寸。	TF
<bdo>	定义文字方向。	STF
<big>	定义大号文本。	STF
<blockquote>	定义长的引用。	STF
<body>	定义文档的主体。	STF
<br>	定义简单的折行。	STF
<button>	定义按钮 (push button)。	STF
<caption>	定义表格标题。	STF
<center>	不赞成使用。定义居中文本。	TF
<cite>	定义引用(citation)。	STF
<code>	定义计算机代码文本。	STF
<col>	定义表格中一个或多个列的属性值。	STF
<colgroup>	定义表格中供格式化的列组。	STF
<dd>	定义定义列表中项目的描述。	STF
<del>	定义被删除文本。	STF
<dir>	不赞成使用。定义目录列表。	TF
<div>	定义文档中的节。	STF
<dfn>	定义定义项目。	STF
<dl>	定义定义列表。	STF
<dt>	定义定义列表中的项目。	STF
<em>	定义强调文本。	STF
<fieldset>	定义围绕表单中元素的边框。	STF
<font>	不赞成使用。定义文字的字体、尺寸和颜色。	TF
<form>	定义供用户输入的 HTML 表单。	STF
<frame>	定义框架集的窗口或框架。	F
<frameset>	定义框架集。	F
<h1> to <h6>	定义 HTML 标题。	STF
<head>	定义关于文档的信息。	STF
<hr>	定义水平线。	STF
<html>	定义 HTML 文档。	STF
<i>	定义斜体字。	STF
<iframe>	定义内联框架。	TF
<img>	定义图像。	STF
<input>	定义输入控件。	STF
<ins>	定义被插入文本。	STF
<isindex>	不赞成使用。定义与文档相关的可搜索索引。	TF
<kbd>	定义键盘文本。	STF
<label>	定义 input 元素的标注。	STF
<legend>	定义 fieldset 元素的标题。	STF
<li>	定义列表的项目。	STF
<link>	定义文档与外部资源的关系。	STF
<map>	定义图像映射。	STF
<menu>	不赞成使用。定义菜单列表。	TF
<meta>	定义关于 HTML 文档的元信息。	STF
<noframes>	定义针对不支持框架的用户的替代内容。	TF
<noscript>	定义针对不支持客户端脚本的用户的替代内容。	STF
<object>	定义内嵌对象。	STF
<ol>	定义有序列表。	STF
<optgroup>	定义选择列表中相关选项的组合。	STF
<option>	定义选择列表中的选项。	STF
<p>	定义段落。	STF
<param>	定义对象的参数。	STF
<pre>	定义预格式文本。	STF
<q>	定义短的引用。	STF
<s>	不赞成使用。定义加删除线的文本。	TF
<samp>	定义计算机代码样本。	STF
<script>	定义客户端脚本。	STF
<select>	定义选择列表（下拉列表）。	STF
<small>	定义小号文本。	STF
<span>	定义文档中的节。	STF
<strike>	不赞成使用。定义加删除线文本。	TF
<strong>	定义强调文本。	STF
<style>	定义文档的样式信息。	STF
<sub>	定义下标文本。	STF
<sup>	定义上标文本。	STF
<table>	定义表格。	STF
<tbody>	定义表格中的主体内容。	STF
<td>	定义表格中的单元。	STF
<textarea>	定义多行的文本输入控件。	STF
<tfoot>	定义表格中的表注内容（脚注）。	STF
<th>	定义表格中的表头单元格。	STF
<thead>	定义表格中的表头内容。	STF
<title>	定义文档的标题。	STF
<tr>	定义表格中的行。	STF
<tt>	定义打字机文本。	STF
<u>	不赞成使用。定义下划线文本。	TF
<ul>	定义无序列表。	STF
<var>	定义文本的变量部分。	STF
<xmp>	不赞成使用。定义预格式文本。

以上是关于HTML知识点汇总的主要内容，如果未能解决你的问题，请参考以下文章