HTML知识点详细汇总

男娘i 2021-09-22 14:20 1274阅读 0赞

**目录**

第一章 HTML基础知识

1、HTML简介

2、HTML的标记组成

3、HTML基本结构

第二章 文字与图像

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

2、设置正文的标题

3、设置段落

4、强制换行与不换行

5、字体标记

6、文字对齐

7、列表

8、其它方式修饰文本

9、图像

10、移动的字体和图片

第三章 超级链接

1、基本概念

2、文字链接

3、链接的注释title 属性

4、图片链接

5、锚点链接

6、邮箱地址链接mailto

7、图像映射

第四章 表单

1、创建表单

2、文本框和密码框

3、单选框和复选框

4、下拉列表和文本域

5、按钮

6、图像域与文件域

7、隐藏表单

第五章 表格

1、表格的基本语法

2、跨多行、多列表元

3、设置表格大小

4、设置表格背景

5、设置单元格边距

6、表格对齐

第六章 框架

1、框架基本语法

2、框架分栏

3、框架的常用属性

4、框架链接

第七章 网页多媒体

1、插入网页多媒体

2、设置自动播放

3、设置循环播放

5、设置面板大小

6、对齐方式

--------------------

# 第一章 HTML基础知识 #

### 1、HTML简介 ###

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

### 2、HTML的标记组成 ###

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

**1) 单标记：**有些标记能完整的表达标记里的意思，只须在尖括号中输入标记名即可，这类标记叫 单标记。XHTML中要求单标记也必须闭合，即在标记“>”前添加斜杠。常见的单标记如<br />、<hr />等。

**2) 双标记：**双标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线， 语法形如：<标记>内容</标记>。例如：<p>段落</p>

**3)** XHTML要求所有标记均为小写，且所有标记属性必须添加双引号

**4)** 标记对不能交叉

### **3、HTML基本结构** ###

<html> 
        <head>
            <title>网页标题</title> 
        </head> 
        <body> 
             
        </body> 
    </html> 
    1) <title>标记对不能放在<body>标记对中，同理，其它表示内容的标记也不能放在<head>标 记对中
    
    2) <html></html>表示 HTML 语言，在<html></html>里面包含头部(<head></head>)和 内容体(<body></body>)。
    
    3) HTML注释表示为
    
    就拿<html></html>举例吧：
            <html> 是一个网页的开头部分
            </html> 是一个网页的结尾部分 其中斜杠（/）表示结束

## 第二章 文字与图像 ##

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

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

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

### 2、设置正文的标题 ###

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

### 3、设置段落 ###

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

### 4、强制换行与不换行 ###

1) 强制换行：<br />
    
    2) 强制不换行：<nobr />

### 5、字体标记 ###

**1) 物理字体**

<b>…</b> 设置成粗体 <i>…</i> 设置成斜体
    <u>…</u> 增加下划线 <s>…</s> 增加删除线
    <sup>…</sup> 设置成上标字体 <sub>…</sub> 设置成下标字体
    <tt>…</tt> 设置成打字机字体

**2) 逻辑字体**

<em>…</em> 强调文字 <strong>…</strong> 字体加重
    <code>…</code> 显示编程代码 <samp>…</samp> 显示救命文字
    <kbd>…</kbd> 显示键盘按键文字 <small>…</small> 缩小文字
    <big>…</big> 放大文字

### 6、文字对齐 ###

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

### 7、列表 ###

**1) 无序列表**

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

**2) 有序列表**

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

**3) 定义列表**

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

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

### 8、其它方式修饰文本 ###

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

### 9、图像 ###

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

### 10、移动的字体和图片 ###

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

## 第三章 超级链接 ##

### 1、基本概念 ###

**1) 统 一 资 源 定 位 器 (URL)** ： 每 一 个 网 页 的 唯 一 地 址 ， 一 个 URL 构 成 为 protocol://machinename\[:port\]/directory/filename。其中 protocol 是访问协议，如 http、 https、ftp 等，machinename 是存放资源的主机 IP 地址，通常以域名的形式出现，port 是 服务器使用的端口，directory 和filename 是资源的路径和文件名。 **2) 绝对路径：**HTML绝对路径指带有域名文件的完整路径 3) 文档相对路径：当前文档与在的位置与其他文件或文件夹的关系。用../表示源文件所在目录的 上一级目录。 4) 站点根目录相对路径：提供从站点的根文件夹到文档的路径。站点根目录相对路径以”/”开始， 表示站点根文件夹。

### 2、文字链接 ###

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

**1)** href属性表示链接跳转地址 **2)** target 属性定义链接网页的打开方式，其值可以为*blank(新窗口)、*parent(父框架)、*self(当 前窗口)、*top(清除所有被包含的框架并将文档载入整个浏览器窗口)

