一 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文件中文乱码
保存文件时注意:最好选系统默认