后缀 :
.html .htm<head>设置相关信息 ,在浏览器上的内容</head>
<body>显示在页面上的内容都写在body里面<body>
html中不区分大小写有些标签,没有结束标签
eg: <br/> 换行**** html 操作思想:
网页中有很多数据,不同的数据可能需要不同的显示效果,
操作: 需要使用标签把数据包起来,通过修改标签的属性值实现标签内数据样式的变化。
HTML中常用的标签
1.文字标签和注释标签
1) 文字标签: 修改文字的样式
- <font></font>
- 属性:
size: 文字的大小 范围 1-7,超过7默认为7
color: 文字颜色
两种表示方式
** 英文单词 : red green blue black white
** 使用十六进制表示 #ffffff :RGB
- 通过工具选取2) 注释标签
- html: <! -- 注释 -->
2.标题标签,水平线标签和特殊字符
1) 标题标签
<h1></h1> <h2></h2> .... <h6></h6>
字体逐渐变小,并自动换行。2) 水平线标签
- <hr/>
- 属性
size: <hr size="5" />
color: <hr color="blue"/>3) 特殊字符
- 需要对特殊字符进行转义才能显示
> : <
< : >
空格 :
3.列表标签
比如下列效果
学校
宿舍
教学楼
教学楼
<dl></dl> : 表示列表范围
在<dl></dl>里面还可以有:<dt></dt>:上层内容
在<dl></dl>里面还可以有:<dd></dd>:上层内容<dl> <dt>学校 <dd>宿舍</dd> <dd>教学楼</dd> <dd>教学楼</dd> </dt> </dl>
有序列表
- 比如下列效果
1. 2. 3.
a. b. c.
i. ii. iii.
<ol></ol> :有序列表的范围
- 属性 type: 设置排序方式
(默认)1. 2. 3.
a. b. c.
i. ii. iii.
在<ol></ol>里面可以有 <li>具体内容</li><ol type="a"> <li>教学楼</li> <li>宿舍</li> <li>餐厅</li> </ol>
无序列表
<ul></ul>
属性: type= disc(实心圆)--默认、circle(空心圆)、 square(实心方块)、
在<ul></ul>里面: <li></li><ul type="square"> <li>宿舍</li> <li>教学楼</li> <li>餐厅/li> </ul>
4.图像标签
<img src = "图片路径" />
属性: src: 路径
width: 宽度
height: 高度alt: 图片上的文字 (一般用于图片不能显示时提示文字)
5. 路径的介绍
分类:
A.绝对路径
B.相对路径
HTML文件和图片在一个文件时,可以直接写文件名称
上层目录用..表示
6.超链接标签
1) 链接资源
属性:
href: 链接路径
target: 打开路径
A: _blank: 在新页面打开
B: _self: 在当前页面打开< a href="链接到资源的路径" target="打开路径"> 显示在页面上的内容 </a>
当超链接不需要跳转时
<a href="#"> </a>2)定位资源
定位网页位置. eg: 返回顶部
定义位置:
<a name="top">顶部 </a>
回到位置:
<a href="#top">返回顶部 </a>
*** pre 原样输出
<pre></pre>
7.表格标签
1)<table></table>: 表格的范围
属性:
<tr></tr> : 行
<td></td> : 列单元格
<th></th> : 单元格,可居中和加粗
<caption></caption>: 表格标题
border: 表格线
bordercolor:表格线颜色
cellspacing:表格线间距。等于0时表格线合并
width: 表格宽度
height: 表格高度
2)<tr></tr>整行设置
属性:
align:
lift :局左
center :剧中
right :居右3)<td></td>单元格设置
属性:
align:
lift :局左
center :剧中
right :居右
4)合并单元格:
rowspan: 跨行
colspan:跨列
<td colspan="3"></td> 跨3列
8.表单标签
可以提交数据到服务器,这个过程时=可以通过表单标签实现
1)<from></from>:定义一个表单范围
属性: action: 把数据传输到指定地址
enctype:文件上传时候需要的属性
mathod: 表单的提交方式
常用的两种
get: 地址栏会携带提交的数据
安全性低
有数据大小的限制
post: 不携带提交的数据,数据在请求体里
安全性高
无文件大小的限制
2)**输入项:可以输入或选择内容的部分
原则:在输入项中需要name属性
A.大部分输入项 <input type= "输入项的内容"/>
eg: <intput type="text">B.普通输入项:<intput type="text"/> 表单内直接显示输入内容
C.密码输入项:<intput type="password"/> 表单内显示实心圆点
D.单选输入项:<intput type="radio"/>
-- 需要属性name ,方可选中且 name必须相同
eg:<intput type="radio" name="sex"/>
-- 需要属性value。***实现默认选中: checked = "checked"
E.复选输入项:<input type="checkbox"/>
-- 需要属性name ,方可选中且 name必须相同
-- 需要属性value。***实现默认选中: checked = "checked"
F.文件输入项:<input type="file"/>
用于文件上传
G.隐藏项:<input type = "hidden">
存在于代码中,但不会显示
H.下拉输入项:<select></select>
<select name="birth">
<option value="1992">1991<option>
<option value="1992">1992<option>
<option value="1992">1993<option>
</select>***实现默认选中 selected = selected
J.文本域:<textarea></textarea>
属性: row , col
eg:5行6列文本域
<textarea row="5" col=“6”></textarea>k.提交按钮: <input type="submit"/> 默认提示为:提交查询内容
用value修改提示语句。提示为注册
<input type="submit" value="注册"/>
L.使用图片提交: <input type="image" src="图片路径"/>M.重置数据:所有输入项回到初始状态。
<input type="reset" value="提示语句"/>N.普通按钮:事件跳转
<input type="button" value="提示语句/>
9.其他常用标签:
<b><b/> : 加粗
<u><u/> :下划线
<i><i/> :斜体
<s><s/> :删除线
<pre><pre/>: 原样输出
<hr/> 水平分割线
<sub><sub/> : 下标
<sup><sup/> : 上标
<div></div> : 自动换行
应用场景:回复评论,自动换行
<span></span> : 在一行显示
应用场景:错误提示,在一行显示
<p></p>: 段落标签,比 br 标签多一行
10.HTML头标签的使用
title : 题目
meta : 设置页面相关的一些内容
<meta http-equiv = "refresh" content = "3 ; url = hello.html>
表示在3秒后刷新,并自动调转到hello.html页面
base : 超链接的基本信息设置。
<base target="_blank" /> 所有超链接都在新窗口打开
link : 引入外部文件
使用link标签引入css文件
11.框架标签
作用:划分页面区域,提高页面维护性
<frameset>:
- rows 按行划分
eg: <frameset rows = "80 , *">
划分为两行,用逗号隔开。一行为80,* 表示剩余所有
- cols 按列划分<frame>
具体显示的页面
<frame name = "" src = "a.html">***注意 : 使用框架标签,需要去掉body
<frameset row = "80 , *"> //将页面划分为上下两部分 <frame name = "top" src = "a.html"> //上面部分 <frameset cols = "150 , *"> //把下面分为左右两部分 <frame name = "lower_left" src = "b.html"> //左边页面 <frame name = "lower_right" src = "c.html"> //右边页面 </frameset> </frameset>
效果:在左边超链接,内容显示在右边 --- 设置超链接属性target为frame中name的值
12.a标签的扩展
-百度是网络资源
-当a标签里面访问网路资源时,必须加一个协议 http :表示一个网络的公共协议加上http协议之后,自动识别访问资源是一个网络资源