目录
一、HTML简介
1.1什么是HTML?
HTML是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
1.2HTML的作用
Web浏览器的作用是读取html文档,并以网页的形式显示它们。浏览器不会显示html标签,而是使用标签来解释页面上的内容,
简单说,html就是通过标签的形式将信息展示给用户的。
1.3HTML书写规范
1.3.1HTML标签
HTML标记标签通常被称为HTML标签(HTML tag),
- HTML 标签是由尖括号包围的关键词,比如<html>
- HTML 标签通常是成对出现的,比如<b>和</b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 绝大多数的标签都具有属性,建议属性值使用引号引起。例如:<body text=”red”>(多个属性之间用空格隔开)
- 大多数标签是可以嵌套的
1.3.2HTML创建
HTML文件可以直接使用文本编辑器来创建,保存时,后缀名为html或htm,
整个文件是在<html>与</html>标签之间,在<html>标签间有<head>与<body>子标签。
例如:
<html>
<head>
包括资讯信息:整个页面的属性、指导浏览器解析的标签、引入外部文件的标签
</head>
<body>
我们需要展示的信息
</body>
</html>
1.3.3空的HTML标签
没有内容的 HTML 元素被称为空元素,空元素是在开始标签中关闭的,
- <br> 就是没有关闭标签的空元素(<br> 标签定义换行)
- 在开始标签中添加斜杠,比如 <br/>,是关闭空元素的正确方法,HTML、XHTML 和 XML都接受这种方式
- 即使 <br> 在所有浏览器中都是有效的,但使用 <br/> 其实是更长远的保障
1.3.4HTML大小写不敏感
HTML 标签对大小写不敏感:<P> 等同于 <p>,许多网站都使用大写的 HTML 标签,
W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写
这里建议用小写。
二、html基本标签
html的基本标签主要包括:
- 文件标签
- 排版标签
- 块标签
- 文字标签
- 清单标签
- 图形标签
- 链接标签
- 表格标签
2.1文件标签
文件标签也叫结构标签,一般有以下几种,
<html><html>:根标签
<head>
<title>页面的标题</title>
</head>
<body>内容</body>
其中body主要有以下三个属性:
- text:文本的颜色
- bgcolor:背景色
- background:背景图片
颜色的三种表示方式:
- 单词:red green black
- rgb三原色:reg(0,0,0) 0-255
- 16进制:#000000 #ffffff #325687 #877405
我们实际编写一个网页测试一下效果,
<html>
<head>
<title>测试标题</title>
</head>
<body text="green" bgcolor="gray" background="image/1.png">
html<font color="red" size="20">测试</font>
</br>
换行测试
</body>
</html>
背景图片1.png我们存放在demo.html同路径下的image文件夹中,
然后是网页效果:
2.2排版标签
- 注释标签:<!--注释-->
- 换行标签:<br/>
- 段落标签:<p>文本文字</p>
- 特点:段与段之间有空行
- 属性:align,对齐方式(有三个属性值:left center right)
- 水平线标签:<hr/>
- 属性:
- width:长度
- size:粗度
- color:颜色
- align:对齐方式
- 尺寸的写法:
- 像素:10px
- 百分比:占据副标签的百分比,会随着副标签的大小进行变化
- 属性:
我们用代码测试一下排版标签,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
注释标签
-->
<p>
第一段<br/>
第一行<br/>
第二行<br/>
</p>
<hr width="100" size="3" color="red" align="left"/>
<p>
第二段<br/>
第一行<br/>
第二行<br/>
</p>
</body>
</html>
下面是网页效果:
2.3块标签
块标签主要有两种,
- <div></div>:行级块标签,一般结合css进行网页的布局
- <span></span>:行内块标签,一般用于友好提示(比如网站注册时提示用户名密码的要求提示)
下面我们通过代码演示一下两个的区别,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red">div1</div>
<div style="background-color: orange">div1</div>
<span style="background-color: blue">span1</span>
<span style="background-color: green">span2</span>
</body>
</html>
下面是网页效果:
2.4文字标签
- 基本文字标签:<font></font>
- 属性:
- color:颜色
- size:大小(最大值7,最小值1,默认为3)
- face:字体类型,即字体
- 属性:
- 标题标签:<h1></h1>至<h6></h6>,随着数字的增大标题逐渐变小
下面我们通过代码测试一下文字标签如何使用,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<font color="red" size="5" face="黑体">
基本文字标签
</font>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
网页显示如下:
2.5清单标签(列表标签)
清单标签又叫列表标签,其中又分为无序列表和有序列表,
- 无序列表:<ul></ul>
- 列表项:<li></li>
- 属性:
- type:有三个值,分别为disc、 square和circle,默认为disc小黑点
- 示例:<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
- 有序列表:<ol></ol>
- 列表项:<li></li>
- 属性:
- type:编号可取1、A、a、I、i(数字、字母、罗马数字),默认为数字
- start:数字,代表首项开始位置
- 示例:<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
列表标签一般用于实现菜单项,可以实现横向或者纵向菜单,
无序列表标签的小圆点在HTML中不能直接去掉,需要在CSS中给li标签添加样式list-style:none
下面我们用代码测试一下清单标签,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="circle">
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>
<ol type="A" start="2">
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>
</body>
</html>
网页效果如下:
2.6图形标签
图形标签一般用<img />表示(自关闭标签,不用额外写</image>),
用于加载图片的标签,有以下几个主要属性:
- src:图形地址
- width:图片宽度
- height:图片高度
- border:边框
- align:对齐方式,代表图片与相邻的文本相对位置,可设置为top、middle、bottom
- alt:图片的文字说明(一般图片加载不出来时会显示这个提示说明)
我们用代码理解一下图形标签的使用,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="image/1.PNG" width="50%" height="70%" border="5" align="middle" alt="overwatch"/>
测试
</body>
</html>
网页效果:
当图片加载不出来的时候,会显示图片的说明,
2.7链接标签
链接标签用<a></a>表示,有以下几个主要属性,
- href:跳转页面地址
- name:名称,锚点
- target:_self(自己) _blank(新页面,打开新页面后之前的页面还有), 默认是_self,点击时会覆盖掉之前的网页内容
其作用有两点:
- 页面跳转,注意:要跳到外网必须要加协议http://等
- 访问锚点;回到锚点(顶部、底部、中间),在访问锚点时的书写格式:#name的值
下面我们用代码理解一下,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#bottom" name="top">到达底部</a><br/>
<a href="demo.html" target="_blank">demo</a><br/>
<a href="http://www.baidu.com" target="_blank">百度</a><br/>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
<a href="#top" name="bottom">返回顶部</a>
</body>
</html>
网页效果:
点击到达底部:
点击跳转本地demo.html:
点击跳转百度:
2.8表格标签
表格标签即在网页中用于显示表格的标签,
- <table></table>:表格标签
- 属性:
- border:表格边框
- width:表格的宽度
- align:表格的对其方式
- bgcolor:背景颜色
- 属性:
- <tr></tr>:代表行,align="center"设置该行所有单元格里面的内容居中对齐
- <td></td>:代表单元格
- 属性:
- colspan:列合并
- rowspan:行合并
- 属性:
- <th></th>:相等于<td>, 只是内置样式加粗居中
- <caption></caption>:表格的标题,即表头
其作用有两点:
- 显示表格
- 进行布局
下面我们先看看如何代码显示一个表格,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="50%" align="center" bgcolor="red">
<caption>测试表格</caption>
<tr align="center">
<td colspan="2">1-1&1-2</td>
<!--<td>1-2</td>-->
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1<br>3-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!--<td>3-1</td>-->
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
网页效果:
布局的话一般我们使用<thead></thead>、<tbody></tbody>、<tfoot></tfoot>将表格进行分块(现在使用不多),
其作用是分块加载,不用加载完所有表格才显示出来,用户体验比较好,
2.9基本标签练习——图书商城
我们现在通过所学知识写一个图书商城的html例子,
我们进行代码实现,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My BookStore</title>
</head>
<body>
<!--整个页面-->
<div id="page">
<!--top-->
<div id="top">
<table width="100%">
<tr>
<td align="left"><img alt="logo" src="images/logo.png"></td>
<td align="right">
<img alt="cart" src="images/cart.gif">
<a href="#">购物车</a>|<!--href="#"跳转到本页面-->
<a href="#">帮助中心</a>|
<a href="#">我的账户</a>|
<a href="#">新用户注册</a>
</td>
</tr>
</table>
</div>
<!--menu-->
<div id="menu">
<table bgcolor="#006400" width="100%">
<tr>
<td align="center">
<a href="#"><font color="white">文学</font></a> <!--" "为空格-->
<a href="#"><font color="white">生活</font></a>
<a href="#"><font color="white">计算机</font></a>
<a href="#"><font color="white">外语</font></a>
<a href="#"><font color="white">经管</font></a>
<a href="#"><font color="white">励志</font></a>
<a href="#"><font color="white">社科</font></a>
<a href="#"><font color="white">学术</font></a>
<a href="#"><font color="white">少儿</font></a>
<a href="#"><font color="white">艺术</font></a>
<a href="#"><font color="white">原版</font></a>
<a href="#"><font color="white">科技</font></a>
<a href="#"><font color="white">考试</font></a>
<a href="#"><font color="white">生活百科</font></a>
<a href="#"><font color="yellow">全部商品</font></a>
</td>
</tr>
</table>
</div>
<!--search-->
<div id="search" >
<table width="100%" bgcolor="#B6B684">
<tr align="right"><!--设置单元格居中-->
<td>
Search
<input type="text"/>
<input type="button" value="搜索">
</td>
</tr>
</table>
</div>
<!--content-->
<div id="content">
<div align="right"><!--">"为大于号">"-->
<a href="#">首页</a>>
<a href="#">旅游</a>>
<a href="#">图书列表</a>
</div>
<h1>商品目录</h1><hr/>
<h2>计算机类</h2>
<span>共xx种商品</span><hr/>
<div><img alt="productlist" width="100%" src="images/productlist.gif"></div>
<!--book-->
<div>
<table width="100%">
<tr align="center">
<td>
<div><img src="bookcover/101.jpg"></div>
<div>书名:时空穿行</br>售价:25元</div>
</td>
<td>
<div><img src="bookcover/102.jpg"></div>
<div>书名:感悟</br>售价:20元</div>
</td>
<td>
<div><img src="bookcover/103.jpg"></div>
<div>书名:赢在影响力</br>售价:25元</div>
</td>
<td>
<div><img src="bookcover/104.jpg"></div>
<div>书名:谁动了我的奶酪</br>售价:15元</div>
</td>
</tr>
<tr align="center">
<td>
<div><img src="bookcover/105.jpg"></div>
<div>书名:培育男孩</br>售价:35元</div>
</td>
<td>
<div><img src="bookcover/106.jpg"></div>
<div>书名:别做正常的傻瓜</br>售价:30元</div>
</td>
<td>
<div><img src="bookcover/107.jpg"></div>
<div>书名:学会宽容</br>售价:20元</div>
</td>
<td>
<div><img src="bookcover/euro.jpg" width="130"></div>
<div>书名:欧洲</br>售价:25元</div>
</td>
</tr>
</table>
</div>
</div>
<!--bottom-->
<div id="bottom">
<table width="100%" bgcolor="#EFEEDC">
<tr>
<td rowspan="2" width="50%">
<img src="images/logo.png"></td>
<td>CONTACT US</td>
</tr>
<tr>
<td>copyright 2021 © BookStore All Rights Reserved</td>
</tr>
</table>
</div>
</div>
</body>
</html>
网页效果,
三、HTML表单标签
表单元素是允许用户在表单中输入内容,用form表示,
比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
3.1form标签
表单使用表单标签 <form> 来设置,
- 属性:
- name:表单名称
- action:提交的路径地址
- method:提交方式(get和post)
- 实例:<form>
<table>
<!--form里面嵌套table-->
</table>
</form>
其中提交方式有get和post两种(默认为get),get和post的区别为(重点):
- 提交方式
- get提交将数据加在地址栏的后面,格式为:?username=value&password=value.....
- post提交将数据封装在请求体中:username=value&password=value#
- 安全性
- get提交相对不安全
- post提交相对安全
- 大小限制
- get提交有大小限制
- post不限制大小
3.2input标签
input标签一般用于需要用户输入数据,放在表单标签中,
input标签使用方式为<input type=""/>,根据type属性实现各种不同功能的表单项,
- text:普通的文本输入框
- name:设置文本输入框的名字
- value:设置文本输入框的默认值
- password:密码输入框,特点是显示的是掩码
- radio:单选按钮
- name:如果想让一组单选按钮互斥,就用指定name属性值相同,需要加value属性值
- checked:默认被选中
- checkbox:复选框
- name:组的概念,需要加value属性值
- checked:默认被选中
- file:上传文件的控件
- button:普通按钮,没有任何内置的功能
- submit:内置功能,点击会按照action地址提交
- reset:重置,点击会清空之前填写的内容
- image:图片按钮,功能类似与submit,点击图片时也会按照action地址提交
- src:加载图片的路径
- alt:图片的提示文字
- hidden:隐藏表单,作用是在提交数据的时候,服务器需要这个数据,但是不需要用户看到
注意:input标签name属性必须要写,否则后台无法通过name属性找到提交的数据
3.3select标签
select标签:下拉菜单,(<select></select>),主要有两个属性,
- name:下拉菜单的名称
- option:可选项(下拉菜单之间的级联)
- value:选项的值
- selected:默认被选中
3.4textarea标签
文本域标签用于显示文字,
- cols:文本域列数
- rows:文本域行数
四、HTML框架标签及其他
4.1框架标签
框架将整个页面分为不同的部分,每个部分显示独立的html网页,一般我们通过frameset和frame属性进行设置,
- frameset属性:
- 划分格式为:rows="120,*",意思为第一个框架按行划分120行,第二个框架为剩余行
- cols:按列划分
- rows:按行划分
- frame属性:
- name:名称,方便target根据name的值进行定位
- src:加载的页面地址
下面我们通过代码测试一下框架标签如何使用,
<!--FrameLabel.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<frameset rows="80,*">
<frame name="top" src="top.html">
<frameset cols="150,*">
<frame name="lowLeft" src="left.html">
<frame name="lowRight" src="right.html">
</frameset>
</frameset>
</html>
<!--top.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
top
</body>
</html>
<!--left.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="menu1.html" target="lowRight">menu1</a><br/>
<a href="menu2.html" target="lowRight">menu2</a><br/>
<a href="menu3.html" target="lowRight">menu3</a><br/>
</body>
</html>
<!--right.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
left
</body>
</html>
<!--menu1.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
menu1
</body>
</html>
<!--menu2.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
menu2
</body>
</html>
<!--menu3.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
menu3
</body>
</html>
网页效果:
4.2其他标签
- <meta>指导浏览器解析的标签
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <link>
- <link rel="stylesheet" type="text/css" href="./styles.css">
- rel:引入文件与原网页的关系
- type:文件的类型
- href:引入css文件的地址,css作用是修饰html
- <link rel="stylesheet" type="text/css" href="./styles.css">
- <script>
- <script type="text/javascript" src=""></script>
- type:文件的类型
- src:引入js的文件地址,js作用是动态修改html的代码
- <script type="text/javascript" src=""></script>
4.3特殊字符
- 为空格
- >为大于号
- <为小于号
- ©为版权符号
- ®为注册符号