搜索
网页设计与制作实用教程第2章文本标记语言基础2.1.1什么是HTML和XHTML+2.1HTML和XHTML1．HTMLHTML是HyperTextMarkupLanguage的缩写，其含义是超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分。浏览器在阅读网页文件时，根据不同标记符来解释和显示其标记的内容。超文本标记语言，用于编写网页。HTML是一切网页实现的基础，在网络中浏览的网页都是一个个由HTML标记构成的文件。一个HTML文件包含了很多HTML标记，用来告诉浏览器应该如何显示文本、图像以及网页的背景等等2．XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage(可扩展超文本标识语言)的缩写，表现方式与超文本置标语言（HTML）类似。第2章文本标记语言基础2.1.1什么是HTML和XHTML+2.1HTML和XHTML3．HTML文件结构htmlhead文件头信息/headbody在浏览器中显示的HTML文件的正文/body/htmlHTML文档通常分为文件头和正文两部分。文件头用以记录与网页相关的重要信息，例如标题、关键字等等，通常文件头部分不会在浏览器中显示，而正文部分，则是网页的主体内容，将在浏览器中显示。第2章文本标记语言基础2.1.2HTML文件的编写与显示+2.1HTML和XHTMLHTML文件可以被多种工具软件进行编辑，如记事本、UltraEdit、KindEditor和Dreamweaver等。【教与练2-1】：第一个网页。htmlheadtitle我的第一个网页作品/title/headbodyh1我编写的HTML文档/h1hrp这是我第一次用记事本编写网页：)/p/body/html第2章文本标记语言基础2.1.3标签、元素和属性+2.1HTML和XHTML1．什么是标签HTML标签一般由一对尖括号“”和“”，以及标签名组成。每个标签有特定的描述功能标签分为“起始标签”和“结束标签”两种。（1）在XHTML中，绝大部分的标签都必须关闭。以下是代码片段是错误的写法：bodyp这是我第一次用记事本编写网页：)!—这里没有封闭标签--/body（2）在XHTML中，所有标签的属性必须是小写。以下是代码片段是错误的写法：DIVID=MAIN-MAINPIMGSRC=images/03.gifWIDTH=30HEIGHT=30/2013.01.05/PP超值6缸四驱SUV导购，最低不到30万元/P/DIV第2章文本标记语言基础2.1.3标签、元素和属性+2.1HTML和XHTML（3）在XHTML中，所有标签的属性值必须使用英文格式的双引号括起来。以下是代码片段是错误的写法：bodyp全面取代美国中国成世界汽车中心/pimgsrc=插入图片.pngwidth=156height=143/!--这里属性值没有用双引号--/body（4）在XHTML中，所有标签都必须合理嵌套。以下是代码片段是错误的写法：divid=navulliahref=#首页/li/a!--此处嵌套错误--liahref=#汽车/a/li!--此处嵌套正确--/ul/div第2章文本标记语言基础2.1.3标签、元素和属性+2.1HTML和XHTML（5）在XHTML中，特殊字符需用编码表示。在XHTML文档中，所有的特殊字符都要用编码表示。比如“&”必须使用“&”进行表示；“”必须使用“>”进行表示；“”必须使用“<”进行表示。（6）在XHTML中，明确属性值，且不能简写。以下是代码片段是错误的写法：inputname=adctype=checkboxid=adcchecked!--checked属性应该书写为checked=checked--第2章文本标记语言基础2.1.3标签、元素和属性+2.1HTML和XHTML2．什么是元素元素是组成HTML文件的基本部件。按有无内容分为：有内容元素和空元素；按是否另起新行分为：块级元素和内联元素。例如以下代码片段所示：bodyh1现代汽车成都车展阵容曝光/h1!--该h1元素为有内容的元素--br/!--该br元素为空元素，开始标签即关闭--p第十四届成都国际汽车展览会将在成都举行，国内外各大汽车厂商将云集“天府之国”，共同演绎一场汽车盛宴。/p!--P元素为块元素--aherf=“#”首页/a!--a元素为内联元素--/body第2章文本标记语言基础2.1.3标签、元素和属性+2.1HTML和XHTML3．什么是属性属性是HTML文件中元素的特征代码片段如下：divid=headerulliahref=#title=WF有限公司竭诚为您服务首页/a/liliahref=#title=公司走过的心路历程关于/a/liliahref=#title=我们获得的国际荣誉荣誉/a/liliahref=#title=质量第一信誉第一产品/a/li/ul/div第2章文本标记语言基础2.2.1基本结构元素+2.2常见的HTML元素有3个：html元素、head元素、body元素第2章文本标记语言基础2.2.1基本结构元素+2.2常见的HTML元素认识head元素中包含的文件头信息meta：设置头部信息head/head网页头部信息的内容作为网页的一些辅助信息。并不会直接在网页中显示。1)插入“刷新”，可以定时的刷新网页。2)插入“关键字”，有利于搜索引擎收集你的页面，关键字作为搜索的依据3)插入“说明”对网页进行说明描述，同样会得到搜索引擎的收集。第2章文本标记语言基础2.2.1基本结构元素+2.2常见的HTML元素【教与练2-2】：基本结构元素。htmlheadmetaname=keywordscontent=这里输入网站的多种关键字/metaname=descriptioncontent=这是输入对网站的具体描述/title网页基本结构元素/titlestyletype=text/cssbody{color:red;}/style/headbody网页中的文字全部为红色！/body/html第2章文本标记语言基础2.2.2常见的块元素+2.2常见的HTML元素1．标题类元素图2-9标题类元素网页效果【教与练2-3】：标题类元素。htmlheadtitle标题类元素/title/headbodyh1我是一级标题/h1h2我是二级标题/h2h3我是三级标题/h3h4我是四级标题/h4h5我是五级标题/h5h6我是六级标题/h6/body/html第2章文本标记语言基础2.2.2常见的块元素+2.2常见的HTML元素图2-11修改后的网页效果图2-10段落元素p网页效果bodyh2八月十五夜月/h2p满月飞明镜，归心折大刀。/pp转蓬行地远，攀桂仰天高。/pp水路疑霜雪，林栖见羽毛。/pp此时瞻白兔，直欲数秋毫。/pp作品赏析：这是诗人避乱蜀中之作。由景入情，转篷象征漂泊无依的情感,杜甫空有归心只可惜无处还乡的凄凉。此诗主调应该是悲伤苍凉的。/p/body…p满月飞明镜，归心折大刀。br/转蓬行地远，攀桂仰天高。br/水路疑霜雪，林栖见羽毛。br/此时瞻白兔，直欲数秋毫。br//p…第2章文本标记语言基础2.2.3常见列表元素+2.2常见的HTML元素1．ul元素【教与练2-5】：ul元素。bodyh3ul元素/h3ulliahref=#新闻/a/liliahref=#游戏/a/liliahref=#军事/a/liliahref=#财经/a/liliahref=#购物/a/liliahref=#体育/a/li/ul/body第2章文本标记语言基础2.2.3常见列表元素+2.2常见的HTML元素2、ol元素。【教与练2-6】：h3图书分类销量排行/h3ulli网络类olli《网页设计与制作》/lili《网络工程》/li/ol/lili多媒体类olli《IillustratorCS5设计与制作》/lili《PhotoshopCS5图像处理技术》/li/ol/li/ul第2章文本标记语言基础2.2.3常见列表元素+2.2常见的HTML元素3．dl元素【教与练2-7】：h3dl元素/h3dldt无序列表/dtdd无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。/dddt有序列表/dtdd有序列表也是一列项目，列表项目使用数字进行标记。/dddt定义列表/dtdd自定义列表不仅仅是一列项目，而是项目及其注释的组合。/dd/dl第2章文本标记语言基础2.2.4常见表格元素+2.2常见的HTML元素【教与练2-8】：表格元素。tablewidth=300border=10summary=2012年4季度排名caption华中地区销量排名/captiontrthscope=col序号/ththscope=col团队/ththscope=col销售额（万元）/th/trtrthscope=row1/thtd团队甲/tdtd6547.31/td/trtrthscope=row2/thtd团队乙/tdtd6129.5/td/tr/table第2章文本标记语言基础2.2.5常见的内联元素+2.2常见的HTML元素1．img元素【教与练2-9】bodyimgsrc=images/01.pngwidth=128height=128alt=windowsmediaplayer//body第2章文本标记语言基础2.2.5常见的内联元素+2.2常见的HTML元素2．a元素【【教与练2-10】bodypahref=/index.html单击这里/a将指向本网站中的一个页面的链接/ppahref=mailto:wuyuze@126.com单击这里/a将打开默认的OutlookExpress/ppahref=单击这里/a将打开互联网上的某个页面/ppahref=#top单击这里/a将指向本页面中的一个锚点链接/ppaname=topid=top/a此处设置了一个锚点名称为top的锚点/p/body第2章文本标记语言基础2.2.5常见的内联元素+2.2常见的HTML元素3．span元素【教与练2-11】：span元素htmlheadtitlespan元素/titlestyletype=text/csspspan{color:#F00;font-size:30px;}/*此处对p标签中的span标签定义样式*//style/headbodyspan此处的文字虽然被span标签包裹，但没有对应的样式，所以看起来与其他文字一模一样。/spanpspan注意：/span此处“注意”二字由于被span标签包裹，并且有对应的样式，故呈现出红色，且