1. html简介
1.1 什么是html呢?
html全称HyperText Markup Language,超文本标记语言。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
1.2 第一个html程序
新建一个hello.html文件,里面写入:
<font size="5" color="red">这是我的第一个html程序!</font>
保存后通过浏览器打开:
1.3 html规范
其实html文件必须遵循html的规范:
1. 一个html文件包含开始标签和结束标签。例如<html></html>
2. html包含两部分内容
1)<head>设置一些相关信息</head>
2)<body>显示页面上的内容都写在body中</body>
3. html的标签有开始标签,也必须有结束标签。例如如果有开始标签<html>,就必须要有结束标签</html>
4. html的代码不区分大小写。
5. html中有些标签是没有结束标签的。
比如换行、水平线,这时要结束该标签就要在该标签内结束。<br/>、<hr/>
遵守上面的规范,可以写出如下的内容:
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<FONT size="5" color="red">这是我的第一个html程序1!</font><br/><hr/>
这是我的第一个html程序2!
</body>
</html>
使用浏览器打开:
1.4 html的操作思想
网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据封装起来,通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器,想要修改容器内的数据的样式,只需要改变容器的属性值就可以实现容器内数据样式的变化。
2. html常用标签
2.1 文字标签和注释标签
* 文字标签:修改文字的样式
—<font></font>
—属性:
* size:文字大小,取值范围1-7,超出7,默认还是7
* color:文字颜色
—两种表示方式
** 英文单词:red,green,blue,black,yellow,...
**使用十六进制表示 #ffffff:RGB
—通过工具实现不同的颜色
* 注释标签
—<!-- html的注释内容 -->
2.2 标题标签、水平线标签和特殊字符
* 标题标签:<h1></h1> <h2></h2> ...... <h6></h6>
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h6>标题6</h6>
</body>
</html>
使用浏览器打开:
从上面可以看出从h1到h6,字体大小是依次变小,并且会自动换行。
* 水平线标签
—<br/>
—属性
* size:水平线粗细,取值范围1-7,超出7,默认还是7
* color:颜色
<hr size="5" color="blue"/>
演示下:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h6>标题6</h6>
<!-- 演示水平线标签 -->
<hr size="5" color="blue"/>
</body>
</html>
* 特殊字符
—假如想要在页面上显示这样的内容:<html>:是网页的开始!
—需要对特殊字符进行转义,常见的一些特殊字符:
*< <
*> >
* & &
*空格
演示:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h6>标题6</h6>
<!-- 演示水平线标签 -->
<hr size="5" color="blue"/>
<!-- 演示特殊符号 -->
<html>:是网页的开始 !
</body>
</html>
2.3 列表标签
* 列表标签
—假如想要在页面上显示这样的效果
中北大学
仪器与电子学院
机电工程学院
经济管理学院
* <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>
—假如想要在页面上显示这样的效果
1. 仪器与电子学院
2. 机电工程学院
3. 经济管理学院
a. 仪器与电子学院
b. 机电工程学院
c. 经济管理学院
i. 仪器与电子学院
ii. 机电工程学院
iii. 经济管理学院
* <ol> </ol>:有序列表的范围
—属性 type:设置排序方式 1(缺省)、a、 i
** 在ol标签里面<li>具体内容</li>
—假如想要在页面上显示这样的效果
* <ul> </ul>:无序列表的范围
—属性 type:空心圆circle、实心圆disc、实心方块square,默认disc
** 在ol标签里面<li>具体内容</li>
演示:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示列表标签 -->
<dl>
<dt>中北大学</dt>
<dd>仪器与电子学院</dd>
<dd>机电工程学院</dd>
<dd>经济管理学院</dd>
</dl>
<!-- 演示有序列表 -->
<ol type="a">
<li>仪器与电子学院</li>
<li>机电工程学院</li>
<li>经济管理学院</li>
</ol>
<!-- 演示无序列表 -->
<ul type="square">
<li>仪器与电子学院</li>
<li>机电工程学院</li>
<li>经济管理学院</li>
</ul>
</body>
</html>
2.4 图像标签
* 图像标签
—<img src="图像的路径"/>
* src:图片的路径
* width:显示图片的宽度
* height:显示图片的高度
* alt:图片上显示一些文字,把鼠标移到图片上,停留片刻后显示,但是在有些浏览器上不显示。
演示:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<img src="sq1.jpg" width="300" height="200" alt="相信自己"/><br/>
<img src="sq2.jpg" width="300" height="200" alt="相信自己"/>
</body>
</html>
这里要注意路径问题,可以使用绝对路径,也可以使用相对路径。这里的相对是指相对于这个html文件的位置而言。
2.5 超链接标签
* 超链接标签
— 链接资源
**<a href="链接到的资源路径">显示在页面上的内容</a>
** href:链接到的资源路径
** target:设置打开方式,默认是在当前页打开
— _blank:在一个新的窗口打开
— _self:在当前页打开
** 当超链接不需要到任何的地址时,设置href为#即可。
— 定位资源
** 如果想要定位资源:定义一个位置
<a name="top">顶部</a>
** 回到这个位置
<a href ="#top">回到顶部</a>
** 引入一个标签 <pre> :原样输出
先来演示下链接资源:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<a href="01hello.html" target="_blank">这是一个超链接1</a><br/>
<!-- 当href属性为#时,表示这个超链接不起作用,只显示内容 -->
<a href="#">这是一个超链接2</a>
</body>
</html>
使用浏览器打开:
再来演示下定位资源:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<a name="top">顶部</a>
<pre>
徐北枳缓缓起身,闭上眼睛又睁开眼睛,如此反复,呢喃道:“这方天地……有些古怪。”
陈望轻声道:“道教佛门自古既有方丈之称,相传在那方丈之地,分别成就三清圣地和西天佛国,身在其中,各有无上神通,如同大将坐镇沙场,料敌先机,早早拥有天时地利。”
徐北枳忧心忡忡道:“照你这么说的话,姓徐的家伙明明在自家地盘上,反而被那个宦官夺走优势?”
陈望答非所问,“小街之上并非便于大队战马驰骋的地方,为何会有如此浓密沉重的马蹄声?”
徐北枳站起身,举目望去,“你别误会,姓徐的家伙还不至于这么阴险算计于你,更不会兴师动众地调动幽州骑军。何况到了他们这种玄妙境界的武道宗师,还需要世间骑军助阵?根本没有意义。”
陈望点了点头。
小街之上,就在徐凤年即将与那条水龙撞在一起的时刻,脸色阴沉的年轻宦官叹息一声,伸出手掌,不知为何重新按住井口轱辘。
刹那之间,天地之间再无雨幕,原本昏暗天色好似清明了几分,如同光阴倒退。
徐北枳发现自己依旧坐在门槛上,陈望晃了晃手中酒壶,明明已经喝光的绿蚁酒,竟然还剩下小半壶。
糜奉节满脸茫然,樊小柴低头望去,衣衫完整,并无半点损毁。
</pre>
<a href="#top">回到顶部</a>
</body>
</html>
使用浏览器打开:
点击左下角的返回顶部,就返回到了顶部了。
2.6 表格标签
* 表格标签
—可以对数据进行格式化,是数据显示更加清晰
—<table></table>:表示表格的范围
—首先使用table定义一个表格的范围,在table里使用tr定义一行,在tr里使用td定义每个单元格。
—操作技巧:首先确定有多少行,然后确定每一行里有多少单元格。
—属性:border:表格线的粗细
—bordercolor:表格线的颜色
—cellspacing:单元格之间的距离
—width:表格的宽度
—height:表格的高度
**在table里面使用<tr></tr>表示行
—在行里设置显示方式 align:left、center、right
** 在tr里面使用<td></td>表示单元格
—在单元格里设置显示方式 align:left、center、right
** 在tr里面使用<th></th>表示单元格
—表示可以实现居中和加粗
—表格的标题<caption></caption>
演示上面的知识点:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<table border="1" bordercolor="blue" cellspacing="0" width="300" height="150">
<caption>人员信息</caption>
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td align="right">东方不败</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<th>林平之</th>
<th>男</th>
<th>30</th>
</tr>
</table>
</body>
</html>
使用浏览器打开:
—合并单元格
**colspan:跨列
**rowspan:跨行
演示合并单元格:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示跨列操作 -->
<table border="1" bordercolor="blue" cellspacing="0" width="300" height="150">
<tr>
<td align="center" colspan="3">人员信息</td>
</tr>
<tr>
<td>东方不败</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<td>林平之</td>
<td>男</td>
<td>30</td>
</tr>
</table>
<hr/>
<!-- 演示跨行操作 -->
<table border="1" bordercolor="blue" cellspacing="0" width="300" height="150">
<tr>
<td align="center" colspan="3">人员信息</td>
</tr>
<tr>
<td>东方不败</td>
<td>女</td>
<td rowspan="3">20</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
</tr>
<tr>
<td>林平之</td>
<td>男</td>
</tr>
</table>
</body>
</html>
使用浏览器打开:
2.7 表单标签
* 可以提交数据到服务器,这个过程可以用表单标签完成
* <form></form>:定义一个表单范围
—属性
** action:提交到的地址(默认提交到当前页面)
** method:表单的提交方式
—常用的有两种:get(默认)、post
** enctype:一般请求下不需要这个属性,做文件上传时需要设置这个属性
** 输入项:可以输入内容或者选择内容的部分
— 大部分的输入项 使用<input type="输入项的类型"/>
********输入项里面需要有一个name属性
*** 普通输入项:<input type="text"/>
*** 密码输入项:<input type="password"/>
*** 单选输入项:<input type="radio"/>
—name的属性值必须相同
—在里面必须要有属性value
**** 实现默认选中的属性
—checked="checked"
*** 复选输入项:<input type="checkbox"/>
—name的属性值必须相同
—在里面必须要有属性value
**** 实现默认选中的属性
—checked="checked" *** 文件输入项:<input type="file"/>
*** 下拉输入项(不是在input标签里)
<select name ="birth">
<option value="0">请选择</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>
**** 实现默认选中的属性
—selected="selected"*** 文本域
<textarea cols="10" rows="10"></textarea>
*** 隐藏项(不会显示在页面上,但是存在html代码中)
<input type="hidden"/>
*** 提交按钮
<input type="submit"/>
*** 使用图片提交
<input type="image" src="图片的路径"/>
*** 重置按钮:回到输入项的初始状态
<input type="reset"/>
*** 普通按钮:和js配合使用
这里需要注意下get和post的区别:
1)get请求地址栏会携带提交的数据,post不会携带
2)get请求安全级别比较低,post较高
3)get请求携带的数据大小有限制,post没有
演示一个表单标签:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 创建一个表单标签,提交地址为“01hello.html”,提交方式为“get” -->
<form action="01hello.html" method="get">
<!-- 创建一个名为“phone”的普通输入项 -->
手机号:<input type="text" name="phone"/><br/>
<!-- 创建一个名为“pwd”的密码输入项 -->
创建密码:<input type="password" name="pwd"/><br/>
<!-- 创建一个名为“sex”,值为“男”的单选输入项,且在所有的单选输入项中默认选择该输入项 -->
性别:<input type="radio" name="sex" value="男" checked="checked"/>男
<!-- 创建一个名为“sex”,值为“女”的单选输入项 -->
<input type="radio" name="sex" value="女"/>女<br/>
<!-- 创建一个名为“love”,值为“羽毛球”的复选输入项 -->
爱好:<input type="checkbox" name="love" value="羽毛球">羽毛球
<!-- 创建一个名为“love”,值为“排球”的复选输入项 -->
<input type="checkbox" name="love" value="排球">排球
<!-- 创建一个名为“love”,值为“乒乓球”的复选输入项,且在所有的单选输入项中默认选择该输入项 -->
<input type="checkbox" name="love" value="乒乓球" checked="checked">乒乓球<br/>
<!-- 创建一个文件输入项 -->
文件:<input type="file"/><br/>
<!-- 创建一个名为“birth”,值为“0”、“1992”、“1993”、“1994”,且默认选择“1994”的下拉输入项 -->
生日:<select name ="birth">
<option value="0">请选择</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994" selected="selected">1994</option>
</select><br/>
<!-- 创建一个名为“introduction”的文本域输入项 -->
自我描述:<textarea cols="50" rows="8" name="introduction"></textarea><br/>
<!-- 创建一个名为“hidden”的隐藏项 -->
隐藏项:<input type="hidden" name="hidden"/><br/>
<!-- 创建一个提交按钮 -->
<input type="submit" value="注册"/>
<!-- 创建一个重置按钮 -->
<input type="reset" value="重置注册"/>
<!-- 创建一个普通按钮 -->
<input type="button" value="普通按钮"/><br/>
<!-- 创建一个使用图片提交的按钮 -->
<input type="image" src="提交按钮.jpg" width="100" height="25"/>
</form>
</body>
</html>
使用浏览器打开:
填入信息:
点击注册按钮:
发现跳转到了01hello.html这个网址,并且后面跟着?,紧接着跟着跟个输入项的信息,并且以&隔开。
下面做一个练习,实现如下的效果:
编写程序:
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<h2>注册中北大学校园网账号</h2>
<form action="01hello.html" method="get">
<table border="0">
<tr>
<td align="right">注册邮箱:</td>
<td><input type="text" name="mail"/></td>
</tr>
<tr>
<td align="right"> </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="男" checked="checked" />男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td align="right">生日:</td>
<td>
<select name="year">
<option value="1990">1990</option>
<option value="1991" selected="selected">1991</option>
<option value="1992">1992</option>
</select>年
<select name="month">
<option value="8">8</option>
<option value="9">9</option>
<option value="10" selected="selected">10</option>
<option value="11">11</option>
</select>月
<select name="day">
<option value="29">29</option>
<option value="30" selected="selected">30</option>
<option value="31">31</option>
</select>日
</td>
</tr>
<tr>
<td align="right">我现在:</td>
<td>
<select name="now">
<option value="study">正在上学</option>
<option value="work">已经工作</option>
</select>
</td>
</tr>
<tr>
<td align="right"> </td>
<td>
<image src="验证码.png">
<a href="#">看不清换一张?</a>
</td>
</tr>
<tr>
<td align="right">验证码:</td>
<td><input type="text" name="code"/></td>
</tr>
<tr>
<td align="right"> </td>
<td><input type="image" src="提交按钮.png"/></td>
</tr>
</table>
</form>
</body>
</html>
使用浏览器打开:
2.8 html的头标签
html由两部分组成:head和body,在head中的标签就是头标签
* title:表示在页面上显示的内容
* meta:设置页面的一些相关内容
<meta http-equiv="refresh" content="3;url=01hello.html"/>可以实现浏览器3秒后刷新进入01hello.html页面。
*base:设置超链接的基本设置
<base target="_blank"/>可以统一设置超链接的打开方式
* link:引入外部文件
演示:
<html>
<head>
<title>HTML示例</title>
<!-- <meta http-equiv="refresh" content="3;url=01hello.html"/> -->
<base target="_blank"/>
</head>
<body>
<h1>头标签</h1>
<a href="01hello.html">超链接1</a>
<a href="01hello.html">超链接2</a>
<a href="01hello.html">超链接3</a>
</body>
</html>
2.10 框架标签
*<frameset>
— rows:按照行进行划分
** <frameset rows="80,*">
— cols:按照列进行划分
** <frameset cols="80,*">
*<frame>
— 具体显示的页面
— <frame name="lower_left" src="b.html">
* 使用框架标签时,不能写在body里面,使用了框架标签,需要把body去掉
演示:
10框架标签.html
<html>
<head>
<title>HTML示例</title>
</head>
<!-- 按行划分为两部分 -->
<frameset rows="80,*">
<frame name="top" src="a.html"/>
<!-- 按列划分为两部分 -->
<frameset cols="80,*">
<frame name="left" src="b.html"/>
<frame name="right" src="c.html"/>
</frameset>
</frameset>
</html>
a.html
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<h1>aaaa</h1>
</body>
</html>
b.html
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<h1>bbbb</h1>
<a href="01hello.html" target="right">超链接1</a>
<a href="02标题和水平线和特殊字符.html" target="right">超链接2</a>
<a href="03列表标签..html" target="right">超链接3</a>
</body>
</html>
c.html
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<h1>cccc</h1>
</body>
</html>
用浏览器打开:
点击超链接1:
点击超链接2:
点击超链接3:
2.8 html其它常用标签
<b>:加粗
<s>:删除线
<u>:下划线
<i>:斜体
<p>:段落标签,比<br/>标签多一行
<pre>:原样输出
sub:下标
sup:上表
div:自动换行
span:在一行显示
演示:
<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>HTML示例</title>
</head>
<body>
<b>天之道,</b>
<s>损有余而补不足,</s>
<u>是故虚胜实,</u>
<i>不足胜有余</i>
<hr/>
<pre>
public static void main(String[] args){
System.out.println("!");
}
</pre>
<hr/>
A<sub>0</sub>
10<sup>2</sup>
<hr/>
<div>这是div1</div>
<div>这是div2</div>
<div>这是div3</div>
<hr/>
<span>这是span1</span>
<span>这是span2</span>
<span>这是span3</span>
<hr/>
<p>徐北枳缓缓起身,闭上眼睛又睁开眼睛,如此反复,呢喃道:“这方天地……有些古怪。”</p>
陈望轻声道:“道教佛门自古既有方丈之称,相传在那方丈之地,分别成就三清圣地和西天佛国,身在其中,各有无上神通,如同大将坐镇沙场,料敌先机,早早拥有天时地利。”
</body>
</html></span></span></span>
在浏览器中打开: