HTML
第一节 HTML简介
什么是网页?
网页,是网站中的一个页面,通常是网页是构成网站的基本元素,是承载各种网站
应用的平台。通俗的说,网站就是由网页组成的。
通常我们看到的网页都是以htm或html后缀结尾的文件,俗称HTML文件。
1.1 HTML概述
HTML全称:Hyper Text Markup Language(超文本标记语言)
超文本标记语言是标准通用标记语言(SGML)下的一个应用,也是一种规范,
一种标准,它通过标记符号来标记要显示的网页中的各个部分。
HTML是一门用户创建网页文档的标记语言,网页文件本身是一种文本文件,通
过在文本文件中添加标记符。
HTML可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,
图片如何显示、包括音频、视频等等如何播放)。
简单一句话:HTML是一门用来创建网页的标记语言。
1.2 HTML特点
其主要特点如下:
1 简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。
2 可扩展性:超文本标记语言采取子类元素的方式,为系统扩展带来保证。
3 平台无关性:超文本标记语言可以使用在广泛的平台上,这也是万维网(www)盛行
的另一个原因。
4 通用性:HTML是网络的通用语言,一种简单、通用的标记语言。
1.3 HTML的发展
超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)
HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日,W3C推荐标准
HTML 4.0——1997年12月18日,W3C推荐标准
HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
W3C : XHTML1.0 -> XHTML1.1 -> XHTML2.0-->(XML) 死路
WHATWG:HTML 5
HTML 5——2014年10月29日,W3C推荐标准
1.3 HTML基本结构
<!--文档声明:告诉浏览器使用HTML5版本 -->
<!DOCTYPE html>
<html>
<!--网页的头部 -->
<head>
<!--设置页面的字符集编码 -->
<meta charset="utf-8" />
<!--设置页面的标题 -->
<title>第一页面</title>
</head>
<!--网页的主体 -->
<body>
<!--需要展示的信息-->
页面内容
</body>
</html>
1.HTML页面包含头部head和主体body
2.HTML标签通常是成对出现的,有开始就有结束,这样的标签称为成对标签、没有结束标签称为空标签。
3.HTML通常都有属性,格式:属性名=“属性值”(多个属性之间空格隔开)
4.HTML标签不区分大小写,建议小写
5.文件名后缀为.html或.htm
第二节 HTML基本标签
2.1 结构标签
<html><html>:根标签
<head></head>:头标签
<title></title>:页面的标题
<body></body>:主体标签:网页内容
属性:
color:文本的颜色 <font color="red">内容</font>
size: 文本的大小1-7 <font size="3">内容</font>
bgcolor:背景色 <body bgcolor="bisque"> </body>
background:背景图片 <body background="图片的地址"> </body>
颜色的表示方式:
第一种方式:使用颜色名称: red green blue skyblue
第二种方式:RGB模式 #000000 #ffffff #325687 #377405
2.2 排版标签
1.注释标签:<!--注释--> ,不要嵌套
2.换行标签:<br/>
3.段落标签:<p>文本文字</p>
特点:段与段之间有行高
属性:align对齐方式 (left:左对齐 center:居中 right:右对齐)
4.水平线标签:<hr/>
属性:
width:水平线的长度(两种:第一种:像素表示;第二种,百分比表示)
size: 水平线的粗细 (像素表示,例如:10px)
color:水平线的颜色
align:水平线的对齐方式(left:左对齐 center:居中 right:右对齐)
2.3 标题标签
<h1></h1>—-<h6></h6>
随着数字增大文字逐渐变小,字体是加粗的,内置字号,默认占据一行;
2.4 容器标签
<div></div>:块级标签,独占一行,换行 ,有高度和宽度
<span></span>:行级标签,所有内容都在同一行, 没有高度和宽度
作用: <div></div>:主要是结合css页面分块布局
<span></span>:进行友好提示信息,突出显示内容
2.5 列表标签
2.5.1 无序列表
ul (unorder list)
无序列表标签: <ul></ul>
属性:type :三个值,分别为
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项:<li></li>
示例如下:
<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
2.5.2 有序列表
ol(order list)
有序列表标签:<ol></ol>
属性:type:1、A、a、I、i(数字、字母、罗马数字)
列表项: <li></li>
示例如下:
<ol type="I">有序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
2.5.3 定义列表
dl (defination list) 定义列表
dt (defination title) 定义标题
dd (defination description) 定义描述
定义列表
<dl>
<dt>苹果</dt>
<dd>苹果是一种水果,富含维生素C,美容养颜,吃了长寿....</dd>
</dl>
2.5.4 列表嵌套
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
2.6 图片标签
<img/> 独立标签
属性:
src:图片地址: 相对路径 (同一个网站) 绝对路径 (不同网站)
width:宽度
height:高度
border:边框
align:对齐方式,代表图片与相邻的文本的相当位置
(有三个属性值:top middle bottom)
alt:图片的文字说明
title:图片的悬停显示
hspace 和 vspace 设定图片边沿上下左右空白,以免文字或其它图片过于贴近
2.7 【链接标签】
超链接可以是文本,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
(1)页面跳转
(2)锚链接
<a>文本或图片</a>
属性:
href:跳转页面的地址(跳转到外网需要添加协议)
target:_self(自己) _blank(新页面,之前页面存在)
_parent _top 默认_self
_search相等于给页面起一个名字,如果再次打开时,如果页面存在,则不再
打开新的页面。可以是任意名字。
name:名称,锚点(回到锚点: 顶部,底部,中间),在访问锚点的书写格式:#name的值
2.8 【表格标签】
表格由 table 标签来定义。每个表格均有若干行(由 tr 标签定义),每行被分割为若干单元格(由 td 标签定义)。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
2.8.1 普通表格
(table,tr,td)
<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度-->
<!--table的 align属性控制表格的对齐方式 left center right-->
<!--td 的align属性控制内容对齐方式 left center right -->
<!--td 的valign属性控制内容对齐方式 top middle bottom -->
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.2 表格的表头
(th)
<table border="1" bordercolor="red" cellspacing="0" align="center">
<caption>学生表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
2.8.3 表格的列合并
colspan 属性
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2">各科成绩</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
<td>80</td>
<td>90</td>
</tr>
</table>
2.8.4 表格的行合并
rowspan属性
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>语文成绩</td>
<td>数学成绩</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">aa</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
</tr>
</table>
2.9 文本格式化标签
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
第三节【HTML表单标签】
HTML表单用于收集不同类型的用户输入
3.1 form标签
常用属性:action:表示动作,值为服务器的地址,把表单的数据提交到该地址上处理
method:请求方式:get 和post
enctype:表示是表单提交的类型
默认值:application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
text/plain 普通文本
get:
1.数据存在地址栏中,请求参数都在地址后拼接 path?name=张三&password=123456
2.不安全
3.效率高
4.get请求大小有限制,不同浏览器有不同,但是大约是2KB
适用情况:一般情况用于查询或删除数据。
post:
1.地址栏没有数据:请求参数单独处理。
2.安全可靠
3.效率低
4.post请求大小理论上无限。
适用情况:一般用于插入修改等操作
3.2 input标签
type: 以下为type可能要取的值:
1.1 text 文本框 输入内容
1.2 password 密码框 密文或者掩码
1.3 radio 表示是单选,name必须一致;value:提交给服务器的数据
表示同一组中只能选中一个( checked ="checked" 表示选中)
1.4 checkbox 表示多选 ,name必须一致,
表示同一组中可以选多个,返回值是个数组( checked ="checked" 表示选中)
1.5 file :表示上传控件
以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取)
以下按钮不具有输入性质,不需要name属性,但是按钮上的文字提示使用value属性
1.6 submit 提交
1.7 reset 重置
1.9 image 图片提交按钮
1.10 button 普通按钮
1.11 hidden 表示隐藏域,该框的内容服务器需要,但是不想让用户知道(不想清楚的显示在界面上)
1.12 email 表示邮箱格式的数据
name属性:表单元素名字,只有name属性才能提交给服务器。
value属性:提交给服务器的数据
placeholder:提示信息
高级属性:
disabled:禁用
readonly:只读
3.3 select标签
下拉列表
<select name="city"> <!--select标签添加该属性multiple="multiple"表示多选 、size表示显示的个数-->
<!--option表示下拉列表项-->
<option value="北京">北京</option>
<!--selected="selected"表示选中该项-->
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
3.4 textarea标签
文本域
需要指定输入的区域位置大小
<textarea cols="100" rows="5">
表示5行100列的区域可以输入内容,该元素没有value属性
3.5 示例及效果图如下
效果图代码如下:
<form action="" method="get">
<table align="center">
<caption>
<h1>注册</h1></caption>
<tr>
<td align="right">用户名:</td>
<td><input type="text" name="username" value="bluesky" /></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="password" name="confirmpwd" /></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked="checked" />女
</td>
</tr>
<tr>
<td align="right">爱好:</td>
<td>
<input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球
<input type="checkbox" name="hobby" value="足球 " />足球
<input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
<input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
</td>
</tr>
</tr>
<tr>
<td align="right">上传头像:</td>
<td>
<input type="file" name="upload" />
</td>
</tr>
</tr>
<tr>
<td align="right">居住地:</td>
<td>
<select name="city">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
</td>
</tr>
</tr>
<tr>
<td align="right">个人介绍:</td>
<td>
<textarea cols="100" rows="5">
</textarea>
</td>
</tr>
</tr>
<tr>
<td></td>
<td align="center">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
第四节 HTML框架标签
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的缺点:
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
4.1 frameset
框架结构标签,把body删掉,使用framset代替body
框架结构标签(<frameset>)定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
实例1
<!--上下分割 上面20%,下面剩余部分-->
<frameset rows="20%,*">
<frame name="frame1" src="top.html">
<frame name="frame2" src="bottom.html" />
</frameset>
实例2
<!--左右分割-->
<frameset cols="20%,*">
<frame name="frame1" src="left.html" />
<frame name="frame2" src="right.html" />
</frameset>
4.2 frame
框架标签
frame 标签定义了放置在每个框架中的 HTML 文档。
4.3 基本的注意事项
1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
2. 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况
发生,可以在 <frame> 标签中加入:noresize="noresize"
3 frameset的属性 frameborder="1|0|yes|no" 表示是否有边框
border="1" 表示边框的粗细 bordercolor表示边框颜色
4.4 效果图及源代码示例
源代码示例:
top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body bgcolor="red">
<h1>HTML的框架标签</h1>
</body>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body bgcolor="#FFA600">
<a href="http://www.qfedu.com">千锋官网</a><br/>
<a href="http://www.qfedu.com">JAVA官网</a><br/>
<a href="http://www.qfedu.com">JAVA在线</a><br/>
</body>
</html>
right.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#00FFFF">
<h1>正文内容</h1>
</body>
</html>
content.html
<!--1.框架标签不能和body同时出现
2.frameset: border去除框架标签的框 ,示例:border="0"
border="10px" bordercolor="yellow"
3.frame框大小不变:两种情况:
第一种:border ="0"
第二种: noresize="noresize" 不改变大小
备注:scrolling是否显示滚动条
yes 显示
no 不显示
auto 如果内容高度超过屏幕高度直接显示滚动,
4. frame 是框,内容使用src来填充,
定位显示到指定位置: 使用name属性
例如:
点击left.html的标签跳转内容显示在right.html
1.给right.html的frame添加name属性,方便定位。
2.在left.html中使用target目标定位,根据name名查找
-->
<frameset rows="200,*" border="10px" bordercolor="yellow">
<frame src="top.html" scrolling="yes" noresize="noresize" />
<frameset cols="200,*">
<frame src="left.html" scrolling="yes" noresize="noresize" />
<frame src="right.html" name="content" scrolling="yes" />
</frameset>
</frameset>
第五节 HTML的其它标签和特殊字符
5.1 其它标签
<!--该网页的关键字-->
<meta name="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta name="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<!--页面自动跳转,2秒后跳转到百度-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--该网页的编码-->
<meta charset="UTF-8"> html5
<!-- href:引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src:js的文件地址-->
<script type="text/javascript" src=""></script>
5.2 特殊字符
< 小于号
> 大于号
& 与字符
" 引号
® 己注册
© 版权
™ 商标
空格
效果图如下:
总结
Html: HyperText Markup Language 超文本标记语言,作用:制作网页
基本结构:
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
基本标签:
(1)结构标签 html head title body
(2)排版p br hr
(3)标题 h1-h6
(4)容器 div span
(5)列表 ul ol dl
(6) 表格 table
(7) 图片 img
(8)超链接 a
(9)格式化标签
表单标签
form
action 表单提交的服务器地址
method 提交方式 get post
enctype 编码类型
表单元素
input
type: text password radio checkbox button submit reset image file hidden email
select :下列列表
textarea:文本域
框架标签
frameset
rows
cols
frame
内联框架 iframe
其他标签
meta
link
script
特殊字符
问题:
1、锚点的作用是什么?如何创建锚点?
锚点是网页制作中超级链接的一种,又叫命名锚记。
命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。
然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。
锚点有2种使用方法:
第一种方法是跳转到当前页面中指定的位置,即单页面跳转;
第二种方法是跳转到其指定的其他页面。
页面内的跳转需要两步:
方法一:
①:设置一个锚点链接<a href="#miao">去找喵星人</a>;
(注意:href属性的属性值最前面要加#)
②:在页面中需要的位置设置锚点<a name="miao"></a>;
(注意:a标签中要写一个name属性,属性值要与①中的href的属性值一样,
不加#)标签中按需填写必要的文字,一般不写内容
方法二:
①:同方法一的①
②:设置锚点的位置 <h3 id="miao">喵星人基地</h3>;在要跳转到的位置
的标签中添加一个id属性,属性值与①中href的属性值一样,不加#
方法二不用单独添加一个a标签来专门设置锚点 ,只在需要的位置的标签
中添加一个id即可。
跨页面跳转:
①:设置锚点链接,在href中的路径后面追加:#+锚点名,即可
如:<a href="萌宠集结号.html#miao">跳转到萌宠集结号页面</a>
②:要跳转到的页面中要设置锚点,方法见一种的步骤②,两个方法任选其一。
2、表单向服务器提交数据有几种方式?这些方式有什么区别?
将表单数据发送给服务器的常用方式有两种:Get和Post。
浏览器发送给服务器的HTTP请求分为:请求头(header)和请求主体(body)两部分。
其中,必须包含头部分,用于指定发送请求的方式、目的地以及其他关键信息;
而主体是可选的。
在头数据和主体数据之间用一个空白行来隔开。
比如,需要发送请求到页面GetStockPrice.php,且需要附带数据Symbol=MSFT。
那么如果使用Get方式发送数据,则简化后的请求数据内容如下所示:
GET /Trading/GetStockPrice.aspx?Symbol=MSFT HTTP/1.1
Host: localhost
如果使用Post方式发送数据,则简化后的请求数据内容如下所示:
POST /Trading/GetStockPrice.aspx HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 11
Symbol=MSFT
由此可见,两种方式的区别主要在于发送数据方式不同。