一 HTML介绍
HTML是 HyperText Mark-up Language 的首字母简写，表示超文本标记语言，是一种用来开发网页的语言。超文本指的是超链接，标记指的是标签，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件可以用文本的方式编辑，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
1 基本结构
<!-- 文档声明 -->
<!DOCTYPE html>
<html>
<!-- head标签中主要提供Html的辅助信息、属性信息。如定义网页的编码格式，外链css样式文件和javascript文件等，
设置的内容不会显示在网页上 -->
<head>
<!-- meta标签用于提供有关 HTML 文档的元数据 -->
<!-- 为搜索引擎定义关键词: -->
<meta name="keywords" content="it培训, java">
<!-- 为网页定义描述内容: 就是搜索网页时，提示的内容 -->
<meta name="description" content="IT技能培训">
<!-- 设置编码方式 -->
<meta charset="UTF-8">
<!-- 网页标题 -->
<title></title>
</head>
<body>
<!-- 要显示的内容、数据 -->
</body>
</html>2 html的文档类型
指示页面使用哪个HTML版本进行编写
1）html4.01
其中dtd规定了标记语言的规则
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
</body>
</html>2）html5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
</body>
</html>3）html文档基本规范
所有的标签必须小写
所有的属性必须用引号括起来
所有标签必须闭合
标签必须正确的嵌套
二 HTML基本语法
1 标签
基本语法：<开始标签>标签体</结束标签>
带标签体的标签：<body></body>
不带标签体的标签：<br />
标签可以嵌套：
<div>
<h3>...</h3>
<div>
<p>...</p>
</div>
</div>HTML 标签（元素）可以分为两个类别，分别是块级元素和内联元素（也叫行内元素）。
1.1 块级元素
块级元素最主要的特点是它们自己独占一行，块级元素中最具代表性的就是<div>，此外还有<p>、<h1>~<h6>等
块级元素的主要特征：
块级元素总是在独占一行
块级元素的宽度、高度以及外边距和内边距等都可以设置，默认宽度为浏览器窗口的宽度
块级元素中可以包含其它的块级元素和内联元素
1.2 内联元素
内联元素也可以称为行内元素，一行可以多个行内元素，行内元素中常用的是<a>、<img>、<span>等
内联元素的主要特征：
多个内联元素会在同一行上显示；
内联元素的宽、高以及外边距和内边距都不可以改变，宽度就是其中内容的宽度；
内联元素中只能容纳文本或者其他内联元素。
注意：通过 CSS的display 属性将块级元素修改为内联元素，或者将内联元素修改为块级元素
2 属性
在开始标签中，可以写属性
格式：名称=值，值一般使用双引号或单引号括起来
标签可以有多个属性，多个属性之间使用空格分隔
<div id="div1" class="cdiv">
</div>标签一般有一些通用属性，比如id、class、style等
id属性用来设置标签的唯一名称
class属性和id类型，多个标签可以有相同的class属性值
3 注释
<!-- 这是注释 -->
<div id="div1" class="cdiv">
</div>三 常用标签
1 标题 <h1>~<h6>
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题，6种级别的标题表示文档的6级目录层级关系。
<h1 align="center">JavaEE头秃教程</h1>
<h2>面向对象之知识点太碎</h1>
<h3>多类设计之跳来跳去</h3>
<h4>常用类之方法太多</h4>
<h5>遗忘遗忘都遗忘</h5>
<h6>臣妾记不住</h6>2 水平线 <hr />
<hr/>3 段落 <p>
标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开
<p>凡是用钱能解决的事...</p>
<p>我都解决不了</p>4 换行 <br />
针对成段的文字，如果直接在代码中回车换行，在渲染网页时无法识别这种换行，如果真想换行，需要使用<br />来强制换行
5 文本格式化
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<pre> 原样标签，或保留空格和换行符
<p>
<b>每天醒来的四个想法</b><br />
<i>再睡20分钟吧</i><br />
<em>要不再延迟睡30分钟吧</em><br />
<strong>要不今天请假吧</strong>
<del>妈的!干脆辞了吧!</del>
</p>
<!-- 下标 -->
H<sub>2</sub>O
<!-- 上标 -->
100<sup>o</sup>C
<!-- 原样输出标签 -->
<pre>
翻身不忘共产党
致富全靠秦始皇
感谢老杨
</pre>6 列表 <ol><ul>等
1）有序列表，需要<ol>和<li>配合使用,列表的内容会显示编号
<p>37度手怎么能打出这么冰冷的文字</p>
<ol type="i">
<li>你好，申请退货</li>
<li>亲，商品哪里不满意吗</li>
<li>她不喜欢</li>
<li>她不喜欢的是你</li>
</ol>2）无序列表,<ul> 和<li>配合使用
<ul type="square">
<li>何以解忧</li>
<li>唯有暴富</li>
<li>重要的事情说三遍</li>
</ul>在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果可能不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
3）项目列表 ，<dl>/<dt> /<dd>
<dl>
<dt>中午，睡过头了</dt>
<dd>1点，干点什么好呢</dd>
<dd>2点，干点什么好呢</dd>
<dd>吃完饭，打会儿游戏吧</dd>
<dt>晚上</dt>
<dd>11点了，我cao，今天啥都没干</dd>
<dd>浪费了一天</dd>
<dd>凌晨1点，好困呀，洗洗睡喽</dd>
</dl>7 字体相关 <font>
<font size="6" color="darkorange">你最大的缺点是什么</font><br/>
<font color="#0066CC"> 缺点钱</font>
<!-- 如果表示颜色得十六进制值两两相同，可以简写 -->
<font color="#06c">可以熬夜吗</font>
<p><font size="7">熬夜可以，熬夜加班不可以</font><p>8 超链接 <a>
<a>标签可以在网页上定义一个链接地址，通过href属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。
target属性：
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档
<!--href 指定链接到哪个资源-->
<!--如果是一个外部链接，需要指定使用的协议，如http-->
<a href="http://www.baidu.com">百度</a>
<a href="index.html">index</a>
<!-- target 指定打开新资源的目标
_blank 在新窗口显示
_self 在当前的窗口显示
-->
<a href="test/index.html" target="_blank">test</a>锚点：
页面内元素可以定义“id”属性，可以通过a标签链接到它的页面滚动位置
<p id="top"></p>
<!-- 跳转到指定的锚点处 -->
<a href="#top">返回顶部</a>9 图像 <img />
标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎的支持。
<!-- src 指定显示的图片路径 -->
<!--alt 当图片不存在时，显示文字说明-->
<img src="img/t1.jpg" alt="死亡笔记"/><br/>
<!-- 单位是像素pixels-->
<!--width 宽度 height表示高度
如果只指定一个，按比例缩放 -->
<img src="img/t.jpg" width="100" height="200"/>引用地址分为绝对地址和相对地址
绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身所在位置去定位被引用的文件地址
相对路径的定义技巧：
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以
省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
10 音频和视频
<audio>是插入音频的标签
<video>是插入视频的标签
<!--audio标签 调用浏览器内置的音频播放器（默认是隐藏的）
src属性指定音频的路径（网络路径、本地路径）
controls属性表示显示播放器（此属性不需要属性值）
autoplay属性表示音乐自动播放（考虑浏览器兼容性）
-->
<audio src="media/麻雀.mp3" controls autoplay></audio>
<!--video标签 调用浏览器内置的视频播放器（默认是隐藏的）
src属性指定视频的路径（网络路径、本地路径）
controls属性表示显示播放器的控制条（此属性不需要属性值）
autoplay属性表示视频自动播放（考虑浏览器兼容性）
width、height属性设置视频播放器的尺寸
-->
<video src="media/Java学科宣传片.mp4" controls autoplay width="400"></video>11 表格 <table>
| Id | Name | Age |
|---|---|---|
| 1 | Zhagnsan | 12 |
| 2 | Laowagn | 13 |
table常用标签
table标签：声明一个表格
tr标签：定义表格中的一行
td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性：
border 定义表格的边框
cellpadding 定义单元格内内容与边框的距离
cellspacing 定义单元格与单元格之间的距离
align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并
rowspan 设置单元格垂直合并
<!--
table 表
tr 行
td 列
th 列标题 文字加粗并居中
border边框属性
-->
<table border="1" width="250" align="center">
<tr>
<th>尊姓大名</th>
<th>贵庚</th>
</tr>
<tr>
<td align="center">姓名</td>
<td align="center">年龄</td>
</tr>
<tr align="center">
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
<!--
cellspacing 单元格之间的空白 0表示没有空白
cellpadding 单元格的内容与边距之间的空白（内边距）
-->
<table border="1" bordercolor="blue" width="200" cellspacing="10" cellpadding="10">
<!--
colspan 指定单元格占据的列数
rowspan 指定单元格占据的行数
-->
<table border="1" width="230">
<tr>
<td colspan="2">1603</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td rowspan="2">a1</td>
<td>b1</td>
</tr>
<tr>
<td>b2</td>
</tr>
</table>12 表单 <form>
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域，用于向服务器提交数据
form的主要属性：
action：请求的目标路径
method：提交方式，包括post、get
表单中可以包括<input>子元素
基本格式：<input type="" name="" value="" />
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、button，默认为 text |
| name | 指定表单元素的名称 |
| value | 元素的初始值 |
| size | 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text 或 password 时，表示允许输入的最大字符数 |
| checked | type为radio或checkbox时，表示按钮是否被选中 |
| selected | 列表框的默认选中 |
基本表单元素：
文本框: <input type="text" name=""><br>
密码框: <input type="password" name="" ><br>
单选框: <input type="radio" name=""><br>
复选框: <input type="checkbox" name=""><br>
提交按钮：<input type="submit" value="提交">
重置按钮：<input type="reset" value="重置">
普通按钮：<input type="button" value="按钮"/>
下拉框：<select><option></option></select>
文本域: <textarea name="" cols="" rows=""></textarea><!--
type 控件的类型
name input控件的标示
value 控件中的值
maxlength 表示可以输入数据的最大长度
action 指定数据提交到哪个url
method 提交数据的方式
get 默认的选项
post
-->
<form action="http://www.baidu.com" method="get">
<!--文本框-->
用户名:<input type="text" name="username" maxlength="4"/>
<br/>
<!--密码框-->
密码:<input type="password" name="pwd"/>
<br/>
<!--单选框 同组的单选框 name必须相同—>
性别:男<input type="radio" name="sex" value="m" checked="true"/>
女<input type="radio" name="sex" value="f"/>
<br/>
<!--下拉框-->
城市:<select name="city">
<option value="zz">大郑州</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<br/>
<!--复选框 同组的name必须相同—>
技术特长:java<input type="checkbox" name="hobit" value="java"/>
c<input type="checkbox" name="hobit" value="c"/>
<br/>
<!-文本域 行数 宽度 —>
个人简介<textarea name="intruct" cols="30" rows="5"></textarea><br />
<!--提交按钮-->
<input type="submit" value="提交">
<!--重置按钮-->
<input type="reset" value="重置">
<!--普通按钮-->
<input type="button" value="按钮"/>
</form>html5新增表单控件:
网址: <input type="url" name="" required><br>
邮箱: <input type="email" name="" required><br>
日期: <input type="date" name=""><br>
时间: <input type="time" name=""><br>
数量: <input type="number" name=""> <br>
范围: <input type="range" name=""><br>
电话: <input type="tel" name=""><br>
颜色: <input type="color" name=""><br>
搜索: <input type="search" name=""><br>新增常用表单控件属性：掌握 placeholder 设置文本框默认提示文字 autofocus 自动获得焦点
13 DIV
块元素，是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素，没有具体语义
14 字符实体
空格
< 小于号
> 大于号
" 引号
© ©版权
® ® 注册商标
15 iframe
<iframe>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条<a href="01.html" target="myframe">百度</a>
<a href="02.html" target="myframe">glls</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>