html超文本标记语言

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

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

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

资源描述

步骤一:了解HTML语言HTML:超文本标记语言,俗称网页代码语法:用来表示的,其中每个标记都是有名字的,不同的标记名代表的含义是不同的,标记名是由英文字母组成的,有的标记是有属性的,属性是有值的。标记分类:单标记:标记名属性=值/单标记的标记名本身就代表一定的含义hrsize=2/br/双标记:标记名属性=值内容.../标记名段落标记:p......./p常见的标记:!DOCTYPEhtml:声明文档类型HTML:双标记,表示网页文件开始和结束head:双标记,表示网页头部body:双标记,表示网页主体title:双标记,表示网页标题meta:单标记,元标记p:段落h1,h2,h3,h4,h5,h6:标题标记,双标记img:图像标记,网页中插入一个图像a:超级链接标记,双标记,在网页中插入一个链接ahref=/...../astrong:加粗,双标记div:层、区块,双标记CSS:层叠样式表(网页显示方式)JS:javascript脚本,主要是网页和用户实现交互的步骤二:了解HTML的文档结构通过一个最简单的HTML文档案例说明HTML文档结构,所有的HTML网页都是遵循如下文档结构。新建一个记事本文件,写入以下代码到新文件,然后将文件命名为first.html。实例代码如下:1.html2.head3.title标题栏内容/title4./head5.body6.Helloworld7./body8./html文件的第一个标记是html,告诉浏览器这是HTML文件的头。文件的最后一个标记是/html,表示HTML文件到此结束。在head和/head之间的内容,是Head信息。Head信息是不显示出来的,在浏览器里看也不到。但是这并不表示这些信息没有用处。比如可以在Head信息里加上一些关键词,有助于搜索引擎能够搜索到你的网页。在title和/title之间的内容,是文件的标题。可以在浏览器最顶端的标题栏看到标题效果。在body和/body之间的信息,是正文内容,将要显示在浏览器中。浏览效果如图-1所示:图-1步骤三:了解HTML属性HTML标签可以拥有属性。属性总是以名称/值的形式出现,多个属性时,使用空格隔开。属性总是在HTML元素的开始标签中,与标签之间用空格隔开。属性实例:HTML链接由a标签定义。链接的地址在href属性中指定,代码如下:1.html2.head3.title标题栏内容/title4./head5.body6.Helloworldahref=百度/a7./body8./html浏览效果如图-2所示:图-2使用Target属性,可以定义被链接的文档在何处显示。例如target=“_blank”代表链接将在一个新的页面打开。代码如下:1.html2.head3.title标题栏内容/title4./head5.body6.Helloworldahref==“_blank”百度/a7./body8./html步骤四:了解标题标签(h)HTML语言提供了一系列对文章标题进行操作的标签对。标题(Heading)是通过h1/h1……h6/h6即一共六对标签进行定义的。h1/h1定义最大的标题,而h6/h6定义最小的标题,即标签中h后面的数字越大标题文本就越小。像h等内容显示的标签都应出现在body/body标签对中。请确保将h标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为网页的结构和内容编制索引,所以用标题来呈现文档结构是很重要的。应该将h1用作主标题(最重要的),其后是h2(次重要的),再其次是h3,以此类推。语法如下:1.html2.head3.title标题栏内容/title4./head5.body6.Helloworldahref=百度/a7.h1这是1号标题/h18.h2这是2号标题/h29.h3这是3号标题/h310.h4这是4号标题/h411.h5这是5号标题/h512.h6这是6号标题/h613./body14./html浏览效果如图-3所示:图-3文章标题同样也有属性,常用的是对齐属性align。align的属性值包括:Left(左对齐)、Center(居中显示)、Right(右对齐)。属性实例:1.html2.head3.title标题栏内容/title4./head5.body6.Helloworldahref=百度/a7.h1align=left这是1号标题/h18.h2align=center这是2号标题/h29.h3align=right这是3号标题/h310.h4这是4号标题/h411.h5这是5号标题/h512.h6这是6号标题/h613./body14./html浏览效果如图-4所示:图-4步骤五:了解段落标签(P)及换行标签(br/)段落是通过p标签定义的。p标签是成对使用的。如果希望在不产生一个新段落的情况下进行换行(新行),请使用br/标签。实例代码如下:1.html2.head3.title标题栏内容/title4./head5.body6.h1align=center网络营销/h17.p网络营销br/这里换行了^_^br/就是大量的客户通过互联网,找到某网站、商铺,查看商品卖点,通过电话、邮件、QQ等方式联系到卖家或者厂家,将一个潜在客户变成有效客户的过程称之为网络营销。/p8.p其中,还可以利用E-mail营销、博客与微博营销、网络广告营销、视频营销等。总体来说,凡是以互联网或移动互联为主要手段开展的各种营销活动,都可称之为整合网络营销。/p9./body10./html效果如图-5所示:图5步骤六:水平线标签(hr/)hr/标签在HTML页面中创建一条水平线,可以在视觉上将文档分隔成各个部分。例如上述案例中在标题和段落之间加入一条水平线。同样hr/为单标记。实例代码如下:1.html2.head3.title标题栏内容/title4./head5.body6.h1align=center网络营销/h1hr/7.p网络营销br/这里换行了^_^br/就是大量的客户通过互联网,找到某网站、商铺,查看商品卖点,通过电话、邮件、QQ等方式联系到卖家或者厂家,将一个潜在客户变成有效客户的过程称之为网络营销。/p8.p其中,还可以利用E-mail营销、博客与微博营销、网络广告营销、视频营销等。总体来说,凡是以互联网或移动互联为主要手段开展的各种营销活动,都可称之为整合网络营销。/p9./body10./html效果如图-6所示:图-6步骤七:了解无序列表(ul)标签无序列表是通过ul标签定义的。ul是网页布局中常用标签,标签是成对使用的。ul标签中,列表项使用标签li定义。实例代码如下:1.html2.head3.title标题栏内容/title4./head5.body6.ul7.li习近平等领导人观看国庆音乐会/li8.li领导人10时向人民英雄敬献花篮/li9.li广东1地税局长失联或欠债过亿/li10.li20余越南人越境抢货1民警牺牲/li11.li港媒:政府反腐太猛大闸蟹卖不动/li12./ul13./body14./html效果如图-7所示:图-7步骤八:了解层标签(div)div标签可以把文档分割为独立的、不同的部分,它可以用作严格的组织工具。使用div标签来组合元素,这样就可以使用样式对它们进行格式化。div是成对使用的。在实际展现效果中实例代码如下:1.html2.head3.title标题栏内容/title4./head5.body6.div7.h1align=center网络营销/h1hr/8.p网络营销br/这里换行了^_^br/就是大量的客户通过互联网,找到某网站、商铺,查看商品卖点,通过电话、邮件、QQ等方式联系到卖家或者厂家,将一个潜在客户变成有效客户的过程称之为网络营销。/p9.p其中,还可以利用E-mail营销、博客与微博营销、网络广告营销、视频营销等。总体来说,凡是以互联网或移动互联为主要手段开展的各种营销活动,都可称之为整合网络营销。/p10./div11.div12.ul13.li习近平等领导人观看国庆音乐会/li14.li领导人10时向人民英雄敬献花篮/li15.li广东1地税局长失联或欠债过亿/li16.li20余越南人越境抢货1民警牺牲/li17.li港媒:政府反腐太猛大闸蟹卖不动/li18./ul19./div20./body21./html效果如图-8所示:图-8步骤九:了解span标签span标签被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用CSS样式时,它才会产生视觉上的变化。如果不对span应用样式,那么span元素中的文本与其他文本不会任何视觉上的差异。我们应用CSS样式举例说明,使“提示”变为粗体的红色。代码如下:1.html2.head3.title标题栏内容/title4./head5.body6.pspan提示:/span如果不对span应用样式,那么span元素中的文本与其他文本不会任何视觉上的差异。/p7./body8./html9.styletype=text/css10.span{11.font-weight:bold;12.color:red;13.}14./style这段代码中,我们应用了CSS内部样式表,定义了字体加粗,字体颜色为红色。1.styletype=text/css2.span{3.font-weight:bold;4.color:red;5.}6./style效果如图-9所示:图-9步骤十:了解img图片标签在HTML中,图像由img/标签定义。要在页面上显示图像,需要使用源属性(src)。src指source。源属性的值是图像的URL地址。定义图像的语法是:1.imgsrc=url/URL指存储图像的位置。如果名为bd_logo1.png的图像位于目录中,那么其URL为。alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。定义alt的语法是:1.imgsrc==百度的logo在浏览器无法载入图像时,替换文本alt属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,也有利于搜索引擎对图片内容的理解。实例代码如下:1.html2.head3.title标题栏内容/title4./head5.body6.img

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

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

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

×
保存成功