学习第一天
1、HTML默认首页可以命名为：index或者default
2、HTML（HyperText Markup Language）：超文本标记语言
注意：HTML不属于编程语言，而是制作网页的基础语言，主要用于描述超文本中内容的显示方式
3、HTML5版本声明：<!DOCTYPE html>
作用：用于告知浏览器使用哪个版本的HTML或XHTML规范
位置：<!DOCTYPE html>必须放在html文档的首行，且放置于<html>标签之前
注意：<!DOCTYPE html>不属于html标签，就是一条声明语句
4、字符集声明标签：<meta charset=”UTF-8”/>
该标签放置于<head>标签内
<head>
<meta charset=”UTF-8”/> 【正常都是用UTF-8，国际编码】
</head>
注意：简体中文编码：<meta charset=”GB2312/GB2313”/>
5. <!--网页呈现的内容-->
<h1>主页内容</h1>
</body><!--删了不影响 会自动添加 不严谨规范 但是title不可以省略 -->
6、HTML基本骨架
<html>
<head>
<meta charset=”UTF-8”/>
<title>文档标题</title>
</head>
<body>主体【页面所有可视部分】</body>
</html>
注意：html标签是head和body的父级元素，head和body标签是html标签的子元素
7、标签可以嵌套，但不允许交叉
<head><title></title></head>【标签嵌套】对
<head><title></head></title>【标签交叉】错
8、HTML标签不区分大小写：即<html>与<HTML>与<Html>并无区别
9、HTML基本语法：<标签名 属性=“属性值”>内容</标签名>
10、属性的概念：用来表示标签的特征
属性值的概念：为属性赋的值被称为属性值
11、HTML标签分类：单标签、双标签
（1）单标签：<br/>、<img/>、<hr/>、<meta/>、<input/>
（2）双标签：<div></div>、<p></p>、<a></a>等
12、样式标签：【都属于行内元素】
倾斜：<i></i>
倾斜强调：<em></em>
加粗：<b></b>
强调加粗：<strong></strong>
下划线：<u></u>
13、HTML特殊符号:
空格： 【英文半角空格】
大于号：>
小于号：<
版权符号：©
双引号："
注册符号：®
连接符号&：&
14、标题标签：<h1>~<h6>【块级元素】
H1级别最高、字体最大，依次递减，h6级别最低，字体最小
15、段落标签：<p>内容</p>【块级元素】
16、水平线标签：<hr/>
标签属性：
（1）宽度属性：width=“数值”
（2）颜色属性：color=“颜色名称/十六进制颜色/rgb()颜色”
（3）水平线粗细：size=“数值”
（4）水平对其方式：align=“left/center/right”
学习第二天
一、 表格的标签及属性
1. table属性
Width、height 宽高（单位是像素或百分比）
align 对齐
border 外边框
bgcolor 背景色
background 背景图片
Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0
Cellpadding 单元格边距（表格边框与内容的距离） 一般情况写0
1. tr属性：
Align 水平对齐
left/center/ right
valign 垂直对齐
Top（上）/middle（中）/bottom（下）
bgcolor 背景色
2. td的基本属性
Width、height 宽高（单位是像素或%）
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan 水平合并 合并多列
rowspan 垂直合并 合并多行
3. 表头th标签
<th>是特殊的单元格，文字会自动加粗、居中。它的用法是取代<td>的位置即可
表格主体tbody标签
T head 表格页眉（头部）只能出现一次
T body 表格主体可以出现多次
T foot 表格页脚（结尾）只能出现一次
以上三个标签结合使用，可将表格中的一行或几行合成一组
<table>
<thead><tr></tr>….</thead>
<tbody><tr></tr>….</tbody>
<tfoot><tr></tr>…. </tfoot>
</table>
二、 表单属性
1. 表单的概念
表单在网页中主要负责数据采集功能，表单的标记是:<form></form>
2. 表单的属性
1. action属性：设置表单的提交地址（表单提交的url）指定表单提交后由服务器上的哪个处理程序进行处理
2 method属性：设置表单的提交方法， 属性值为get、post提交方式
3 name属性：设置表单的名称
4 target属性：设置表单的打开方式， 属性值可以是_blank、_self。_self在原窗口中打开，为默认值。_blank
在新窗口打开
3. enctype:默认编码 或者指定二进制流 【附件的提交形式】
4. method的值为get:它是通过URL来传递表单数据的，表单元素的数据在地址栏可见，而且有大小限制，传数据量小一般不大于2KB
method的值为post:它是通过请求正文传递表单数据的，URL不可见表单元素数据，比较安全，而且没有大小限制，但往往服务器会控制
3. 输入标记
表单元素中输入标签是<input/>,常用属性有type（类型）、name（名称）、value（值）、checked（默认选中）
三、 HTML常用表单控件
1. 文本框
文本框：主要用于输入单行文本内容。代码如下:
代码格式如下：
姓名：<input type="text" />
效果如下：
账号：<input type="text" name="username" value="yolanda" readonly="readonly" /><br>
2. 密码框
密码框：主要用于输入一些保密信息，代码格式如下：
代码格式如下：
密码：<input type="password"/>
效果如下：
<label for="mm">密码：</label><input type="password" name="pass" maxlength="5" id="mm" size="4"/><br />
分组：<fieldset><!--分组-->
<legend>用户登录</legend>
3. 单选框
单选框主要是让网页浏览者在一组选项里选择一个。
Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称【name="gender"】。
代码格式如下：
性别：<input type="radio" name="sex" checked />男
<input type="radio" name="sex" />女
效果如下：
性别：<input type="radio" name="gender" value="0" checked="checked"/>男
<input type="radio" name="gender" value="1" id="female" /><label for="female">女</label><br />
4. 复选框
复选框主要是让网页浏览者在一组选项里同时选择多个选项。
选中checked代码格式如下：【disabled="disabled"足球】
爱好：读书<input type="checkbox" />
听歌<input type="checkbox" checked />
阅读<input type="checkbox" />
效果如下：
兴趣爱好：<input type="checkbox" name="hobby" value="football" disabled="disabled"/>足球
<input type="checkbox" name="hobby" value="basketball" />篮球球
<input type="checkbox" name="hobby" value="music" />音乐<br />
扩展：隐藏域：<input type="hidden" name="money" value="200000" /><br />
图像域：<input type="image" src="img/logo.jpg" width="100px" height="30px"/><br />
5. 文件域
文件域主要是让网页浏览者上传文件。
代码格式如下：
上传文件：<input type="file"/>
效果如下：
<input type="file" name="fileuplode" /> <br />
<!--文件上传需要设置二进制流才是图片 后面servlet会讲到-->
6. 提交按钮
提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。
代码格式如下：
<input type="submit" value="提交" />
效果如下：
7. 重置按钮
重置按钮用来重置表单中输入的信息。代码格式如下：
<input type="reset"value="重置"/>
效果如下：
input重置按钮：<input type="reset" value="重置" /><br />
input提交按钮：<input type="submit" value="提交" /><br />
input普通按钮：<input type="button" value="普通按钮" οnclick="alert('hello')"/><br />
<button type="submit" ><i>提交按钮</i></button>
<button type="reset"><strong>重置按钮</strong></button>
<button type="button">普通按钮</button>
<!--button属性：disabled name type:button reset submit-->
8. 图片域
图像域标记
代码格式如下:
<input type=”image” src=”图片的路径” />
9. 下拉列表
下拉菜单主要用于在有限的空间里设置多个选项。
下拉菜单选中状态给option添加 selected
代码格式如下：
<select>
<option></option>
…
</select>
居住城市(下拉菜单)：
<select name="city">
<option value="010">北京</option>
<option value="021" selected="selected">上海</option>
<option>深圳</option>
<option>厦门</option>
</select><br />
注：Select标记的multiple属性和size属性不要求掌握。
列表框（提供多选ctrl+多选）：
<select name="fruit" multiple="multiple" size="4">
<optgroup label="最喜欢的水果"><!--分组选项-->
<option value="apple">苹果</option>
<option value="orange" selected="selected">橙子</option>
</optgroup>
<optgroup label="不喜欢的水果">
<option value="banana">香蕉</option>
<option disabled="disabled">西瓜</option>
<option>柠檬</option>
<option>香梨</option>
</optgroup>
</select><br />
10. 文本域标记及属性
文本域主要用于输入较长的文本信息。
代码格式如下：
<textarea cols="30" rows="5">默认文字</textarea>
效果：
Cols属性：定义文本域的宽度 （列）
rows属性：定义文本域的高度 （行）
四、 HTML5新增表单控件
1. HTML5文本框及placeholder属性
当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
代码格式如下：
<input type="text" placeholder="请输入账号"/>
效果如下：
2. HTML5文本框类型tel
提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码
还包括其他字符（如+ 、-、(、)等），如86-0536-8888888
代码格式如下： pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式 -->
<input type="tel" pattern="[0-9]{11}"/>
电话号码：<input type="tel" pattern="[0-9]{11}" placeholder="输入11位号码" />
电话号码：<input type="tel"/>
效果如下:
3. HTML5 文本框类型 url 网址
url类型的input 元素提供用于输入url地址这类特殊文本的文本框．当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交．
<!--我们在浏览器的地址栏里输入的网站地址叫做URL (Uniform Resource Locator，统一资源定位符)。就像每家每户都有一个门牌地址一样，每个网页也都有一个Internet地址http://：代表超文本传输协议-->
代码如下：
<input type="url"/>
<input type="submit" value="提交">
效果如下：
4. HTML Email邮件
Email类型的input元素是一种专门用于输入e-mail地址在文本输入框，在提交表单时，会自动验证输入框的值．如果不是一个有效的e-mail地址,则该输入框不允许提交该表单．
代码如下：
<!--输入邮箱地址必须包含@符号-->
<input type="email"/>
<input type="submit" value="提交">
效果如下：
5. HTML5文本框类型number 数字 max最大值 min最小值 step步长
Number类型的input 元素提供用于输入数值的文本框．我们还可以设定对所接受数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。
代码如下：
step（步长）属性值倍数 max最大值 min最小值
<input type="number"/>
<input type="submit" value="提交">
效果如下：
6. HTML5文本框类型date
Date类型的日期检出器用于选取日、月、年，即选择一个具体的日期，如2016年３月４日，选择后会以2016-03-04的形式显示
代码如下：
<input type="date"/>
<input type="submit" value="提交">
效果如下：
7. 视频和音频
<video width="320" height="240" controls>
<source src="mydog.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
8. <audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>