【温故知新】——HTML基础重要知识点复习
前言：本文是自己在学习课程中的课程笔记，这里用来温故知新的，并非本人原创。
一、HTML快速入门(重点)
1、HTML概述
1、什么是HTML
HTML : Hyper Text Markup Language 超文本标记语言
超文本：超级文本
a : 第一个字符
超文本a : 超链接
标记：<a>
语言：表现形式，语法规范
HTML用来设计网页的语言
由HTML所编写的文件，以.html或.htm作为后缀
2、HTML基础语法
1、标记语法
1、什么是标记
HTML中用于描述功能的符号称之为"标记"
ex:
<p></p> - 段落
<a></a> - 超链接
... ...
2、语法
标记在使用时必须用尖括号<>括起来
3、分类：
1、封闭类型标记
也叫作 双标记，必须成对出现
语法
<标记></标记>
<p></p>
<a></a>
<div></div>
2、非封闭类型标记
也叫作 空标记或单标记
语法
<标记>或<标记/>
ex:
<img> - 图像
<br> - 换行
<hr> - 水平线
2、元素
也称之为 标记
标记：实际上是语法规范
元素：强调的是标记中的内容
<div>这是一个div</div>
3、元素嵌套
元素之间可以实现嵌套，从而表现出更为复杂的页面结构
<div><p>这是一个被嵌套的段落</p></div>
注意：
1、嵌套位置和顺序
<div><p></div></p>
2、被嵌套的内容要通过"代码缩进"来表示层级结构
<div><p>这是一个p</p></div>
<div>
<p>这是一个p</p>
</div>
<div>
<p>这是一个p</p>
</div>
4、属性 和 值
1、作用
修饰元素
2、语法
1、属性的声明必须位于开始标记中
2、一个元素可以有多个属性，多个属性之间用空格隔开，并且排不分先后
3、每个属性都可以有值，值和属性之间用 = 连接。值最好要放
在引号中(“ ” 或 ‘ ‘)
align 属性 ：控制文本的水平对齐方式，
取值：
1、left ：左对齐
2、center ：居中对齐
3、right：右对齐
问题：控制 一个p标记的文本，是水平居中对齐
<p align='center'>This is a p</p>
在以上的基础上，设置 p元素的id属性值为 p1
<p align='center' id="p1">This is a p</p>
3、标准属性
所有的元素都具备的属性，称之为标准属性或通用属性
id:定义元素在网页中独一无二的标识
title:鼠标移入到元素上的时候，所弹出的文字
class:定义元素所引用的类选择器(CSS中使用)
style:定义元素的内联样式(CSS中使用)
5、注释
1、什么是注释
允许出现在网页源码中，但是不会被浏览器所解释的文本，称之为注释。
通常情况下，会将 对代码的解释文本放在注释中，以便让其他的开发者去看。
2、注释的语法
<!-- 注释内容 -->
注意：
1、注释不能嵌套
<!--
<!-- -->
-->
2、注释不能出现在<>中
<p <!-- align="center" -->></p>
以上写法是错误的。
6、HTML 和 XHTML
1999年12月24日 W3C推出HTML4.01标准规范
2000年1月26日 W3C推出XHTML1.0标准规范
XHTML1.0 版本 以 HTML4.01几乎相同，但是它是更严格更纯净的HTML版本
比如：
1、要求标记必须要关闭
<p></p>
<br/>
2、要求属性值必须用引号引起来
<p align=center></p>(html4.01和html5中都可以)
7、HTML5(H5)
h5的目标，为了实现更加简洁的HTML代码
1、空标记有无结束均可
<br>
<br/>
2、属性值可以被引号括起来
<p align="center"></p>
<p align='center'></p>
<p align=center></p>
3、有些属性可以不给值
<input readonly="readonly">(h5之前的写法)
<input readlony>(h5写法)
二、文档结构
1、HTML文档结构
由两大部分组成
1、文档类型声明
用于指定网页的版本和风格
2、html页面
要显示在页面给别人去看的内容
2、文档类型声明
<!doctype html>
该段代码要出现在网页的最顶端
3、HTML页面
1、由一对 html 元素表示，位于 文档类型声明之后
2、在 <html>元素中，包含两个直接子元素
1、<head></head>
网页头部
作用：定义页面全局信息
包含：
<title></title> 定义网页标题
<script></script> 定义或引入JS文件/代码
<style></style> 定义内部样式表
<link/>:引入外部样式表文件
<meta/>:定义网页元数据
比如：
- 编码格式
设置网页编码格式为utf-8
<meta charset="utf-8">
- 网页关键字
- 描述
2、<body></body>
网页主体，所有显示给用户去看的东西都写在body中
属性：
- text
取值：颜色
作用：控制整个页面中所有文本的颜色
- bgcolor
作用：设置页面的背景颜色
取值：颜色
三、文本(重点)
1、文本标记的作用
会让文本有不同的显示方式
2、特殊字符表示方式
文档中的 空格和回车 最终只会被解释成为一个空格
如果想表示特殊的字符效果，如 空格，<,>, ... 需要进行转义
1、< --> less than
表示 <
2、> --> greater than
表示 >
3、
空格
4、©
©
5、¥
￥
3、文本标记
1、文本样式
1、作用
对文本进行修饰，比如加粗，斜体，线条样式等...
2、标记
1、<b></b>
加粗
2、<i></i>
斜体
3、<u></u>
下划线
4、<s></s>
删除线
5、<sup></sup>
上标
6、<sub></sub>
下标
2、标题元素
1、作用
以醒目(改变字体大小、加粗方式、垂直空白)的方式显示文本
2、语法
<h#></h#>
#:1~6
一级标题(<h1></h1>)字最大
...
六级标题(<h6></h6>)字最小
3、属性
align ：文本的水平对齐方式
取值：
1、left
2、center
3、right
3、段落元素
1、作用
以特殊的方式来显示文本即段落的上和下都有垂直的空白
2、语法
<p></p>
3、属性
algin
4、换行元素
语法：
<br>或<br/>
5、块分区元素
分区：可以对元素进行分组，多数用于页面布局上
语法：<div></div>
作用：独占一行，做布局!!!
6、行内分区元素
语法：<span></span>
作用：包裹文本，灵活的设置文本的样式
7、分割线元素
1、作用
在网页中显示一条水平线
2、语法
<hr>或<hr/>
3、属性
1、size
尺寸，相当于设置 水平线的 高度
取值 以 px 为单位的数值，px可以省略
2、width
宽度，以px为单位的数值，px可以省略
3、color
颜色
4、align
水平线自己的水平对齐方式
8、预格式化
1、作用
保留源文档中的格式，即保留原来的换行和文本中的空格
2、语法
<pre>内容</pre>
9、元素分类
1、行内元素
不会换行，可以和其他的行内元素位于同一行
使用场合：包裹文本，去设置文本的显示效果
display:inline
注意：所有的行内元素都不具备 align属性
2、块级元素
默认的情况下，每个元素独占一行，适用场合，多数都会用于 布局上
display:block;
ex:
<div></div>
<p></p>
<h1>~<h6>
注意：
1、不要让行内元素嵌套块级元素
<span>
<div></div>
</span>
错误的。
2、p标记
p标记是不能嵌套块级元素
<p>
<p></p>
</p>
4、图像和链接
1、URL
1、目录结构
目录：文件夹名称，保存网页内容的文件夹
2、URL
URL(Uniform Resource Locator)
统一资源定位器,俗称 路径,用来表示 网络资源的地址
资源：图片，音频，视频，文件等...
路径：从当前位置到目标资源位置所经过的路线。
三种表现形式:
1、绝对路径
1、什么是绝对路径
从文件最高级路径下开始的完整路径。
1、访问网络资源
由 协议名称、主机名(域名/IP地址)、目录路径、文件名
ex ：获取 百度 LOGO
协议名称：https
主机名:www.baidu.com
目录路径：img
文件名：bd_logo1.png
<imgsrc="//www.baidu.com/img/bd_logo1.png" width="270" height="129">
2、访问本机资源
文件所在的最高级目录路径：？--文件所在的盘符
2、相对路径
1、什么是相对路径
从当前文件所在的位置处开始，去查找资源文件所经过的路径就是相对路径
1、同目录
直接通过 资源文件名称 进行引用即可
2、子目录
先进入，再通过资源名称进行引用
images/1.jpg
3、父目录
先返回，在通过资源文件的名称或路径进行引用
返回:../
3、根相对路径
特点：永远都是从网站所在的服务器根目录处开始查找
表现方式：/作为开始
2、图像
1、图像格式
1、jpeg
图像图像联合专家组
.jpg 作为后缀来存储的
2、gif
图形接口格式
特点：支持动画
.gif 作为后缀来存储的
3、png
可移植网络图形
采用 无损压缩，有8位，24位，32位三种形式
支持 透明色(PNG24位不支持)
.png 作为后缀存储的
2、图像元素
1、语法
<img>
2、属性
1、src
要引用的图像URL(绝对，相对，根相对)
注意：URL 要严格区分大小写,服务器路径 严格区分大小写
本机路径则无所谓
2、width
宽度
3、height
高度
以 px 或 % 为单位的数值，如果省略单位不写，默认为 px
<img src="../Images/a.jpg" height="300">
注意：width 和 height 如果只给一个属性的话，那么另外一个属性会跟着等比缩放
<img width="100px" src="a.jpg">
3、链接
1、作用
链接又叫超链接，允许用户通过点击的操作完成页面的跳转。
2、语法
<a>内容</a>
属性：
1、href
链接URL，只有设置了 href 属性之后，才是真正的超链接。
2、target
目标，打开新页面的方式
取值：
_blank : 在新标签页中打开
_self:默认值，在当前页中打开
3、链接的表现形式
1、目标文档为下载资源
href 属性值，指定的文件名称，就是下载操作(rar,zip)
2、电子邮件链接
前提：计算机中必须安装 邮件客户端，并且配置好了 邮件信息。
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
3、返回页面顶部的空链接
<a href="#">内容</a>
4、链接到Javascript
<a href="javascript:">内容</a>
4、链接-锚点
1、什么是锚点
用于在页面中做一个记号，允许页面随时随地的跳转到这个记号的位置处
2、使用方式
1、定义锚点(做记号)
1、使用 a 标记的 name 属性
<a name="NO1">衣装鞋帽</a>
2、使用任何一个标记的 id 属性
<ANY id="锚点名称"></ANY>
2、链接到锚点上(跳到记号位置处)
<a href="#锚点名称">内容</a>
ex:
<a href="#NO1">...</a>
以上方式，链接到本页的锚点处
链接到其他页面的锚点处:
<a href="页面url#锚点名称"></a>
四、表格
1、什么是表格&表格作用
由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列
到一起组成的
表格的作用 以一定的结构来显示信息的。
2、使用表格
1、创建表格(语法)
表格：表格，行，列(单元格)组成
定义表格：<table></table>
创建表行：<tr></tr>
创建列(单元格):<td></td>
注意：默认情况下，每行中的列数是统一的。
table : display:table;
特点：
1、独占一行
2、宽度自适应(由内容来决定)
2、表格属性
1、<table> 属性
1、width
设置表格宽度
2、height
设置表格高度
3、align
设置表格在其 父元素 中的水平对齐方式，
取值：left,center,right
4、border
边框,边框宽度，以px为单位的数值，px可以省略
5、cellpadding
单元格内边距
单元格边框与内容之间的距离
6、cellspacing
单元格外边距
单元格与单元格之间或者单元格与表格之间的 距离
7、bgcolor
背景颜色
2、<tr> 属性
1、align
该行的内容 水平对齐方式
2、valign
该行的内容 垂直对齐方式
取值：top，middle，bottom
3、bgcolor
3、<td> 属性
1、width
2、height
3、align
4、valign
5、bgcolor
6、colspan
设置单元格跨列
7、rowspan
设置单元格跨行
3、表格中的其他标记
1、<caption></caption>
作用：为表格定义标题
位置：表格正上方居中显示
<table>
<caption>标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
2、行标题或列标题
列标题：第一行中的每一列，加粗，水平居中的效果显示
行标题：每行里面的第一列, 加粗，水平居中的效果显示
行(列)标题:<th></th>
<th></th>作用 与 <td></td>一模一样
3、表格的复杂应用
1、行分组
表格可以被划分成3个部分
1、表头 <thead></thead>
2、表主体 <tbody></tbody>
3、表尾 <tfoot></tfoot>
<table>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>
注意：如果不对表格行进行分组的话，那么默认都属于 tbody 中
2、不规则表格
每行中的列数，不是统一化的。
1、跨列
合并列，让指定的单元格，横向向右，合并几个单元格
(包含自己)
语法：
td 的 colspan 属性
2、跨行
合并行，让指定的单元格，纵向向下，合并几个单元格
(包含自己)
语法：
td 的 rowspan 属性
注意：无论是跨行还是跨列，被合并的单元格一定从代码中删除出去
3、表格的嵌套
在一个表格中，又嵌入了另外一个表格
被嵌套的表格必须出现在<td>中
<table>
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
五、列表
1、什么是列表&作用
将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来
2、列表的组成
列表是由 列表类型 和 列表项 组成的
列表类型：
有序列表
无序列表
列表项：
表示具体的列表中的内容
3、使用列表
1、有序列表
1、语法:
<ol></ol> --> Order List
列表项：<li>内容</li> --> List Item
2、ol 的属性
1、type
列表标识的类型
取值：
1、1 ：数字(默认值)
2、a ：小写字母
3、A ：大写字母
4、i ：小写罗马字符
5、I ：大写罗马字符
2、start
列表标识的起始编号
默认为1
2、无序列表
1、语法
<ul></ul>->Unorder List
列表项：<li></li>
2、属性
1、type
取值：
1、disc,实心圆(默认值)
2、circle,空心圆
3、square,实心矩形
4、none,不显示标识
4、列表嵌套
注意：显示的内容只能放在 li 中
<ul>
<li>孙悟空</li>
</ul>
5、定义列表
1、作用
用于要给出一类事物的定义的情形。
2、语法
1、<dl></dl> 定义一个定义列表
2、<dt></dt> 定义 列表中的一个术语
3、<dd></dd> 对 术语 进行解释和说明
3、使用场合
图文混排
六、结构标记
1、什么是结构标记
H5中新标记，用来表示页面布局的，从而提升标签的语义性
2、结构标记分类
1、<header></header>
作用：用于定义文档的头部
注意：允许在页面中出现多次，作为任何部分的头部信息定义
替代:<div id="header"></div>
2、<nav></nav>
作用：用于定义页面的导航链接部分
替代：<div id="nav"></div>
3、<section></section>
作用：用于定义文档中的具体组成部分，表示主体内容分
替代：<div id="main"></div>
4、<article></article>
作用：用于定义独立于文档主体内容的一些其他内容
比如：论坛中的帖子、新闻信息、博客或微博中的条目
5、<footer></footer>
作用：用于定义网页中的页脚信息，网页中的靠下部分的内容
6、<aside></aside>
作用：用于定义页面中的 边栏信息
注意：能使用 结构标记的 地方，尽量使用结构标记，无法被结构标记
所取代的，就使用 <div id=""> 一起来实现布局
七、表单(重难点)
1、表单的作用
表单用于显示、收集信息，并将信息提交给服务器
2、完整的表单组成
1、表单 - form
2、表单控件
3、表单元素(重点)
1、语法
<form>
允许出现表单控件
</form>
2、属性
1、action
定义表单被提交时发生的动作
提交给服务器处理程序的地址
注意：通过 与服务器端人员交流 得到 action 的地址
默认，提交给本页
2、method
作用：定义表单提交数据时的方式
取值：
1、get (默认值)
意义为：得到，获取
场合：向服务器要数据时使用
特点：
1、明文提交,所提交的数据时可以显示在地址栏上的安全性较低
2、提交数据有大小限制-最大为2KB
2、post
意义：邮寄，邮递
场合：将数据提交给服务器处理时使用(有保密类型数据时)
特点：
1、隐式提交-所提交的内容是不会显示在地址栏上的，安全性较高
2、无大小限制
3、put
4、delete
5、...
3、enctype
作用：编码类型，即表单数据进行编码的方式
允许表单将什么样的数据提交给服务器
取值：
1、application/x-www-form-urlencoded
默认值
允许将普通字符，特殊字符，都提交给服务器，不允许提交文件
2、multipart/form-data
允许 将文件 提交给服务器
3、text/plain
只允许提交普通字符。特殊字符，文件等都无法提交
4、name
定义 表单的名称
