HTML代码简介

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,1.,43,HTML代码简介,HTML 开发,HTML 标记的格式组成：,. . .,HTML,标记用于标记,HTML,文档的开始和结束,-,标识标记,属性,-,描述标记,值,-,分配给属性的内容,HTML 文档的结构,HTML,部分,文档头部分,正文部分,欢迎进入 HTML 世界,这会是一种很有趣的体验,基本结构：,运行结果,HTML头部信息(Head),HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。,标题(title),标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。,示例代码如下：,HTML中文教程头部信息,使用META标记 2-1,提供关于网页的信息,对网页的描述,根据关键词生成响应,获得文档的作者名称,2.应用：关键词生成响应,Expires: Mon, 15 Sep 2003 14:25:27 GMT,设置网页的到期值:响应,页面显示中文,设置网页使用gb2312:,3.自动刷新页面,4.,使用网页所使用的编码,应用：如网上实时新闻报道。,应用：如在不同浏览器上正确显示中文。,使用META标记 2-2,正文标题,HTML用到这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。,这是1号标题,这是2号标题,这是3号标题,这是4号标题,这是5号标题,这是6号标题,段落划分,在HTML里用和划分段落,可以不成对出现。,段落标记,欢迎使用 HTML,这会是一种很有趣的体验,另一个段落元素,使用对齐属性修饰段落,学习,HTML,这会是一种很有趣的体验,右对齐,Left：,左对齐,Center：,居中,Right：,右对齐,使用对齐属性修饰标题,这是标题,上面的标题是居中显示的。,换行,通过使用这个Tag，可以在不新建段落的情况下换行。没有Closing Tag。,用换行是个坏习惯，正确的是使用,即在行末加入。,换行标记,欢迎使用 HTML,这会是一种很有趣的,体验, 另一个段落元素,HTML注释,在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。,注释可以写在之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。,代码注释是不会显示在网页里的。,加入水平线,用这个Tag可以在HTML文件里加一条横线,没有结束标签,村妇想像皇宫的生活：皇后得用金扁担挑水吧。,问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅看别人打炮。,HTML利用超链接打开链接文件,HTML用来表示超链接,可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：,链接的显示文字,点击当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。,这是一个链接,新浪站点链接,/html,链接的target属性,使用链接的target属性，可以在一个新窗口里打开链接文件。,这是一个链接,新浪站点链接,链接的title属性,使用链接的title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。,这是一个链接,新浪站点链接,链接到email地址,在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用可以实现这样的功能。,这是一个链接,新浪站点链接,联系新浪,HTML相对路径(Relative Path)和绝对路径(Absolute Path),HTML有2种路径的写法：相对路径和绝对路径。,HTML相对路径(Relative Path),同一个目录的文件引用,如果源文件和引用文件在同一个目录里，直接写引用文件名即可。,这是一个链接,如何表示上级目录,./表示源文件所在目录的上一级目录，././表示源文件所在目录的上上级目录，以此类推。,如何表示下级目录,引用下级目录的文件，直接写下级目录文件的路径即可。,HTML绝对路径(Absolute Path),HTML绝对路径(absolute path)指带域名的文件的完整路径。,新浪站点链接,HTML图片(Images),用 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：, url表示图片的路径和文件名。比如 url 可以是,images/logo/blabla_logo01.gif,，也可以是个相对路径 ./images/logo/blabla_logo01.gif。,图片：,图片align属性,用align属性，可以改变水平对齐方式(居左、居中、居右)。,用valign属性，可以改变图片的垂直(居上、居中、居下)对齐方式图片的大小,在缺省状况下，图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。,HTML背景颜色和背景图片,HTML的 有两个关于背景的属性，,bgcolor属性,bgcolor属性用来设置HTML网页的背景颜色。,background属性,background属性用来设置HTML网页的背景图片。background属性值就是背景图片的路径和文件名，如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。,看，这个页面是黄色的。,这个网页有背景图片哦！,如果图片比页面小，图片会自动重复。,HTML表格用表示。,一个表格可以分成很多行，用表示；,每行又可以分成很多单元格，用表示。,这三个Tag是创建表格最常用的Tag。,如何创建HTML表格,html,123,45 6,789,HTML常用文本格式,HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。,常用文本格式Tag,粗体bold,斜体,下划线,HTML字体(Fonts),在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。,字体大小,用字体大小属性(size)来设定字体的大小。示例代码如下：,这一段的字体大小的值是2。,字体风格,用face属性来设定字体风格。示例代码如下：,这一段的字体风格是arial。,字体颜色,用颜色属性(color)来设定字体颜色。,字体大小 font size,这段文字的字体大小值为1。,这段文字的字体大小值为2。,这段文字的字体大小值为3。,这段文字的字体大小值为4。,字体风格 font face,以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。,arial courier verdana,arial courier verdana,arial courier verdana,字体颜色 font color,这段文字用的是缺省的字体颜色。,这段文字的字体颜色为红色。,HTML表单(Forms),HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。,举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：,输入用户姓名,请输入你的姓名：,