nullHTML语法HTML语法§1 HTML基础§1 HTML基础HTML
建立与测试网页
标记符
Web页的结构
设置页面属性
添加注释
显示特殊字符
null一、HTML(HyperText Markup Language)
——超文本标记(标签)语言,是表示网页的一种规范
——一组影响网页内容显示的标记符的集合
使用HTML语言描述的文件,能独立于各种操作系统平台(如UNIX,WINDOWS等),访问它只需要一个WWW浏览器,我们所看到的网页,是浏览器对HTML文件进行解释的结果。null二、测试和创建Web页
1.网页编辑工具
纯文档编辑工具——记事本
所见即所得工具——FrontPage 、Dreamweave
2.网页创建步骤(使用“记事本”创建网页)
打开“程序/附件/记事本”
在“记事本”的窗口中输入HTML代码
选择“文件”菜单的“另存为”命令
在“文件名”框中输入网页的名称,文件名必须以.html或.htm为后缀名
单击保存
3.网页测试
IE
工具即现null三、标记符
1.标记符的定义:
——HTML语言通知浏览器如何显示网页内容的方式
2.标记符的形式:
所有标记符都用尖括号括起来
绝大多数标记符是成对出现的,即包括开始标记符和结束标记符,个别是单一标记符。例如:
、
、
开始标记符和结束标记符定义了标记符所影响的范围,它们的区别是结束标记符多了一个斜线/,例如:
好好学习 天天向上
不区分大小写,但为了可读性和维护性,使用大写
这是H1格式的字体
这是默认格式的字体
null3.标记符的属性
作用——
位置——
形式——
红色一号的文字
学习和掌握HTML的关键:
HTML标记符及其属性
对标记符作用的内容进行更详细的控制开始标记符的尖括号里,与标记符之间用空格隔开,属性值跟在相应的属性之后,用等号连接,不用属性之间用空格隔开小写null四、 Web页的结构
HTML 必须包含的基本结构标记符:
HTML标记:
头标记:
标题标记:
正文标记:
三大结构:
HTML标记
Web页的第一个和最后一个标记符
Web 页的其他所有内容都位于这对标记符之间
HTML标记符告诉浏览器或其他阅读该页的程序,此文件为一个Web页
不包含其它属性首部标记
位于 Web 页的开头,不包括 Web 页的任何实际内容,提供一些与 Web 页有关的特定信息
通常包含一下标记符:
标题标记符——
META标记符——
BGSOUND 标记符——
正文标记符
包含 Web 页的具体内容,包括文字、图形、超链接及其他各种 HTML 对象。
正文标记符中的文字——
如果没有其他标记符修饰,正文标记符中的文字将以无格式的形式显示
如果浏览器窗口显示不下,则自动换行
空格、回车这些格式控制在显示时都不起作用null标题标记符——
用于定义网页的标题,并在浏览器窗口的标题栏中显示
网页标题可被浏览器用作书签和收藏清单
这是网页标题
请看浏览器的标题栏。
null例子:
网页标题
正文,正文,正文,正文,
正文,正文,正文,正文,
正文
nullMETA标记符——
用于描述不包含在
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
HTML里的一些文档信息,例如开发工具,作者,网页关键字,网页描述等。这些定义的内容并不在网页页面中显示,但是一些搜索引擎可以检索这些信息,浏览者可以根据这些关键字或描述查找到该网页。
常用功能是设置自动转址功能——使浏览器自动从一个地址跳转到另一个地址
位置
META 标记符的常用属性包括:name、 content和 http-equiv
name 属性给出特性名
content 属性给出特性值
http-equiv 属性指定 HTTP 响应名称,通常用于替换 name 属性,HTTP 服务器使用该属性值为 HTTP 响应消息头收集信息null例1
设置客户端行内程序的语言是 JavaScript
例2
设置行内样式的样式语言为 CSS
例3
META示例
再过10秒钟,我就上学校的网站了!
null
我的第一个网页
例4五、设置页面属性五、设置页面属性正文标记符包括一些常用属性,可以用于设置网页背景颜色和图案,以及设置文档中文字和超链接的颜色
设置页面背景颜色—— bgcolor
设置页面背景图像—— background
使用背景图案时,如果图案小于浏览器窗口的大小,则浏览器会自动象铺地板砖一样平铺背景图案。
可以同时设置背景图案和背景色,以便在不能显示图像的浏览器上显示背景色null页面基本属性——定义在中
background=" " 背景图片文件名
bgcolor= " "背景颜色
text =" "文本默认颜色
link =" "未被访问链接源文字的颜色
alink =" "被激活链接源文字的颜色
vlink =" "访问过链接源文字的颜色
topmargin =" " 信息内容的顶边距离
leftmargin =“ ”信息内容的左边距离
背景音乐标记符——
用于指定网页的背景音乐
属性
src,用于指定背景音乐的源文件。
loop,用于指定背景音乐重复的次数,如果不指定该属性,则背景音乐无限循环
例子
表 1-1 16 种标准颜色
表 1-1 16 种标准颜色
null浏览器将采用默认的设置
bgcolor——白色或灰色
text —— 黑色
Link —— 蓝色
vlink —— 紫色
alink —— 红色
例子:
null
背景图案示例
背景图案示例
六、添加注释六、添加注释注释的作用
HTML 注释的格式
由开始标记符 构成
标记符之间的任何内容都将被浏览器解释为注释,而不在浏览器中显示
例子:
网页标题
正文,正文,正文
注释可插入在 Web 页的任何位置七、显示特殊字符 七、显示特殊字符 特殊字符——参考字符(附录 2 )
参考字符以“ & ”号开始,以“ ; ”结束
参考字符既可用数字代码表示,也可用代码名称表示
与HTML标记符同,字符代码名称区分大小写
例子:
<Tom & Jerry> is a popular VCD program.
is a popular VCD program
小结 小结
WWW由无数的Web服务器构成,通过浏览器访问这些服务器上的网页,不同的网页通过超链接联系在一起,构成了WWW的网状结构。
HTML是表示网页的一种规范,它通过标记符定义了网页内容的显示。
最基本的HTML标记符包括:
HTML标记符和
首部标记和
正文标记和。
BODY标记符包括一些常用属性,用于控制网页的基本显示效果。
发布网页的基本过程为:制作本地站点、申请网页空间、上传网页。 §2 文本控制§2 文本控制字体控制标记符
物理字符样式
滚动文字效果
文本分段
文本对齐
列
表格
关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载
式
一、字体控制标记符——< FONT> < /FONT>一、字体控制标记符——< FONT> < /FONT>size 属性——控制字符的大小size=" "
字号从1~7,字号越大,默认值为3
color属性——控制字符的颜色color=" "
使用颜色名称或十六进制值指定颜色
face 属性——指定字体样式face =" "
常用的英文字体有“Times New Roman”、“Arial”等
常用的中文字体有“宋体”、“楷体”等
例子:
例子一
例子二
例子三
例子四null二、物理字符样式
指标记符本身就说明了所修饰文字的效果的字符样式
使用方法:将设置格式的字符括在标记符之间
由于带有超链接的文本下通常包含下划线,因此下划线格式易让人产生误解,建议使用时慎重
常见的物理字符样式null
物理字符样式效果示例
此处为粗体显示文本
此处为大字体文本
此处为小字体文本
此处为斜体文本
此处为等宽字体文本
此处为下划线文本
此处为使用<S>标记设置的删除线文本
此处为使用<STRIKE>标记设置的删除线文本
此处为上标示例:x2 + y2 = R2
此处为下标示例:H2SO4
null三、滚动文字效果——
作用:标记符之间的内容以滚动的方式显示
属性:
width 和height——滚动字幕滚动区域的宽度和高度
align——滚动字幕与周围对象对齐的方式
behavior——滚动字幕移动的方式
bgcolor ——滚动字幕区域的背景色
direction ——文本滚动的方向
hspace和vspace ——滚动字幕四周水平和垂直方向上的间隙
loop ——滚动重复的次数
scrollamout ——文本滚动的步进象素间距
scrolldelay ——两次文本重画之间的毫秒延时数null
滚动字幕示例
图像也可以滚动哦!
我滚动的很快!
null四、文本分段
1.段落标记符——< P> < /P >
将文档划分为段落
可以省略< /P >
2.换行标记符——
在文档中强制断行
区别:
不能产生多个空行,而
则可在内容之间设置多个空行,即形成空白
是断段,而
是断行
null
<P>与<BR>的用法
第一段
第二段,用<BR>标记符控制断行
仍然为第二段,但此行已经断开
第三段
第四段,多个<P> 标记符并没有起到产生多个空行的效果
但多个<BR>标记符可以产生多个空行效果
此为最后一段
null3.水平线标记符——
在网页内容中添加水平线,分隔文档内容
属性:
size:水平线的粗细程度,用整数表示,默认值为2
width:水平线的长度,用像素长度或宽度的百分比表示
noshade:去除水平线的3D样式
color:水平线的颜色
align:水平线的对齐方式
例子:
null
水平线效果
以下是默认水平线:
以下是粗为 5 像素的水平线:
以下是长度为100像素的水平线:
以下是长度为屏幕宽度 50% 的水平线:
以下是粗为 5 像素的实心水平线:
以下是红色的水平线:
null4.标题标记符——
标识文档中的标题和副标题
浏览器在解释标题标记符时,会自动改变文字的大小,并且将字体改为黑体,同时将内容设为一个段落
n是1至6的数字,表示最大的标题,表示最小的标题
例子:
标题效果
此为一级标题
此为二级标题
此为三级标题
此为四级标题
此为五级标题
此为六级标题
此为正常文本
null五、文本对齐
1.align属性
设置段落的对齐格式
取值:right(右)、left(左)、center(居中)justify(两端)
应用范围:
多种标记符,最典型的是应用于 P、Hn、HR 、 DIV
不同的标记符,其align属性的默认值并不相同
标记符P、Hn 的align属性默认值为left
标记符HR的align属性默认值为center
2.DIV标记符——
为文档分节,以便为文档的不同部分应用不同的段落格式
必须与 align等属性联合使用
位于 DIV 标记符中的多段文本将被认为是一个节,可为它们设置一致的对齐格式。
3.CENTER标记符 ——
将和 包括起来的内容定义为居中对齐null
使用 align 属性
本行为默认对齐的段落,相当于 align="left"
本行为居中对齐的段落
本行为右对齐的段落
本行为居中对齐的一级标题
以下为左对齐的水平线:
null
使用 DIV 标记符
浣溪沙
晏殊
一曲新词酒一杯,
去年天气旧池台,
夕阳西下几时回?
无可奈何花落去,
似曾相识燕归来,
小园香径独徘徊。
null六、列表格式
1.有序列表(Ordered list)
定义:一种在表的各项前显示有数字或字母的缩排列表
- 列表项 1
- 列表项 2
- 列表项 3
OL标记符的属性:
type——设置数字序列样式
start ——设置数字序列的起始值, 值可以是任意整数
当位于 OL 标记符内时,LI 标记符的属性:
type ——设置数字样式,取值与 OL 的 type 属性相同
value ——设置一个新的数字序列起始值,以获得非连续性的数字序列null
有序列表示例
用大写罗马字母表示的有序列表:
- 列表项1
- 列表项2
- 列表项3
起始数字为 3 的有序列表:
- 列表项1
- 列表项2
- 列表项3
编号不连续的有序列表
- 列表项1
- 列表项2
- 列表项3
变换了数字样式的有序列表
- 列表项1
- 列表项2
- 列表项3
null有序列表的嵌套
使用有序列表嵌套可以获得不同层次的编号列表。嵌套时,只需将内层列表作为外层列表的一个列表项即可。列表的嵌套层数没有限制。
嵌套的有序列表
嵌套的有序列表
- 列表项 1
- 子列表项 1
- 子列表项 2
- 子列表项 3
- 列表项 2
- 列表项 3
null2.无序列表(Unordered list)
定义:一种在表的各项前显示有特殊项目符号的缩排列表。
无序列表标记符
UL 标记符的 type 属性——控制列表项前特殊符号的显示
列表项标记符
LI 标记符的 type 属性的值如下表所示:在Internet Explorer 中,type 的值是区分大小写的 null
无序列表示例
默认无序列表:
使用方块作为列表项标记的无序列表:
null3. 混合嵌套列表
有序列表和无序列表也可互相嵌套,如以下 HTML 代码所示:
- 列表项1
- 列表项2
- 列表项3
小结小结HTML中用于进行文本分段的标记符包括:段落标记符P、换行标记符BR、水平线标记符HR、标题标记符Hn等
在标记符中使用align属性,可控制内容的对齐方式
FONT标记符是最常用的控制字体格式的标记符,它可控制文字的字号、颜色以及字体
物理字符样式和逻辑字符样式可控制文字的不同显示效果,例如设置粗体、斜体等
MARQUEE标记符可以用于创建滚动文字效果
OL和LI标记符结合,可以创建有序列表
UL和LI标记符结合,可以创建无序列表§ 3 图像与超链接§ 3 图像与超链接Web页图像基础
图像标记符
统一资源定位器(URL)
超链接标记符
锚点链接
图像映射null一、Web页图像基础
1 .位图与矢量图
位图,用点描述图像
矢量图,用线条等数学信息描述图像
null2. Web页图像格式
GIF格式
Graphics Interchange Format(图形交换格式)
适用于颜色较少(小于256色)的图像压缩,并允许透明,也可以是动画
JPEG格式
Joint Photographic Experts Group(联合静态图形专家组)
可控制图像的压缩比率,适用于颜色较为丰富的图像,不支持透明和动画
PNG格式
Portable Network Graphics(可移植网络图形)
适用于矢量图像,并允许半透明null3 .使用网页图像的要点
确保文件较小
使图像具有所需的像素大小
采用正确的格式进行优化处理
控制图像的数量和质量
合理使用动画
图像的处理工具
Photoshop
Fireworks
Flash
CorelDrawnull二、图像标记符——
在网页中插入图像或动画元素
具体属性:
null插入图片
插入图像示例
我插入的第一幅图像:
null插入视频
插入视频示例
插入动态视频
图像与周围内容垂直对齐
align——top、middle、bottom图像与周围内容垂直对齐
align——top、middle、bottom
文本与图像的垂直对齐示例
此图像与文本顶部对齐
此图像与文本
中央对齐
此图像与文本
底部对齐
图文混排时的图像对齐
align——left、 right图文混排时的图像对齐
align——left、 right实现图文混排:
left 表示图像居左,文本在图像右侧;
right 表示图像居右,文本在图像左侧。
解除在图像的左、右环绕文本:
在插入标记
的下一行文本将转入正常显示。null三、统一资源定位器
1.URL(Universal Resource Locator,统一资源定位器)
——表示Web上资源的一种方法,通常可以理解为资源的地址
组成
协议
离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载
代码
装有所需文件的计算机地址
具体的文件路径和文件名。
例如:http://www.linuxlover.net/forum/index.htm
协议
协议表明应使用何种方法获得所需的信息
超文本传输协议:HTTP(HyperText TransferProtocol)。 使用形式:http://webhostname.somedomain/path/filename.htm
文件传输协议:FTP(FileTransferProtocol)。 使用形式:ftp://ftphostname.somedomain/path/filename.htm
电子邮件协议:mailto。 使用形式:mailto:username@somedomain
新闻组协议:news(Usenet)。 使用形式:news://newshostname.somedomainnull2.绝对URL
Internet上资源的完整地址,包括完整的协议种类、计算机域名和包含路径的文档名
其形式为: 协议://计算机域名/文档名
例如:
http://www.nonexist.com/public/HTML/example.htm
http表示用来访问文档的协议的名称
www.nonexist.com表示文档所在计算机的域名
public/HTML/example.htm 表示文档名
如果在网页中需要指定外部Intemet资源,应使用绝对URL
说明
省略了最后部分文件名的URL通常也认为是绝对URL, 因为它能够完全定位资源的位置
例如,http://www.sina.com.cn就是一个绝对URLnull3.相对URL
Internet上资源相对于当前页面的地址,它包含从当前页面指向目的页面位置的路径
例如:public/example.htm
使用相对URL的好处在于
当用户需要移植站点时,只要保持站点中各资源的相对位置不变,就可以确保移植后各页面之间的超链接仍能正常工作。
用户在编写网页时,通常使用的都是相对URL(除非需要引用外部网页)
如果在网页中需要指定内部资源,应使用相对URL
相对URL本身并不能唯一地定位资源,但浏览器会根据当前页面的绝对URL正确地理解相对URL。null说明
在URL中,总是使用正斜杠(/)作为路径分隔符,而不是使用Windows或DOS中的反斜杠(\)。
在客户端,点击不同类型的链接时,会自动启动相应的客户端软件来访问相应的资源。
句点(.) ——当前目录
双重句点(..)——上一级目录(父目录)
例如
./image.gif表示当前目录中的image.gif文件,相当于image.gif;
../public/index.htm表示与当前目录同级的public目录下的index.htm文件,也就是当前目录上一级目录下的public目录中的index.htm文件null四、超链接标记符——
格式:
链接点
href属性:用于指定超链接的目标
链接目标:要访问的目标页面或其他资源,使用URL来表示
链接点:在和</A>之间任何可单击的网页元素,如文字或图像
我的大学
?下载功能?
?电子邮件链接功能?target属性null?下载功能?
如果href属性指定的文件格式是浏览器能直接显示或播放,那么单击超链接时就会直接显示相应的文件
如果如果href属性指定的文件格式是浏览器不能直接显示或播放,那么单击超链接就可以获得下载功能
?电子邮件链接功能?
链接点
请按时交作业 A >!单击电子邮件链接后会启动邮件程序null五、锚点链接
对同一网页的不同部分或不同网页的不同部分进行链接
锚点链接必须先定义锚点,然后才能定义链接。
锚点的定义:
[此处内容可省略]
定义链接
链接点
定义指向不同页面内锚点的链接,形式如下
链接点相对URL
绝对URLnull锚点链接null六、图像映射
在一幅图中定义若干个区域,每个区域中指定一个不同的超链接,当单击不同区域时便可以跳转到相应的目标页面。
应用:
电子地图、页面导航图、页面导航条热点
hotspot电子地图页面页面导航图实例null步骤:
找出要定义区域的坐标
例如,在图 3-31 中就要定义两个矩形区域,它们的坐标分别是“30,152,366,218”和“171,256,228,288”
定义出映射区域——