实例介绍
html5教程,也是很好的入门手则,是网页高手的查阅读html的说不清法宝典。
附录 A HTML语法教学 (编号清单)等;其二是用来指向其他资源,例如<ing>(嵌入图像)、< vidco>(嵌 入视频)、< audio>(嵌入音频)、<a~>(标记超链接或网页上的位置)等 标签(tag):一直以来“标签”和“元素”两个名词经常被混用,但严格来说,两者 的意义并不完全相同,“元素”一词包含了“起始标签”、“结束标签”以及这两者之 间的内容,例如下面的语句是将“圣诞快乐”标记为段落,其中≮p>是起始标签, 而<>是结束标签,换句话说,起始标签的前后要以<、>两个符号括起来,而 结束标签又比起始标签多了一个斜线(/) <p>圣诞快乐</p 起始标签 内容 结束标签 不过,也不是所有元素都会包含结束标签,诸如<br>(换行)、<hr>(水平线)、<img> (嵌入图像)等元素就没有结朿标签。举例来说,假设要在“圣诞快乐”几个字的后面做换 行,那么可以先输入这几个字,然后加上<br>元素,如下所示: 圣诞快乐<br> 属性( attribute):除了HTML元素本身所能描述的特性,大部分元素还会包含属性, 以提供更多信息,而且一个元素里面可以加上几个属性,只要注意标签与属性以及 属性与属性之间以空格符隔开即可。 举例来说,假设要将“圣诞快乐”几个字标记为标题1,而且文字为红色、置中对齐, 那么除了要在这几个字的前后分别加上起始标签<h1>和结束标签</h1>,还要加上红色及 置中对齐属性,如下所示: <h1co|or="#o0"aign=" center">圣诞快乐</h1> ↑弋↑↑↑千 起空属值 值 格符 格性 标 符 签 结束标签 值〔 value):属性通常会有一个值,而且这个值必须从预定义妤的范围内选取,不能 自行定义,例如<hr>(水平线)元素的 align(对齐方式)属性的值有left、 right、 center三种,用户不能自行指定其他值。 ·由于考虑到和 XHTML的兼容性,我们习惯在值的前后加上双引号("),但事实上, 若值是由英文字母、阿拉伯数字(0~9)、减号(-)或小数点(.)所组成,那么值 的前后可以不必加上双引号(")。 481 PHP&MySαL跨设备网站开发实例精粹 ◆嵌套标签( nesting tag):有时我们需要使用一个以上的元素来标记数据,举例来说, 假设要将一串标题1文字(例如 Happy birthday)中的某个字(例如 Birthday)标记为 斜体,那么就要使用<h1>和<i>两个元素: <h1>Happy<i> Birthday</i></h1> 顺序正确 <h1>Happy<i>Birthday</h1></i> 顺序不正确 请注意嵌套标签的顺序,原则上,第一个结束标签必须对应最后一个起始标签,第二个 结束标签必须对应倒数第二个起始标签,依次类推。 空格符:浏览器会忽略HTML元素辶间多佘的空格符或ηter键,因此,我们可以 利用这个特点在HTML源代码加上空格符和巸nter键,将HTML源代码排列整齐 方便阅读 slductype htmi>. <html, <meta charset"utf-8>, ete我的第一份HTML5文件</ title> cbody> <h1>Hello HTML. 5ls/h1> <body>, 使用空格符和 Enter键将 HTML源代码排列整齐 图A 不过,也正因为浏览器会忽略元素之间多余的空格符或 Enter键,所以您不能使用空 格符或 Enter键将网页的内容格式化,举例来说,假设要在一段文字的后面做换行, 那么必须在这段文宇的后面加上<br>元素,只是在HTML源代码中按 Enter键是无 效的 特殊字符:HTML文件中有一些特殊字符,例如小于(<)、大于(>)、双引号(")、 &、空格符等,若要在网页上显示这些字符,那么不能直接使用键盘输入,而是要瑜 入<、>"、&、 附录C中有特殊字符表供您参考。 482 附录 A HTML语法教学 A.2HTML文件的整体架构 HIML文件包含 DOCTYPE、标题( header)与主体(body)三个部分,下面是一个例子 <Doctype htmI> DOCTYPE <html> <head> <meta charset="utf-8> 网页标题 <ttle我的HTML文件</ title> </head> <h1>Hello! HTML!</h1> 网页主体 </ho </html> 创小an2014新超勢言·×急我的HTML文件 Hello! html! 图A-2 ·<! doctype>:用来声明文件类型定义( Document Type Definition,DTD),此例为HTML 目前主要的PC版浏览器和移动版浏览器,均对HTML5有着相当程度的支持 <htm1>.<html>:用来标记HTML文件。 ·<head>.<head>:用来标记HTML文件的标头,里面可能进一步使用< titley、<meta> <link>、<base、< scrip、< style>等元素来指定文件标题、文件相关信息、文件之 间的关联、相对URI的路径、 JavaScript程序代码、CSS( Cascading Style Sheets)样 式表单等信息。 itle.</ title:用来指定HTML文件的标题( title) <body>…</body>:用来标记HTML文件的主体,旦面可能包括文字、图像、视频 音频、超链接等内容。 除了HTML元素本身所能描述的特性,大部分元素还会包含属性,以提供更多信息,在 此,我们仅示范性地列出<body>元素的重要属性供您参考。 483 PHP&MySαL跨设备网站开发实例精粹 表A.1<body>元素的重要属性 <body>元素的重要属性 说明 back ground U∥r 指定网页背景图像的相对或绝对地址 bgcolor="colof# rrggbb 指定网页的背景颜色 text="color# rrggbb 指定网页的文字颜色 link="co/o/# rrggbb 指定尚未浏览的超链接文字颜色 alink ="color# rrggbb 指定被选取的超链接文字颜色 vlink ="colo/'#rrggbb 定已经浏览的超链接文字颜色 tt|e="." 指定<bdy>元素的标题,浏览器可能用它作为提示文字 表A.2常用的颜色值 颜色 值 颜色 back(黑) "#000000 silver(银) #cocCo gray(灰) "#808080 White(白) #ffffff maroon(褐) #800000 red(红) "#f0000 green #008000 tea|(蓝绿) #008080" nawy(深蓝) #008000" ye|loW(黄) "#ff00 olive(橄榄) #808000 bue(蓝) #0000f purple(紫) #800080 ime(荧光绿) #0000" aqua(水蓝) "#00fff" dark|ue(深蓝 "#00008b darkgreen(深绿) #006400 cyan(蓝绿) #00fP seagreen(海绿) "#2e8b57 ndgo(深紫蓝) #4b0082 brown(棕) #a52a2a pink(粉红) #ifcOcb orange(橘) "#fla500 darkorange(深橘) H8c00” deeppink(深粉红) 493 lightyellow(淡黄) tiffen snow #fffafa salmon(褚色) 开a8072" chocolate(巧克力色) #d2691e khak(卡其色) "#0e68c 堂习 编写如下的HTML文件,然后以浏览器执行看看结果为何。 提示:您可以使用<body>元素的 bgcolor和text两个属性,指定网页的背景颜色 和文字颜色。 提示2:在HTML文件中,双引号(")为特殊字符,若要显示出来,不能直接使用 键盘输入这个符号,而是要输入" <!doctype html> <html> <head> <meta charset=utf-8> 484 附录 A HTML语法教学 <tte>泥娃娃</ title> <body bgcolor="lightyellow"text="brown"> N"泥娃娃,泥娃娃,一个泥娃娃,它没有眼睛,也没有嘴巴。" </html 【解答】 口回 泥哇娃,泥娃烓,一个泥娃娃,它没有眼睛,也没有嘴巴。 图A A.3数据编辑与格式化 A.3.1标题格式 HIML提供6种层次的标题格式<h1>.</hl>、<h2>.<h2>、<h3>.<h3>、<h4>.</h4>、 <h5>.</h5>、<h6>..<h6>,其中以<h1>.<hl>(标题1)的字体最人,<h6>.</h6>(标题 6)的字体最小。 这些标题元素有个重要的属性 align="{left, center, right}",用来指定标题文字向左对齐、 置中或向右对齐,下面是一个例子。 <!doctype html> <html> <head> <meta charset=utf-8> <tle示范标题格式</ title <h1 align="lef">这是向左对齐的标题1</h1> <h2algn=" center">这是置屮的标题2</h2> <h3 align=" right">这是向右对齐的标题3</h3> <h4>这是标题4</h4> <h5>这是标题5</h5> 485 PHP&MySαL跨设备网站开发实例精粹 <h6>这是标题6</h6> </body> </html> d|@示能 这是向左对齐的标题1 这是置中的标题2 这是向右对齐的标题3 这是标题4 这是标题5 这是标题6 图A A.3.2段落格式 网页内容通常由几个段落所组成,而输入段落最简单的方式就是使用<p>…<p>段落元 素。此外,HTML还提供其他几种段落格式,例如<br>强迫换行元素、< address.!</ address> 地址元素、< blockquote>…< blockquote>左右缩排元素、≮pre>.pre>预先格式化元素 由于浏览器会忽略HTML文件中多余的空格符或 Enter键,因此,即便是按 Enter键企图 分段,浏览器一样会忽略,而将文字显示成同一段落。 若想将一篇文章显示成几个段落,必须在每个段落前后加上开始标签Φp>和结束标签 <>,下面是一个例子。p>…>元素有两个重要属性, align="{let, center, right}"用来指 定段落向左对齐、置中、向右对齐, width="n"用来指定段落的宽度(n为像素数) <Doctype htmI> <html> shead> <meta charset=utf-8> <te>示范段落格式</ title <head> <bod <p>天命之谓性,率性之谓道,修道之谓教。</p> p>道也者,不可须臾离也;可离,非道也。</p> <p>是故,君子戒慎乎其所不赌,恐惧乎其所不闻。</p> <p>莫见乎隐,莫显乎微,故君子慎其独也。</p> </body> </html> 486 附录 A HTML语法教学 曰回沤 ⑤hxD·d國示税番式 天命之谓性,率性之谓道,修道之谓教: 道也者,不可须臾高也;可离,非道也 是故,君子戒慎乎其所不赌,恐惧平其所不闻。 莫见乎隐,莫显乎微,故君子慎其独也 图A-5 A.3.3预先格式化段落 由于浏览器会自动忽略HTML元素之间多余的空格符和 Enter键,导致在输入某些内容 时相当不便,例如程序代码,此时,我们可以使用Φpre>…φpre>元素,预先将内容格式化, 下面是一个例子。 <pre> void main() printf("Hello World! \n </pre> </body> 回z ⑤国ah%c|@kh 。⊥dm⊥n() printf ("Hello World! \a") 图A-6 A.3.4注释 !->元素用来在HTML文件中插入注释,而且注释不会显示在浏览器中,下面是 个例子,浏览结果将不会出现注释。 <body> <!-以下为大学经一章大学之道-> 487 PHP&MySαL跨设备网站开发实例精粹 <p>大学之道在明明德,在亲民 在止于至善。知止而后有定 定而后能静,静而后能安, 安而后能虑,虑而后能得, 物有本末,事有终始, 知所先后,则近道也。</ </body )⑤http:/localhost/fuluaa·c@ 大学之道在明明德,在亲民,在止于至善。知止而后有定, 而后能静,静而后能安,安而后能虑,虑而后能得,物有 本末,事有终始,知所先后,则近道也 图A A.3.5常见的文字格式 粗体、斜体、加下划线、大字体、上标、下标、小字体等,均是相当常见的文字格式 现在,我们就来看看这些文字格式的HTML元素与浏览结果 表A.3常见的文字格式 范例 浏览结果 说明 预没的格式 Format 预设的格式 Format 预设的格式 <b>粗体Bold</b> 粗体Bld 粗体 <|>斜体 Italic</> 体ralc 斜体 <U>加下划线 Underlined</u> 加下划线 Underlined加卜划线 <big>BIG/big> FONT BIGF○NT 大字体 H<sub>2</sub>o H○ 下标 X<sup>3</sup> 上标 <small>SMALL</small> : FONT SMALL○NT 小字体 em>强调斜体 Emphasized</em> 强谓解体 Emphasized 强调斜体 < strong>强调粗体 Strong</ strong> 强调粗体 Strong 强调粗体 <dn>定义 Definition</dfn> 定义 Definition 定义文字 <code>程序代码Code</code> 程序代码cce 程序代码文字 <samp>范例 SAMPLE</samp> 范例S2MLE 范例文字 <kbd>键盘 Keyboard<kbd> 建盘 kevccarc 键盘文字 <var>变量 Variab|e</ar> 变量 Variable 变量文字 488 【实例截图】
【核心代码】
标签:
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论