HTML5 教程

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

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

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

资源描述

HTML教程-(HTML5标准)王永胜•超文本标记语言(英语:HyperTextMarkupLanguage,简称:HTML)是一种用于创建网页的标准标记语言。•您可以使用HTML来建立自己的WEB站点,HTML运行在浏览器上,由浏览器来解析。•在本教程中,您将学习如何使用HTML来创建站点。•HTML很容易学习!相信您能很快学会它!HTML实例•!DOCTYPEhtml•html•head•metacharset=utf-8•title网页教程(baidu.com)/title•/head•body•h1我的第一个标题/h1•p我的第一个段落。/p•/body•/html•HTML文档的后缀名•.html•.htm•以上两种后缀名没有区别,都可以使用。实例解析•!DOCTYPEhtml声明为HTML5文档•html元素是HTML页面的根元素•head元素包含了文档的元(meta)数据•title元素描述了文档的标题•body元素包含了可见的页面内容•h1元素定义一个大标题•p元素定义一个段落什么是HTML?•HTML是用来描述网页的一种语言。•HTML指的是超文本标记语言:HyperTextMarkupLanguage•HTML不是一种编程语言,而是一种标记语言•标记语言是一套标记标签(markuptag)•HTML使用标记标签来描述网页•HTML文档包含了HTML标签及文本内容•HTML文档也叫做web页面HTML标签•HTML标记标签通常被称为HTML标签(HTMLtag)。•HTML标签是由尖括号包围的关键词,比如html•HTML标签通常是成对出现的,比如b和/b•标签对中的第一个标签是开始标签,第二个标签是结束标签•开始和结束标签也被称为开放标签和闭合标签标签内容/标签HTML元素•HTML标签和HTML元素通常都是描述同样的意思.•但是严格来讲,一个HTML元素包含了开始标签与结束标签,如下实例:•HTML元素:•p这是一个段落。/pWeb浏览器•Web浏览器(如谷歌浏览器,InternetExplorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。•浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:HTML网页结构•htmlheadtitle页面标题/title/headbodyh1这是一个标题/h1p这是一个段落。/pp这是另外一个段落。/p/body•/html!DOCTYPE声明•!DOCTYPE声明有助于浏览器中正确显示网页。•网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。•doctype声明是不区分大小写的,以下方式均可:•!DOCTYPEhtml!DOCTYPEHTML!doctypehtml!DoctypeHtml中文编码•目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为UTF-8HTML编辑器•每一种操作系统都带有简单的文本编辑器:•Windows用户可以使用记事本;•Linux用户可以选择几种不同的文本编辑器,如vi、vim或者emacs;•Mac用户可以使用OSX预装的TextEdit。HTML基础-4个实例•HTML标题•HTML标题(Heading)是通过h1-h6标签来定义的.•实例•h1这是一个标题/h1h2这是一个标题/h2h3这是一个标题/h3实例1•!DOCTYPEhtml•html•head•metacharset=utf-8•title网页教程(baidu.com)/title•/head•body•h1这是标题1/h1•h2这是标题2/h2•h3这是标题3/h3•h4这是标题4/h4•h5这是标题5/h5•h6这是标题6/h6•/body•/html•HTML段落•HTML段落是通过标签p来定义的.•实例•p这是一个段落。/pp这是另外一个段落。/p实例2•!DOCTYPEhtml•html•head•metacharset=utf-8•title网页教程(baiducom)/title•/head•body•p这是第一个段落。/p•p这是第二个段落。/p•p这是第三个段落。/p•/body•/html•HTML链接•HTML链接是通过标签a来定义的.•实例•ahref=这是一个链接/a•提示:在href属性中指定链接的地址。实例3•!DOCTYPEhtml•html•head•metacharset=utf-8•title菜鸟教程(runoob.com)/title•/head•body•ahref=属性/a•/body•/html•HTML图像•HTML图像是通过标签img来定义的.•实例•imgsrc=/images/logo.pngwidth=258height=39/•注意:图像的名称和尺寸是以属性的形式提供的。实例4•!DOCTYPEhtml•html•head•metacharset=utf-8•title菜鸟教程(runoob.com)/title•/head•body•imgsrc=/images/logo.pngwidth=258height=39/•/body•/htmlHTML元素•HTML文档由HTML元素定义。•HTML元素语法•HTML元素以开始标签起始•HTML元素以结束标签终止•元素的内容是开始标签与结束标签之间的内容•某些HTML元素具有空内容(emptycontent)•空元素在开始标签中进行关闭(以开始标签的结束而结束)•大多数HTML元素可拥有属性•嵌套的HTML元素•HTML文档由嵌套的HTML元素构成。HTML文档实例•!DOCTYPEhtmlhtmlbodyp这是第一个段落。/p/body/html•以上实例包含了三个HTML元素。•这个p元素定义了HTML文档中的一个段落。这个元素拥有一个开始标签p以及一个结束标签/p.元素内容是:这是第一个段落。•body元素定义了HTML文档的主体。这个元素拥有一个开始标签body以及一个结束标签/body。元素内容是另一个HTML元素(p元素)。•html元素定义了整个HTML文档。这个元素拥有一个开始标签html,以及一个结束标签/html.元素内容是另一个HTML元素(body元素)。•不要忘记结束标签•即使您忘记了使用结束标签,大多数浏览器也会正确地显示HTML:•p这是一个段落p这是一个段落•以上实例在浏览器中也能正常显示,因为关闭标签是可选的。•但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。HTML空元素•没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。•br就是没有关闭标签的空元素(br标签定义换行)。•在XHTML、XML以及未来版本的HTML中,所有元素都必须被关闭。•在开始标签中添加斜杠,比如br/,是关闭空元素的正确方法,HTML、XHTML和XML都接受这种方式。•即使br在所有浏览器中都是有效的,但使用br/其实是更长远的保障。•HTML提示:使用小写标签•HTML标签对大小写不敏感:P等同于p。许多网站都使用大写的HTML标签。•W3CSchool使用的是小写标签,因为万维网联盟(W3C)在HTML4中推荐使用小写,而在未来(X)HTML版本中强制使用小写。•HTML属性•属性是HTML元素提供的附加信息。•HTML属性•HTML元素可以设置属性•属性可以在元素中添加附加信息•属性一般描述于开始标签•属性总是以名称/值对的形式出现,比如:name=value。•属性实例•HTML链接由a标签定义。链接的地址在href属性中指定:•!DOCTYPEhtml•html•head•metacharset=utf-8•title菜鸟教程(runoob.com)/title•/head•body•ahref=属性/a•/body•/html•HTML属性常用引用属性值•属性值应该始终被包括在引号内。•双引号是最常用的,不过使用单引号也没有问题。•提示:在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='JohnShotGunNelson'•HTML提示:使用小写属性•属性和属性值对大小写不敏感。•不过,万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。•而新版本的(X)HTML要求使用小写属性。HTML属性参考手册•查看完整的HTML属性列表:HTML标签参考手册。•下面列出了适用于大多数HTML元素的属性:•class为html元素定义一个或多个类名(classname)(类名从样式文件引入)•id定义元素的唯一id•style规定元素的行内样式(inlinestyle)•title描述了元素的额外信息(作为工具条使用)•更多标准属性说明:HTML标准属性参考手册.HTML标题•在HTML文档中,标题很重要。•HTML标题•标题(Heading)是通过h1-h6标签进行定义的.•h1定义最大的标题。h6定义最小的标题。•注释:浏览器会自动地在标题的前后添加空行。•!DOCTYPEhtml•html•head•metacharset=utf-8•title菜鸟教程(runoob.com)/title•/head•body•h1这是标题1/h1•h2这是标题2/h2•h3这是标题3/h3•h4这是标题4/h4•h5这是标题5/h5•h6这是标题6/h6•/body•/html•标题很重要•请确保将HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。•搜索引擎使用标题为您的网页的结构和内容编制索引。•因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。•应该将h1用作主标题(最重要的),其后是h2(次重要的),再其次是h3,以此类推。•HTML水平线•hr标签在HTML页面中创建水平线。hr元素可用于分隔内容。•!DOCTYPEhtml•html•head•metacharset=utf-8•title菜鸟教程(runoob.com)/title•/head•body•phr标签定义水平线:/p•hr/•p这是段落。/p•hr/•p这是段落。/p•hr/•p这是段落。/p•/body•/html•HTML注释•可以将注释插入HTML代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。•注释写法如下:•注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。。•!DOCTYPEhtml•html•head•metacharset=utf-8•title

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

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

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

×
保存成功