HTML学习笔记
1.HTML概念
超文本标记语言
2.互联网三大基石
URL:统一资源定位符（唯一的定位一个网络资源）
HTTP：超文本传输协议（规范浏览器与服务器之间数据交互格式）
HTML：超文本标记语言（有效的组织数据在浏览器的显示）
<html> <head> <!--head标签中主要配置浏览器的配置信息--> <title>HTML学习</title><!--网页标题标签：告诉浏览器用什么标题显示网页--> <meta charset="utf-8"/><!--网页解析编码格式配置（HTML5）：告诉浏览器使用指定的编码格式解析文档--> <meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--HTML4:文档配置格式设置--> </head> <body> this is my first html </body> </html>
3.网页标签
网页标题标签
<title>HTML学习</title><!--网页标题标签：告诉浏览器用什么标题显示网页-->
编码格式标签
<meta charset="utf-8"/><!--网页解析编码格式配置（HTML5）：告诉浏览器使用指定的编码格式解析文档--> <meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--HTML4:文档配置格式设置-->
网页搜索优化标签
<meta name="keywords" content="111,222,333"/><!--网页关键字--> <meta name="description" content="本网站。。。"/><!--网页描述--> <meta name="author" content="ma"/><!--网页作者-->
网页指定跳转标签
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><!--网页自动跳转-->
其他标签
例如：css引入标签和js引入标签
4.HTML的body标签
(1)标题标签
<h1>到<h6>：会将其中的数据加粗加黑显示，并且显示依次减弱，标题标签自带换行功能（块级标签）
属性：
align: center left right调整显示位置
(2)水平线标签
<hr>:会在页面中显示一条水平线，默认居中显示
属性：
width="宽度" 设置水平线的宽度
size="高度" 设置水平线的高度
color="颜色" 设置水平线的颜色
(3)段落标签
<p>:会将一段数据作为整体进行显示，主要是进行css和js操作时方便，会自动换行（块级标签）
特点：
段间距比较大
(4)换行符
<br>:告诉浏览器在此位置换行
(5)空格符
 (1字节):告诉浏览器在此位置加入空格
