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