html
一,html
1.什么是html:
hypertext Markup language
超文本标记语言
比较html与xml？
共同点：都是标签语言 都是通过标签完成功能
区别：
xml：可扩展标记语言，标签随意定义的，作用配置文件
html：超文本标记语言，标签是内置的，不可以随意写 按照规范写
不同的标签可以实现不同的功能和样式，写页面，信息展示
2．html的作用
写页面，信息展示
3．html的运行环境（重点）
java运行在jvm虚拟机中：跨平台--借助虚拟机
html运行在浏览器中：跨平台--借助浏览器中的内核
因为浏览器的种类很多，浏览器中的内核中html解析器不一定相同，
导致解析的效果可能不同----兼容性
4．html的书写规范
1）html有一个格式 html开始 内部包括head和body
2）标签是以尖括号包裹关键字成对出现的 有开始有结束
3）html允许有自关闭标签/空标签
4）大部分标签有属性 属性格式：属性=”属性值” 多个属性使用空格隔开
5）html不区分大小写（注意xml区分大小写）
二、html的基本标签
1、标题标签<hn>
n代表数字1-6
<h1>标题文字</h1>
<h2>标题文字</h2>
<h3>标题文字</h3>
<h4>标题文字</h4>
<h5>标题文字</h5>
<h6>标题文字</h6>
2、hr标签---水平线
<hr />
3、font 文字标签
字体标签:
<font>被修饰的字体</font>
属性:
size:设置字体的大小,默认大小是3 范围:1-7;值越大,字体越大
color:设置字体的颜色
1.可使用三色通道 红绿蓝,使用的是十六进制(0-F)
格式: #000000-#FFFFF
例如:红色 #FF0000
2.可以使用颜色的英文单词
红色:"red"
face:设置字体
微软雅黑(火狐默认)
宋体(IE默认)
幼圆
<font size="7" face="幼圆">我是最大的</font>
<font color="#FF0000">我是红色的字体</font>
4、b和i 格式化标签
b是对文字加粗
i是对文字斜体
<font>正常文字</font>
<b>被加粗的文字</b>
<i>被斜体的文字</i>
<!--红色的体,即加粗又斜体-->
<font color="red"><b><i>红色的体,即加粗又斜体</i></b></font>
5、p段落标签
特点：段与段之间有空行 独占一行
6、br换行标签
7、图片标签img（重点）
src属性：图片地址
8、清单标签
/列表标签
ul：无序列表
li：列表项
ol：有序列表
li：列表项
<!--
删除一行的快捷键:ctrl+d
列表标签
1.有序列表,使用文字的顺序
<ol></ol>
属性:
type:设置列表中的显示文字,属性值可以是1,I,A,a...;不写默认使用阿拉伯数字
start:设置开始的文字
2.无序列表,使用各种形状
<ul></ul>
属性:
type:设置列表显示的形状
取值：disc 实心圆(默认)、square 方块 、circle 空心圆
3.ol和ul子标签
<li></li>:列表中的每一个列表项
-->
<ol type="1" start="10">
<li>传智播客</li>
<li>百度</li>
<li>新浪</li>
</ol>
<ul type="circle">
<li>传智播客</li>
<li>百度</li>
<li>新浪</li>
</ul>
9、链接标签（重点）
a标签 主要作用：页面跳转
属性href：跳转的地址
超链接标签:可以实现由一个页面跳转到另外一个页面
<a>连接的文字/图片<img></a>
属性:
href:连接跳转的路径
可是是一个页面:xxx.html
可以是一个网址:必须写全 http://www.baidu.com
target:跳转的方式
_self:在当前的页面,打开跳转的新页面(默认)
_blank:开启一个新的页面,,打开跳转的页面
<!--
无序列表
-->
<ul>
<li><a href="07_公司简介案例.html">连接到公司简介案例</a></li>
<li><a href="http://www.baidu.com" target="_self">链接到百度,在当前页面打开</a></li>
<li><a href="http://www.sina.com.cn" target="_blank">连接到新浪,在新的页面打开</a></li>
<!--图片增加一个超链接-->
<li><a href="http://www.itcast.cn" target="_blank"><img src="img/logo.gif"/></a></li>
</ul>
10、表格标签（重点）
表格标签:用来对页面进行排版布局
<table></table>:表格
table的子标签:行标签
<tr></tr>
tr的子标签:列标签
<th></th>:表头标签,里边的文字会自动加粗,居中
<td></td>:列标签,单元格
表格的属性:
border 表格边框的宽度,大小像素。
width 表格的宽度。
bgcolor 表格的背景颜色。
cellpadding单元格内文字与边框的距离。
cellspacing单元格之间的距离。
td/th的属性:
跨列:把多列合成一列
colspan="合成列的个数"
跨行:把多行合成一行
rowspan="合成行的个数"
对齐方式:
align 单元格内容的水平对齐方式, 取值：left 左 、right 右、center 居中。
表格中的内容不换行
nowrap规定表格单元格中的内容不换行
网站首页案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站首页案例</title> </head> <body> <!-- 注意:屏幕的分辨率不同,把表格宽度固定为1200px 做页面的头部 使用一个2*3列表格 第一行:2个logo图片,登录 注册 购物车 第二行:3列合成一列,跨列 导航条 --> <table width="1200" align="center"> <tr> <!-- 第一行:2个logo图片,登录 注册 购物车 --> <td><img src="img/logo2.png"/></td> <td><img src="img/header.jpg"/></td> <td> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> <tr height="50"> <!-- 第二行:3列合成一列,跨列 导航条 背景色:黑色 --> <td colspan="3" bgcolor="black"> <a href="#">首页</a> <a href="#">手机数码</a> <a href="#">办公用品</a> <a href="#">服装鞋帽</a> <a href="#">家具家电</a> </td> </tr> </table> <!-- 轮播图的图片 使用一个一行一列的表格 --> <table width="1200" align="center"> <tr> <td><img src="img/1.jpg" width="1200"/></td> </tr> </table> <!-- 热门商品 使用标题标签h1 独自占领一行 图片 --> <h1 align="center">热门商品<img src="img/title2.jpg"/></h1> <!-- 热门商品列表 使用一个2*7的表格 --> <table width="1200" align="center"> <tr> <!-- 图片0元大换购,占了2行,跨2行 --> <td rowspan="2"><img src="img/big01.jpg"/></td> <!-- 投影神卷,占了3列,跨3列 --> <td colspan="3"><img src="img/middle01.jpg"/></td> <!-- 热门商品列表 图片 文字 价格:红色 --> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> </tr> <tr> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> </tr> </table> <!-- 广告图片 使用一个1*1的表格 --> <table width="1200" align="center"> <tr> <td><img src="img/ad.jpg"/></td> </tr> </table> <!-- 热门商品 使用标题标签h1 独自占领一行 图片 --> <h1 align="center">热门商品<img src="img/title2.jpg"/></h1> <!-- 热门商品列表 使用一个2*7的表格 --> <table width="1200" align="center"> <tr> <!-- 图片0元大换购,占了2行,跨2行 --> <td rowspan="2"><img src="img/big01.jpg"/></td> <!-- 投影神卷,占了3列,跨3列 --> <td colspan="3"><img src="img/middle01.jpg"/></td> <!-- 热门商品列表 图片 文字 价格:红色 --> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> </tr> <tr> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> <td align="center"> <img src="img/small03.jpg"/><br /> 冬瓜<br /> <font color="red">$299.99</font> </td> </tr> </table> <!-- 页面的底部 广告图片 联系我们的超链接 使用2*1的表格 --> <table width="1200" align="center"> <tr> <!--广告图片--> <td><img src="img/footer.jpg" width="1200"/></td> </tr> <tr> <td align="center"> <!--联系我们的超链接--> <a href="#">联系我们</a> <a href="#">联系我们</a> <a href="#">联系我们</a> <a href="#">联系我们</a> <a href="#">联系我们</a> </td> </tr> </table> </body> </html>
11.表单:我们可以让用户在表单上输入数据(提交表单后,数据都会以键值对的方式提交给服务器,如username="sa",password="1234565")
获取用户在表单数据的数据,把数据提交到服务器的某个java程序上,使用java程序在把数据存储到数据\
表单标签:
form:表单
创建一个表单,单独写一个form没有意思
要创建表单,必须先创建一个form
form表单的属性
action:表单提交的路径,(#)服务器的某一个java程序
method:表单的提交方式 get post
input:用户输入数据
属性:type 设置input标签的样式
属性值:
text:普通文本
password:密码输入框,里边的密码以黑色的小圆点显示
radio:单选框
checkbox:多选框
file:上传文件
image:上传图片使用
hidden:隐藏域,存储数据使用,不会在浏览器页面显示
botton:普通按钮,配合js使用
reset:重置按钮,把表单的恢复到默认状态(清空表单)
submit:提交按钮,把表单的数据,提交到服务器
select:下拉选
子标签 option 下拉选的选项
textarea:多行文本框(了解)
12.所有的标签的标签的属性
name：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据。
value属性：设置input标签的默认值。Botton,submit和reset为按钮显示数据
checked属性：单选框或复选框被选中。
readonly：是否只读
disabled：是否可用
扩展: placeholder:是HTML5新特性,给input设置默认值;一旦使用键盘输入数据,那么默认值就会消失
12.1.下拉选的属性值:
multiple属性：不写默认单选，取值为“multiple”表示多选,配合ctrl可以选多个值。
size属性：多选时，可见选项的数目。
<option> 子标签：下拉列表中的一个选项（一个条目）。
selected ：勾选当前列表项
value ：发送给服务器的选项值。
12.2.form表单的属性method可以设置表单的提交方式
1.get
会把表单中提交的数据追加到浏览器的地址栏中
浏览器的地址后边会有一个?,?后边就是提交的数据
数据以键值对的方式提交k=v,多个数据使用&连接
k:表单的name属性值,每个表单都必须有,服务器就会通过name属性获取到value
v:表单的value属性值,出了text和password,其它的标签必须设置value值
暴漏敏感信息,不安全
提交的数据大小有限制,256字节,实际测试2048字节
2.post
不会把提交的数据显示在地址栏
可以提交图片和文件
注册表单案例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单的提交方式</title> </head> <body> <form action="#" method="post"> 用户名:<input type="text" name="username" placeholder="请输入用户名"/><br /> 密码:<input type="password" name="password" placeholder="请输入密码"/><br /> 请选择您的爱好:<br /> 音乐:<input type="checkbox" name="cb" value="音乐"/> 游戏:<input type="checkbox" name="cb" value="游戏"/> 编程:<input type="checkbox" name="cb" value="编程"/> <br /> <select name="select"> <option>专科</option> <option>本科</option> <option value="ss">硕士</option> </select> <br /> <input type="submit"/> </form> </body> </html>
13.流行的页面布局方式:div(span)+css
div:行级元素,块级元素
会独自霸占一行
想要渲染div,必须使用css层叠样式表
<div>div中的内容</div>div之外的内容<br />
<span>行内元素</span><span>行内元素</span>
