HTML概念及其标签
HTML简介
* 什么是HTML？
-- HyperText Markup Language：超文本标记语言，网页语言
** 超文本：超出文本的范畴
** 标记：HTML所有的操作都是通过标记实现的，标记就是标签，<标签名称>
* HTML的规范
1.一个HTML文件开始标签和结束标签 <html> </html>
2.HTML包含两部分内容
（1）<head> 设置相关信息 </head>
（2）<body> 显示在页面的内容都写着body里面 </body>
3.HTML的标签有开始标签，也要有结束标签
-- <head></head>
4.HTML的代码不区分大小写
5.有些标签没有结束标签，在标签内结束
-- 比如换行 <br/> 水平线<hr/>
* HTML的操作思想
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据封装起来(包起来)，通过修改标签的属性值实现标签内的数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化
HTML中常用的标签
* 文字标签：修改文字的样式
-- <font> </font>
-- 属性：
* size：文字的大小 取值范围1-7，超出7，默认还是7
* color：文字颜色
-- 两种表示方式
** 英文单词：red qreen blue black
** 使用十六进制实现不同的颜色
* 注释标签
-- <!-- HTML的注释 -->
* 标题标签
-- <h1></h1> <h2></h2> ... <h6></h6>
-- 从h1到h6，大小是依次变小，同时会自动换行
* 水平线标签
-- <hr/>
-- 属性
** size：水平线的粗细 取值范围1-7
** color：颜色
* 特殊字符
-- 需要对特殊字符进行转义
* < <
* > >
* 空格
* & &
* 列表标签
** <dl></dl>：表示列表的范围
** 在dl里面 <dt></dt>:上层内容
** 在dl里面 <dd></dd>:下层内容
** <ol></ol>：有序列表的范围
-- 属性 type：设置排序方式 1（默认） a i
** 在ol标签里面<li>具体内容</li>
** <ul></ul>：表示无序列表的范围
-- 属性： type：空心圆circle、实心圆disc（默认）、实心方块square
** 在Ul标签里面<li>具体内容</li>
* 图像标签
** <img src="图片路径"/>
-- src：图片的路径
-- width：图片的宽度
-- height：图片的高度
-- alt：图片上显示的文字，把鼠标移到到图片上，停留片刻显示内容
** 有些浏览器下不显示（没有效果）
* 路径分类
** 绝对路径
-- C:\Users\asus\Desktop\0413\code\a.jpg
-- http://www.baidu.com/b.jpg
** 相对路径
-- 一个文件相对于另一个文件的位置
-- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
** 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg
-- C:\Users\asus\Desktop\0413\code\4.html
-- C:\Users\asus\Desktop\0413\code\img\a.jpg
** 在html中使用图片 4.html和img在一个路径下
src="img\a.jpg"
** 图片在html的上层目录
-- 使用 ../ 表示上层路径
-- ../../ 表示上层的上层
* 超链接标签
** 链接资源
-- <a href="链接到资源的路径">显示在页面上的内容</a>
** href：链接的资源的地址
** target 设置打开的方式，默认是在当前页打开
-- _blank：在新窗口打开
-- _self：在当前页打开（默认）
-- 当超链接不需要到任何的地址 在href里面加#
-- <a href="#">这是一个超链接</a>
** 定位资源
-- 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
-- 回到这个位置
<a herf="#top">回到顶部</a>
* 表格标签
** 可以对数据进行格式化，使数据显示更加清晰
** <table></table>：表示表格的范围
-- border：表格线
-- bordercolor：表格线的颜色
-- cellspacing：单元格之间的距离
-- width：表格的宽度
-- height：表格的高度
** 在table里面<tr></tr>
-- 设置对其方式 align：left center right
** 在tr里面 <td></td>
--设置显示方式 align：left center right
** 使用th也可以表示单元格
-- 表示可以实现居中和加粗
**分析表格的写法
-- 首先定义一个表格的范围使用table
-- 定义一行使用 tr
-- 定义一个单元格使用td
** 表格的标题(写在table中)
<caption></caption>
** 合并单元格
-- rowspan：跨行
-- colspan：跨列
* 表单标签
** 提交数据到服务器，这个过程必须使用表单标签来完成
** <form></form>：定义一个表单的范围
-- 属性
** action：提交到地址，默认提交到当前页面
** method：表单提交方式
-- 常用的有两种 get和post，默认是get请求
-- get和post的区别
1.get请求地址栏会携带提交的数据，post不会
2.get请求安全级别较低，post较高
3.get请求数据大小的限制，post没有限制
** enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性
** 输入项：可以输入内容或选择内容的部分
-- 在输入项里面需要有一个name属性
-- 大部分的输入项 使用<input type="输入项的类型"/>
** 普通输入项：<input type="text"/>
** 密码输入项：<input type="password"/>
** 单选输入项：<input type="radio"/>
-- 在里面需要属性 name
-- name的属性值必须要相同
-- 必须有一个value值
** 实现默认选中的属性
-- checked=”checked“
** 复选输入项：<input type="checkbox"/>
-- 在里面需要属性 name
-- name的属性值必须要相同
-- 必须有一个value值
** 实现默认选中的属性
-- checked=”checked“
** 文件输入项：<input type="file"/>
** 下拉输入项：（不是在input标签里面的）
<select name=" ">
<option value=" "> </option>
</select>
** 文本域：<textarea cols="列数" rows=”行数“></textarea>
** 隐藏项：<input type="hidden"/>(不会显示在页面上，但是存在html代码里)
** 提交按钮：<input type="submit" value=" "/>
** 使用图片提交
<input type="image" src="图片路径"/>
** 重置按钮：回到输入项的初始状态
<input type="reset"/>
** 普通按钮
<input type="button" vaule=" "/>
* 其他常用标签的使用
b：加粗
s：删除线
u：下划线
i：斜体
pre：原样输出
sub：下标
sup：上标
div：自动换行
span：在一行显示
* html的头标签的使用
** html两部分组成 head和body
-- 在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** <meta>标签：设置页面的一些相关内容
** base标签：设置超链接的基本设置
-- 可以统一设置超链接的打开方式
<base target="_blank"/>
** link标签：引入外部文件
* 框架标签的使用
** <frameset>
-- rows：按照行进行划分
** <frameset rows="80,*">
-- cols：按照列进行划分
** <frameset cols="80,*">
** <frame>
-- 具体显示的页面
-- <frame name=" " sec=" ">
** 使用框架标签时候，不能写在body中，使用了 框架标签，需要把body去掉
