一、HTML概述
HTML：Hyper Text Markup Language 超文本标记语言
- 超文本：比文本功能更加强大
- 标记语言：通过一组标签对内容进行描述的一门语言
HTML的语法和规范
- HTML文件的扩展名是.html或者是.htm
- HTML文件是由头和体组成
- HTML这组标签是不区分大小写
- HTML的标记通常是由开始标签和结束标签组成：<b>内容</b>
二、HTML标签
【HTML的字体标签】
<font>标签
<font 属性名=”属性值”>文字</font>
* size:控制字体大小.最小1 最大7
* color：控制字体颜色. 使用英文设置 ，使用16进制数设置
* face：控制字体.
【HTML的排版标签】
<hn>标题标签
<h1>b标题</h1>
<p>段落标签
<p>一段文字</p>
<br/>换行标签
<br/>代表换行
<hr/>水平线标签
<hr/>水平线标签
<b>字体加粗
<b>文字</b>
<i>斜体标签
<i>斜体</i>
【HTML的图片标记】
<img />
src：图片的路径
width：图片宽度
height：图片的高度
alt：图片提示
图片路径：
分成相对路径和绝对路径
相对路径:
./ :代表当前路径
../ :代表上一级路径
【HTML的列表标签】
无序列表
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
有序列表
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
【超链接标签】
<a>超链接</a>
href：超链接跳转的路径
target：打开方式
_self：在自身页面打开
_blank：打开一个新窗口
【HTML的表格标签】
表格标签：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格的属性：
border ：表格边框
width ：表格宽度
height ：表格高度
align ：水平方向对齐方式 left center right
bgcolor ：背景色
【HTML的表单标签】
表单标签：
需要提交的表单需要使用<form></form>括起来
action：提交路径
method：提交方式
文本框:
<input type=”text”/>
name
value
size
maxlength
readonly
密码框：
<input type=”password”/>
单选按钮：
<input type=”radio”/>
Checked：默认选中
复选框
<input type=”checkbox”/>
Checked：默认选中
下拉列表框
<select><option></option></select>
Selected：默认选中
Multiple：全部显示
文件上传项
<input type=”file” name=”file”/>
文本区
<textarea name=”” cols=”” rows=””></textarea>
提交按钮
<input type=”submit” value=”注册”>
重置按钮
<input type=”reset” value=”重置”>
普通按钮
<input type=”button” value=”普通按钮”>
隐藏字段
<input type=”hidden” name=”id”/>
提交方式：
GET ：默认值
提交的数据都会在地址栏中进行显示
提交的数据的时候是有大小的限制
POST：
提交的数据不会再地址栏中进行显示
提交的数据没有大小限制
【HTML的框架标记】
<frameset>
</frameset>
* 使用了frameset标签，不需要使用body.
* 属性：
* rows：横向切分页面
* cols：纵向切分页面
<frame>标签代表切分每个部分的页面
* src：引入页面的路径
示例：
步骤一：先将页面切分成上下两个部分。
步骤二：将下部分切分成左右两个部分。
步骤三：分别引入不同的页面。
框架.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,*">
<frame src="top.html" />
<frameset cols="15%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
</html>
效果：
frameset.png
点击左侧的分类管理或商品管理，将数据放入到表格中显示到右侧区域中：
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2><a href="rygl.html" target="right">人员管理</a></h2>
<h2><a href="xtgl.html" target="right">系统管理</a></h2>
</body>
</html>
网友评论