### 3、链接的注释title 属性 ###

### 4、图片链接 ###

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

### 5、锚点链接 ###

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

### 6、邮箱地址链接mailto ###

### 7、图像映射 ###

**1）**图像映射实现单击同一图像中的不同位置，出现不同的链接，有矩形、圆形和多边形，分别 用rect、circle、poly表示。**2）**图像映射有分为两步：  
 在图像标签中使用usemap属性，其值为\#号加上map标签的名称，即map标签的name 属性（如\#map）。  
** 定义<map>标签**，并使用 name 属性命名，方便其它地方调用。然后用<area>标签定 义图片上的热区形状(shape 属性)、位置(coords属性)及链接地址(href 属性)。

## 第四章 表单 ##

### 1、创建表单 ###

语法：<form name=”form” action=”url” method=”post”></form>
    表单对象常用的属性
            action	  <from action=”xxx”>	表单提交的目的地址
            method    <form method=”xxx”>	表单提交方式
            name	  <form name=”xxx”>	表单名称

Form 中的name 属性给 form 表单命名，action 属性表示表单提交后发送的URL地址，发送的方 式用 method 属性表示，可选择的参数有Get 和Post。Get 传输量比较小，Post 传输量比较大。

### 2、文本框和密码框 ###

1) 文本框：<input type=”text” name=”text” size=”6” maxlength=”6” value=” 文字” disabled=”disabled” readonly=”readonly” /> 
    说明：name 属性给文本框命名，size 属性设置文本框的显示大小，maxlength属性设置文本 框最大可接受的字符数，value 属性设置文本框默认显示值，disabled 属性设置文本框是否可 用，readonly 属性设置文本框是否只读。
    
    2) 密码框：<input type=”password” /> 
    密码框的属性除了 type 设置成 password，与文本框不一致外，其它属性与文本框一致。

### 3、单选框和复选框 ###

1) 单选框：<input type=”radio” name=”radio” checked=”checked” value=”v” /> 
    说明：设置 checked属性表示单选框被选中 
    
    2) 复选框：<input type=”checkbox” name=”ck” checked=”checked” value=”v” />

### 4、下拉列表和文本域 ###

**1) 下拉列表：**

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

**2) 文本域**

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

### 5、按钮 ###

1) 普通按钮：<input type=”button” name=”bt” value=”按钮” /> <button name=”bt”>普通按钮</button>
    2) 提交按钮：<input type=”submit” name=”sm” value=”提交” /> 
    3) 重置按钮：<input type=”reset” name=”rs” value=”重置” />

### 6、图像域与文件域 ###

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

### 7、隐藏表单 ###

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

## 第五章 表格 ##

### 1、表格的基本语法 ###

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

### 2、跨多行、多列表元 ###

**1) 跨多行表元**

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

**2) 跨多列表元**

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

### 3、设置表格大小 ###

1) 设置表格宽度和高度

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

**2) 设置表格边框**

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

### 4、设置表格背景 ###

**1) 设置整个表格背景**

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

**2) 设置表格中单元格的背景**

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

### 5、设置单元格边距 ###

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

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

**2) 设置两个单元格之间的距离**

 定义两个单元格之间的空白在 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 cols=”50%,50%”>
    <frame scr=”1.html” />
    <frame src=”2.html” />
    </frameset>
         框架的基本语法是由<frameset></frameset>标记对表示，标记对放在<head></head>标记对后面，使用了框架，就不再需要使用<body></body>标记对，即<frameset>与<body>标记对不能同时出现在一个页面中。
         <frame>标记对表示在框架内载入什么文件，用src属性指定。

### 2、框架分栏 ###

**2) 垂直分栏**

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

**3) 水平分栏**

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

### 3、框架的常用属性 ###

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

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

**2）浏览器不支持框架**

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

**3）设置框架边框**

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

**4）设置滚动条**

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

### 4、框架链接 ###

**1）导航框架**

<frameset cols=”20%,*”>
        <frame src=”导航框架链接.html” />
        <frame src=”main.html” name=”myFrame” />
    </frameset>
    <a href=”1.html” target=”myFrame”>导航框架链接</a>
     导航框架链接是在网页框架的<frame>中加入 name 属性，表示该<frame>的名称，然后通过用<a>标记的链接，并用target 等于<frame>的名称，那所得到的链接地址网页会显示在该<frame>中

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

## 第七章 网页多媒体 ##

### 1、插入网页多媒体 ###

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

### 2、设置自动播放 ###

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

### 3、设置循环播放 ###

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

### 5、设置面板大小 ###

### 6、对齐方式 ###

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

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