自学JavaWeb第一天_HTML5
第一讲HTML
一、 JavaWeb课程体系
二、 HTML语言介绍
（一）为什么学习HTML
使用HTML语言实现的, 右键==>查看页面源代码/F12
网站主要包含:(俗称网页三剑客)
- HTML语言(用于展示静态资源)
- Css(美化页面)
- JavaScript(实现动态效果)
网页根据内容区分:
- 静态网页: 编写好得网站内容和显示效果不再改变
- 动态网页: 根据不同的情况实现不同效果
（二）什么是HTML
HTML称之为超文本标记语言;
- 超文本: 除了文本以外, 还可以显示图片, 连接, 音频等;
- 标记: 就是使用标签的形式将我们要展示的内容包含起来;<font color="red">我是红色字体</font>
今天的重点: 学习HTML给我们提供好的标签(预定义好的)和属性的使用;
（三）HTML入门案例
Word ==> .doc/.docx
图片 == > .jpg/.png
Java ==> .Java
HTML ==> .html/.htm
- 创建普通文件, 将其后缀名改为.html/.htm
- 使用编辑工具编辑文件
- 使用浏览器打开文件(运行)
- 页面展示效果
常见的浏览器:
火狐 谷歌(常见) IE
（四）HTML语言特点
1、 HTML文件扩展名为 *.html 或者 *.htm；
2、 HTML结构分为两大部分：头部<head>和主体部分<body>；
3、 HTML标签都是预先定义好的，我们只需要了解每一个标签的功能即可；
4、 标签名称不区分大小写，语法不严谨，一般使用小写；
5、 大部分标签都是成对出现,分开始标签和结束标签 <body> </body>，也有个别单标记标签<br>；
6、 HTML文档是一个树状结构，有根标签但是不唯一；
7、 HTML标签要正确嵌套, 切记不要交叉嵌套
（五）HTML编辑工具
网页开发工具有很多，可以使用记事本、Notepad++、EditPlus 等简易编辑工具，也可以使用现阶段比较流行的HBuilder、Webstorm(收费)、Sublime等开发工具。为了统一环境，提高开发效率，要求学员统一使用HBuilder，推荐使用绿色解压版本，不需要安装，解压后找到HBuilder图标双击即可使用。
- 使用HBuilder创建第一个网页
- Html模板
- 运行
三、 HTML常见标签
常见标签:
- 标题标签 <h1> ~ <h6>
- 分割线标签 <hr>
- 字体格式化标签 <font>
- 段落标签 <p>
- 换行标签 <br>
- 实体字符 空格: 小于号: < 大于号: > 双引号: " 版权符号:©
- 注释标签 <!-- 注释内容 -->
（一）标题与分割线标签
1、标题标签：<h1> ~ <h6>
HTML提供<h*>系列标签，这里的*代表1-6，用于修饰标题.
2、分割线标签：
分割线标签:
标签在HTML页面中创建一条水平的分割线，用于定义内容的主题变化。
|
属性名 |
属性说明 |
|
width |
定义水平线的长短 单位是像素/百分比 |
|
size |
定义水平线的粗细 单位是像素/百分比 |
|
color |
定义水平线的颜色 颜色可以是英文单词：例如red,blue,yellow,pink 颜色也可以是编码：#FF0000 |
（二）字体格式化标签
1、字体标签：<font>
字体标签:
用于设置字体尺寸、字体颜色等。
|
属性名 |
属性说明 |
|
size |
定义字体大小, 默认大小3号。 取值范围:1~7 1号最小，7号最大 |
|
color |
定义字体的颜色 颜色可以是英文单词：例如red,blue,yellow 颜色也可以是编码：#FF0000 |
2、加粗标签：
加粗标签可以使字体加粗。
3、斜体标签：
斜体标签可以使字体倾斜。
（三）段落与换行标签
1、段落标签：
段落标签，使得文本独立成段。
|
属性名 |
属性说明 |
|
align |
段落对齐方式 left左对齐（默认） center 居中 right 右对齐 |
2、换行标签：
换行标签，是一个单标记标签，每次需要换行就添加一个<br/>标签，换几行加几个。
（四）实体字符与注释
1、实体字符
有些字符，像(<)这类的，对HTML来说是有特殊意义的，所以这些字符是不允许在文本中使用的。要在HTML中显示(<)这个字符，我们就必须使用实体字符。
字符实体语法结构：
&实体字符;
空格: 小于号: < 大于号: > 双引号: " 版权符号:©
2、HTML注释
格式：<!-- 注释内容 -->
特点:
注释不参与代码执行, 在源码中可见;
四、 HTML图片标签
在我们日常上网中大家会发现网站上会有很多的图片信息展示，这样会使整个网站所表达的意思更加明确，也让整个网站看着非常舒服，接下来带领大家学习如何在HTML中添加图片。
img标签的语法格式：
<img src="指定图片的位置(路径)" width="宽度px" height="高度px" title="悬浮文字" alt="替代文字">
属性解析：
|
属性名 |
属性说明 |
|
src |
设置图片的引用路径，可以是相对路径或绝对路径，推荐使用相对路径径 |
|
width |
设置图片的宽度，以像素为单位。 |
|
height |
设置图片的高度，以像素为单位 |
|
title |
悬浮文字，当鼠标悬浮到图片上时的提示文字 |
|
alt |
替代文本，由于某种原因图片无法显示时会使用替代文本替代图片内容。 |
五、 HTML列表标签
（一）<ul>和<ol>标签
l <ul> 定义的是无序列表
l <ol> 定义的是有序列表
l <li> 是ul和 ol的子标签, 代表列表项
注意：ul和ol标签都有type属性，可以用来设置列表项前面的项目符号类型。
|
属性名 |
属性说明 |
|
type |
定义列表的符号类型。 有序列表：取值：A、a 、I 、i 、1 等(type="1") 无序列表：取值：disc 实心圆、square 方块 、circle 空心圆(type="disc") |
（二）超链接标签<a>
超链接标签是在html页面中提供一种页面间跳转的方式。
超链接实现点击的效果:(前提)
- 要有内容体
- 必须要有href属性
语法结构：
<a href=””>热点文字或者图片</a>
属性解析：
|
属性名 |
属性说明 |
|
href |
访问目标的url地址（必填） |
|
target |
定义打开页面的方式 ,常用的两种方式取值为： 取值： _blank 在新的选项卡中打开 _self 在本页面打开（默认） |
六、 HTML表格标签
（一）案例介绍
四行两列的表格
作者和著作居中加粗
第一列的第三行和第四行合并
（二）案例相关标签
1、表格标签<table>
HTML中一个表格由<table>标签及一个或多个<tr>加若干<td>标签组成。
表格的作用:
- 存储数据
- 可以做页面布局(一般使用div布局)
常用标签:
|
标签名 |
作用 |
|
table |
父标签，相当于表格的容器 |
|
tr |
用来定义行，写在<table>标签内 |
|
td |
用来定义列（单元格），写在<tr>标签内 |
|
th |
表格的列标题: 加粗，居中 |
|
caption |
表格的标题 |
属性解析：
|
属性名 |
属性说明 |
|
border |
表格边框的宽度(粗细) |
|
width |
表格的宽度 |
|
height |
表格的高度 |
|
align |
可以用在<table>标签中，表示表格相对于整个浏览器窗口的居中对齐；也可用在<tr>或<td>标签中，设置单元格内容的对齐方式 取值：left 居左、right 居右、center 居中 |
|
bgcolor |
表格的背景颜色 |
|
rowspan |
合并行 |
|
colspan |
合并列 |
|
cellspacing |
单元格之间的空白 |
|
cellpadding |
表格边缘与内容之间的空白 |
|
thead |
标签定义表格的表头 |
|
tbody |
标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容 |
|
tfoot |
标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。 |
案例：定义3*2表格，合并行，合并列
|
<body> <!--表格标签 需求: 创建一个三行两列的表格 --> <table border="1px" width="300px" height="10px" align="center" cellspacing="0px" cellpadding="0px"> <caption>0810学生表</caption> <!--表格表头 th--> <thead bgcolor="coral"> <tr> <th>表头1</th> <th>表头2</th> </tr> </thead> <!--行和列--> <tbody bgcolor="chartreuse"> <tr align="center"> <td colspan="2">1-1</td> <!--<td>1-2</td>--> </tr> <tr align="center"> <td>2-1</td> <td rowspan="2">2-2</td> </tr> <tr> <td>3-1</td> <!--<td align="center">3-2</td>--> </tr> </tbody> <tfoot bgcolor="blue"> <tr> <td>总计: </td> <td>45</td> </tr> </tfoot> </table> </body> |
2、表头标签
用来定义<table>表格的表头信息，是<tr>的子标签，写在<th>标签中的内容会自动加粗。
（三）案例完整代码
七、 HTML表单标签
（一）案例介绍
HTML表单的作用:(重点)
用来收集用户在客户端输入的内容, 当用户点击提交时, 要将数据打包, 发送到指定的位置(指定的页面/后台服务器地址), 从而实现后台与前台之间的交互;
表单的组成:
- Form元素(form标签)
- 表单控件(input输入框, select下拉框)
- 表单按钮(普通按钮, 提交按钮)
（二）案例相关标签
1、表单标签：<form>
<form>是在页面中创建出一个表单，表单标签在HTML中是没有效果展示的，能展示的是表单中的各种标签。如果数据需要提交给服务器，负责收集数据的标签必须放在表单之中。
属性解析:
|
属性名 |
属性说明 |
|
action |
数据提交的路径，指向数据提交的服务器地址 |
|
method |
数据提交的方式，常用取值：get、post |
2、输入域标签：<input>
输入域标签用于获取用户输入信息，通过指定type值达到搜集不同信息的目的。是我们在html中最常用的标签。
input属性：
|
属性名 |
属性说明 |
|
id |
为当前组件提供一个唯一的标识 |
|
type |
定义表单输入项input的组件类型
详见下一个表格type属性值说明 |
|
name |
为当前组件提供一个名称 服务器会根据当前的名称获取当前组件提供的数据 |
|
value |
为当前组件设置值。 value属性的设置策略： ①文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入 ②单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on |
|
checked |
设置单选框/复选框的默认选中状态（全选、反选） |
|
readonly |
设置该标签的参数值只读，用户无法手动更改。 但是数据是可以正常提交 |
|
disabled |
设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交 |
|
size |
组件的长度 |
|
maxlength |
设置允许输入的最大的长度 |
input-type属性值说明:
|
属性值 |
说明 |
|
text |
文本框(默认)，单行的输入字段，用户可在其中输入纯文本。 |
|
password |
密码框。 内容为非明文 |
|
radio |
单选框。 必须将其设置为同一组(name的名字必须相同) |
|
checkbox |
复选框。 必须将其设置为同一组(name的名字必须相同) |
|
file |
附件框。用于文件上传。 |
|
hidden |
隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。 |
|
submit |
提交按钮。用于控制表单提交数据。 name属性一般不用设置，设置value属性 将按钮起一个名字 |
|
reset |
重置按钮。 用于将所有的 表单输入项恢复到 默认状态 |
|
image |
图形提交按钮 |
|
button |
普通按钮。 需要和JavaScript事件一起用 |
代码实现:
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--表单标签: form 注意: 要与from分清楚, 误区 action="提交的位置(指定的页面/后台服务器地址)" method:提交方式 取值: get post --> <form action="index.html" method="get"> <!--输入域标签--> <p> <!-- readonly: 只读,数据可以正常提交 disabled: 禁用, 数据不可以提交 --> 用户名: <input type="text" name="username" id="username" value="liuyan" readonly="readonly"/> </p> <p> 密码: <input type="password" name="password" disabled="disabled" value="123"/> </p> <p> 手机号: <input type="text" name="phone" size="50" maxlength="11"/> </p> <p> 性别: 男: <input type="radio" name="sex" value="man" checked="checked" /> 女: <input type="radio" name="sex" value="woman"/> </p> <p> 爱好: 抽烟: <input type="checkbox" name="hobby" value="cy"/> 喝酒: <input type="checkbox" name="hobby" value="hj" checked="checked"/> 烫头: <input type="checkbox" name="hobby" value="tt" checked="checked"/> </p> <p> 上传头像: <input type="file" name="picture" /> </p> <p> 邮箱: <input type="email" name="email"/> </p> <p> 出生日期: <input type="date" name="birthday" /> </p> <p> <input type="hidden" name="method" /> </p> <p> <input type="submit" value="注册" /> <input type="reset" value="重置按钮"/> <input type="button" value="普通按钮"/><br /> <input type="image" src="img/liuyan.jpg" width="50px" height="70px"/> </p> </form> </body> </html> |
3、下拉列表标签：<select>
提供一个下拉列表框，让用户进行选择。
属性解析:
|
属性值 |
说明 |
|
name |
下拉列表框的名字。 |
|
<option>子标签 |
属性selected选中项、value为当前下拉项的值 |
|
multiple |
multiple 属性规定输入字段可选择多个值 |
4、文本域标签：<textarea>
HTML提供了多行输入的文本控件
属性解析:
|
属性值 |
说明 |
|
cols |
设置文本域的列数 |
|
rows |
设置文本域的行数 |
Get与post的区别:
- 显示位置不同:
Get提交数据展示地址栏:
Post提交数据展示请求体:
- 安全问题:
Get提交不安全, 数据暴露在地址栏; post提交相对get比较安全
- 数据量大小问题:
Get提交数据量大小有限制, post无限制;
（三）案例完整代码
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="post"> <p> 用户名: <input type="text" name="uname" id="uname" /> </p> <p> 密码: <input type="password" name="pwd" id="pwd" /> </p> <p> 手机号: <input type="text" name="phone" /> </p> <p> 性别: 男: <input type="radio" name="sex" value="man" /> 女: <input type="radio" name="sex" value="woman" /> </p> <p> 爱好: 爬山: <input type="checkbox" name="hobby" value="ps" /> 看书: <input type="checkbox" name="hobby" value="ks" /> 音乐: <input type="checkbox" name="hobby" value="yy" /> </p> <p> 个人简介<br> <textarea name="jj" cols="30" rows="5"></textarea> </p> <p> <input type="submit" value="提交信息" /> </p> </form> </body> </html> |
（四）HTML布局
上面表单中内容虽然我们能正常显示出，但是展示的效果参差不齐。为了让表单中组件显示更加整齐，我们可以采用表格进行布局。
1、案例效果
2、案例完整代码
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--表格--> <form action="#" method="get"> <table border="0px" width="700"> <tr> <td colspan="2"><b>表单布局-用户注册</b></td> <!--<td></td>--> </tr> <tr> <td width="15%" align="right">用户名: </td> <td><input type="text" name="uname" id="uname" /></td> </tr> <tr> <td width="15%" align="right">密码: </td> <td><input type="password" name="pwd" id="pwd" /></td> </tr> <tr> <td width="15%" align="right">手机号: </td> <td><input type="text" name="phone" /></td> </tr> <tr> <td width="15%" align="right">性别:</td> <td> 男: <input type="radio" name="sex" value="man" /> 女: <input type="radio" name="sex" value="woman" /> </td> </tr> <tr> <td width="15%" align="right">爱好:</td> <td> 爬山: <input type="checkbox" name="hobby" value="ps" /> 看书: <input type="checkbox" name="hobby" value="ks" /> 音乐: <input type="checkbox" name="hobby" value="yy" /> </td> </tr> <tr> <td width="15%" align="right">个人简介</td> <td><textarea name="jj" cols="30" rows="5"></textarea></td> </tr> <tr> <td colspan="2"><input type="submit" value="提交信息" /></td> <!--<td></td>--> </tr> </table> </form> </body> </html> |
八、 HTML框架标签
（一）案例介绍
在我们查看一些后台管理系统的时候经常见到如下布局，此布局采用了框架布局。
通过红色框体我们发现，整个页面被分成了三部分。
（二）案例相关标签
1、框架标签
写法格式: <frameset>.
框架标签标签是在本页面内用多窗口将多个页面整合在一起的一个框架集。每一个页面都是独立的，需要用子标签<frame>来确定页面的位置。<frameset>通过行和列控制整体布局，用cols确定列数，用rows确定行数。
特别注意:
Frameset框架标签和body标签不能同时共存;
属性解析:
|
属性值 |
说明 |
|
cols |
对页面进行列切割 一般我们用百分比确定比例，最后一个值用*匹配剩余量 单位：像素/百分比
|
|
rows |
对页面进行行切割 一般我们用百分比确定比例，最后一个值用*匹配剩余量 单位：像素/百分比
嵌套使用:
|
2、框架子标签<frame>
<frame>标签是<frameset>标签的子标签, 用于页面引入.
属性如下：
|
属性名 |
属性说明 |
|
src |
指定页面的路径 |
|
noresize |
框架分割后禁止调整 |
|
name |
该框架的名称 用于和a标签target连用 |
案例:
