个人整理的最全HTML学习笔记

本周终于学完了所有的HTML知识，但也不是很全，如果是非前端用于平时需要的话，还是足够了。此外，如果需要上面思维导图文件，可以微信公众号关注哔哗回复关键字HTML获取。接下来不多说，上干货。

---

---

HTML

1.一种描述网页的文本标记语言.
2.通过HTML标签来表述网页.

一.HTML元素

1.HTML元素是开始标签到束标签之间的文本内容.
2.空元素在开始标签中结束。（在开始标签后尖括号加斜杠/).

二.HTML文档

1.HTML文档=网页=HTML标签+纯文本.
2.以. htm 或 .html 为后缀名.
3.声明HTML版本.

三.基本HTML标签以及对应的属性

1.用来描述网页.
2.以尖括号成对出现.
3.属性值由双引号括起来，如果属性值本身有双引号，就用单引号.

1.< html >

描述网页内容.

2.< body >

描述网页内容的主题.

• background

  • 设置背景图像.

• bgcolo

  • 设置背景颜色.

3.< h1-h6 >

将文本设置为标题文本.

4.< p >

1.将为本设置为段落.
2.自动添加前后行.
3.浏览器会省去多余的空格和换行，统一以一个空格表示.

• align

  • 设置对齐方式.

• bgcolor

  • 设置背景颜色.

6.< br / >

插入一个空行来进行换行。

8.< hr / >

创建水平线.

9.< !-- >

1.注释作用，不会在浏览器中显示.
2.给计算机源代码注释.

< link >

1.定义文档与被链接资源的关系.
2.最常见的用途事链接样式表.

• href

  • 定义被链接资源的位置.

• hreflang

  • 定义被链接文档的语言.

• rel

  • 定义被链接文档与当前文档的关系.

• type

  • 定义被链接文档的MIME类型.

• sizes

  • 定义被链接资源的尺寸，仅适用于rel=“icon”.

10.style属性

1.一个HTML标签的多个属性以空格分隔.
2.style是一种通用属性，用于定义文本样式.
style=“ background-color：red"背景颜色.
3.多个属性值要以分号分隔开来.
style="font-family:arial;color:red;font-size:20px;

• background-color

  • 设置背景颜色.

• font-family

  • 设置字体.

• font-size

  • 设置字体大小.

• text-align

  • 设置文本对齐方式.

四.HTML图像

7.< img >

1.描述图片.
2.设置图片链接的方式，将标签作为标签的元素.

• height

  • 设置图片宽度.

• width

  • 设置图片宽度.

• src

  • 设置图片地址.

• align

  • 设置图片对齐方式.

• alt

  • 为图像定义说明，当图片不能正常显示时.

五.HTML链接

5.< a >

1.描述链接地址。
2.单击文本元素可跳转。

• href

  • 设置目标的链接地址

• target

  • 设置链接目标的打开方式

• name

  • 定义锚的名称，主要用于书签，可以创建的链接跳转到书签。

六.HTML标签之文本格式化

<\b>

• 定义粗体文本

< big >

• 定义大号字

< small >

• 定义小号字

< i >

• 定义斜体字

< em >

• 定义强调字

< strong >

• 定义加重文字

< sub >

• 定义下标字

< sup >

• 定义上标字

< ins >

• 定义插入字

< del >

• 定义删除字

< code >

• 定义计算机代码

< bkd >

• 定义键盘输入文字

< samp >

• 定义计算机代码样本

< var>

• 定义计算机变量

< tt>

• 打字机代码

< pre >

保留空格和拆行。

• 定义预格式文本

< abbr >

• 定义缩写

< acronym >

• 定义缩写

< address >

• 定义地址文本

< bdo >

• 定义文字方向

< blockquote >

• 定义长引用

< q >

• 定义短引用

< cite >

• 定义著作的标题

七.HTML表格

< table>

• border

  • 设置表格边框

< tr >

• 定义表格行

< td >

• 定义表格单元格

< th >

• 定义表格表头

< thead >

1.thead.tbody应该与tfoot元素组合实用。
2.可与css组合，改变表格外观。

• 对表格表头进行处理

< tbody >

• 对表格主要内容进行处理

< tfoot >

• 对表格页脚进行处理

八.HTML列表

< ol >

• 定义有序列表

< ul >

• 定义无序列表

< li >

• 定义列表项，适用于有序和无序列表列表项

< dl >

• 定义自定义列表

< dt >

• 定义自定义列表项

< dd >

• 定义自定义列表项的内容

九.HTML类

为HTML设置类，使用不同的css样式。

< div >

• 块级元素，可作为HTML元素的容器

< span >

• 行内元素，可作为文本的容器

十.HTML布局

< header >

• 用于定义文档或节的页眉

< nav >

• 用于定义文章的导航

< section >

• 用于定义文章中的各节内容

< footer >

• 用于定义文章中的页脚

十一.HTML框架

< frameset >

定义如何将窗口分割成框架。

• cows

  • 定义水平框架

• lows

  • 定义垂直框架

< frame >

• 定义框架的HTML文档

< iframe >

1.定义内联框架（在网页内显示网页）

• flame border

  • 定义框架边框

• width

  • 定义框架宽度

• height

  • 定义框架高度

• name

  • 规定iframe的名称

十二.HTML脚本

< script >

• 元素可以是脚本
• 也可以通过src属性指向脚本文件

十三.HTML头部元素

< head >

• 定义HTML头部元素，是HTML所有头部元素的容器。
• 2.是HTML，xHTML文档必有的元素。

< base >

• href

  • 为页面设置默认的链接地址

• target

  • 规定链接默认的打开方式

< link >

1.定义当前文档与外部资源的关系。
2.只能作为head的元素。

• href

  • 定义外部资源的地址

• hreflang

  • 规定外部资源的文本语言

• rel

  • 规定当前文档与外部资源的关系

< title >

1.定义文档的标题。
2.是HTML xHTML文档必需的。

• 常见用途

  • 提供页面被添加到收藏夹时显示的标题
  • 定义浏览器工具栏中的标题
  • 显示在搜索引擎结果中的页面标题

< meta >

1.提供元数据，不会显示在页面上。
2.为搜索引擎定义关键词。
3.为网页定义描述内容。
4.定义网页作者。
5.刷新当前页面

• name

  • 定义context属性的名称

• context

  • 定义元数据内容

• http-equiv

  • 把context内容关联到HTTP头部

十四.HTML字符实体

HTML中的预留字符要用字符实体表示

字符实体的两种表示方法：

• &字符实体名
• &#字符实体数字

十五.HTML字符编码

使用url编码的原因：

• url通常会包含非Ascll编码以外的字符，需要转化为有效的Ascll格式

编码方式：

• %后加两位的16进制数

十六.HTML媒体

HTML插件也叫辅助应用程序，用于扩展浏览器的功能.

插件可用标签或者标签加载.

可使用或标签显示音频或视频.