HTML知识点详细汇总
目录
第一章 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) 无序列表
<ul type=”#”>
<li>表项一</li>
<li>表项二</li>
</ul>Type=”#”取值可为 disc(默认，实心黑点)、square(实心黑方块)、circle(空心圆)
2) 有序列表
<ol type=”#”>
<li>表项一</li>
<li>表项二</li>
</ol>Type=”#”取值可为 A、a、I、i、1等
3) 定义列表
<dl>
<dt>项目</dt>
<dd>描述一</dd>
<dd>描述二</dd>
</dl><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 属性
<a href=”URL” title=”注释信息”>链接文字</a> 4、图片链接
<a href=”URL”><img src=”c.jpg”></a>将链接文字改成插入图像即可 5、锚点链接
定义锚点：<a name=”锚点”></a>
链接锚点：<a href=”#锚点”>链接文字</a>6、邮箱地址链接mailto
<a href=”mailto:邮箱地址”>链接文字</a> 7、图像映射
<img src=”1.jpg” usemap=”#map” />
<map name=”map”><area shape=”rect” href=”1.html” coords=”140,20,280,60”> <area shape=”poly” href=”2.html” coords=”100,100,180,50,200,140”> <area shape=”circle” href=”3.html” coords=”80,100,60”>
</map> 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 name=”select” size=”2” multiple=” multiple”> <option value=”1” selected=”selected”>列表项一</option> <option value=”2”>列表项二</option>
</select> 说明：select 标签的size 属性表示下拉列表的可见选项数，默认为1，multiple 属性规定可以 选择多个选项。Option 标签的 selected标签表示当前选被默认选中，即在1个可见选项数时 下拉列表显示此值。
2) 文本域
<textarea name=”ta” rows=”10” cols=”5”>文本内容</textarea> 说明：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、表格的基本语法
<table width=”100” border=”1” height=”100”>
<caption>表格标题</caption>
<tr><th>表头一</th><th>表头二</th></tr>
<tr><td>单元格一</td><td>单元格二</td></tr>
<tr><td cols=”2”>表尾</td></tr>
</table> 在HTML中创建表格使用<table>标签对，可对其设置宽度、高度、边框、背景等。
<caption>标签为整个表格的标题，它不占用表格行，是位于表格外的一个对整个表格进行说明的大标题，可以使用 align 属性设置标题相对于表格的位置，值为 left、right、top、bottom。
使用tr 定义表格行，然后用 th或td定义表格单元格。
可以使用 thead 定义表头，tbody 定义表格主体，tfoot 定义表尾，只需要把相应的行（tr和td都需要）放置在标记对中即可。
2、跨多行、多列表元
1) 跨多行表元
<td rowspan=”3”>…</td> 跨多行表元语法是在th 和td上加 rowspan表示，rowspan后面的值是数字，数字表示跨多少行表元。
2) 跨多列表元
跨多列表元与跨多行表元一样，也是放在th和 td上，表示在一行中跨多少列表元，语法是用colspan 表示。
3、设置表格大小
1) 设置表格宽度和高度
<table width=”100” height=”100”>…</table> 表格宽度用 width属性定义，表格高度用 height 属性定义，其取值可以为像素值或百分比。
2) 设置表格边框
<table border=”1”>…</table> 表格边框使用 table 标记的 border 属性定义，其后面的值是宽度值，表示对象的边框宽度，数值越大，宽度越大。
4、设置表格背景
1) 设置整个表格背景
<table bgcolor=”#ff0000”>…</table> 设置整个表格的背景是定义<table>标签的 bgcolor 属性，其值可为颜色名、十六进制颜色值或者 rgb代码的背景颜色。
2) 设置表格中单元格的背景
<td bgcolor=”#ff0000”>…</td> 设置单元格的背景颜色只需在 td 和 th 标签上定义 bgcolor 属性，如果设置某一行的背景颜色，也可以在 tr 标签中定义bgcolor 属性。
5、设置单元格边距
1) 设置单元格与内容之间的距离
<td cellpadding=”10”>…</td> 设置单元格与内容之间的距离只需在 td和 th标签上定义cellpadding属性，其值为像素值。
2) 设置两个单元格之间的距离
<td cellspacing=”10”>…</td> 定义两个单元格之间的空白在 td和th 标签上使用cellspacing属性，其值同样为像素值。
6、表格对齐
1）表格内文字对齐
<tr align=#>…</tr>
<td align=#>…</td> 文字对齐使用align 属性定义，取值可为 left、center、right。 在表格内，文字对齐有在tr、th、td中对齐，在 tr 设置对齐方式后，tr 内的th 和td都按设置的要求对齐，同理在多行中可以设置不同的tr 对齐方式， th 和td都可以设置其里面的文字或图片的对齐。
2）表格在网页中对齐
<table align=#>…</table> 表格在网页中的对齐是在<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）内联框架（浮动框架）
<iframe src=”1.html” width=”400” height=”300”></iframe>
内联框架存在于<body></body>的单个HTML文件中，可以链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面的内容。
浮动框架用<iframe></iframe>标记对或<iframe />表示，可以用 width 和 height 属性设置其大小。第七章 网页多媒体
1、插入网页多媒体
基本语法：<embed src=”1.mp3” />，src指定插入网页的多媒体路径2、设置自动播放
<embed src=”1.mp3” autostart=”true” />Autostart 表示自动播放，可取值true(默认值，自动播放)、false(不自动播放)
3、设置循环播放
<embed src=”1.mp3” loop=”true” />Loop 属性用来设置多媒体文件的循环播放，可取值 true(无限次数)、 false(不循环播放)、 <数值>(规定循环的次数)
5、设置面板大小
<embed src=”1.mp3” width=”400” height=”300” />6、对齐方式
<embed src=”1.mp3” align=”left” />Align属性可以设置多媒体控制面板的对齐方式，取值为：
Center：控制面板居中
Left：控制面板居左
Right：控制面板居右
Top：控制面板的顶部与当前行中的最高对象的顶部对齐
Bottom:控制面板的底部与当前行中的对象的基线对齐
Baseline：控制面板的底部与文本的基线对齐
Texttop：控制面板的顶部与当前行中的最高的文字顶部对齐
Middle：控制面板的中间与当前行的基线对齐
Absmiddle：控制面板的中间与当前文本或对象的中间对齐
Absbottom：控制面板的底部与文字的底部对齐
HTML知识点详细汇总相关推荐
- 加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】
作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...
- labview csv文件处理_LabVIEW 相关知识点分类汇总
题图照片:Photo by Pixabay from Pexels 为了在知乎和小伙伴们一起更好进行LabVIEW相关知识与技术的讨论,特此制作了本知识点分类汇总供大家参考,分类采用先分块后分层的分而 ...
- 机器学习需要掌握的数学知识点---详细整理
机器学习需要掌握的数学知识点---详细整理 第一篇 线性代数篇 第一章 排队!排队!什么是向量 第二章 矩阵 第三章 距离 第二篇 概率偏 由暗恋引发的思考 机器学习中的概率研究 贝叶斯问题 第三篇 ...
- 二分查找算法详细汇总
二分查找算法详细汇总 文章目录 二分查找算法详细汇总 二分查找算法介绍模板 算法思想 举例说明 模板实现 (1)递归方式实现 (2)非递归方式实现 二分查找问题相关难点问题1[前缀和 + 二分查找 + ...
- 民事诉讼法知识点详细版
民事诉讼法知识点详细版 第一讲 民事诉讼基本理论 一.多元纠纷解决机制 1.私力救济机制:私人调解.和解: 2.社会救济机制:人民调解(可诉可确)仲裁(或裁或审): 3.公力救济:诉讼(强制执行力保障 ...
- 主题：成都市华西附二院妈妈分享建卡，产检详细过程、费用以及医院详细汇总
http://www.babytree.com/chengdu/topic_983419 主题:成都市华西附二院妈妈分享建卡,产检详细过程.费用以及医院详细汇总 一.成都市华西附二院挂号: 1.产科的 ...
- 高中数学知识点总结汇总归纳:集合及其运算
针对高中数学,不要盲目复习和做题,在学习中,我们应该掌握高中数学都有哪些知识点,通过做题发现出自己哪些知识点不足,这样才能快速提分.肖老师分享关于高中数学知识点总结汇总归纳:集合及其运算. 一.集 合 ...
- 工作中涉及运维知识点的汇总
对工作中常见运维知识点的一个简单汇总 0)设置阿里云pip源,加速pip更新速度 mkdir ~/.pip #创建文件夹 vi ~/.pip/pip.conf #添加如下内容 [global] ind ...
- MySQL知识点整理汇总
文章目录 前言 一.数据库与SQL 1. 数据库与数据库管理系统 2. 关系数据库 3. MySQL语句的种类 4. MySQL语句的基本书写规则 二.MySQL语句的两大顺序 1. MySQL 语句 ...
- Hadoop 和 Spark 知识点整理汇总
文章目录 前言 一.LINUX 系统常用命令汇总 二.Hadoop 常用命令汇总 三.Hadoop 基本概念 1. Hadoop 特性 2. Hadoop 架构 2.1 Hadoop 集群 2.2 H ...
最新文章
- 黄聪：Microsoft Enterprise Library 5.0 系列教程(九) Policy Injection Application Block
- 2021中大厂php+go面试题(1)
- gj3 Python数据模型(魔法函数）
- 15分钟构建超低成本数据大屏：DataV + DLA
- js变量和java变量相等,js中变量和jsp中java代码中变量互相访问解决方案
- 如何自己塑封_全球市场三足鼎立，国内半导体封测业如何实现可持续发展？
- Could not link against boost_system 解决办法
- 关于Java中被static修饰的静态变量 (类变量)
- AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式
- java bundle类_java ResourceBundle介绍
- 【Caffe代码解析】Layer网络层
- pdf所有者和计算机怎么删除,如何修改PDF文件以及如何删除一页
- 基于STM32设计的UNO卡牌游戏(双人、多人对战)
- 英文和数字组合 正则 密码验证
- 使用jQuery easyui和Springdata JPI进行数据的查询
- ATECC508A芯片开发笔记（十一）：NXP 平台移植ATECCx08 CryptoAuthLib库（I2C）
- 雅虎股东紧盯阿里巴巴IPO蛋糕
- 【跨平台编程工具】XERO CODER 4.2.8.0 For x86 Cracked By PiaoYun/P.Y.G 优雅破解
- qiankun微前端主子应用通信方案
- C#——飞行棋流程图（很详细）