HTML和CSS.docx
《HTML和CSS.docx》由会员分享,可在线阅读,更多相关《HTML和CSS.docx(63页珍藏版)》请在冰豆网上搜索。
HTML和CSS
HTML
第1章HTML的基本标签
1.1HTML简介
HTML是HypertextMarkupLanguage(超文本标志语言)的缩写,它是构成Web页面(Page)的主要工具,是用来表示网上信息的符号标志语言。
在网上,如果要向全球范围内出版和发布信息,需要有一种能够被广泛理解的语言,即所有的计算机都能够理解的一种用于出版的"母语"。
WWW(WorldWideWeb)所使用的出版语言就是HTML语言。
通过HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML"翻译"成可以识别的信息,就是现在所见到的《wangye》。
定义和发布HTML标准的组织是“W3C”(WorldWideWebConsortium)中文意思为W3C理事会或万维网联盟。
XML:
(ExtensibleMarkupLanguage,可扩展的标记语言)
HTML的功能
1)出版在线的文档,其中包含了标题、文本、表格、列表以及照片等内容。
2)通过超链接检索在线的信息。
3)为获取远程服务而设计表单,可用于检索信息、定购产品等。
4)在文档中直接包含表格数据、视频剪辑、声音剪辑以及其他的一些应用。
学习HTML的意义
便于优化专用工具生成的代码;为编写ASP等网络程序奠定基础。
HTML的编写工具
用HTML编写的文件(文档)的扩展名是.HTML或.HTM。
它们是供浏览器解释浏览文件的格式。
可以使用记事本、写字板等编辑工具来编写HTML文件。
HTML语言使用标志对(标签)的方法来编写文件,既简单又方便。
它通常使用<标志名>标志名>来表示标志的开始和结束(例如标志对),因此在HTML文档中这样的标志对都必须是成对使用的。
在今天,做《wangye》的工具到处都是,只要动几下鼠标,一个精彩的《wangye》就出来了,HTML是否要学呢?
答案是肯定的,因为工具就是工具,它们生成的代码是机械的,不够简洁,使《wangye》打开的速度减慢。
还有很多新的功能,工具是生成不了的。
必需对代码进行编辑。
HTML文件的本质
HTML文件的实质是以.htm或.html为扩展名的纯文本文件。
标志(tag)的结构特点
1、用<>包围。
2、多数成对出现。
3、结束标记用/。
4、标签是嵌入式的。
5、标签可有多种属性和属性值。
6、标签用西文半角字符,对大小写不敏感。
HTML文件的组成
头部和主体
标志和普通文本
文件标题标志
文件标题标志为
。
使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息,那些信息一般是《wangye》的"主题"。
要将《wangye》的主题显示到浏览器的顶部其实很简单,只要在
标志对之间加入要显示的文本即可。
网站:
万维网上相关网页的集合
网页:
文件后缀名通常为*.html或*.htm的页面
HTML:
用于制作网页的超文本标记语言(HyperTextMark-upLanguage)
HTML文件:
使用HTMT语言编写,由各种功能的元素所组成的
标签:
用于描述功能元素的符号也称“标记”
属性:
描述标签的具体功能
<标签名称属性名称=“属性值”>
1.1.1html文件的格式
查看《wangye》源文件,可见html文件的格式如下:
《wangye》的标题……………………
其中省略号部份是《wangye》的内容,其实每个标记都是一一对应的。
每个《wangye》文件都是以开始和以结束。
与之间的内容是《wangye》的标题。
会显示在浏览器的标题栏上。
与之间放的是《wangye》内容。
1.1.2HTML文档基本结构—
1.1.2.1标签
标签出现在网页的标题部分。
是一个特殊的HTML标签,提供有关的网页信息。
charset属性用于设置网页的编码语系。
如果网页出现了乱码可能是charset属性没有设置正确的编码语系。
简体中文网页使用charset=gb2312,
繁体中文使用charset=big5,
纯英文网页使用iso-8859-1,或者不设编码也可。
此meata标记通知浏览器没5秒自动刷新页面。
此meata标记通知浏览器5秒后自动跳转到XX网
1.1.3HTML文档基本结构—
1.页面背景色或背景图像
bgcolor属性可以改变网页的背景色。
background属性可以把网页的背景设为图片。
语法
hello!
!
经验:
为了使页面美观大方,网页背景要尽量的浅
HTML标记写在“<”和“>”符号之间
HTML标签可以嵌套
Hello
源代码不区分大小写
注释
--注释说明-->
1.2HTML重要标签(标志)
1.2.1标题格式标志(标题标签)
HTML语言提供了一系列对文本中的标题进行操作的标志对:
…
,即一共有6对标题的标志对。
是最大的标题,而
则是最小的标题,也即是标志中h后面的数字越大标题文本就越小。
如果HTML文档中需要输出标题文本,就可以使用这6对标题标志对中的任何一对。
HTML提供了六级标签,
为最大,为最小。
例:
一级标题
二级标题
三级标题
四级标题
块级别元素
能够独立成为一个段落的标签统一称之为块级别元素。
检验的方法:
可以在标签的后面书写任意文本,如果自动换段,这个标签就是块级别元素。
~标签是块级别元素
用来设置网页的标题文本
必须有开始和结束标签,即双标签
定义标题文字的对齐方式
......
align的值可以是:
left(左对齐)
right(右对齐)
center(居中对齐)
1.2.2图标(link)
地址栏图标
favicon.ico名字最好不变16*16的16色,放虚拟目录根目录下
收藏栏图标
1.2.3文本标志
用来使文本以黑体字的形式输出。
用来使文本以斜体字的形式输出。
用来使文本以下加一划线的形式输出。
下标
上标
用来输出打字机风格字体的文本。
用来输出引用方式的字体,通常是斜体。
用来输出需要强调的文本(通常是斜体加黑体)。
则用来输出加重文本(通常也是斜体加黑体)。
带删除线文字strikethrough
1.2.3.1标签
标签用于控制网页上文本的显示外观。
文本大小、字体类型和颜色等属性都可以使用标签指定。
例:
size属性用来设置字体的大小,可以为字体指定的大小范围为1~7。
最大为7最小为1。
默认字体大小为3,如果size=+4将使大小增加到7,size=-1将使大小减到2。
color属性用于指定字体的颜色,可以指定颜色名称或十六进制值。
200">同志们好~
1.2.3.2特殊符号
用于显示特殊字符的字符实体
特殊字符
转义码
示例
空格
移动 | 100| 联通
大于(>)
>
IfA>BThen
A=A+1
小于(<)
<
IfA<BThen
A=A+1
引号(””)
"
"淘宝网"
版权号(@)
©
Copyright©2007
转义码各字符间不能有空格;转义码必须以“;”结束;单独的&不能被认为是转义开始。
特殊字符
©
&copy;
®
®;
™
&#153;
±
&plusmn;
空格
&nbsp;
¥
&yen;
1、输入空格
在XHTML语言中有两种方法可以控制空格
1.添加英文空格代码:
“ ”这不是标签。
2.切换到任意一种中文输入法的全角状态(shift+space)就可以直接空格了。
1.2.4行的控制相关标签
1.2.4.1段落标签
段落标签
用于标记段落的开始。
一般省略段落结束标记
还可以设置段落的align属性,设置段落的对齐方式,如左对齐、居中、右对齐
行内对象
不是块级别元素的对象称之为行内对象
行内对象基于文档流的顺序排列。
标签是块级别元素
用来定义段落
双标签
定义段落的对齐方式
......
align的值可以是:
left(左对齐)
right(右对齐)
center(居中对齐)
1.2.4.2换行标签
只要在文本中放入
标签,就会强制换行。
标签是块级别元素
用来插入换行符
是单标签
最好写上正斜杠
1.2.4.3水平线
标签是块级别元素
用来插入一个水平线
是单标签
定义
width设定水平线的宽度,单位可以是像素或者%
size设定水平线的高度,单位可以是像素或者%
color设定水平线的颜色
align设定水平线的横向对齐方式
(水平线)标签用于在页面上绘制水平线。
只有开始标签,没有结束标签。
语法:
size用来指定水平线的高度,以像素为单位;color可用来设置水平线的颜色。
width用于改变水平线的宽度,可以以像素为单位,也可以是窗口的百分比
1.2.4.4使用预格式文本
标签标签用于显示预先在HTML代码中已定义好格式的文本。当文本显示在浏览器中时,会遵循已在HTML源文档中定义的格式。
1.2.4.5行距
1.5"> 愉快的国庆节
十月一日是一年一度的国庆节,是祖国母亲的生日。
祖国母亲今年54周岁了,因此全国都洋溢着喜庆的气氛。
乘着这气氛,我们一家人来到了山清水秀的外婆家。
1.2.4.6分区标识
--设置对齐方式
双标签
可用于实现浮动广告,盒模型实现页面布局
,分区标识的开始和结束
属性:
align=|center|left|right|水平对齐方式
国庆节作文精选
1.2.5图像标签
a)图像的基本语法
标签用于在HTML文档中插入图像,该标签可以放在要显示图像的位置。
标签不含任何内容,它使用src属性指定图像源文件所在的路径。
语法:
其中,src参数用来设置图像文件所在的位置,width和height属性用来指定图像的宽度和高度,
alt属性有两个作用:
1.在网页中,如果图像没有被下载,在图像位置上出现提示文字;
2.如果图像下载完,将鼠标放在该图像上,在鼠标旁边出现的提示文字。
src的属性值为所引用的图片的url地址,此属性是必须的。
src的url可以是绝对路径,也可以是相对路径。
width定义图像的宽度
height定义图像的高度
border定义图像的边框粗细
align定义了图像相对于周围元素的水平和垂直对齐方式
值有:
left、right、top、middle和bottom。
style=filter:
Alpha(opacity=100,style=2);
filter:
样式表滤镜;
Alpha:
透明滤镜,
opacity:
不透明度100(0~100);
style:
样式2(0~3),
rules="none"不显示内框"
hspace定义定义图片与文本间的水平间距;
vspace定义定义图片与文本间的垂直间距。
b)图像与文本的对齐
align属性用于调整图像对于周围文本的对齐方式
align可取的值:
top、bottom、middle、left或right。
定义
1.2.5.1给图像添加链接
图象的超级链接是指整个图象的超级链接,当点击图象的任何部分时,都会打开这个超级链接。
定义
1.2.6使用列表
不同类型的列表:
1.2.6.1无序列表
无序列表就是“项目列表”,列表项前面带有项目符号,包含无序列表标签
内。
列表中每项都用列表标签
,其中LI表示列表项,结束标签为可选项。
无序列表是块级别元素。
无序列表的默认符号是圆点。
语法:
如何激活会员号?如何注册淘宝会员?………..
type属性决定了列表开始的符号,它可以去disc(默认值,表示实心圆点)、circle(空心圆环)、square(空心正方形)这3个值。
1.2.6.2有序列表
1.有序列表包含
…..
标签内。
也显示列表项。
区别在于有序列表的列表项以自动生成的顺序显示。
语法
填写信息收电子邮件……..
type属性决定有序列表的序号类型,它可以取如下5个值:
1、a、A、i、I。
分别表示数字序列、小写英文字母序列、大写英文字母序列、小写罗马数字序列、大写罗马数字序列。
元素还可以定义列表的起始编号,如我们希望列表的第一个编号为5,而不是1,则需要定义元素的start属性。1.2.6.3无符号列表
列表由列表类型和列表项两部分构成,也就是说由两对标签来组成
无符号列表是块级别元素
标签定义列表。- 标签定义了定义列表中的项目(即术语部分)。
- 可在定义列表中定义条目的定义部分。
、- 、
- 双标签
定义
- Coffee
- Blackhotdrink
- Milk
- Whitecolddrink
1.2.7页面链接标签
标签用于超链接。
超级链接是整个WWW应用的核心和基础。
。
标签是双标签
标签以可定义锚,一个锚有两种用法:
通用使用href属性,创建一个文档到另外一个文档的链接,包括绝对链接和相对链接。
通用使用name属性,创建一个文档内部的书签。
语法:
[免费注册]
href属性用来指定要链接的地址。
“[免费注册]”是热点文本。
定义绝对链接
指向Sohu的链接
froglt@">指向E-mail地址的超级链接
定义相对链接
打开相对链接
可以连接计算机中的任何文件,浏览器支持的文件格式可以直接打开,浏览器所不支持的文件格式将直接下载。
绝对路径名:
指定从根目录到文件的完整路径。
相对路径名:
指定相对于当前文件的文件位置。
1.2.7.1链接属性控制
在新的窗口中打开超级链接
target属性值:
_blank:
在新窗口中打开链接
_self:
在当前窗口中打开链接,为默认值
_parent:
在父窗体中打开链接
_top:
在当前窗体打开连接,并替换当前的整个窗体(框架页)
框架页的名称:
在对应的框架页中打开
1.2.7.2链接到本页面
作用是未来了方便用户阅读过长的页面内容,可以使用锚点链接。
主题名称
标签的name属性用于创建锚记。
主题名称
超链接名称前面的符号“#”告诉浏览器当前链接是文档中的一个锚记点。
1.2.7.3电子邮件链接
用户可以从网页发送电子邮件。
要做到这一点,可在链接标签中插入“mailto:
邮箱地址”
例:
taobaoWebMater@”>站长信箱
定义锚记链接,定义的过程分为两步
第一步
命名锚记要到达的目的地
第二步
制作链接链接文本
跳转到不同页面的锚记:
制作链接链接文本
1.2.8iframe实现网页的内嵌
iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。
其部分属性简介如下:
name:
内嵌帧名称
width:
内嵌帧宽度(可用像素值或百分比)
height:
内嵌帧高度(可用像素值或百分比)
frameborder:
内嵌帧边框
marginwidth:
帧内文本的左右页边距
marginheight:
帧内文本的上下页边距
scrolling:
是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示)
src:
内嵌入文件的地址
style:
内嵌文档的样式(如设置文档背景等)
allowtransparency:
是否允许透明
可选的属性
DTD指示此属性允许在哪种DTD中使用。
S=Strict,T=Transitional,F=Frameset.
属性
值
描述
DTD
align
∙left
∙right
∙top
∙middle
∙bottom
不赞成使用。
请使用样式代替。
规定如何根据周围的元素来对齐此框架。
TF
frameborder
∙1
∙0
规定是否显示框架周围的边框。
TF
height
∙pixels
∙%
规定iframe的高度。
TF
longdesc
URL
规定一个页面,该页面包含了有关iframe的较长描述。
TF
marginheight
pixels
定义iframe的顶部和底部的边距。
TF
marginwidth
pixels
定义iframe的左侧和右侧的边距。
TF
name
frame_name
规定iframe的名称。
TF
scrolling
∙yes
∙no
∙auto
规定是否在iframe中显示滚动条。
TF
src
URL
规定在iframe中显示的文档的URL。
TF
width
∙pixels
∙%
定义iframe的宽度。
TF
标准属性
id,class,title,style
1.2.8.1在父窗体中访问并控制子窗体中的对象
在父窗体中,Iframe即子窗体是document对象的一个子对象,可以直接在脚本中访问子窗体中的对象
hello,buddy
在子窗体中我们可以通过其parent即父(双亲)对象来访问父窗口中的对象
parent.控件name.value="hello“
1.2.9字段集fieldset(边框)
fieldset 在字段集包含的文本和其它元素外面画一个方框
legend 在 fieldSet 对象绘制的方框内插入一个标题
-- 加入你的内容-->
40%">
登陆界面
用户名: