1. html: 超文本标签语言
html:作用:展示
2.超文本:超越了一般文本,描述文本的字体 颜色 图片
标签:也叫标记(人家定义好的东西，除了普通文本，用<>包起来的那 个东西就叫标签。
3. html书写规则:
3.1. 文件的后缀名 .html(建议) 或者 .htm
3.2. 标签必须用 <> 引起来 已经定义好的标签3.3 属性
格式: key="value"
建议属性的值用引号引起来.
不区分大小写
注意:
1. 最好将所有的内容放在一个标签中 <html></html>
2. 有开始标签和结束标签的标签称之为围堵标签
3. 没有结束的标签的称之为空标签 <br/>
4. 开始标签和结束标签之间的内容称之为标签体.
5. <!--注释内容--> html页面中的注释
6. 标签必须正常嵌套, 标签最好关闭，有嵌套就会有子标签
4.文件标签:(应该有的标签）（可省略但不建议）
html标签: 声明当前网页为html页面子标签:
<head></head>
<body></body>head:用来存放当前页面的重要信息,一般不展示在html页面上
head常见的子标签
<title></title> 网页的标题
body:
要展示的数据放在body中
5.标题标签:
<hn></hn>//开始结束标签
n取值 :1~6
h1最大 h6最小
自动换行 且留白 默认加粗
常用属性:
align:对齐方式
left:左 right:右 center:居中
格式:
<h2 align="center"> 内容</h2>
6.
字体标签:(了解)规定文本的字体、字体尺寸、字体颜色。
<font></font>
两个属性是可以放在一起使用的
常用属性:
face:字体
size:尺寸
color:颜色
颜色的取值:(RGB),把它拆分成256种颜色
方式1: #xxxxxx x为16进制eg：#ffffff 根据rgb的配比为白色
#000000根据rgb的配比为黑色
方式2: 英文单词
7.段落标签:
<p></p>
其他标签:
<b></b> , <strong></strong>加粗
<i></i> 斜体
<hr/> 水平线（空标签）
<br/> 换行 （空标签）
案例1-步骤分析:
1.新建一个html页面
2.标题标签
3.添加一个水平线
4.3个段落
5.添加字体颜色 加粗 斜体
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3>公司简介</h3> <hr/> <p> <font color="blue">西安邮电大学</font>是一个<b>一本</b><i>院校</i> </p> <p>他有计算机学院 </p> </body> </html>
案例2-图片网页展示
1.需求:
在一个页面中展示多张图片
2.技术分析:
<img/>（空标签）
图片标签:★
<img/>
常用属性:
src:图片的路径
alt:规定图像的替代文本
title:移上去显示的文字
width:宽
height:高
大小的写法:
像素:123px
百分比:20%路径的写法:
相对路径:（用的少）
./ 或者 什么都不写 当前目录
../ 返回上一级目录
绝对路径:
带协议的绝对路径:
http://www.itheima.com
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="../img/logo2.png" title="移动=====" width="500px"/> <img src="../img/logo212.png" alt="你好" /> </body> </html> <!-- 注意width=500h和title="移动"等用法 -->
案例3-列表页面展示
1.需求:
友情连接的页面通过列表展示出来
2.技术分析:
列表标签
3.列表标签:
<ol></ol> 有序
<ul></ul> 无序
4.常用的标签
<li></li> 列表项
5.超链接标记(作用：可以点击）
<a></a>
常用属性:
href:跳转路径后面加的是路径，会跳转到指定的路径，
如果跳到当前的路径为#
target:在哪里打开，选择在空白处打开一般，这样不会丢 失当前页面
默认值:_self _blank(在空白页面打开)
案例4-首页信息的展示
1.需求:
通过表格布局将首页信息展示
2.技术分析:
表格表格
3.表格标签★
<table></table>
常用的子标签
<tr>:行
<tr></tr>
常用子标签:
<td>:列
<th>:表头单元格 默认居中加粗
注意:
一行必须只有有一个单元格或者一列实例实现1：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--创建一个4行三列--> <table border="1" width="40%" height="200px" align="center" bgcolor="#ffff00"> <tr align="center"> <th>11加粗</th> <th>22加粗</th> <th>33加粗</th> </tr> <tr align="center"> <td>21</td> <td colspan="2">22&23</td> </tr> <tr> <td rowspan="2">31&41</td> <td>32</td> <td>33</td> </tr> <tr > <td>42</td> <td>43</td> </tr> </table> </body> </html> <!-- table 的常用属性 border:边框 像素值 align ：表格对齐 width tr的常用属性 align；内容对齐 td的常用属性 align colspan：跨列合并 rowspan;跨行合并 -->4.table 的常用属性:
border:边框 像素值
width:
align:表格对齐方式
tr 的常用属性:
align:内容对齐bgcolor
td 的常用属性:
align:内容对齐
colspan:跨列合并 值:合并的列数
rowspan:跨行合并bgcolor
5.实例实现
注意：空格等特殊的字符必须经过转义字符
eg: 空格： 可以放到<a></a>的后面的可以先掌握下面的几个，剩余的慢慢了解
步骤分析:
1.常见一个8行1列的表格
2.在第一行 放logo
嵌套一个1行3列的表格
3.第2行 放菜单
4.第3行 放图片
5.第4行 热门商品
嵌套一个2行7列的表格
6.第5行 放广告图片
7.第6行 最新商品
嵌套一个2行7列的表格
8.第7行 放一个图片
9.第8行
两个段落<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" width="100%"> <!--8行1列--> <!--logo 嵌套一行3列表格 --> <tr> <td> <table width="100%"> <tr> <td> <img src="../img/logo2.png" height="40px" /> </td> <td align="center"> <img src="../img/header.jpg" /> </td> <td align="right"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!-- 菜单 --> <tr> <td bgcolor="black" height="40px"> <a href="#"><font color="white" size="4">首页</font></a> <a href="#"><font color="white" size="4">首页</font></a> <a href="#"><font color="white" size="4">首页</font></a> <a href="#"><font color="white" size="4">首页</font></a> </td> </tr> <!--轮播图--> <tr> <td> <img src="../img/1.jpg" width="100%"/> </td> </tr> <!--热门商品 嵌套 2行7列表格 --> <tr> <td> <font size="6" face="黑体">热门商品</font> <img src="../img/title2.jpg" /> <table width="100%"> <tr> <td rowspan="2"> <img src="../img/big01.jpg" /> </td> <td colspan="3"> <img src="../img/middle01.jpg" /> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> </tr> <tr> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> </tr> </table> </td> </tr> <!--广告--> <tr> <td> <img src="../img/ad.jpg" width="100%"/> </td> </tr> <!--最新商品 嵌套 2行7列表格--> <tr> <td> <font size="6" face="黑体">热门商品</font> <img src="../img/title2.jpg" /> <table width="100%"> <tr> <td rowspan="2"> <img src="../img/big01.jpg" /> </td> <td colspan="3"> <img src="../img/middle01.jpg" /> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> </tr> <tr> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> <td> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </td> </tr> </table> </td> </tr> <!--一张图片--> <tr> <td> <img src="../img/footer.jpg" width="100%" /> </td> </tr> <!--版权 root 两个段落 --> <tr> <td> <p align="center"> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> </p> <p align="center"> Copyright © 2005-2016 传智商城 版权所有 </p> </td> </tr> </table> </body> </html>
案例5-表单页面(登录界面）
1.需求:
设计一个表单页面,用来收集用户的数据
2.技术分析:
表单标签
表单标签★★★
<form></form>
作用:
用来从浏览器端收集用户的信息.实例：
表单:
常用属性:
action:信息提交的路径 默认是当前页面
method:表单提交的方式
只需要掌握两种
get(默认)和post
get和post的区别:
1.get请求会把所有的参数追加在地址栏上,post请求不会
2.get请求参数大小有限制,post请求参数大小没有限制
3.post相当于get安全些
常见的子标签
input
select:下拉选
textarea:文本域
input标签
常用的属性:
type:
1.text:文本框 默认
2.password:密码框
3.radio:单选框
4.checkbox:多选框
5.file:文件框
6. submit:提交
7.reset:重置
8.button:普通按钮
9.hidden:隐藏域 在页面上显示 提交的时候可以提交过去
10.image:图片提交 替代submit
name:
可以将几个单选框(复选框)设置为一组
要想将信息保存到服务器上必须有name属性
readonly:
readonly="readonly" 只读
disabled:
disabled="disabled" 禁用
select :下拉选
格式:
<select name="pro">
<option>黑龙江</option>
</select>
textarea:文本域
常用的属性:
cols:列
rows:行
提交到服务器的内容的格式:
key=value&
对于文本框 密码框 文本域 手写的内容传递过去了
对于单选框和多选框来说,却没有把值传递过去
要想把值传递过去 必须设置value属性
若下拉选要想把选中内容的值传递过去,请加上value属性
默认值:
文本框 密码框:只需要添加value属性
单选框 多选框:添加 checked="checked"
下拉选:添加selected="selected"
文本域:标签体
当我们提交的时候 发现地址栏变化
?username=tom&password=123&sex=on&hobby=on&hobby=on&photo=&pro=黑龙江&city=哈尔滨&intr=good+girl
-->效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="get"> <input type="hidden" name="id" value="007"/> 姓名:<input name="username" value="xuduoduo"/><br> 密码:<input type="password" name="password" value="123" disabled="disabled"><br> 性别:<input type="radio" name="sex" value="1" checked="checked">男 <input type="radio" name="sex" value="0">女 <br> 爱好:<input type="checkbox" name="hobby" value="eat">吃 <input type="checkbox" name="hobby" value="drink" checked="checked">喝 <input type="checkbox" name="hobby" value="sleep" checked="checked">睡 <br> 头像:<input type="file" name="photo"><br> 籍贯: <select name="pro"> <option value="01">黑龙江</option> <option value="02">吉林</option> <option value="03" selected="selected">辽宁</option> </select> <select name="city"> <option >-请选择-</option> <option value="0101">哈尔滨</option> <option value="0102">漠河</option> <option value="0201">长春</option> <option value="0202">吉林</option> <option>沈阳</option> <option>锦州</option> </select> <br> 自我介绍: <textarea name="intr" cols="40" rows="4">good!</textarea> <br> <input type="submit" value="保存"/> <input type="reset" /> <input type="button" value="普通按钮"/> </form> </body> </html>
案例5-登录页面优化(注册）
步骤分析:
1.在页面中间添加一个表格
2.10行3列表格
3.在表格中添加表单表单子标签效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" width="100%"> <!--8行1列--> <!--logo 嵌套一行3列表格 --> <tr> <td> <table width="100%"> <tr> <td> <img src="../img/logo2.png" height="40px" /> </td> <td align="center"> <img src="../img/header.jpg" /> </td> <td align="right"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!-- 菜单 --> <tr> <td bgcolor="black" height="40px"> <a href="#"><font color="white" size="4">首页</font></a> <a href="#"><font color="white" size="4">首页</font></a> <a href="#"><font color="white" size="4">首页</font></a> <a href="#"><font color="white" size="4">首页</font></a> </td> </tr> <tr> <td background="../img/regist_bg.jpg"><form action="#" method="get"> <table border="1" width="40%" align="center" height="400px" bgcolor="white"> <tr> <td>用户名:</td> <td colspan="2"> <input name="username" /> </td> </tr> <tr> <td>密码</td> <td colspan="2"> <input name="password" type="password"/> </td> </tr> <tr> <td>确认密码</td> <td colspan="2"> <input name="password" type="password" /> </td> </tr> <tr> <td>邮箱</td> <td colspan="2"> <input name="email" type="text" /> </td> </tr> <tr> <td>日期</td> <td colspan="2"> <input name="date" type="date" /> </td> </tr> </table> </form> </td> </tr> <!--一张图片--> <tr> <td> <img src="../img/footer.jpg" width="100%" /> </td> </tr> <!--版权 root 两个段落 --> <tr> <td> <p align="center"> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> </p> <p align="center"> Copyright © 2005-2016 传智商城 版权所有 </p> </td> </tr> </table> </body> </html>
案例6-后台管理页面(了解)
1.需求:
开发一个后台管理页面,通过frameset实现frameset:元素可定义一个框架集。它被用来组织多个窗口
(框架）。
2.技术分析:
frameset:框架集 (了解)
frame:具体实现
3.frameset常用属性:
cols:垂直切割
例如: cols="40%,60%"
例如: cols="40%,*,10%"* 是留个浏览器自动切割，剩余的自己不想计算的话
就用*
rows:水平切割
常见的子标签:
frame
注意:
最好和body不要共存
frame:具体实现
常用属性:
src:展示的页面的url（路径）name:给当前的frame起个名字，用来给超链接的
——————————————————————————————————————————————————-
效果图：
点击左边的人员管理后：
点击左边的系统管理后：
框架的代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <frameset rows="18%,*,10%"> <frame src="./head.html" /> <frameset cols="33%,*"> <frame src="./left.html"/> <frame src="./right.html" name="right"/> </frameset> <frame /> </frameset> </html>
left:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2><a href="rygl.html" target="right">人员管理</a></h2> <h2><a href="xtgl.html" target="right"> 系统管理</a></h2> </body> </html>right
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>欢迎进入西安邮电大学学生管理系统</h1> </body> </html>rygl:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>人员管理页面加载中...</h2> </body> </html>xtgl：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>系统管理页面加载中...</h1> </body> </html>
补充:
转义字符:
三部分构成 &实体;
掌握的转义字符:
> > //great then
< <
& &
空格
meta :标签永远位于 head 元素内部
元信息
<meta charset="UTF-8">指定浏览器用什么编码打开此页面
简单回顾:
html
文件标签:
<html>
<head>
<title></title>
</head>
<body></body>
</html>
排版标签:
p
br
hr
字体
font
h1~h6
b
strong
i
图片★
<img src="图片路径" alt="替代文字" width="" height=""/>
超链接★
<a href="跳转路径" target="_blank">xxxx</a>
列表
<ol></ol>
<ul></ul>
列表项
<li></li>
表格标签★★
<table border="" width="" align="">
<tr>
<td></td>
</tr>
</table>
td中的重要属性:
colspan:列合并
rowspan:行合并
表单标签★★★
form
常用属性:
action:提交路径
method:提交方式 get和post
常见的子标签:
input
select
textarea
input标签:
10中type
text
password
radio
checkbox
file
submit
reset
button
hidden
image
若想将内容发送到服务器,必须有name属性 username=tom
select标签:
<select name="">
<option value="提交到服务器的值">展示内容</option>
</select>
textarea:文本域
格式:
<textarea cols="" rows="" name=""></textarea>
框架(了解)
frameset:定义框架集
常用属性:
cols:
rows:
常见的子标签:
frame
frame:具体展示
常用属性:
src:展示网页的url
name:给当前的frame起个名称
5672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
