本周终于学完了所有的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进制数