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 ：水平线的颜色
特殊字符
想要在页面上显示这样的内容 <html>:是网页的开始！
需要对字符进行转义
- < <
- > >
- 空格  
- & &
2.3 列表标签
-
想要效果：
image.png
代码：
image.png
标签
<dl> </dl> :表示列表的范围
在 dl 里面 <dt></dt> ：上层内容
在 dl 里面 <dt></dt> ：下层内容
- 想要效果
image.png
代码：
image.png
标签
<ol></ol> ：有序列表的范围
属性
- type ：设置默认排序方式 1 （默认） a i
在 ol 标签里面 <li>具体内容</li>
2.4 图像标签
<img src=" 图片的路径"/>
- src : 图片的路径
- width：图片的宽度
- height：图片的高度
- alt ：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容（有的浏览器可能下不显示）
2.5 路径介绍
绝对路径
- C: \ user\sdsd\dssd\dsa\sxsa\a.jpg
- http:/www.baidu.com/b.jpg
相对路径
一个文件相对于另一个文件的位置
2.6 超链接
链接资源
<a href="链接到资源的路径"> 显示在页面上的内容</a>
- href ：链接的资源的地址
- target：设置打开方式，默认是在当前页打开
——blank ：在一个新窗口打开、
—— self：在当前页打开 （默认）
当超链接不需要到任何地址，在 href 里面加 #
<a href="#"> 这是一个超链接</a>
定位资源（锚点）
- 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
- 回到这个位置
<a href="#top">点击回到顶部</a>
2.7 表格标签
可以对数据进行格式化，使得数据显示更清晰
<table></table> : 表示表格的范围
- border：表格线
- bodercolor ：表格线的颜色
- cellspacing：单元格之间的距离
- width：表格的宽度
- height ：表格的高度
在 table 里面 <tr> </tr>
设置对其方式 align：left center right
在 tr 里面 <td> </td>
设置显示方式 align：left center right
使用 th 也可以表示单元格
——表示居中和加粗
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
画图分析表格的写法
- 首先定义一个表格的范围使用 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区别
- get 请求地址栏会携带提交的数据，post 不会携带
2.get 请求 安全级别较低，post 较高
3.get 请求数据有大小限制，post 没有限制
——enctype：一般请求下不需要这个属性，做文件上传时需要这个属性
- 输入项：可以输入内容或者选择内容的部分
输入项里面必须有 name 属性
大部分的输入项 使用：<input type="输入项的类型"/>
普通输入项：<input type="text"/>
密码输入项：<input type="password"/>
单选输入项：<input type="radio"/>
——在里面需要有属性：name
——属性 name 的值必须一样，才可以实现单选
——必须要有一个 value 值，为了向服务器发送数据时能更清楚的知道所选择的值
实现默认选中的属性：checked=“checked”
复选输入框：<input type="checkbox"/>
——在里面需要有属性：name
——属性 name 的值必须一样，才可以实现多选
——必须要有一个 value 值，为了向服务器发送数据时能更清楚的知道所选择的值
实现默认选中的属性：checked=“checked”
举例代码:
image.png
展示效果：
image.png
文件输入框：（后面上传时候用到）<input type="file"/>
下拉输入框：（不是在 input 标签里面的）
默认选择 ：selected=“selected”
代码：
image.png
效果展示：
image.png
文本域：<textarea cols="10" rowa="100"></textarea>
代码：
样例展示：
image.png
隐藏项（不会显示在页面上，但是存在于 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 标签：引入外部文件
网友评论