HTML标记语言
1.HTML的语法
1.什么是HTML标记语言 表示网页信息的符号标记语言 特点
1.可以设置文本的格式,比如标题、字号、文本颜色、段落等等
2.可以创建列表
3.可以插入图像和媒体
4.可以建立表格
5.超链接,可以使用鼠标点击超链接来实现页面之间的跳转
2.HTML的标记和他的属性 标记
1.HTML文档的保存格式
.html
.htm
.xhtml
2.标记和被标记的内容构建出HTML文档 格式
<标记>
内容
</标记>
3.标记的属性
标记的属性,就是用来控制我们的内容(图像、文本等的)如何的显示
格式 <标记 属性1=属性值 属性2=属性值 ... ... >内容</标记>
例如<body bgcolor="red">内容</body>
以上的属性是用来控制我们的网页的背景颜色,bgcolor就是body的属
性,他的值是red(红色)
3.语法不区分字母大小写
<HTML>、<Html>、<html>都是定义相同的标记,但是在编写网页的时
候尽量使用小写
4.文档注释
注释一段内容时使用“<!--”开始,以"-->"结束
例如<!--我是这个网页的作者,我的名字叫做刘阳-->
5.代码格式
空格键和回车键在网页中都不会起到任何作用,我们为了让代码清晰易
读,可以使用空格和回车键进行编排。
注意:缩进时保持严格的规则,以“Tab”键进行缩进!
6.字符实体
1.什么是字符实体?
比如我们想在网页上面显示一个“<”小于符号,但是“<”在HTML中是文档
标记的开始语言,如果我们直接使用“<”会出差错,所以我们就会一些实
体名称来代替!
2.常见的字符实体
显示结果----------描述----------实体名称----------实体编号
---------------------空格---------- ---------- 
<--------------------小于号---------- <---------- <
>--------------------大于号---------- >---------- >
&--------------------和号---------- &---------- &
"--------------------引号---------- " ---------- "
'--------------------撇号---------- ' (IE不支持)---------- '
¢--------------------分---------- ¢---------- ¢
£--------------------镑---------- £---------- £
¥--------------------日圆---------- ¥---------- ¥
€--------------------欧元---------- €---------- €
§--------------------小节---------- §---------- §
©--------------------版权----------©---------- ©
®--------------------注册商标---------- ®---------- ®
™--------------------商标---------- ™---------- ™
×--------------------乘号---------- ×---------- ×
÷--------------------除号---------- ÷---------- ÷
2.html的基本结构
1.<html>内容</html>
解释 HTML文档的文档标记,也称为HTML开始标记
功能 这对标记分别位于网页的最前端和最后端
<html>在最前端表示网页的开始
</html>在最后端表示网页的结束
2.<head>内容</head>
解释 HTML文件头标记,也称为HTML头信息开始标记
功能
用来包含文件的基本信息,比如网页的标题、关键字,在<head></
head>内可以放<title></title>、<meta></meta>、<style></style>等等标
记
注意 在<head></head>标记内的内容不会在浏览器中显示
3.<title>内容</title>
解释 HTML文件标题标记
功能 网页的“主题”,显示在浏览器的窗口的左上边
注意
网页的标题不能太长,要短小精悍,能具体反应页面的内容,<title></
title>标记中不能包含其他标记
4.<body>内容</body>
解释 HTML文档的主体标记
功能
<body>...</body>是网页的主体部分,在此标记之间可以包含如<p></
p>、<h1></h1>、<br>、<hr>等等标记,正是由这些内容组成了我们所
看见的网页
body标记的常见属性
1.bgcolor 设置背景颜色 <body bgcolor="red"></body>
2.text 设置文本颜色 <body text="green"></body>
3.link 设置连接颜色 <body link="blue"></body>
4.vlink 已经访问了的链接颜色 <body vlink="yellow"></body>
5.alink 正在被点击的链接颜色 <body alink="red"></body>
5.<meta>内容</meta>
解释 页面的元信息(meta-information)
功能
提供有关页面的元信息(meta-information),比如针对搜索引擎和更新
频度的描述和关键词。
必须的属性 content 值:some_text 定义与 http-equiv 或 name 属性相关的元信息
常见的属性 1.常用的name属性
1.author
2.keywords
3.description
6.others
把
content
属性
关
联
到
一
个
名
称
。
比如描绘出网页的关键词:<meta name="keywords" content="这是关键
词">
注意meta标记必须放在head元素里面
3.文档设置标记
1.格式标记
1.<br> 强制换行标记 让后面的文字、图片、表格等等,显示在下一行
2.<p> 换段落标记
换段落,由于多个空格和回车在HTML中会被等效为一个空格,所以
HTML中要换段落就要用<p>,<p>段落中也可以包含<p>段落!
3.<center> 居中对齐标记 让段落或者是文字相对于父标记居中显示
4.<pre> 预格式化标记 保留预先编排好的格式
5.<li> 列表项目标记 每一个列表使用一个<li>标记
6.<ul> 无序列表标记 <ul>声明这个列表没有序号
7.<ol> 有序列表标记 可以显示特定的一些顺序
1.格式
<ol type="符号类型">
<li type="符号类型"></li>
<li type="符号类型"></li>
</ol>
2.有序列表的type属性值
1 阿拉伯数字1.2.3等等,默认type属性值
A 大小字母A、B、C等等
a 小写字母a、b、c等等
Ⅰ 大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
ⅰ 小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等
3.value 指定一个新的序列数字起始值
4.列表可以进行嵌套
8.<dl><dt><dd> 定义型列表
使用场合 对列表条目进行简短的说明
格式
<dl>
<dt>软件说明:</dt>
<dd>简单介绍软件的功能及基本应用</dd>
<dt>软件界面</dt>
<dd>用于选择软件的外观</dd>
</dl>
8.<hr> 水平分割线标记 段落之间的分割线
9.<div> 分区显示标记,也称之为层标记
常用来编排一大段的HTML段落,也可以用于格式化表,和<p>很相似
层可以多层嵌套使用
2.文本标记
1.hn 标题标记
共有6个级别,n的范围1~6,不同级别对应显示大小不同的标题,h1最
大,h6最小
2.font 字体设置标记 设置字体的格式 三个常用属性
1.size(字体大小) <font size="14px">
2.color(颜色) <font color="red">
3.face(字体) <font face="微软雅黑">
3.b 粗字体标记
4.i 斜字体标记
6.sub 文字下标字体标记
7.sup 文字上标字体标记
8.tt 打印机字体标记
9.cite 引用方式的字体,通常是斜体
10.em 表示强调,通常显示为斜体字
11.strong 表示强调,通常显示为粗体字
12.small 小型字体标记
13.big 大型字体标记
14.u 下划线字体标记
4.图像标记
<img>图像标记
1.使用方法
<img src="路径/文件名.图片格式" width="属性值" height="属性值"
border="属性值" alt="属性值">
2.<img>标记的属性
1.src属性 作用 指定我们要加载的图片的路径和图片的名称以及图片格式
2.width属性 作用 指定图片的宽度,单位px、em、cm、mm
3.height属性 作用 指定图片的高度,单位px、em、cm、mm
4.border属性 作用 指定图标的边框宽度,单位px、em、cm、mm
5.alt属性
作用1
当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定
的属性文字
作用2 如果图像没有下载或者加载失败,会用文字来代替图像显示
作用3 搜索引擎可以通过这个属性的文字来抓取图片
3.注意
1、<img>为单标记,不需要使用</img>闭合
2.在加载图像文件的时候,文件的路径或者文件名文件格式错误,将无法
加载图片
5.超链接的使用
1.基本语法
<a href="" target="打开方式" name="页面锚点名称" >链接文字或者图
片</a>
属性
1.href属性
链接的地址,链接的地址可以是一个网页,也可以是一个视频、图片、音
乐等等
2.target属性
1.作用 定义超链接的打开方式
2.属性值
1._blank 在一个新的窗口中打开链接
2._seif(默认值) 在当前窗口中打开链接
3._parent 在父窗口中打开页面(框架中使用较多)
4._top 在顶层窗口中打开文件(框架中使用较多)
3.name属性 指定页面的锚点名称
6.表格
1.表格的基本结构
1.<table>标记
1.基本格式<table 属性1="属性值1" 属性2="属性值2" ... ... >表格内容</table>
2.table标记的属性
1.width属性
表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分
百(%)
2.height属性
表示表格的高度,他的值可以是像素(px)也可以是父级元素的百分
百(%)
3.border属性表示表格外边框的宽度
4.align属性表格的显示位置
值
1.left 居左显示
2.center居中显示
3.right居右显示
默认值left
5.cellspacing属性单元格之间的间距,默认是2px,单位像素
6.cellpadding属性单元格内容与单元格边框的显示距离,单位像素
7.frame属性
1.作用控制表格边框最外层的四条线框
2.属性值
1.void(默认值)表示无边框
2.above表示仅顶部有边框
3.below表示仅有底部边框
4.hsides表示仅有顶部边框和底部边框
5.lhs表示仅有左侧边框
6.rhs表示仅有右侧边框
7.vsides表示仅有左右侧边框
8.box包含全部4个边框
9.border包含全部4个边框
8.rules属性
1.作用控制是否显示以及如何显示单元格之间的分割线
2.属性值
1.none(默认值)表示无分割线
2.all表示包括所有分割线
3.rows表示仅有行分割线
4.clos表示仅有列分割线
5.groups表示仅在行组和列组之间有分割线
3.注意这里的rules设置后前面的cellspacing属性就无法使用了
2.<caption>标记
1.什么时候使用1.什么时候使用如果表格需要使用标题,那么就可以使用<caption>标记
2.如何正确使用<caption>属性的插入位置,直接位于<table>属性之后,<tr>表格行之前
align属性属性值
1.top标题放在表格的上部
2.bottom标题放在表格的下部
3.left标题放在表格的左部
4.right标题放在表格的右部
3.<tr>标记
定义表格的一行,对于每一个表格行,都是由一对<tr>...</tr>标记表示,
每一行<tr>标记内可以嵌套多个<td>或者<th>标记
可选属性
1.bgcolor属性
设置背景颜色
格式bgcolor="颜色值"
2.align属性
设置垂直方向对齐方式
格式align="值"
值
1.bottom靠顶端对齐
2.top靠底部对齐
3.middle居中对齐
3.valign属性
设置水平方向对齐方式
格式valign="值"
值
1.left靠左对齐
2.right靠右对齐
3.center居中对齐
4.<td>和<th>
1.<td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,是成对出现
2.两者的区别
1.<th>是表头标记,通常位于首行或者首列,<th>中的文字默认会被加
粗,而<td>不会
2.<td>是数据标记,表示该单元格的具体数据
3.共同之处两者的标记属性都是一样的
4.属性
1.bgcolor设置单元格背景
2.align设置单元格对齐方式
3.valign设置单元格垂直对齐方式
4.width设置单元格宽度
5.height设置单元格高度
6.rowspan设置单元格所占行数
7.colspan设置单元格所占列数
5.课后实战《制作一个简单的网页布局》
7.HTML框架
1.什么是框架?
框架将浏览器划分成不同的部分,每一部分加载不同的网页,实现在同一
浏览器窗口中加载多个页面的效果
2.<frameset>划分框架标记
1.语法格式<frameset>....</frameset>
2.属性
1.cols
使用“像素数”和%分割左右窗口,“*”表示剩余部分
如果使用“*”,“*”表示框架平均分成2个
如果使用“*”,“*”,“*”表示框架平均分成3个
2.rows使用“像素数”和%分割上下窗口,“*”表示剩余部分
3.frameborder指定是否显示边框,0不显示,1显示
4.border设置边框的大小,默认值5像素
3.<frame>子窗口标记
<frame>标记是一个单标记,该标记必须放在<frameset>中使用,在<
frameset>中设置了几个窗口,就必须对应使用几个<frame>框架,而且
还必须使用src属性指定一个网页
属性
1.src加载网页文件的URL地址
2.name框架名称,是链接标记的target所要参数
3.noresize表示不能调整框架大小,没有设置时就可以调整
4.scrolling
是否需要滚动条
值
1.auto根据需要自动出现
2.yes有
3.no无
5.frameborder
是否需要边框
值
1.(1)显示边框
2.(0)不显示边框
8.表单设计
1.表单标记<form>...</form>
<form></form>定义表单的开始位置和结束位置,表单提交时的内容就
是<form>表单中的内容
基本格式
<form action="服务器端地址(接受表单内容的地址)" name="表单名
称" method="post|get">...</form>
常用属性
1.name表单名称
2.method传送数据的方式,分为post和get两种方式
1.get方式
get方式提交时,会将表单的内容附加在URL地址的后面,所以限制了提
交的内容的长度,不超过8192个字符,且不具备保密性
2.post方式
post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服
务器中处理,没有数据大小限制
3.action
表单数据的处理程序的URL地址,如果为空则使用当前文档的URL地址,
如果表单中不需要使用action属性也要指定其属性为”no“
4.enctype设置表单的资料的编码方式
5.target和超链接的属于类似,用来指定目标窗口
2.文本域和密码<input>标记
<input>标记没有结束标记
基本语法<input type="" name="" value="" size="" maxlength="">
属性介绍
1.type属性type属性有两个值
1.text当type="text"时,<input>表示一个文本输入域
2.password当type="password"时,<input>表示一个密码输入域
2.name属性定义控件的名称
3.value属性初始化值,打开浏览器时,文本框中的内容
4.size属性设置控件的长度
5.maxlength属性输入框中最大允许输入的字符数
3.提交、重置、普通按钮
1.提交按钮当<input type="submit">时,为提交按钮
2.重置按钮当<input type="reset">时,为重置按钮
3.普通按钮当<input type="button">时,为普通按钮
4、单选框和复选框
1.单选按钮当<input type="radio">时,为单选按钮
2.复选框当<input type="checkbox">时,为复选框
3.注意
单选框和复选框都可以使用”cheked“属性来设置默认选中项,单选框中的
name是相同的,复选框的name是不同的
5、隐藏域当<input type="hidden">时,为隐藏表单域
6、多行文本域
用法,使用<textarea>标记可以实现一个,能够输入多行文本的区域
语法格式
<textarea name="name" rows="value" cols="value" value="
value"> ... ... <textarea>
rows属性和cols属性分别用来指定,显示的行数和列数,单位是字符个数
7、菜单下拉列表域<select>标记
1.语法格式
<select name="" size="value" multiple>
<option value="value" selected>选项1</option>
<option value="value">选项2</option>
<option value="value">选项3</option>
... ... ...
</select>
2.属性
1.multiple属性
multiple属性不用赋值,其作用是,表示用可以多选的下来列表,如果没
有这个属性就只能单选
2.size属性设置列表的高度
3.name属性定义这个列表的名称
3.option标记
<option>标记用来指定列表中的一个选项,需要放在<select></select>之
间
值
1.value给选项赋值,指定传送到服务器上面的值
2.selected指定默认的选项
8.实战《会员登录表单》