网页设计与制作案例教程（第2版）（胡秀娥） 项目三（HTML5与CSS3基础）

项目导读1.能够使用DreamweaverCC设置网页内容。任务描述是网页制作必备技术。HTML5是HTML的最新版本。使用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统。浏览器能够识别并解析这些HTML在20世纪90年代发展迅速，从HTML2.0版本发展到3.2版本、4.0版本，再到4.01版本。在这之后，为了拥有更强的功能性与适用性，HTML开始向其他方向演化，发展出了XHTML与XHTML2.0版本，但因为没能取得良好的兼容性而宣告失败。最终，向HTML5的演化取得了成功，因为HTML5在开发时就综合考虑了当前与未来的发展趋势，所以它向后兼容，且包含了HTML4.0的全部特性，并在此基础上进行了(1)双标签。指由开始标签和结束标签组成的标签，法格式为：<标签名>内容</标签名>(2)单标签。也称为空标签，基本语法格式为：<标签名/><hr/>,单标签中的"/"可以省略(3)注释标签。是HTML5中的一种特殊标签。注释标签的内本语法格式为：<!--注释内容-->开头和结尾处添加注释标签可方便其他开发人员修改和理解代码个属性，标签名和属性名之间要用空格隔开，属性之间不分先后顺序。标签的属性省略时将使用它设置标签属性的语法格式为：<标签名属性1="属性值1"属性2="属性值2">内容</标签名>3.块级标签与行内标签：HTML5中标记内容的标签有块级标签和行内标签之分，它们的特点如下。(1)块级标签的内容在浏览器中显示时独占一行，类似于在其(1)块级标签的内容在浏览器中显示时独占一行，类似于在其内容首尾各添加了一个换行符。例：<h1>与<p>标签都是块级标签，使用它们标记的内容将独占一行，且这些标签之后的内容同样也会另起一行。(2)行内标签的内容在浏览器中显示时不能独占一行。若行内标签前后没有块级标签，则它们可显示在同一行中。例如，用于标记斜体的<i>标签就是一个行内标签。行介绍。行介绍。HTML5使用元素描述页面结构，最基本的HTML5文档结构包括DOCTYPE声明、html元素、head元素与body元素，如图所示。除此之外，HTML5还提供了一些其他结构元素，用于标记页面的不同区域，下面分别进 奈 口 文件(F)编缀(E)查看(V)插入(1)工具(T)查找(D)站点(S)窗口(W)帮助(H)代码拆分实时视图D.D黄甲明…Untitled-1×7本地文件+文档头部一般包括以下几种元素：(1)网页标题。使用<title>…</title>标签可以设置网页标题，浏览器会将该标题显示在标题栏或状态栏中。(2)网页元信息。使用<meta/>标签可以标记网页元信息，在其中设置网站的相关属性能够方便搜索引擎检索网页。此外，它还可以标记文档的字符编码，如图3-1中的代码"charset="utf-8""即表示将网页文档的字符编码设置为“utf-8”。(3)网页视口。网页视口就是浏览器中显示网页页面的那部分区域，通过设置视口的宽度、缩放比例等属性可以使网页适配各种屏幕尺寸的设备，具体设置方法见其他结构元素在对网页文档排版时需要将大量标签放在下列表示结构的元素中，也就是将表示内容的标签装进不同的描述页面的标题栏或一个内容块的标题区域。可包含多个header元素，如：网站Logo、主导航和搜索框等。描述页面导航的链接组。可包含多个nav元素，导航性质的链接组都可以放置在nav元素中，如主导航栏或侧边导航栏等。页脚的导航一般不放在该元素中。描述页面中的一个独立内容，如新闻文章、博客条目、用户评论等。用于描述网页中的一节，对页面内容进行分区。如网页中的章节、头部或尾部等，可嵌套在article元素中。用于描述一个与页面其余内容几乎无关的部分，可包含与当前页面或主要内容相关的引用、侧边广告等。面底部。除上述结构元素之外，还有div元素，对应的标签<div>为块级标签，span元素对应的<span>标签为行内标签，在页面中灵活使用它们进行布局，可以使网页更具结构化。作同中国中统女本会×李大钊任务描述网文当的负担，使网页文档的结构更加清晰。理随着HTML功能的不断完善，结构代码和样式代码的混合使用让HTML文档的代码结构十分混乱，为网页的维护工作增加了难度。此时CSS应运而生，它将网页的结构层和表现层分离开来,大大简化了HTML代码。年12月开始制定CSS3标准。到目前为止该标准还没有最终定稿，但主流浏览器已经开始支持其CSS3样式表是由一个或多个CSS3样式组成的。CSS3样式是由选择器和声明组成的，其基本格式如图所示。选择器样式分隔符声明声明分隔符声明样式分隔符属性属性值属性属性值(2)声明可有N(2)声明可有N个，声明之间用分号隔开并放置在一对大括号(即样式分隔符)中，它们用于命令浏览器如何渲染指定对象。声明由属性和属性值两部分组成。(3)属性是用于设置样式的具体效果项，属性名一般由一个或多个单词组成，多个单词中间用连字符连接。(4)属性值是设置属性效果的参数，可以是数值或关键字。11HTML与CSS是两种不同的语言，要让它们同时对一个网页产生作用，必须在HTML文档中引入CSS。在HTML文档中引入CSS的3种方式分别为行内样式、内嵌样式表与链接样式表。内嵌样式表与链接样式表：添加方法是单击“CSS设计器”面板中“源”窗格左侧的加号按钮，在展开的列表中可以看到3个选项。其中，"在页面中定义"选项表示设置内嵌样式表，“创建新的CSS文件”与“附加现有的CSS文件”选项表示设置链接样式丰选项表示设置链接样式丰(1)内嵌样式表。选择“在页面中定义”选项后，文档窗口即自动生成<style>标签，在其中输入样式代码即可。使用该方式添加的样式代码可作用于当前整个页面，无法作index,html'index,html'1<1doctypehtml定”,系统将自动创建一个CSS样式文件，并在网页头按钮，打开样式文件，即可在其中输入样式代码，设置(styletype="text/css")<linkhref=indaxcssrelstyleshaetT)有条件使用(可选)定助X选择“附加现有的CSS文件”选项后，将打开“附加现有的CSS文件”对话框，其与“创建新的CSS文件”对话框基本相同，单击“浏览”按钮，打开“选择样式表文件”对话框，在其中选择想要附加的样式表文件，单击“确定”按钮即可将本地的CSS文件附加到网页文档中。用它来统一设置某类元素的基本样式。HTML文档是由标签组成的，标签选择器就是直接引用标签名的选择器。以“”为前缀，后面跟随一个自定义类名。需要为标签设置class属性(class属性可以包含多个属性值，各属性值之间用空格隔开),属性值就是类选择器的名称如.p1{.}以“#”为前缀，后面跟随一个自定义的ID名。使用ID选择器需要为标签设置id属性，具有唯一性，每个标签只能设置一个id属性值，属性值就是ID选择器的名称。如#p2{..}如<pid="p2">.</p>。择器表示其后代元素。子选择器通过“>”连接两个选择器，如div>p{.},前面选择器表示父元素，后面选择器表示其子元素。通过“+”连接两个选择器，只有满足这个连接顺相邻选择器素才会成功匹配。例如，在HTML文档中有</div>,可使用h1+p{..}选择与h1元素相邻的，同级的一个p元素。兄弟选择器通过"~"连接两个选择器，它在相邻选择器的基础上，通过连接顺序匹配相邻的元素之后，会将后续同级别的同类元素一同匹配。例如，在HTML文档中有<div><h1>.</h1><p>.</p><p>.</p></div>,可使用h1~p{..}选择紧邻在h1元素后出现的所有同级别的p元素。属性选择器：根据标签的属性来匹配元素，一般有以下7种类型：是最基本的属性选择器，用于匹配所有拥有attr属性的E元素，无论attr属性值是什么。用于匹配attr属性值为“value”的E元素，它缩小了匹配范围，能够更加精确地匹配需用于匹配attr属性值列表中包含了“value”的E元素，不需要完全匹配。如果"value"是一个列表，需要用空格隔开。用于匹配attr属性值以"value"开头的E元素，例如：navalangzhbackgroundf选择器选择器只用于设置链接的样式，包括“:link”和":visited",它们分别表示链接被访问前的状态与链接被访问后的状态。可用于设置任意元素的样式，包括":hover"".active"和":focus"等，它们分别表示鼠标指针移动至元素上时、鼠标指针单击元素区域但不松开时与元素获得焦点时的状态。可以根据文档的结构来匹配元素①:first-child。匹配父元素的第一个子元素。②:last-child。匹配父元素的最后一个子元素。③:nth-child(n)。匹配父元素的第n个子元素。④:empty。匹配没有子元素的元素。⑤:root。匹配根元素。是":not()",它能够过滤掉括号内匹配的元素。择器，常用的有以下3种。①:enabled。匹配指定范围内所有可用的元素。②:disabled。匹配指定范围内所有不可用的元素。③:checked。匹配指定范围内所有选择类的元素。(2)类、伪类与属性选择器：10。(4)通配选择器：0。肥火肥火“今”(节选)的李大钊我以为世间最可宝贵的就是“今”,最易丧失的也是“今”,因为他最容易丧为什么“今”最可宝贵呢?最好借哲人那昱孙所说的话答这个疑问：“尔若爱天还不确实，尔能确有把掘的就是今日。为什么“今”最易丧失呢?因为宇出大化，刻刻流转，绝不停留。时间这个东西，也不因为再人贵他爱他稍稍在人何密念。试问吾人说“今”说“现在”,茫茫“今”,是开人的“现在”呢?例刚说他是“今”是“现在”,他早已风驰也犁的一般，已成“过去”了，开人若要糊糊涂涂把他去掉，岂不可惜?学说学说儿络在项目实训——制作“图书交易网”主页“网站介项目实训——制作“图书交易网”主页“网站介绍”模块参考本项目两个任务的任务实施，制作“图书交易网”主页的“网站介绍”模块，效果如图所示。图书图书(2)内容标签添加在<body>→<mainid="contain">→<articleid="contain2">→<divid="#conind">标签内，标题使用<h3>标签，段落使用<p>标签。(3)标题的选择器为#conindh3,将其color属性(文本