【完整版-HTML代码简介说明-适合新手】资料

1.1HTML代码简介HTML开发•HTML标记的格式组成：HTML.../HTML•HTML标记用于标记HTML文档的开始和结束•元素-标识标记•属性-描述标记•值-分配给属性的内容ELEMENTATTRIBUTE=value1.2HTML代码简介HTML文档的结构HTML部分文档头部分正文部分HTMLHEADTITLE欢迎进入HTML世界/TITLE/HEADBODYP这会是一种很有趣的体验/P/BODY/HTML基本结构：运行结果1.3HTML代码简介HTML头部信息(Head)•HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。•标题(title)•标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。•示例代码如下：•html•headtitleHTML中文教程头部信息/title/head•/html1.4HTML代码简介使用META标记2-11.提供关于网页的信息•METAname=“Author”content=“GrahamBrowne”•METAname=“KEYWORDS”content=“...”•METAname=DESCRIPTIONcontent=...对网页的描述根据关键词生成响应获得文档的作者名称2.应用：关键词生成响应METAhttp-equiv=Expirescontent=Mon,15Sep200314:25:27GMTExpires:Mon,15Sep200314:25:27GMT设置网页的到期值:响应METAhttp-equiv=Content-Typecontent=text/html;charset=gb2312页面显示中文设置网页使用gb2312:1.5HTML代码简介3.自动刷新页面METAhttp-equiv=Refreshcontent=10;url==Content-Typecontent=text/html;charset=gb2312应用：如网上实时新闻报道。应用：如在不同浏览器上正确显示中文。使用META标记2-21.6HTML代码简介正文标题•HTML用h1到h6这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。1.7HTML代码简介•html•body•h1这是1号标题/h1•h2这是2号标题/h2•h3这是3号标题/h3•h4这是4号标题/h4•h5这是5号标题/h5•h6这是6号标题/h6•/body•/html1.8HTML代码简介•段落划分•在HTML里用p和/p划分段落,P可以不成对出现。1.9HTML代码简介段落标记HTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYBGCOLOR=lavenderP这会是一种很有趣的体验P另一个段落元素/BODY/HTML1.10HTML代码简介使用对齐属性修饰段落HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=lavenderPalign=center这会是一种很有趣的体验/P/BODY/HTML右对齐Left：左对齐Center：居中Right：右对齐1.11HTML代码简介使用对齐属性修饰标题•html•body•h1align=center这是标题/h1•p上面的标题是居中显示的。/p•/body•/html1.12HTML代码简介换行•通过使用br这个Tag，可以在不新建段落的情况下换行。br没有ClosingTag。•用p换行是个坏习惯，正确的是使用br,即在行末加入br。1.13HTML代码简介换行标记HTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYBGCOLOR=lavenderP这会是一种很有趣的BR体验P另一个段落元素/BODY/HTML1.14HTML代码简介HTML注释•在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。•注释可以写在!--和--之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。•!--Thisisacomment--1.15HTML代码简介•html•body•!--这是代码注释--•p代码注释是不会显示在网页里的。/p•/body•/html1.16HTML代码简介加入水平线•用hr这个Tag可以在HTML文件里加一条横线•Hr没有结束标签1.17HTML代码简介•html•body•p村妇想像皇宫的生活：皇后得用金扁担挑水吧。/p•hr•p问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅看别人打炮。/p•/body•/html1.18HTML代码简介HTML利用超链接打开链接文件•HTML用a/a来表示超链接•a/a可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：•ahref=url链接的显示文字/a•点击a/a当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。1.19HTML代码简介•html•body•ahref=biaoti.htm这是一个链接/abr•ahref=新浪站点链接/a•/body•/html＞1.20HTML代码简介•链接的target属性•使用链接的target属性，可以在一个新窗口里打开链接文件。1.21HTML代码简介•html•body•ahref=biaoti.htm这是一个链接/abr•ahref==_blank新浪站点链接/a•/body•/html1.22HTML代码简介•链接的title属性•使用链接的title属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。1.23HTML代码简介•html•body•ahref=biaoti.htm这是一个链接/abr•ahref=“”target=_blanktitle=新浪站点链接新浪站点链接/a•/body•/html1.24HTML代码简介•链接到email地址•在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如OutlookExpress，然后显示一个新建mail的窗口。用a可以实现这样的功能。1.25HTML代码简介•html•body•ahref=biaoti.htm这是一个链接/abr•ahref==_blanktitle=新浪站点链接新浪站点链接/a•ahref=mailto:[e-mail]联系新浪/a•/body•/html1.26HTML代码简介HTML相对路径(RelativePath)和绝对路径(AbsolutePath)•HTML有2种路径的写法：相对路径和绝对路径。•HTML相对路径(RelativePath)•同一个目录的文件引用•如果源文件和引用文件在同一个目录里，直接写引用文件名即可。•ahref=biaoti.htm这是一个链接/a•如何表示上级目录•../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。•如何表示下级目录•引用下级目录的文件，直接写下级目录文件的路径即可。1.27HTML代码简介HTML绝对路径(AbsolutePath)•HTML绝对路径(absolutepath)指带域名的文件的完整路径。•ahref=“／index.htmtarget=_blank新浪站点链接/a1.28HTML代码简介HTML图片(Images)•用img这个Tag可以在HTML里面插入图片。最基本的语法如下：•imgsrc=urlurl表示图片的路径和文件名。比如url可以是images/logo/blabla_logo01.gif，也可以是个相对路径../images/logo/blabla_logo01.gif。1.29HTML代码简介•html•body•p•图片：imgsrc=t1.jpg•/p•/body•/html1.30HTML代码简介•图片align属性•用align属性，可以改变水平对齐方式(居左、居中、居右)。•用valign属性，可以改变图片的垂直(居上、居中、居下)对齐方式图片的大小•在缺省状况下，图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。1.31HTML代码简介•html•body•imgsrc=t1.jpgwidth=150heigh=50•/body•/html1.32HTML代码简介HTML背景颜色和背景图片•HTML的body有两个关于背景的属性，•bgcolor属性•bgcolor属性用来设置HTML网页的背景颜色。•background属性•background属性用来设置HTML网页的背景图片。background属性值就是背景图片的路径和文件名，如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。1.33HTML代码简介•html•bodybgcolor=yellow•h2看，这个页面是黄色的。/h2•/body•/html1.34HTML代码简介•html•bodybackground=t1.jpg•h3这个网页有背景图片哦！/h3•p如果图片比页面小，图片会自动重复。/p•/body•/html1.35HTML代码简介•HTML表格用table表示。•一个表格可以分成很多行，用tr表示；•每行又可以分成很多单元格，用td表示。•这三个Tag是创建表格最常用的Tag。如何创建HTML表格1.36HTML代码简介•＜html•bodytablewidth=150border=1•tr•td1/tdtd2/tdtd3/td•/tr•tr•td4/tdtd5/tdtd6/td•/tr•tr•td7/tdtd8/tdtd9/td•/tr•/table•/body•/html1.37HTML代码简介HTML常用文本格式•HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。•常用文本格式Tag•b/b粗体bold•i/i斜体•U/U下划线1.38HTML代码简介HTML字体(Fonts)•在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。•字体大小•用字体大小属性(size)来设定字体的大小。示例代码如下：•pfontsize=