**********************************************************************
HTML
**********************************************************************
技能点：（五周）
1、HTML+CSS
2、JavaScript 前端 目标：页面的实现
3、数据库 MySQL 增删改查 存储过程 函数
4、JSP+servlet+javaBean+MVC+mysql+tomcat+ajax
5、AJAX+jQuery
6、综合项目 重点
特点：有页面
综合性较强
方法：多练：熟练度、同类型的要多做
增加业务难度
提高效率：
1、html+css 页面部分：
特点：记住、通过练习加强标签的掌握 全栈式开发
HTML各种标签：
1、W3C:成员来自全球，个体 公司
做规范：标签规范 html标签 样式规范css 行为规范javascript
规范公司：浏览器厂商
规范程序员：写代码时的标准
2、页面是通过浏览器来执行的
IE10以上 谷歌浏览器
3、HTML页面结构：
Hyper Text Markeup Language 超文本标记语言
超文本：文字 图片 音频 视频 动画等
标记都写在<>中，W3C约束了标记都有具体的含义
解释型语言，浏览器可以直接解释出效果
扩展名 .html .htm
作用：通过标签，以及对标签进行修饰的CSS，来进行页面的呈现
开发工具： DW Subline HBuilder
HBuilder:
运行 ctrl + r
主要任务：HTML标签
语法：
1）标准标签：双标记标签
<标签 属性="属性值" 属性="属性值"></标签>
2）空标签:单标记标签
<标签 属性="属性值" 属性="属性值"/>
【说明】
1、标签和属性之间用空格隔开
2、属性和属性值之间使用=,且属性值使用""引起来
3、多个属性使用空格隔开
4、属性没有先后顺序
1、标题标签：用来设置一段文字的标题 6个
<h1></h1>
复制一行代码的快捷键: ctrl+shift+r
2、换行标签
<br/>
3、强调突出类标签
加粗标签
<b>较粗的文本</b>
<strong></strong>
4、斜体 强调突出类标签
<i></i>
<em></em>
5、段落标签
段落与段落之间有空行间隙
<p></p>
可以使用p对段落里的内容加修饰
6、水平线标签
从浏览器左侧贯穿到右侧的一条水平线
<hr/>
7、span
<span>文字</span>
不可见，圈定文字的范围，对范围内容的文字进行特殊修饰
8、超链接标签
连接到某个地址
<a href="地址" target="打开窗口的位置">超链接文本</a>
target:_self 默认值 在当前窗口打开新的页面
_blank 在新建立的窗口中打开页面
9、图片标签
<img src="图片的路径" width="100px" height="100px"/>
【说明】img根据图片的实际大小进行伸缩，这是默认情况
可以自行设置img标签的大小 width height 单位是px
把整个图片按照设定的width height进行完整的显示
title: 鼠标悬停在图片上时的提示信息
alt：当图片不能正常显示时，用于替代图片的文本
10、列表标签
无序列表：可以以列表形式显示，显示时没有标记处先后顺序
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>
【路径】
1、绝对路径：从磁盘根目录开始的一个具体的路径
E:教学班级1901JavaWeb阶段day1Html1901img
2、相对路径：参照物是当前文件
../img/photo4.jpg
../当前文件的上一级目录
【说明】开发建议使用相对路径：拷贝后，相对路径是不变的，绝对路径在文件拷贝后是会发生变化的
11、表格标签
<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
作用：以表格形式来显示数据 重要
局部区域的布局
12、表单标签：
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）空标签：单标记
<标签 属性="值" 属性="值"></标签>
各种：
作业：
1、熟练掌握各种标签
2、作业：