(6)权重标签
<b>:会将内容加黑显示
<i>:会将内容斜体显示
<u>:会将内容添加下划线
<del>:增加中划线
以上标签不会自动换行，可以嵌套使用
(7)列表
有序列表
<ul>
<li>:该标签中书写列表内容,一个li标签代表列表中的一行数据
特点：
默认数据前有一个黑圆圈
无序列表
<ol>
<li>:该标签中书写列表内容,一个li标签代表列表中的一行数据
特点：
会自动的给列表进行顺序编码，格式从小到大并且连续
属性：
type:可以改变顺序编码的值，可以是1 a A I,默认使用阿拉伯数字进行顺序编码
自定义列表
<dl>
<dt>:数据的标题
<dd>:数据的具体内容，一个dd表示一条数据
6.HTML的图片标签
img
src:图片路径
本地资源路径：一般本地图片资源使用相对路径即可
网络资源路径：图片资源的URL地址
width:设置图片的宽度，如果是单独设置，则在图片保证不失真的情况下自动缩小或放大
单位可以是px也可以是百分比
width:设置图片的高度，如果是单独设置，则在图片保证不失真的情况下自动缩小或放大
单位可以是px也可以是百分比
title:图片标题，鼠标放在图片上的时候显示
tal:图片加载失败后的提示语
注意：图片是不会自动换行的（行内元素）
注意：
相对路径：从当前文件出发查找另一个文件所经过的路径
绝对路径：从根盘符出发所查找文件的路径
7.HTML的超链接标签
(1)<a>标签：
href:要跳转的网页资源路径
本地资源:相对路径
网络资源:网络资源（网页）的URL
target:指明要跳转的网页资源显示位置
_self:在当前页中刷新显示
_blank:在新的标签页中显示
_top:在顶层页面中显示
_parent:在父级页面中显示
注意:
超链接标签中一定要声明访问方式，访问方式可以是文字也可以是图片
(2)锚点
作用：在一张网页中进行资源跳转
使用：
先使用超链接标签在指定的网页位置增加锚点，格式为：
<a name="锚点名"></a>
使用a标签时可以跳转指定的锚点，达到网页内部资源跳转的目的，格式：
<a href="#锚点名">访问方式</a>
8.HTML的表格标签
<table>:声明一个表格
<tr>:声明一行，设置行高及该行所有单元格的宽度
<th>:声明一个单元格，表头格，默认居中加黑
<td>:声明一个单元格，默认居左显示原始数据
注意：
行高即该行所有单元格的高度
单元格的宽度即列宽
属性：
border:给表格添加边框
width:设置表格的宽度
height:设置表格的高度
cellpadding:设置内容距边框的距离
cellspacing:设置边框的大小
特点：默认根据数据的多少进行表格的大小显示
单元格的合并：
第一步：
首先确保表格时一个规整的表格
第二部：
根据要合并的单元格，找到其所在的源码位置
第三部：
行合并：在要合并的单元格的第一个单元格上使用属性rowspan="要合并的单元格个数",并删除其他单元格完成合并
列合并：在要合并的单元格的第一个单元格上使用属性colspan="要合并的单元格个数",并删除其他单元格完成合并
9.HTML的内嵌和框架标签
内嵌标签：
<iframe>
src:要显示的网页资源路径,可以是本地(相对路径)也可以是网络资源(URL)
注意：
默认当前页面打开及加载src指向的资源
width:设置显示区域的宽度
height:设置显示区域的高度
name:设置内嵌区域的名字，结合超链接标签的target属性使用
作用：
在当前网页中加载其他网页的资源，达到不同网页资源之间不相互干扰，并能在同一页面中展现给用户的目的
框架标签：
<frameset>
rows:按照行进行切分
cols:按照列进行切分
子标签：
frame:进行切分区域的占位，一个frame可以单独加载网页资源
src:资源路径（本地或者网络）
name:区域名，结合超链接使用
注意：一定要删除body标签
<html> <head> <title>框架标签学习<title> <meta charset="UTF-8"> </head> <frameset row="10%,*,10%"> <frame src="" /> <frameset col="50%,50%"> <frame src="" /> <frame src="" /> </frameset> <frame src="" /> </frameset> </html>
10.HTML的表单
<form>表单标签
作用：收集并提交用户数据给指定服务器
使用：在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性所指明的提交地址
属性：
action:收集的数据提交地址也就是URL
method:收集的数据的提交方式
get:适合小量数据，表单数据以?隔开拼接在URL后面，不同的键值对使用&符号隔开
post:适合大量数据，安全
注意1：
表单数据的提交，要提交的表单必须拥有name属性，否则不会提交
提交的表单项数据为键值对，键为name的属性值，值为用户书写的数据
注意2：form标签会收集其标签内部的数据
<form>表单域标签
作用：给用户提供可以进行数据书写或者选择的标签
注意：表单域提交提交的是表单域标签的value值
使用：
文本框：
input
type:
text:收集少量的文本数据，用户可见
passwd:收集用户密码数据
name:数据提交的键，也会被js使用
value:默认值
单选框：
input:
type:
radio
name:name属性值相同的单选框只能选择一项数据
value:要提交的数据
checked:使用此属性的单选默认是选择状态
多选框：
input:
type:
checkbox
name:一个多选组需要使用相同的name属性值
value:要提交的数据
checked:使用此属性的单选默认是选择状态
下拉框：
select
name:数据提交的键名，必须声明
子标签option：一个option标签表示一个下拉选项
value:要提交的数据
文本域：
textarea:声明一个可以书写大量文字的文本区域
name:数据提交的键名，js,css也会使用
rows:声明文本域的行数
cols:声明文本域的列数
普通按钮：
input:
type:
button
value
隐藏标签：
input:
type:
hidden
name
value
