1.HTML简介
1.1什么是html
HyperText Markup Language : 超文本标记语言，网页语言
- 超文本：超出文本的范畴，使用 html 可以轻松实现这样操作
- 标记： html 所有的操作都是通过标记实现的，标记就是标签。
1.2 第一个 html 程序
- 创建 java 文件 .java
先编译，然后再运行（jvm） - html 文件后缀是 .html 。htm
直接通过浏览器就可以运行
1.3 html 的规范
- 1.一个 html 文件开始标签和结束的标签 < html> </html>
- 2.html 包含两部分内容
（1）<head> 设置相关信息 </head>
（2） <body> 显示在页面上的所有内容都写在 body 里面</body> - 3.html 标签有开始标签，也要有结束标签
<head> </head>
- 4.html 的代码不区分大小写
- 5.有些标签，没有结束标签，在标签内结束
换行标签
<br/>
水平线
<hr/>
1.4 html 操作思想
- 网页中的很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来）
通过修改标签的属性值实现标签内数据样式的变化。 - 一个标签相当于一个容器，想要修改容器内数据样式，只需要修改容器的属性值，就可以实现容器内数据样式的变化
2.html中常用标签
2.1文字标签和注释标签
文字标签：修改文字样式
<font> </font>
属性
- size ：文字大小 取值范围 1-7 ，超出了 7 ，默认还是 7
- color ：文字颜色
——两种表示方式
英文单词 ：red
使用十六进制数表示 ： #ffffff
注解标签
<!--- --->
2.2标题标签，水平线标签和特殊标签
标题标签
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
从 h1 到 h6，大小是依次变小，同时会自动换行
水平线标签
</hr>
属性
- size ：水平线的粗细 取值范围 1-7
- color ：水平线的颜色
特殊字符
- < <
- > >
- 空格  
- & &
-
效果
7953636-877e21adb4184c9b.png - 代码
7953636-38a9f50089d3599f.png
标签
<dl> </dl> :表示列表的范围
在 dl 里面 <dt></dt> ：上层内容
在 dl 里面 <dd></dd> ：下层内容
-
效果
7953636-84d8d0792519965e.png -
代码
7953636-58d0dc9771ec18a8.png
标签
<ol></ol>: 有序列表的范围
属性
- type ：设置默认排序方式 1 （默认）
- 在 ol 标签里面 <li>具体内容</li>
2.4图像标签
<img src = "图片路径"/>
- src : 图片的路径
- width：图片的宽度
- height：图片的高度
- alt ：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容（有的浏览器可能下不显示）
2.5路径
绝对路径
相对路径
一个文件相对于另一个文件的位置
2.6超链接
连接资源
<a href = "连接到资源的路径"> x显示在网页上的内容</a>
- href ：链接的资源的地址
- target：设置打开方式，默认是在当前页打开
——blank ：在一个新窗口打开、
—— self：在当前页打开 （默认）
当超链接不需要到任何地址，在 href 里面加 #
<a href="#"> 这是一个超链接</a>
定位资源（锚点）
- 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
回到这个位置
<a href="#top">点击回到顶部</a>
2.7表格标签
可以对数据进行格式化，使得数据显示更清晰
<table></table> : 表示表格的范围
- border：表格线
- bodercolor ：表格线的颜色
- cellspacing：单元格之间的距离
- nwidth：表格的宽度
- height ：表格的高度
在 table 里面 <tr> </tr>
设置对其方式 align：left center right
在 tr 里面 <td> </td>
设置显示方式 align：left center right
使用 th 也可以表示单元格
画图分析表格的写法
- 首先定义一个表格的范围使用 table
- 定义一行使用 tr
- 定义一个单元格使用 td
操作技巧：
首先数有多少行，数每行里面有多少个单元格
表格的标题
<caption> </caption>
合并单元格
——rowspan ：跨行
<td rowspan="3">可以写字</td>
——colspan：跨列
<td colspan="3">可以打字</td>
2.8表单标签#
可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
定义一个表单
<form> </form>
属性
——action: 要提交到的地址，默认提交到当前的页面
——method：表单提交方式
常用有两种 get 和 post，默认是get 请求
get 和 post区别
1.get 请求地址栏会携带提交的数据，post 不会携带
2.get 请求 安全级别较低，post 较高
3.get 请求数据有大小限制，post 没有限制
——enctype：一般请求下不需要这个属性，做文件上传时需要这个属性
- 输入项：可以输入内容或者选择内容的部分
输入乡里必须有name的属性
大部分的输入项 使用：<input type="输入项的类型"/>
普通输入项：<input type="text"/>
密码输入: <inputtype="password"/>
单选输入项：<input type="radio"/>
——在里面需要有属性：name
——属性 name 的值必须一样，才可以实现单选
——必须要有一个 value 值，为了向服务器发送数据时能更清楚的知道所选择的值
实现默认选中的属性checked=“checked”
复选输入框：<input type="checkbox"/>
——在里面需要有属性：name
——属性 name 的值必须一样，才可以实现多选
——必须要有一个 value 值，为了向服务器发送数据时能更清楚的知道所选择的值
实现默认选中的属性： checked=“checked”
例如：
效果：
文件输入框：（后面上传时候用到）<input type="file"/>
下拉输入框：（不是在 input 标签里面的）
默认选择 ：selected=“selected”
代码：
效果：
文本域：<textarea cols="10" rowa="100"></textarea>
代码：
效果：
隐藏项（不会显示在页面上，但是存在于 HTML 代码里面）
<input type="hidden"/>
提交按钮<input type="submit"/>
<input type="submit" value="注册"/>
使用图片提交<input type="image" src="图片路径"/>
重置按钮： 回到输入项的初始状态
<input type="reset"/>
普通按钮（ 和 js 在一起使用）
<input type="button" value=" "/>
2.9 其他常用标签的使用
b: 加粗
s：删除线
u：下划线
i：斜体
pre：原样输出
sub：下标
sup：上标
p：段落标签
div：自动换行
span：在一行显示
2.10 html 的头标签的使用
HTML 两部分组成 head 和 body
- 在 head 里面的标签就是头标签
- title 标签：在某个页面就显示某个页面的名字
- <meta> 标签：设置页面的一些相关内容 。比如：跳转到某个页面，以及页面的相关关键字
- base 标签：设置超链接的基本设置
——可以统一设置超链接的打开方式
<base target="_blank"/> - link 标签：引入外部文件
