目录
HTML简介
1.HTML(HyperText Markup Language)：超文本标记语言,又称为网页语言。
超文本：超出文本的范畴，使用html可以轻松实现这样操作
标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
2.运行方式： html后缀是 .html .htm。 直接通过浏览器就可以运行
3. html的规范，书写时必须要遵循以下规范
1)一个html文件开始标签和结束的标签 <html> </html>
2)html包含两部分内容
<head> 设置相关信息</head>
<body> 显示在页面上的内容都写在body里面</body>
3)html的标签有开始标签，也要有结束标签，一一对应。
- <head></head>
4)html的代码不区分大小写的
5)有些标签，没有结束标签 ，在标签内结束。比如 换行 <br/> 分割线 <hr/>
4.html的操作思想
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化。一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
文字标签和注释标签
文字标签就是修改文字的样式。
<font></font>属性：
size: 文字的大小 取值范围 1-7,超出了7，默认还是7
color：文字颜色
- 两种表示方式
英文单词：red green blue black white yellow gray......
使用十六进制数表示 #ffffff : RGB
注释标签就是添加注释
<!-- html的注释 --><html>
<head>
<title>初学html</title>
</head>
<body>
<font size = 10 color = "red">红色的十号字体</font><br/>
<font size = 20 color = "yellow">黄色的二十号字体</font><br/>
<font size = 30 color = "green">绿色的三十号字体</font><br/>
<!--注释 -->
</body>
<hr/>
</html>标题标签、水平线标签和特殊字符
标题标签
- <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
- 从h1到h6，大小是依次变小，同时会自动换行
水平线标签
- <hr/>
- 属性
size: 水平线的粗细 取值范围 1-7
color: 颜色
<hr size="5" color="blue"/> 特殊字符
如果显示的和标签有冲突，需要对特殊字符进行转义
| < | < |
| > | > |
| 空格 | |
| & | & |
列表标签
1. <dl> </dl>: 表示列表的范围
在dl里面 <dt></dt>: 上层内容
在dl里面 <dd></dd>：下层内容
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<dl>
<dt>笑一下</dt>
<dd>哈哈</dd>
<dd>嘻嘻<dd>
<dd>嘿嘿</dd>
</dl>
</body>
</html>
2. 如果想要在页面上显示序号的效果
<ol></ol> : 有序列表的范围
- 属性 type：设置排序方式 1(默认) a i
-在ol标签里面 <li>具体内容</li>
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<dl>
<dt>笑一下</dt><br/>
<ol type = "a">
<li><dd>哈哈</dd></li>
<li><dd>嘻嘻</dd></li>
<li><dd>嘿嘿</dd></li>
</ol>
</dl>
</body>
</html>
3. 想要在页面上显示特殊字符在前面的效果
<ul></ul> : 表示无序列表的范围
-属性： type: 空心圆circle 、实心圆disc(默认) 、实心方块square ，默认disc
-在ul标签里面 <li>具体内容</li>
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<dl>
<dt>笑一下</dt><br/>
<ul type = "a">
<li><dd>哈哈</dd></li>
<li><dd>嘻嘻</dd></li>
<li><dd>嘿嘿</dd></li>
</ul>
</dl>
</body>
</html>
图像标签
<img src="图片的路径"/>
- src: 图片的路径
- width：图片的宽度
- height：图片的高度
- alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容。图片显示出错，提示的内容 <img src="w02.jpg" width="300" height="400" alt="这是图片上的文字">关于路径
1.绝对路径，文件的最全路径。例如：
- http://www.baidu.com/b.jpg
2. 相对路径
1) html文件和图片在一个路径下，可以直接写文件名称
2) 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg: img\a.jpg[html和img在同一路径下
3) 图片在html文件的上层目录
用../表示上层路径
超链接标签
1.链接资源
<a href="链接到资源的路径"> 显示在页面上的内容 </a> href: 链接的资源的地址
target：设置打开的方式 ，默认是在当前页打开
_blank : 在一个新窗口打开
_self: 在当前页打开 默认
当超链接不需要到任何的地址 在href里面加#
- <a href="#">这是一个超链接2</a>2.定位资源
如果想要定位资源：
定义一个位置 + 回到这个位置
<a name="top">顶部</a>
<a href="#top">回到顶部</a>标签 pre：原样输出
表格标签
表格标签可以对数据进行格式化，使数据显示更加清晰
1.表格写法：
<table></table>: 表示表格的范围
border：表格线
bordercolor：表格线的颜色
cellspacing：单元格直接的距离
width：表格的宽度
height：表格的高度
在table里面 <tr></tr>（一行）
设置对齐方式 align： left center right
在tr里面 <td></td>（一个单元格）
设置显示方式 align： left center right
ps：使用th也可以表示单元格，表示可以实现居中和加粗
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!--4行，每行有3个单元格 -->
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
<caption>人员信息</caption>
<tr align = "center"> <!--这一行居中-->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td align = "right">小白</td> <!--这一个单元格居右-->
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>小黑</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<th>小红</th> <!--th默认加粗居中-->
<th>女</th>
<th>8</th>
</tr>
</table>
</body>
</html>
2. 表格的标题：
<caption></caption>
3.合并单元格
rowspan：跨行
<td rowspan="3">人员信息</td>
colspan：跨列
<td colspan="3">人员信息</td>
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
<caption>人员信息</caption>
<!--3行
第一个行：3个单元格
第二行和第三行都是：2 按行合并年龄那一列-->
<tr>
<td>小白</td>
<td>女</td>
<td rowspan="3">18</td>
</tr>
<tr>
<td>小黑</td>
<td>男</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
</tr>
</table>
</body>
</html>表单标签
表单标签可以提交数据到服务器
1.表单范围
<form></form>: 定义一个表单的范围
属性
action： 提交到地址，默认提交到当前的页面
method: 表单提交方式
- 常用的有两种 get和post，默认是get请求 get和post区别
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post没有限制
enctype：做文件上传时候需要设置这个属性
2.输入项：可以输入内容或者选择内容的部分
大部分的输入项 使用 <input type="输入项的类型"/>，并且在输入项里面需要有一个name属性,才能提交数据
1）普通输入项：<input type="text"/>
2） 密码输入项：<input type="password"/>
3）单选输入项：<input type="radio"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
实现默认选中的属性 ：checked="checked"
4） 复选输入项：<input type="checkbox"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
实现默认选中的属性 ：checked="checked"
5）文件输入项：<input type="file"/>
6） 下拉输入项（不是在input标签里面的）
<select name="birth">
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>
默认选择 selected="selected"
7）文本域： <textarea cols="10" rows="10"></textarea>
8）隐藏项：不会显示在页面上，但是存在于html代码里面 <input type="hidden" />
9）提交按钮
使用图片提交： <input type="image" src="图片路径"/>
重置按钮： 回到输入项的初始状态 <input type="reset"/>
普通按钮： <input type="button" value=""/>
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<form action = "mall\images">
手机号码：<input type = "text" name = "num"/><br/>
密码：<input type = "password"/><br/>
性别：<input type = "radio" name = "sex" value = "nv"/> 女
<input type = "radio" name = "sex" value = "nan"/>男<br/>
爱好：<input type = "checkbox" name = "love" value = "a"/>羽毛球
<input type = "checkbox" name = "love" value = "b"/>乒乓球
<input type = "checkbox" name = "love" value = "c">篮球<br/>
文件：<input type = "file" name = "file"/><br/>
生日：<select name="birth">
<option value="0">请选择</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>
<br/>
自我描述：<textarea cols="10" rows="10" name = "tex"></textarea><br/>
隐藏项：<input type="hidden" name = "hid"/><br/>
<input type="submit" value="注册"/>
<input type="reset" value="重置注册"/>
<input type="button" value="普通按钮"/>
<br/>
<!-- <input type="image" src="a.jpg"/>-->
</form>
</body>
</html>其他的常用标签的使用
b : 加粗
s ：删除线
u ：下划线
i ：斜体
pre ：原样输出
sub : 下标
sup : 上标
p ：段落标签 比br标签多一行
div ：自动换行
span：在一行显示
框架标签
1.<frameset>
- rows:按照行进行划分
<frameset rows="80,*">
- cols:按照列进行划分
<frameset cols="80,*">
2. <frame>具体显示的页面 <frame name="lower_left" src="b.html">
注意： 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
3.如果在左边的页面超链接，想让内容显示在右边的页面中。 设置超链接里面属性 target值设置成名称
<a href="http://www.baidu.com" target="right">超链接1</a>
<frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="a.html"> //上面页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="lower_right" src="c.html"> //右边的页面
</frameset>
</frameset> 其他标签如果需要可以去官方文档上查阅。
