一 html的简介
什么是HTML：全称为HyperText Markup Language,超文本标记语言，又叫网页语言
什么叫超文本：超出文本的范畴，使用html可以轻松实现
什么叫标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
什么叫网页语言：
第一个html程序：
html后缀：.html或.htm
直接通过浏览器就可以运行
<html>
<head>
<title>这是第一个html程序</title>
</head>
<body>
<font size="5" color="red">这是我的第一个程序</font>
</body>
</html>
html的规范：
1 一个html文件开始标签和结束标签 : <html></html>
2 html包含两部分内容
<head>设置相关信息</head>
<body>显示在页面上的内容都写在body里</body>
3 html的标签有开始标签，也要有结束标签
4 html的代码不区分大小写
5 有些标签，没有结束标签，在标签内结束
比如：换行<br>
<hr/>一条水平线
二 html的操作思想
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候我们需要使用标签，把需要操作的数据封装起来，通过修改标签的属性值实现标签内数据样式的变化
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
三 文字标签和注释标签
文字标签：修改文字的样式
<font></font>
size:修改文字的大小。取值范围1~7，超出了7 ，默认还是7
color:文字的颜色
两种表示方式
英文单词：red green blue black white gray
通过工具实现不同的颜色：#66cc66
注释标签：<!-- html的注释 -->
四 标题标签和水平线标签和特殊字符
标题标签
<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>.........<h6></h6>
从h1到h6，大小依次变小，同时会自动变行
<html>
<head>
<title>标题标签示例</title>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
</body>
</html>水平线标签
<hr/><!--演示水平线标签-->
<hr size:"5" color="blue"/>
size:水平线的粗细，范围1~7
color：颜色
特殊字符：
想要在页面上显示这样的内容 <html>:是网页的开始
需要对特殊字符进行转译
* < <
* > >
<html>:是网页的开始
空格：
&:amp;
五 列表标签
比如显示这样的效果
公司
财务部
学工部
人事部
<dl></dl>：表示列表的范围
在dl里面<dt></dt>:上层内容
在dl里面<dd></dd>：下层内容
<dl>
<dt>公司</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
需要在页面上显示这样的效果
1. 财务部
2. 学工部
3. 人事部
a. 财务部
b. 学工部
c.人事部
i. 财务部
ii.学工部
iii.人事部
有序列表：<ol></ol>:有序列表的范围
属性 type：设置排序方式 1（默认） , a,i。
在ol标签里面<li>具体内容</li>
<ol type="a">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
无序列表：
在页面上显示：特殊符号（方框）财务部
在页面上显示：特殊符号（方框）学工部
<ul></ul>:表示无序列表的范围
type：空心圆circle，实心圆dise，实心方框square，默认是实心圆
在ul里面<li></li>
六 图像标签<img src="路径"/>
<img src="a.jpg"/>
属性：src：图像的路径
width：图片的宽度
height：图片的高度
alt：图片上显示的文字，把鼠标移动到图片上，停留片刻后就会显示文字。（有些浏览器上不显示）
七 路径的介绍
分类：两类
绝对路径：完全的路径
相对路径：一个文件相对于另外一个文件的位置
三种：html文件和图片在一个路径下，可以直接写文件名称
在html文件中，使用blue.jpg
L:\DW\ img\blue.jpg
L:\DW\ ear.html
在html中使用此图片，ear.html和img在一个路径下
img\blue.jpg
图片在html文件的上层目录
L:\DW\ blue.jpg
L:\DW\ wenjian\ ear.html
html文件所在的目录和图片是一个目录 图片和html文件是什么关系：图片在html的所在的目录的上层目录 DW
怎么表示上层路径 ../
../blue.jpg
想要表示上层的上层 ../../
八 案例——列表标签使用
<html>
<head>
</head>
<body>
<img src="images/title.jpg"/>
<br/><br/>
首页>中国馆>女装/女士精品>所有商品
<br/><br/>
<img src="images/header.jpg"/>
<h1>热点推荐</h1>
<dl>
<dt><img src="images/cloths.jpg"/></dt>
<dd>一口价：49.00<br/>
全国包邮！韩版修身T恤</dd>
</dl>
<img src="imags/line.gif"/>
</body>
</html>
九 超链接标签
连接资源
<a href="连接到资源的路径">显示在页面上的内容</a>
<html>
<head>
</head>
<body>
<a href="hello.html" target="_blank">这是一个链接</a>
</body>
</html>href:连接的资源的地址
target：设置打开的方式，默认是在当前页面打开
_blank：在一个新窗口打开
_self：在当前页打开
当href中为空时，会打开其所在文件夹。此时使用占位符“#”，表示超链接不会有任何效果
<a href="#" target="_blank">这是一个链接</a>
定位资源
例如：回顶部
如果想要定位一个资源，需要定义 一个位置
<a name=""top>顶部</a>
回到这个位置：
<a href="#top">回到顶部</a>
引入一个标签 pre：原样输出
<pre>
aaaaaa
bbbbbb
</pre><a name="top">顶部</a>
<pre>此处省略n行文字</pre>
<a href="#top">回到顶部</a>
十 表格标签
什么是表格？
表格的作用：可以对数据进行格式化，使数据显示更加清晰
<table></table>:表示数据的范围
border:表格线
bordercolor：表格线的颜色
cellspacing：单元格之间的距离
width：表格的宽度
height：表格的高度
在table里面：<tr></tr>
设置显示方式：align:left,center,right
在tr里面<td></td>
使用th也可以表示单元格，表示可以实现居中+加粗
分析表格的写法：
首先定义一个表格的范围使用table
定义一行使用tr
定义一个单元格使用 td
操作技巧：首先数多少行，数每行里面有多少个单元格
表格的标题：写在table里面
<caption></caption>
<table border="1 bordercolor="red cellspacing="0>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>东方不败</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>岳不群</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>林平之</td>
<td>男</td>
<td>40</td>
</tr>
</table>
合并单元格：
rowspan:跨行
colspan:跨列
<table border="1 bordercolor="red cellspacing="0>
<tr>
<td colspan="3>人员信息</td></tr>
<tr>
<td>东方不败</td>
<td>男</td>
<td>30</td>
</tr>
<tr>
<td>岳不群</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>林平之</td>
<td>男</td>
<td>40</td>
</tr>
</table>十一 表单标签
提交数据到服务器，这个过程可以使用表单标签实现
<form></form>:定义一个表单的范围
属性：action，内容提交到的地址，默认为当前页面
method：表单的提交方式。常用的有两种：get和post，默认为get请求
面试题目：get和post的区别？
get:地址栏会携带提交的数据，post不会携带（请求体里面）
get安全级别较低，post较高
get请求数据大小的限制，post没有限制。
enctype:一般情况下不需要这个属性，做文件上传的时候需要设置这个属性。
输入项：可以输入内容或者选择内容的部分
在输入项里面必须写入属性name，否则提交的nei'rong
大部分的输入项：使用<input type="输入项的类型"/>
普通输入项：<input typr="text"/>
密码输入项：<input type="password"/>
单选输入项：<input type="radio" name="sex"/>
需要在里面加入属性name,name的名称必须相同，设置value区分选项
实现默认选中：属性，checked=“checked”
复选输入项：<input type="checkbox"/>
需要在里面加入属性name,name的名称必须相同，设置value区分选项
实现默认选中：属性，checked=“checked”
文件输入项：<input type="file"/>
下拉输入项（不在input里）：
默认选中：selected=“selected”
<select>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
文本域：<textarea cols="10" rows="10"></textarea>
隐藏项（不会出现在页面上，但存在于html代码里）：<input type="hidden"/>
提交按钮：<input type="submit" value="注册”/>
使用图片提交：<input type="image" src="a.jpg"/>
重置按钮(回到输入项的初始状态)：<input type="reset"/>
普通按钮:<input type=“button” value=“ ”/>
十二 案例使用表单标签实现注册的页面
<html>
<head>
<title>例子</title>
</head>
<body>
<h2 align="right">注册账号</h2>
<table border="1" width="100%">
<tr>
<td align="right">注册邮箱</td>
<td><input type="text" name="mail"/></td>
</tr>
<tr>
<td> </td>
<td>你可以使用<a href="#">账号</a>注册或者使用<a href ="#">手机号</a>注册</td>
</tr>
<tr>
<td align="right">创建密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td align="right">真实姓名：</td>
<td><input type="text" name="realname"/></td>
</tr>
<tr>
<td align="right">性别：</td>
<td><input type="radio" name="sex" value="nv"/>女<input type="radio" name="sex" value="nan"/>男</td>
</tr>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="1945">1945</option>
<option value="1931">1931</option>
<option value="1949">1949</option>
</select>年
<select name="month">
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="day">
<option value="30">30</option>
<option value="10">10</option>
<option value="25">25</option>
</select>月
</td>
</tr>
<tr>
<td align="right">我现在：</td>
<td>
<select name="now">
<option value="study">我正在上学</option>
<option value="work">我已经工作</option>
</select>
</td>
</tr>
<td> </td>
<td><input type="submit"/></td>
</tr>
</table>
</body>
</html>十三 其它标签的使用
b;s;u;i;pre;sub;div;span
b:加粗
s:删除线
u：下划线
i：斜体
pre:保持原样输出
sub:下标
sup:上标
div:自动换行
span:不换行
p:段落标签
<html>
<head>
<title>其他常用标签</title>
</head>
<body>
<b>三千繁华</b>
<s>弹指刹那</s>
<u>百年之后</u>
<i>不过一捧黄沙</i>
<pre>三千繁华
弹指刹那
百年之后
不过一捧黄沙
</pre>
<hr/>
3<sub>100</sub>
4<sup>200</sup>
<hr/>
<div>这是div一</div>
<div>这是div二</div>
<div>这是div三</div>
<span>这是span一</span>
<span>这是span二</span>
</body>
</html>十四 html的头标签的使用
头标签放在head里面
<title></title>表示标签上显示的内容
<meta >:设置页面的一些相关内容
<meta name="keywords" content="aa,bb,cc"/>
<meta http-equiv="refresh" content="3; url=hello.html"/><!--3秒后跳转到hello.html页面-->
base标签：设置超链接的基本设置，可以统一设置
<base target="_blank"/>所有连接都在新窗口打开
<link>标签：引入外部文件
十五 框架标签的使用
什么叫框架标签？
<frameset>
rows:按行进行划分
<frameset rows="80,*">
cols:按列划分
<frameset cols="80,*">
frame:具体显示的页面
<frame name="lower_left" src="b.html">
使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉
<frameset cols="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>
如果在左边的页面超链接，想让内容显示在右边的页面中
设超链接的属性,target值设置成frame的name的名称
<a href="hello.html" target="lower_right">
十六 html文件中文乱码
保存文件时注意：最好选系统默认
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
