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去掉