HTML
文章目录
1.HTML
1.1.什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言:HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面1
1.2.HTML的语法结构
1.HTML文件都是以【.html】或者【.htm】结尾的,建议使用【.html】结尾
2.Html文件分为头部分【】和体部分【】
3.Html标签都是由开始标签和结束标签组成
4.Html标签忽略大小写,建议使用小写
2.HTML入门
第一步:新建名为HelloHTML.html的文本文件
第二步:使用记事本打开该文件,写入如下内容
<html>
<head>
<title>我是标题</title>
</head>
<body>
我是内容
<b>我是加粗的文字</b>
</body>
</html>
第三步:使用浏览器打开编写好的文件,即可看到效果
代码解释:
HTML文件中的第一个标签是
<html>
。这个标签告诉浏览器这个 HTML 文件的开始点。文件中最后一个标签是</html>
。这个标签告诉您的浏览器,这是 HTML 文件的结束点。
位于<head>
标签和</head>
标签之间的文本是头信息。头信息不会显示在浏览器窗口中。
<title>
标签中的文本是文件的标题。标题会显示在浏览器的标题栏。
<body>
标签中的文本是将被浏览器显示出来的文本。
<b>
和</b>
标签中的文本将以粗体显示。
3.HTML标签
3.1.HTML 标题
HTML 标题(Heading)是通过<h1>
- <h6>
等标签进行定义的。
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
</body>
This is a heading
This is a heading
This is a heading
3.2.HTML段落标签
HTML 段落是通过
标签进行定义的。
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
这是段落。
这是段落。
这是段落。
段落元素由 p 标签定义。
3.3.HTML水平线标签
<body>
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p><html>
</body>
hr 标签定义水平线:
这是段落。
这是段落。
这是段落。
3.4.HTML字体标签
<font> 规定文本的字体、字体尺寸、字体颜色
<body>
<h1><font face="verdana">AAA</font></h1>
<p>
<font size="5" face="arial" color="red">BBB</font>
</p>
</body>
规定文本的字体、字体尺寸、字体颜色
AAA
BBB
3.5.HTML图像标签
在 HTML 中,图像由<img>
标签定义。
<img>
是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src),src指 “source”。源属性的值是图像的 URL 地址。
其它属性:
width:设置图片的宽度
height:设置图片的高度
alt:当图片无法正常显示时的提示文字
语法:
<img src="url" />
代码示例
<body>
<p>
一幅图像:
<img src="http://photocdn.sohu.com/20160229/mp61032981_1456726265480_2.jpeg" width="250" height="250" />
</p>
<p>
一幅动画图像:
<img src="http://ww2.sinaimg.cn/large/85cccab3gw1ete5uvdyyjg20fa0681cx.jpg" width="250" height="150" />
</p>
<p>插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
一幅图像:
一幅动画图像:
插入动画图像的语法与插入普通图像的语法没有区别。
3.6.列表标签
列表标签分为
有序列表:无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表type属性
- disc实心
- circle空心
- square方块
无序列表:有序列表也是一列项目,列表项目使用数字进行标记。
<body>
<h4>一个无序列表:</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一个有序列表:</h4>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<!--start设置开始的值-->
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
一个无序列表:
- 咖啡
- 茶
- 牛奶
3.7.链接标签
HTML 使用超级链接与网络上的另一个文档相连。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
我们通过使用<a>
标签在 HTML 中创建链接。
有两种使用 <a>
标签的方式:
1.通过使用 href 属性 - 创建指向另一个文档的链接
2.通过使用 name 属性 - 创建文档内的书签
语法:
<a href="url">显示的文本</a>
href 属性规定链接的目标。
使用 Target 属性,你可以定义被链接的文档在何处显示。
开始标签和结束标签之间的文字被作为超级链接来显示。
代码示例
<body>
<!--当前窗口打开百度-->
<a href="https://www.baidu.com/">点击访问百度</a>
<!--新的窗口打开百度-->
<a href="https://www.baidu.com/" target="_blank">点击访问百度</a>
</body>
点击访问百度
<!--新的窗口打开百度-->
<a href="https://www.baidu.com/" target="_blank">点击访问百度</a>
代码示例:列表标签和链接标签配合使用 ```html
```
3.8.表格标签
表格由<table>
标签来定义。每个表格均有若干行(由<tr>
标签定义),每行被分割为若干单元格(由 <td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
代码示例
<body>
<table border="1px" width="450px" height="150px" align="center" bgcolor="pink" cellspacing="0px" cellpadding="0px">
<tr height="100px" bgcolor="gold">
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
代码解释
- 1.border属性:表格的边框属性,默认无边框
- 2.width、height属性:表格的宽高
- 3.align属性:控制表格内容的位置,center为居中
- 4.left:左、right:右
3.9.表格中的表头
使用<th>
来定义表头
<th>
和<td>
的区别:
th中间的内容粗体显示。
th中间的内容默认居中。
th一般用来表格的表头
<body>
<h4>表头:</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>李四</td>
<td>1234567</td>
<td>8888888</td>
</tr>
</table>
<h4>垂直的表头:</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>李四</td>
</tr>
<tr>
<th>电话</th>
<td>8888888</td>
</tr>
<tr>
<th>电话</th>
<td>8888888</td>
</tr>
</table>
</body>
表头:
姓名 | 电话 | 电话 |
---|---|---|
李四 | 1234567 | 8888888 |
垂直的表头:
姓名 | 李四 |
---|---|
电话 | 8888888 |
电话 | 8888888 |
3.10.合并单元格
行合并 rowspan=?
列合并 colspan=?
问号的值为:合并几个单元格,值就写几
示例代码
横跨两列的单元格:
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话(跨两列)</th>
</tr>
<tr>
<td>李四</td>
<td>88888888</td>
<td>88888888</td>
</tr>
</table>
<h4>横跨两行的单元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>李四</td>
</tr>
<tr>
<th rowspan="2">电话(跨两行)</th>
<td>88888888</td>
</tr>
<tr>
<td>88888888</td>
</tr>
</table>
3.11.表格练习题
使用所学习的表格知识,完成如下练习
效果图:
采购申请表 | |||||
部门 | 设备名称 | 采购量 | |||
现部门设备数 | 现集团设备总数 | ||||
采购原因 | |||||
部门负责人签名 | 日期 | ||||
采购部门审批 | 日期 | ||||
总经理审批 | 日期 |
编写7行6列的表格(先不考虑合并单元格),示例代码如下
<table border="1">
<tr>
<td>采购申请表</td>
<td> </td>
<td> </td>
<td></td>
<td></td>
<td> </td>
</tr>
<tr>
<td>部门</td>
<td></td>
<td>设备名称</td>
<td></td>
<td>采购量</td>
<td></td>
</tr>
<tr>
<td>现部门设备数</td>
<td></td>
<td>现集团设备总数</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>采购原因</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>部门负责人签名</td>
<td></td>
<td></td>
<td>日期</td>
<td></td>
<td></td>
</tr>
<tr>
<td>采购部门审批</td>
<td></td>
<td></td>
<td>日期</td>
<td></td>
<td></td>
</tr>
<tr>
<td>总经理审批</td>
<td></td>
<td></td>
<td>日期</td>
<td></td>
<td></td>
</tr>
</table>
编写好单元格后,我们来完成合并单元格
<table border="1">
<tr>
<td colspan="6">采购申请表</td>
</tr>
<tr>
<td>部门</td>
<td></td>
<td>设备名称</td>
<td></td>
<td>采购量</td>
<td></td>
</tr>
<tr>
<td>现部门设备数</td>
<td></td>
<td>现集团设备总数</td>
<td colspan="3"></td>
</tr>
<tr>
<td>采购原因</td>
<td colspan="5"></td>
</tr>
<tr>
<td>部门负责人签名</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
<tr>
<td>采购部门审批</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
<tr>
<td>总经理审批</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
</table>
完善细节
1.设置表头
2.设置单元格间距、边距
3.文本对其方式
4.列的宽度
最终代码如下
<table border="1" cellspacing="0" width="600" cellpadding="10">
<tr align="center">
<th colspan="6">采购申请表</th>
</tr>
<tr align="center">
<td width="100">部门</td>
<td width="100"></td>
<td width="100">设备名称</td>
<td width="100"></td>
<td width="100">采购量</td>
<td width="100"></td>
</tr>
<tr align="center">
<td>现部门设备数</td>
<td></td>
<td>现集团设备总数</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td>采购原因</td>
<td colspan="5"></td>
</tr>
<tr align="center">
<td>部门负责人签名</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>采购部门审批</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>总经理审批</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
</table>
3.12.框架标签
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:
1.开发人员必须同时跟踪更多的HTML文档
2.很难打印整张页面
代码示例
在下面的代码中,我们设置了一个框架集。左边被设置为占据浏览器窗口的 25%。右边被设置为占据浏览器窗口的 75%。HTML 文档 “left.htm” 被置于左边,而 HTML 文档 “right.htm” 被置于右边
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<frameset cols="25%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</html>
Left.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
左侧内容
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
右侧内容
</body>
</html>
Frameset(框架集)中常用的属性
frame(框架)中常用的属性
3.13.框架使用案例
效果图
使用框架对界面进行分区,分别为上、中左、中右、下
点击百度、新浪可以在中右处显示对应的网页数据
index.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="10%,*,10%">
<frame src="top.html" noresize="noresize" />
<frameset cols="30%, *">
<frame src="left.html" noresize="noresize" />
<frame src="right.html" name="Right" />
</frameset>
<frame src="bottom.html" noresize="noresize" />
</frameset>
</html>
top.index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="7">欢迎XXXX进入后台管理系统</font>
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html" target="right">会员管理</a><br /><br />
<a href="#">品牌管理</a><br /><br />
<a href="#">商品管理</a><br /><br />
<a href="#">分类管理</a>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
所有用户信息、
</body>
</html>
2.网页注册界面实现
2.1.表单
HTML 表单用于搜集不同类型的用户输入。
语法格式
<form>
form elements
</form>
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
执行流程
在页面上有一个表单
客户录入数据,点击提交按钮(提交文字自定义,也可以是注册),数据使用键值对的形式发送给服务器,多个数据中间使用【&】分隔,如下图所示
2.2.表单元素
<input>
元素
<input>
元素是最重要的表单元素。
<input>
元素有很多形态,根据不同的 type 属性,有不同的效果,常用值如下:
- type= “text” 文本输入域
- type =“password” 密码输入域
- type=“checkbox” 复选框
- type=“radio” 单选按钮
- type=“file” 文件上传
- type=“hidden” 隐藏域
- type=“button” 按钮(不提交表单信息)
- type=“sumbit” 按钮(提交表单信息)
- type=“reset” 按钮 (重置表单信息)
select (下拉列表)
<option>
元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
可以通过添加 selected 属性来定义预定义选项。
<option value="fiat" selected>Fiat</option>
示例代码
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
如果不指定value的值,则提交的是标签中间的内容
textarea
多行文本域
- rows=" " 行
- clos=" " 列
- name=" " 名称
示例代码
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<button>
元素
<button>
元素定义可点击的按钮:
示例代码
<button type="button" onclick="alert('Hello World!')">点我</button>
表单代码示例
<body>
<form action="#">
用户名:<input type="text" /><br />
密码:<input type="password" /><br />
确认密码:<input type="password" /><br />
性别:
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女<br />
爱好:
<input type="checkbox" name="hobby" />钓鱼
<input type="checkbox" name="hobby" />摄影
<input type="checkbox" name="hobby" />写代码<br />
头像:<input type="file" /><br />
籍贯:
<select name="province">
<option>--请选择--</option>
<option>南京</option>
<option>无锡</option>
<option>徐州</option>
</select><br />
自我介绍:
<textarea> </textarea><br />
提交按钮:
<input type="submit" value="注册" /><br />
普通按钮:
<input type="button" value="defalutBtn" /><br />
重置按钮:
<input type="reset" />
</form>
</body>
2.3.表单输入属性
value 属性
value属性规定输入字段的初始值
代码示例
<form action="">
用户名:<br>
<input type="text" name="name" value="ZhangSan">
</form>
readonly属性
readonly 属性规定输入字段为只读(不能修改)
示例代码
<input type="text" name="name" value="ZhangSan" readonly>
disabled 属性
- 1.disabled 属性规定输入字段是禁用的。
- 2.被禁用的元素是不可用和不可点击的。
- 3.被禁用的元素不会被提交。
代码示例
<form action="">
用户名:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
size 属性
size 属性规定输入字段的尺寸(以字符计)
<input type="text" name="name" value="LiSi" size="40">
maxlength 属性
maxlength 属性规定输入字段允许的最大长度
<input type="text" name="name" maxlength="10">
2.4.表单案例代码
使用表格配合表单完成如下效果
示例代码
<body>
<form>
<table cellspacing="0" border="1" width="50%" align="center">
<tr>
<td>输入姓名</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>输入密码</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td>选择性别</td>
<td>
<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" />女
</td>
</tr>
<tr>
<td>选择爱好</td>
<td>
<input type="checkbox" name="love" value="lq" />篮球
<input type="checkbox" name="love" value="zq" />足球
</td>
</tr>
<tr>
<td>选择附件</td>
<td>
<input type="file" name="myfile" />
</td>
</tr>
<tr>
<td>选择城市</td>
<td>
<select name="city">
<option value="none">--请选择--</option>
<option value="bj">北京</option>
<option value="dj">东京</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="reset" />
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
3.HTML div 和 span
3.1.HTML div 元素
HTML
<div>
元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div>
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div>
元素可用于对大的内容块设置样式属性。
<div>
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用
<table>
元素进行文档布局不是表格的正确用法。<table>
元素的作用是显示表格化的数据。
代码示例
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
DIV使用案例
<body>
<p>我是文本</p>
<div class="news">
<h2>新闻标题</h2>
<p>简短摘要,简短摘要,简短摘要</p>
</div>
<div class="news">
<h2>新闻标题</h2>
<p>简短摘要,简短摘要,简短摘要</p>
</div>
</body>
上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起,也就是说,div 为文档添加了额外的结构。
同时,由于这些 div 属于同一类元素,所以可以使用 class=“news” 对这些 div 进行标识,这么做不仅为 div 添加了合适的语义,而且便于进一步使用样式对 div 进行格式化,可谓一举两得
3.2.HTML span 元素
HTML<span>
元素是内联元素,可用作文本的容器。
<span>
元素也没有特定的含义。
当与 CSS 一同使用时,<span>
元素可用于为部分文本设置样式属性。
span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
示例代码
<p><span>some text.</span>some other text.</p>