**********************************************************************
HTML
**********************************************************************
技能点：（五周）
一、HTML+CSS
二、JavaScript 前端 目标：页面的实现
三、数据库 MySQL 增删改查 存储过程 函数
四、JSP+servlet+javaBean+MVC+mysql+tomcat+ajax
五、AJAX+jQuery
六、综合项目 重点javascript
特色：有页面
综合性较强
方法：多练：熟练度、同类型的要多作
增长业务难度
提升效率：css
一、html+css 页面部分：
特色：记住、经过练习增强标签的掌握 全栈式开发html
HTML各类标签：
一、W3C:成员来自全球，个体 公司
作规范：标签规范 html标签 样式规范css 行为规范javascript
规范公司：浏览器厂商
规范程序员：写代码时的标准前端
二、页面是经过浏览器来执行的
IE10以上 谷歌浏览器
三、HTML页面结构：
Hyper Text Markeup Language 超文本标记语言
超文本：文字 图片 音频 视频 动画等
标记都写在<>中，W3C约束了标记都有具体的含义
解释型语言，浏览器能够直接解释出效果
扩展名 .html .htm
做用：经过标签，以及对标签进行修饰的CSS，来进行页面的呈现java
开发工具： DW Subline HBuildermysql
HBuilder:
运行 ctrl + r 程序员
主要任务：HTML标签
语法：
1）标准标签：双标记标签
<标签 属性="属性值" 属性="属性值"></标签>
2）空标签:单标记标签
<标签 属性="属性值" 属性="属性值"/>ajax
【说明】
一、标签和属性之间用空格隔开
二、属性和属性值之间使用=,且属性值使用""引发来
三、多个属性使用空格隔开
四、属性没有前后顺序sql
一、标题标签：用来设置一段文字的标题 6个
<h1></h1>
复制一行代码的快捷键: ctrl+shift+r
二、换行标签
<br/>
三、强调突出类标签
加粗标签
<b>较粗的文本</b>
<strong></strong>
四、斜体 强调突出类标签
<i></i>
<em></em>
五、段落标签
段落与段落之间有空行间隙
<p></p>
能够使用p对段落里的内容加修饰
六、水平线标签
从浏览器左侧贯穿到右侧的一条水平线
<hr/>
七、span
<span>文字</span>
不可见，圈定文字的范围，对范围内容的文字进行特殊修饰
八、超连接标签
链接到某个地址
<a href="地址" target="打开窗口的位置">超连接文本</a>
target:_self 默认值 在当前窗口打开新的页面
_blank 在新创建的窗口中打开页面数据库
九、图片标签
<img src="图片的路径" width="100px" height="100px"/>
【说明】img根据图片的实际大小进行伸缩，这是默认状况
能够自行设置img标签的大小 width height 单位是px
把整个图片按照设定的width height进行完整的显示
title: 鼠标悬停在图片上时的提示信息
alt：当图片不能正常显示时，用于替代图片的文本
十、列表标签
无序列表：能够以列表形式显示，显示时没有标记处前后顺序
ul-li
unorder list ul
有序列表： 默认是数字顺序
ol-li
定义列表：
dl-dt-dd
<dl> define list 定义列表
<dt> define title 定义标题 能够是文字，能够是图片
<img src=""/>
</dt>
<dd> define description 定义描述
文本
</dd>
<dd>
</dd>
</dl>
【路径】
一、绝对路径：从磁盘根目录开始的一个具体的路径
E:\教学班级\1901\JavaWeb阶段\day1\Html1901\img
二、相对路径：参照物是当前文件
../img/photo4.jpg
../当前文件的上一级目录
【说明】开发建议使用相对路径：拷贝后，相对路径是不变的，绝对路径在文件拷贝后是会发生变化的
十一、表格标签
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
</tr>
</table>
tr 行标签
td 列标签 嵌套在tr中
table属性
border:边框 1px
style="border-collapse: collapse;"
样式="边框-合并:合并;"
width="" height=""
表格的高级应用
<td colspan="3">学生成绩表</td>
合并列="3" 【注意】删除两个td对
10年前：table用来布局
流行的布局：DIV+CSS
做用：以表格形式来显示数据 重要
局部区域的布局
十二、表单标签：
form 圈定一个区域，把表单中的内容，提交到服务器
<form method="get/post" action="提交的地址">
</form>
method:提交方式
get 地址提交
post 表单提交
put
delete
action:提交地址,提交到服务器的哪一个文件中
各个表单标签有通用格式
<input type="标签的类型" id="惟一标识" name="标签的名字" value="标签里的值"/>
text:文本框 属性 placeholder="请输入用户名" 水印 做用：提示
password:密码框
button:普通按钮 调用JavaScript函数
reset:重置按钮 把表单标签的值恢复到初始值
submit:提交按钮 把表单提交到action所对应的页面中（页面会跳转）
checkbox:复选框 value 未来数据库存储时使用
radio :单选框 多个radio具备相同的name时，在选择时互斥
checked="checked" 选中当前的单选按钮或复选框
file:文件选择框 用于选择附件， Java实现文件上传功能时使用
下拉列表标签
<select>
<option></option>
</select>
文本域：textarea 用于输入多行文本
rows 设置文本的行数 至关于设置height
cols 设置列数 至关于设置width
div:盒子
做用：容器，使用DIV把页面划分红若干区域，在其里面放置各类标签
标签的分类：
1）块级标签：独占一行，能设置width height
h1-h6 p table-tr 列表 ul-li ol-li dl-dt-dd
2）内联标签(行内标签):在同一行显示，不能设置width height
a
3）内联块(行内块):在同一行内显示，能设置width height
img 表单标签
标签之间能够相互转换
html :概念 做用
标签语法：
1）标准标签：双标记标签
2）空标签：单标记
<标签 属性="值" 属性="值"></标签>
各类：
做业：
一、熟练掌握各类标签
二、做业：