WEB标准构成
web标准不是某个标准,而是有W3C和其他标准组织制定的一系列标准集合。主要包括:结构、表现和行为三个方面。
结构标准:结构用于对网页元素进行整理和分类,主要包括XML和HTML两个部分。
样式标准:样式用于设置网页元素的版式、颜色。大小等外观样式,主要指的是CSS。
行为标准:行为是指网页模型的定义以及交互的编写,主要包括DOM和JS两部分。
HTML骨架格式
html标签:作用所有html中标签的一个根节点。
head标签:用于存放:title,meta,base,style,script,link等标签,其中head标签中必须要放置title标签。
title标签:让页面拥有一个属于自己的标题。
body标签:页面的主题部分,用于存放所有的html标签,主要用来构成页面的结构。
HTML标签分类
HTML页面中,带有“<>”符号的元素被称为HTML标签,所谓的标签就是带有某种功能或者语义的编码命令,同时也称为HTML标签或者HTML元素。常见的HTML标签的形式有两种:双标记标签和单标记标签。
双标记标签:
结构:<标签名>内容</标签名>,双标记标签有开始标签也有结束标签。
常见双标记标签有:<html></html>/<title></title>/<body></body>/<h1~6></h1~6>等
单标记标签:
结构:<标签名 />,单标记标签也长称为空标签,是指用一个符号即可完整描述某个功能的标签。
HTML标签的关系:
1.嵌套关系(父子关系):
如html结构中<head><title></title></head>head与titl即为嵌套关系。
2.并列关系(.兄弟关系)
如HTML结构中的<head></head><body></body>head与body之间即为并列关系。
注意:在书写html代码时如果两哥标签之间是并列关系则最好上下对齐,若是嵌套关系,则尽可能的将子元素缩进一个tab键的身位。
常用的HTML标签:
标题标签<hn>标题文本</hn>(n从1到6):随着n 的增大,标题的字号逐渐减小,并且所有的h 标签的字体均默认加粗。
注意:h1一般都是用作文本标题或则给logo使用的,在使用标题标签时尽量不要使用h1标签,一般情况下一个页面中只允许使用一个h1标签。
段落标签<p>文本内容</p>:段落标签可以将网页中的文字有条理的显示出来。默认情况下,文本在一个段落中会根据浏览器窗口的大小自动切换行。
水平线标签<hr />:水平线标签是个单标记标签,可以使用水平线标签将网页中的文本段落隔开。
换行标签<br />:在html编辑过程中我们常用的空格合回车都不会再网页中显示效果,如果你想让一段文字在固定的位置换行,只能添加<br />换行标签,网页才是显示效果。
图像标签:<img src="插入图片的路径" alt="当图片不能正常显示时,图片的文本描述" /> ,图像标签是单标记标签。
文本格式化标签:在网页中,有时需要为文字设置粗体,斜体,下划线效果,这是就需要使用文本格式化标签,使文字显示出特殊效果。
常见的文本格式化标签有如下几对:
1,文本以粗体的形式显示:<b></b>、<strong></strong>,在xthml中推荐使用strong
2、文本以斜体的方式显示:<i></i>、<em></em>,在XHTML中推荐使用em
3、文本以加有删除线的方式显示:<s></s>、<del></del>,在XHTML中推荐使用del
4,文本以加有下划线的方式显示:<u></u>、<ins></ins>
标签属性:
在使用html制作网页时,如果想让HTML标记提供更多的信息,可以使用HTML标记属性加以设置。其基本语法格式为:
<标签名 属性1=“属性值1” 属性2=“属性值2” ...>内容</标签名>
标签的属性室友键值对构成的,一个标签可以有多个属性,不同的属性之间用空格隔开。
链接标签:用于在HTML页面中创建超链接,其基本语法格式如下:
<a href="跳转目标" target="目标窗口的弹出方式">文本、图像</a>
上述标签中的属性:
href:用于指定链接跳转目标的URL地址,当标记应用href时,则说明该标签具有了超链接的功能。
traget:用于指定链接页面的打开方式,其取值有_self:为默认值,表示在当前窗口中打开,_blank在新建窗口中打开链接页面。
锚点定位:通过创建锚点链接,用户能够快速定位到目标内容,创建锚点定位的步骤:
1.使用“<a href="#id名">链接文本</a>”创建链接文本
2.使用相应的id名标注跳转目标的位置
HTML注释:
注释是为了让编写代码的人员能够清楚知道代码的功能,HTML注释标签结构:
<!--注释文本-->注释文本在网页中显示不出来
路径介绍:
1、相对路径:
(1)图像文件和HTML文件位于同一个文件夹中:只需输入图像的文件名即可
(2)图像文件位于HTML下一级文件夹:则引入文件时需要输入文件夹名称和文件名,文件夹名和文件名之间用/隔开
(3)图像文件位于HTML文件的上一级文件:则引入文件时需要在文件名之前加上“../",如果是上两级则需要加上两个"../",依次类推
2、绝对路径:
即文件所在位置的完整地址。