html语言学习

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

HTML的最要成分-----元素(element)元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(starttag)内容(content)和尾标签(endtag)构成标签tag指元素的起始和结束。首标签html….尾标签/html学习html就是学习使用各种元素。例子:b元素的作用b这句话应显示为粗体。/b介于标签b../b之间的文体应该以粗体显示。b是粗体bold的意思。h1、h2、h3、h4、h5、h6元素的作用是显示标题h为heading的意思其中h1是一级标题字体最大,h2是二级标题,字体比一级略小;而h6是最后一级标题,,字体最小。首标签和尾标签在一些特例中不需要,即有些元素没有尾标签。这些没有尾标签的元素被称为空元素(emptyelement),他们与具体的内容无关,比如像下面这个换行标签:br/大多数的浏览器不介意标签是大写还是小写,或者混合大小写。但是正确的写法是采用小写字母书写标签。所以,要养成用小写字母写标签的习惯。你应该在HTML文档里书写标签。一个网站可能包含多个HTML文档。上网的过程,其实就是打开不同HTML文档的过程。在编写html时,应注意层次感,HTML文档有两个部分:头部(head)和主体(body)。你在头部(head)提供关于网页的信息,你在主体(body)部分提供网页的具体内容。如果你要指定HTML文档的网页标题(title)(它将显示在浏览器窗口顶部),你就要在头部(head)提供有关信息。用title元素来指定网页标题:即在首标签title与尾标签/title之间写上网页标题:注意,网页标题(title)不是显示在网页里,而是显示在浏览器窗口的标题栏上的。网页里显示的所有内容都必须放在body元素里。比如,我们要在网页里显示“哇!这是我的第一个网站。”这行文字,它属于主体(body)部分,所以我们在body元素里输入:p这是我的第一个网站/p标签p里的p是“段落(paragraph)”的意思,也就是一个文本段落。htmlheadtitle这是我的第一个网站/title/headbodyp哇!!我的网站建立成功。/p/body/html现在打开浏览器:在“文件”菜单下选择“打开”。在弹出的对话框中点击“浏览”按钮。现在,请找到你的HTML文档,然后点击“打开”。这时,浏览器中应显示“哇!这是我的第一个网站。i…/i斜体元素small/small把文本设为小字体同时应用多个标签。bi…../i/b即是斜体又是粗体br/换行例子:写一些文字br/重启一行再写一些文字浏览器中显示如下:写一些文字重起一行写一些文字另一个空元素hr/,作用是画一条水平线。ul代表“无序列表(unorderedlist)”,它的作用是为每个列表项显示一个粗点。ol代表“有序列表(orderedlist)”,它的作用是显示每个列表项的序号。用li元素把多个列表项组织为一个列表,其中的li代表“列表项(listitem)例子:ulli一个列表项/lili另一个列表项/li/ul浏览器中的输出:例输出:属性许多元素都可以设置属性Html通过标签告诉浏览器如何展示网页比如br/告诉浏览器显示一个换行。你可以为某些元素附加一些信息,这些附加的信息被称为属性(attribute).h2style=”background-color:#ff0000;”哦我跟HTML的友谊/h2属性应写在元素的首标签上。具体写法是:属性名称(attributename)后紧跟一个等号(“=”),后面写上用双引号括起来的属性值(attributevalue)。对于style属性的值,可以用分号(“;”)来分隔多个样式指令。注意,一些元素和属性的名称采用的是美式拼写,比如color(而不是colour)。白色:#ffffff黑色:#000000红色:#ff0000兰色:#0000ff绿色:#00ff00黄色:#ffff00十六进制代码由“#”打头,后面跟六位数字或字母。由于这样的十六进制代码太多,不便记住哪个代码对应哪个特定颜色。为此,我们为最常用的216个颜色制作了一张表,供大家参阅:216个网页安全颜色表。除此以外,对于一些最常用的颜色(比如白色、黑色、红色、兰色、绿色及黄色等),你还可以使用它们的英语名称。不同元素使用不同的属性。有些元素(比如body等)被添加属性的机会比较大,而有些元素(比如br等)则较小、甚至不会被添加属性。HTML里有很多元素,同样也有很多属性。有些属性仅用于个别元素,有些属性可用于很多元素。反之亦然:有些元素只能使用个别属性,有些元素可以使用较多的属性。听起来这也许很令人困惑,不过一旦你熟悉了各个属性,就会感到很简单,并觉得它们很有用处。元素a代表链接;属性href代表“超文本引用”它用于指定链接指向何处—通常是一个因特网地址或者一个文件名。在上例中,属性href的值为“”,这是HTML.net网站的完整地址,也被称作URL(统一资源定位符)。注意,在URL里必须包含“http://”。“这是一个指向HTML.net的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上/a。如何在同一网站的网页之间添加相互链接?如果你要在同一网站的不同网页间做链接,那就不必拼写出网页的完整URL。举个例子,假如你有两个网页(比如说page1.htm和page2.htm),而且它们被存放在同一个文件夹中,那么你在做链接的时候,只要写出文件名就行了。这样,page1.htm到page2.htm的链接将如下所示:例2如果page2.htm被放在下一级文件夹中(比如“subfolder”),那么链接将是这样反过来,从page2.htm(在下级文件夹中)到page1.htm的链接将是这样:“../”代表当前位置(即该链接所在文件所处的文件夹)的上一级文件夹。同理,当前位置的上上级文件夹可用“../../”表示。如果要在一个网页内做链接怎么办呢?你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录,在其中列出指向下面各章的链接。这可以通过使用id属性和“#”符号来实现。用id属性标出要被指向的元素。例如:然后通过在链接中利用“#”来指向那个元素。“#”后面必须紧跟着一个id属性的值,表明链接指向该id属性被定义的地方。例如:图像imgscr=”david.jsp”alt=”DAvid”/你要做的只是:首先告诉浏览器你要插入一张图片(img),接着给出这张图片的存放位置(src)就行了。Img元素没有尾标签,他与br/一样。“david.jpg”是要插入的图片的文件名,其中的“jpg”表明图片类型。就像后缀名“htm”代表文件是HTML文档一样,后缀名“jpg”表明文件是一个图片文件。有三种类型的图片文件可被插入网页中:GIF(GraphicsInterchangeFormat,图形交换格式)JPG或JPEG(JointPhotographicExpertsGroup,联合图像专家组)PNG(PortableNetworkGraphics,可移植网络图像)一般来说,GIF是图形和图画的最佳格式,而JPEG格式则更适合存放照片。原因有二:第一,GIF格式只支持256色,而JPEG格式支持数百万色;第二,GIF格式擅长于压缩简单图像,而JPEG则更适于压缩复杂图像。压缩率越高,图像文件就越小,页面加载速度就越快。也许你也有同感,包含太多无用内容的网页是很不受欢迎的。过去,GIF和JPEG是两大主要的图像格式,但是最近PNG格式也开始流行起来(主要是在取代GIF格式)。PNG格式拥有许多JPEG与GIF的共同优点:支持数百万色,且压缩效果好。1、将图片插入到自已的网页中imgsrc=”image/logo.png”imgsrc=””2、图片作为链接ahref=”http://”imgsrc=”logo.png”/aImg属性:Src属性告诉浏览器图片的存放位置,alt属性用于给出图像的替用描述,假如由于某些原因该图像未能显示出来,浏览器就通过显示这个描述来代替图像。imgsrc=”logo.png”alt=”链接下一节”Title用于显示文本提示信息如果把鼠标停留在该图片上(别点击他),提示文字信息Widthheight属性分别用于设置图像的宽度和高度,以像素为单位。高分辨率下25个像素等于1公分,低分辨率下等于1.5公分imgsrc=”logo.png”width=”32”height=”32”但是值得注意的是,虽然可以通过设置高度和宽度来控制图片的显示尺寸,但图片文件的实际大小不会因此而发生变化。所以,不要指望通过设置图片的宽度和高度来减小图片文件的大小。相反,你应该在图像编辑程序中来调整图片文件的大小,以加快页面加载速度。不过width和height属性还是有用的,它们可以在图片被完全下载之前令浏览器知道该用多大的空间来显示图片。这令浏览器可以更快显示出美观的页面。表格trtd首标签table尾标签/table分别表示一个表格的开始与结束。这是不难理解的。tr是”tablerow(表格行)”的缩写,用于表示一行的开始和结束。td是“tabledata(表格数据)”的缩写,用于表示行中各个单元格cell的开始和结束。表格的属性:Border用于指定表格四周边框的厚度:tableborder=”1”trtd表格1/tdtd表格2/td/trtrtd表格3/tdtd表格4/td/tr/table输出格式:表格还有很多属性:align:指定整个表格、某行或某个单元格里内容的水平对齐方式,比如左对齐、右对齐、居中valign:指定某个单元格里内容的垂直对齐方式,比如靠上、置中、靠下tdalign=”right”valign=”top”单元格1/td表格的高级特性Colspan和rowspan属性Colspan是columnspan(跨列)的缩写。Colspan属性用在td标签中,用于指定单元格横向跨越的列数:输出结果:表格1跨越3列输出结果:“单元格1”跨越3行Css第一课Css是cascadingstylesheets(级联样式表)。Css是一种样式表语言,用于为HTML文档定义布局。例如:css涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。Css和html的区别:Html用于结构内容;css用于格式化结构化的内容。CSS是Web设计界的一次革命。CSS的具体优点包括:通过单个样式表控制多个文档的布局;更精确的布局控制;为不同的媒体类型(屏幕、打印等)采取不同的布局;无数高级、先进的技巧。Css的基本语法用红色作为网页的背景色;用Html实现:bodybgcolor=”#FF0000”/body用css实现:body{background-color:#FF0000;}基本的css模型:Selector{property:value;}Selector:表明花括号中的属性设置将应与于那些HTML元素例如bodyProperty:用于设置背景色的属性,如:background-color:#FF0000Value:background-color属性的值可以是“#FF0000”第二课为HTML文档应用CSS,有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法(即外部样式表)予以关注。方法1:行内样式表(style属性)使用html属性stylehtmlheadtitle例子/title/headbo

1 / 60
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功