还剩34页未读，继续阅读
本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便
文本内容:
项目二思政目标、与基础HTML CSSA基础入手，不断更新所学知识，培养持之以恒的学习态度A学会脚踏实地、执着与坚持，主动提升自身技能技能目标1A了解HTML语法的3种表达方式＞熟悉中常用的一些标签HTMLA掌握创建规则的方法CSS＞学会如何定义媒体查询学会如何设置属性»CSS＞学会利用样式定义一些特殊的属性CSS HTML是网页的主要组成部分，网页基本上都是由HTML语言组成的，可以说是网页的骨架因此，要制作出精HTML HTML彩的网页，必须从网页的基本语言学起，适当地了解一些语言HTML的知识，对开发网页大有裨益是（层叠样式表单）的简称顾名CSS CascadingStyle Sheets思义，它是一种设计网页样式的工具，可以增强网页修饰和增加网页个性利用样式，不仅可以将所有样式信息集中到页面的一个CSS地方，而且还可以创建一个独立的样式表文件，应用删除这一行vs v/s标签将使用比当前页面使用的字体更大的字体显示标签之间的文本vbig…/big例如0〈看起来特另！漂亮！font size=3big Jv/big/font〈标签将使用比当前页面使用的字体small,…/small删除这•一行更小的字体显示标签之间的文本例如看起来特别漂亮！字体〈〉小一些〈/更好！small small,字体小一些更好！标签为标签之间的文本加下划线例如:今天天气真好！u…/u图2・7标签示例效果今天天气真好！vu v/u上述四个例子在浏览器中预览的效果如图所示2-7注意0ct、〈、标签是在中定义的元素，在中不使用vs bigsmall,vu HTML
4.01HTML5x这些元素预格式化标签
4.vpre默认情况下，会将两个字符之间的多个空格替换为一个空格，然后在浏Dreamweaver览器中显示标签用于设定浏览器在输出时，对标签内部的内容几乎不做修vpre…v/pre改地输出例如，在的代码视图中输入以下代码再别康桥Dreamweaver vpre再别康桥再别康桥v/pre图2・8pre标签示例效果再别康桥该示例在浏览器中的显示效果如图・所示28
四、排版标签标签
1.br pvhrx x标签用于在文本中添加一个换行符，它不需要成对使用例如在这里换行1br第二行！vbr标签用来分隔文档的多个段落可选属性有三个取值，分别介绍2vp…v/p align”如下段落左对齐left:段落居中对齐center:段落右对齐A color:例如:二〉居中对齐vp aligncenter v/p标签用于在页面中添加一条水平线例如水平线上水平线下！3hr vhr上述三个例子在浏览器中的显示效果如图所示2-9和标签
2.vsub vsup标签将标签之间的文本设置成下标例如:sub…/sub是下标〈/123vsub123sub标签将标签之间的文本设置成上标例如:sup…/sup是上标456sup456v/sup上述两个例子在浏览器中的显示效果如图・所示210在边里换行第二行居中对齐123是下标⑵水平线上456是上标校水平线下标签示例效果图2-9标签示例效果图2・10和标签
3.vdiv vspan用于块级区域的格式化显示该标签可以把文档划分为若干部分,并div…/div分别设置不同的属性值，使同一文字区域内的文字显示不同的效果常用于设置样式CSS其常用格式如下对齐方式名称样式类名div align=id=style=class=nowrap…v/div其中，对齐方式可以为、和用于定义区域的名称；用于center leftright;id divstyle定义样式；用于赋予类名；说明不能换行，默认不加也就是可以换class nowrapnowrap,行例如第一段文本，默认左对齐显示vdiv v/divdiv align=center style=color:purple id=another第二段文本，文字颜色为紫色，且居中显示/div第二段支水二默式龙对齐显东.第二段克京.•文字频苞为黑苞丁宜居甲显示:上例在浏览器中的显示效果如图所示2-11图2・11Div标签示例效果用于定义内嵌的文本容器或区域，主要用于一个段落、句子甚至span…v/span单词中其格式为名称样式类名span id=style=class=/span标签没有属性，其他属性的意义和标签类似，标签同样在vspan aligndiv span样式表的应用方面特别有用，它们都用于动态例如HTMLspan style=ncolor:red;font-size:18ptn18点大小的红色字体v/span标签和标签的区别在于，是一个块级元素，可以包含段落、标题、表格，Div spandiv乃至诸如章节、摘要和备注等而是行内元素，的前后是不会换行的，它纯粹应span span用样式下面以一个实例来说明这两个属性的区别新建一个文档，并设置文档的背景图像1HTML切换到“代码”视图，在和标签之间输入以下代码2body v/body第一个span span/span第二个span span/span第三个spanspan/span第一个vdiv div/div第二个vdiv div/div第三个vdiv div/div保存文件，切换到“设计”视图，可以查看页面效果，如图所示32-12第一个span第二个span第三个span第二不第洋笳■兰和；图2・12div和span标签比较示例效果
五、列表标签在中，列表标签分为无序列表、有序列表和普通列表三种下面分别进行简要HTML介绍无序列表
1.所谓无序列表，是指列表项之间没有先后次序之分用来标记无序列表的vul…v/ul开始和结束其标签格式为〉...心其中每一个标签表示一个列表项vulv|v v/ul vli值例如:•网页制作
1.网页制作ul•程序设计
2.程序设计•网络管理
3.网络管理网页制作vli图2/3无序列表和有序列表的效果程序设计vli网络管理vli/ul上例在浏览器中的显示效果如图左图所示2-13有序列表
2.有序列表与普通列表不同之处在于有序列表存在序号用于标记有序列表vol…v/ol的开始和结束有序列表有一个属性，其值的功能介绍如下“type”表示用数字给列表项编号，这是默认设置type=l:表示用小写字母给列表项编号type=a:表示用大写字母给列表项编号type=A:表示用小写罗马字母给列表项编号type=i:表示用大写罗马字母给列表项编号type=I:例如ol网页制作vli程序设计v|i网络管理vli/ol该示例在浏览器中的显示效果如图右图所示2-13普通列表
3.普通列表通过〈小...〈出...出.../€的形式实现，通常用1€
1..,/€1”.../11于排版其中，标签用于创建一个普通的列表；用于创建列表中的Vdl…v/dl Vdt…v/dt上层项目；用于创建列表中最下层的项目和都必dd…v/dd dt…v/dt vdd...v/dd须放在标签之间vdl…v/dl使用示例网页制作FLASHdlFIREWORK程序设计JAVASCRIPT网页制作vdt VBSCRIPT图2・14普通列表效果ddFLASHddFIREWORK程序设计vdtdd JAVASCRIPTddVBSCRIPT/dl上述代码在浏览器中的显示效果如图所示2-14
六、表格标签通过表格可以将数据内容分门别类地显示出来，从而使网页显得整齐美观在中HTML制作表格是一件很容易的事标签
1.vtable表格由标签构成〈标签还有很多属性用于控制表格的显示效vtable...v/table table,果表格的常用属性介绍如下设置表格与页面对齐方式，取值有、和align:left centerright设置表格单元格内数据和单元格边框之间的边距，以像素为单位cellpadding:设置单元格之间的间距，以像素为单位cellspacing:设置表格的边框如果将该属性的值设置为则不显示表格的边框线border:0,设置表格的宽度，单位默认为像素，也可以使用百分比形式width:设置表格的高度，单位默认为像素，也可以使用百分比形式height:例如，下面的代码绘制了一个宽为像素、边框为、边距和间距为、行列的3001233表格table width=300border=H1n cellspacing=2H cellpadding=,2trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/trtrtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/trtrtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr/table和标签
2.tr vtdvthx标签用于标记表格一行的开始和结束常用的属性介绍如下1r…v/tr设置行中文本在单元格内的对齐方式，取值有、和align:left centerright设置行中单元格的背景颜色bgcolor用于标记表格内单元格的开始和结束，应位于标签内部常用2vtr的属性介绍如下设置单元格内容在单元格内的对齐方式，取值有、和align:left centerright设置单元格的背景颜色bgcolor:设置单元格的宽度，单位为像素width:设置单元格的高度，单位为像素height:的作用与大致相同，主要用于标记表格内表头的开始和结束，且其3vth..v/th td中的文本自动以粗体显示常用的属性如下设置内的内容应该跨越几列colspan:设置内的内容应该跨越几行rowspan:vth…/th和标签
3.vcolspan vrowspan和标签用于合并单元格，分别表示跨多列合并和跨多行合并例vcolspan vrowspan如，下面的代码table width=,,300border*”align=center”cellpadding=H2H cellspacing=2Htr名称th width=83scope=col”v/th参数th colspan=2scope=col”v/th/trtrtd123/tdtd width=119qwe/tdtd width=,70,,zxc/td名称参数/tr123qwe zxctr456asd fghtd456/td图2・15表格合并列的效果tdasd/tdtdfgh/td/tr/table该表格包含行歹第一行设置了跨两列的合并形式该表格在浏览器中的效果如33ij,图所示2-15
七、表单标签表单是文档中向用户提供信息，同时获取用户输入信息的网页元素数据输入HTML完毕后，单击“提交按钮，可将表单内的数据提交到服务器，服务器端根据输入的数据做相应的处理表单的应用相当广泛，登录注册、网上查询等功能都离不开表单标签
1.vform标签用于表示一个表单的开始与结束，并且通知服务器处理表单的vform...v/form内容，表单中的各种表单对象都要放在这两个标签之间常用属性介绍如下用于指定表单的名称name:指定提交表单后，将对表单进行外理的文件路径及名称（即）action:URL用于指定发送表单信息的方式，有方式（通过发送表单信息）method:GET URL和方式（通过发送表单信息）方式适合传递大量数据,但POST HTTPPOST速度较慢；方式适合传送少量数据，但速度快GET标签
2.vinput标签用于在表单内放置表单对象，此标签不需成对使用它有一个属性，vinput type对于不同的属性值，〈标签有不同的属性例如（文本域表单对象，type input,,type=text在文本框中显示文字）或type=,passwordH（密码域表单对象，在文本框中显示*号代替输入的文字，起保密作用）时，〈标签的属性如下input,文本框在浏览器的显示宽度，实际能输入的字符数由参数决定size:maxlength咱在文本框最多能输入的字符数maxle h:（提交按钮，用于提交表单）或（重置按钮，用于清空表单中type=submit type=reset已输入的内容）时，〈〉标签的属性如下input在按钮上显示的标签value:（单选钮）（复选钮）时，〈〉标签参数介绍如下type=radio type=checkbox input用于设定单选钮或复选钮的值value:可选参数，若带有该参数，则默认状态下该按钮是选中的同一组单checked:radio选按钮（属性相同）中最多只能有一个单选按钮带属性复选按钮name checked则无此限制type=,image（图像）时，Vinput〉标签参数介绍如下图像文件的名称src:图像无法显示时的替代文本alt:图像对象的对齐方式，取值可以是、、和align:top leftbottom middleright下面通过一段简单的代码演示〈标签的使用方法代码如下HTML input,form action=login_action.jsp method=POST姓名〈姓名input type=“text name=size*6br密石马〈二“密石马〈input type=password”name size=T6br性另！二J:input nameradiobutton”type=radio”value-,radiobutton,^input name=Hradiobutton type=^radio^value=radiobutton^:br爱好:input type=checkbox name=checkbox”图2-16input标签的示例效果运动value=checkbox”批注［王昭松1］这个“2”多余吗？input type=,,checkboxH name=checkbox2n value=checkbox”音乐vbr正确，不多余图像input name=,imageField type二image“src=dd.gif width=,16Hheight=16n border=0br〈发送“〉〈重设”〉input type=submit”value=input type=reset”value=/form上述代码在浏览器中的显示效果如图・所示216〈〉和〈标签
3.select option,标签用于在表单中插入一个列表框对象它与〈〉...〈/select.../select optionoption,标签一起使用，〈〉标签用于为列表框添加列表项标签的常用属性简要介option select绍如下指定列表框的名称name:指定列表框中显示多少列表项（行），如果列表项数目大于参数值，那size:size么通过滚动条来滚动显示指定列表框是否可以选中多项，默认下只能选择一项multiple:〈〉标签的参数有两个可选参数，介绍如下option用于设定在初始时本列表项是被默认选中的selected:用于设定本列表项的值，如果不设此项，则默认为标签后的内容value:在的“代码”视图的标签之间输入以下代码Dreamweaver vbody...v/bodyform action=none.jsp method=POSTselect name=Hfruits size=3multiple〉足球抹option selected足球篮垮乒丘〉蓝球option selected提交重宣乒乓球option value=My_Favorite图2・17示例效果〈〉羽毛球option/selectpinput type=submitinput type=reset/form保存文档，并按键在浏览器中查看显示效果，如图所示F122-17标签
4.vtextarea标签的作用与〈〉标签的属性值为时的作用相似，textarea…v/textarea inputtype text不同之处在于，显示的是多行多列的文本区域，而〈文本框只有一行textarea input,和之间的文本是文本区域的初始文本textarea v/textarea标签的常用属性如下vtextarea指定文本区域的名称name:文本区域的行数rows:文本区域的列数cols:用于设置是否自动换行，取值有（不换行，是默认设置）、（软换行）wrap:off soft和（硬换行）hard在“代码”视图的标签之间输入以下代码Dreamweaver body...v/bodyform action=7none.jsp method=“POST,textarea name二comment”「ows二5cols=,20n在这里输入要更徇的内容在这里输入要查询的内容/textarea提交重置图・示例效果b218rinput type=submitinput type=resetH/form保存文档，并按键在浏览器中预览显示效果，如图所示F122-18
八、其他标签标签
1.vimg图像可以使页面更加生动美观、富有生机在文档中，插入图像通过标HTML vimg签实现，该标签除属性不可缺省，其他属性均为可选项其属性如下src用于指定要插入图像的地址和名称src:用于设置当图像无法显示时的替换文本alt:和用于设置图片的宽度和高度width height:使用示例img src=Hnew.gif width=“20height=207标签
2.va最显著的优点就在于它支持文档的超链接，可以很方便地在不同文档以及同一HTML文档的不同位置之间跳转是通过链接标签实现超链接的标签是封闭性标签，HTML va其起止标签之间的内容即为锚标标签有两个不能同时使用的属性和此外a hrefname,还有属性等，分别介绍如下target用于指定目标文件的地址或页内锚点href:URL当超级链接的一个起点要链接到锚点时，应采用如下的格式a herf=v/a属性值的#号后的省略号为命名锚点的名字herf标签使用此属性后，在浏览器中单击锚标，页面将跳转到指定的页面或本页中指定a的锚点位置例如点击这里〈a href=url”v/a br表示当单击链接文本“点击这里”时，会打开所指向的文件页面url二〃锚点a herfhttp:www.tom.com/abc/
002.htm#abc”v/a批注[王昭松2]:这是什么网址？算外链为其他常用的网址吗？表示当点击链接起点文字“锚点”时，将会打开文件，并定位到该页面中命名为abc不可替换锚点的特定位置name:用于标识一个目标，该目标终点是一个文件中指明的特定的地方这种链批注[王昭松3]:同上接的终点就称为命名锚点例如不可替换a name=nametext/a用于设定打开新页面所在的目标窗口如果当前页面使用了框架技术，还target:可以把设置为框架名例如target仁〉锚点链接表示a herf=http://www.tom.com/abc/
002.htm#abc targemain”v/a批注[王昭松4]:同上当点击链接起点文字“锚点链接”时，将链接的页面在名为main的框架中打开不可替换标签
3.vmeta标签是实现元数据的主要标签，它能够提供文档的关键字、作者、描述等多种vmeta信息，在的头部可以包括任意数量的标签标签是非成对使用的标HTML metameta签，常用属性介绍如下用于定义一个元数据属性的名称name:用于定义元数据的属性值content:可以用于替代属性，服务器可以使用该属性从响应http-equiv:name HTTPHTTP头部收集信息用于定义文档的字符解码方式使用示例charset:制作”〉meta name=keywords*content=comeymeta name=description*content=ncomey制作”〉meta http-equiv=Content-Type content=text/html;charset=gb2312标签
4.vlink标签定义了文档之间的包含，通常用于链接外部样式表，它把写到一个扩展vlink CSS名为的文件中，主要用于多个页面排版风格的统一控制，避免单个页面重复地设置.css样式是一个非封闭性标签，只能在中使用CSS vlinkvhead...v/head在的头部可以包含任意数量的标签标签带有很多属性，下面介绍HTML linklink的是一些常用的属性用于设置链接资源所在的href:URL用于描述链接关系的字符串title:用于定义文档和所链接资源的链接关系，可能的取值有rel:Alternate,Stylesheet,Start,Next,Prev,Contents,Index,Glossary,Copyright,Chapter,Section,和等如果希望指定不止一个链接关系，可Subsection,Appendix,Help Bookmark以在这些值之间用空格隔开用于定义文档和所链接资源之间的反向关系其可能的取值与属性相同rev:rel于多个页面例如，〈link rel=HShortcut Iconhref=nsoim.ico＞,表示将浏览器地址栏里面的e图标替换为属性指向的图标，当收藏该页时候，收藏夹里的图片也将随之改变href＜「＞表示把文档和一个文档连link href=css.css”el=stylesheet”type=text/css”CSS接起来，在网页中应用文件作为其外部样式表css.css＞标签
5.vbase＞标签是一个非封闭性的基链接标签，定义文档的基础地址在文档中所有vbase URL的相对地址形式的都是相对于这里定义的而言的一篇文档中的＜＞标签URL URLbase不能多于一个，必须定义于标签＞与＞之间，并且应该在任何包含地址vhead v/head URL的语句之前＜＞标签的属性简要介绍如下base＞指定了文档的基础地址该属性在＜＞标签中是必须存在的href:URL6@§©＞属性与框架一起使用，它定义了当文档中的链接被点击后，在哪一个target:target框架集中展开页面如果文档中超级链接没有明确指定展开页面的目标框架集，则使用这里定义的地址代替例如，如果在HTML文档的头部定义了〈base href=Htarget=,,_blank,＞,则单击链接va href=,document.html target=_self＞document＜/a＞,将打开文件，也就是在相对路径的文件前加上基链接指向的地址如果目标文件中的链接没有指定属性，就用target base标签中的属性target＞标签
6.vbgsound＞标签常用于在网页中添加背景音乐，常用的两个属性为属性和属vbgsound srcloop性其中，属性用于设置要加载的背景音乐的地址属性用于设置背景音乐播src URLoop放的循环次数，当其属性值设置为时，表示背景音乐无限循环播放，至到页面被关闭-1例如，＜＞＞表示添力口网页相同目录bgsound src=sound.wav”loop=3v/bgsound下的文件作为背景音乐，并设置循环播放次数为次sound.wav3＞标签
7.vstyle〈〉…〈/标签用于在网页中创建样式，也叫嵌入样式表，它把直接写入style style,CSS到的部分，这是最为典型的使用方法在制作网站时不建议这样使用，HTML headCSS应将网页结构与样式分离，便于维护在〈标签中可以创建多个不同的命名样式文档内容可以直接运用这些定义好的style,样式例如＜＞style type=text/css＜!—body{background-image:urllogo.gif;background-repeat:repeat;a:link{color:#006600;text-decoration:none;a:visited{text-decoration:none;color:#660000;a:hover{text-decoration:none;a:active{text-decoration:none;color:#0000FF;—/style在上面的代码中，〈标签定义了个样式分别用于设置页面背景图像、未访问style,5过的链接颜色、已访问过的链接颜色、当前链接和活动链接颜色如果要在文本中应用上述样式，可以在文字修饰标签中应用属性和属性值例如class我的主页font class=a:active”v/font〈〉标签
8.marquee〈〉…〈/标签用于在页面中设置滚动字幕常用的属性如下marquee marquee,用于设置字幕的滚动方向direction:用于设置字幕的滚动方式，属性值可设置为、behavior:slide alternateo用于设置字幕滚动时的循环次数，属性值可设置为整数，若未指定，则循环不A loop:止infiniteo用于设置字幕滚动的速度，属性值为整数scrollamount:用于设置字幕滚动的延迟时间，属性值为整数scrolldelay:例如marquee loop=3width=50%behavior=,slide scrolldelay=“500”心］讨二冈!|冈!风无意吹起！55011101100”1/marquee任务基础3CSS任务引入小明已经对的标签有了详细的了解，但是在设计网页是有时也需要考虑外观、图HTML片、字体以及布局方案等表现在页面上的内容，这些可以使用层叠样式表（）来实现，CSS以给网站浏览者更好的体验，那么什么是它的基本组成有哪些呢？CSS,v知识准备.
一、CSS概述（层叠样式表）是一种对文本进行格式化操作的高级技术，从一个较高的级别上CSS对文本进行控制使用设置页面格式时，内容与表现形式是相互分离的页面内容位CSS于自身的文件中，而定义代码表现形式的规则位于外部样式表或文档的HTML CSS HTML另一部分（通常为＜＞部分，head使用可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和CSS样式等，不仅可以控制一篇文档中的样式，而且采用外部链接的方式，可以控制多篇文档的样式与样式不同，对样式的定义进行修改时，所有应用该样式的格式也HTML CSS会自动发生改变提供了对样式创作的完美支持，使用设计器”面板可以Dreamweaver2021CSS“CSS可视化方式详细显示属性，包括布局、文本格式、边框、背景，并能自定义属性CSS CSS批注［王昭松5］框模型？请核利用CSS启用/禁用功能，开发人员可以直接在“CSS设计器”面板中禁用或重新启用部去掉“框模型”三个字分属性，不必直接在代码中做出更改，就可直接查看页面效果此外，CSS Dreamweaver还能识别现有文档中已定义的样式，方便用户对现有文档进行修改2021CSS借助支持对代码提示，可在实时视图中快速编辑HTML5,Dreamweaver2021CSS3属性并预览效果；通过与集成，可在实时视图中呈现过渡、CSS3CEF32357CSS33D动画和变形
二、CSS样式表的组成样式表由样式规则组成，告诉浏览器怎样去呈现一个文档将样式规则加入到文HTML档中有多种方法，最简单的方法是使用的标记，这个元素放置于文档的HTML stylehead部分，包含网页的样式规则样式表每个规则的组成包括一个选择器（通常是一个的元素例如、CSSHTMLbody p或）和该选择器接受的样式定义一个元素可使用多种属性，每个属性带一个值，共em同描述选择器呈现的方式样式规则组成如下选择器{属性1:值1;属性2:值2}单一选择器的复合样式声明应该用分号隔开以下代码定义了和元素的颜色和hi h2字体大小属性head〈〉第一个例子田title CSSv/t estyletype=text/cssHhi{font-size:x-large;color:red}h2{font-size:large;color:blue}/style/head上述的样式表告诉浏览器用加大、红色字体显示一级标题；用大号、蓝色字体显示二级标题为了减少样式表的重复声明，组合的选择器声明是允许的例如，文档中所有的标题可以通过组合给出相同的声明hi,h2,h3,h4,h5,h6{color:red;font-family:sans-serif}下面分别介绍样式表的各个组成部分选择器
1.选择器是指向特别样式的元素根据声明的不同，可把选择器分为类4（）标签单个元素作为选择器例如1htmlp{text-indent:3em}其中，选择器是p（洪:为样式规则命名的选择器一个元素的选择器可以有不同的（类）,2html class因而允许同一元素有不同样式例如，希望文本在不同段落使用不同的颜色显示，可以定义以下样式p.red{color:red}p.green{color:green}以上的例子建立了和两个类，供不同的段落使用各标签的属性用于red greenclass在中指明元素使用的样式类，例如html段文本p class=red v/p则段内文本使用类样式p.red类的声明也可以没有相关元素，例如｛｝.cnO1font-size:small在这个例子，名为的类可以被用于任何元素.cn01（）复合内容复合内容选择器是一个用空格隔开的两个或多个单一选择器组成的字3符串这些选择器可以指定一般属性，并且由于层叠顺序的规则，它们的优先权比单一的选择器大例如｛｝p embackground:red这个例子中关联选择器是这个值表示段落中的强调文本会是红色背景；而标题pem的强调文本则不受影响（）选择器用于个别地定义每个元素的成分选择器名称前要有指示符例如，4ID:ID ID选择器可以如下指定ID｛｝#myid text-indent:3em使用选择器的方式如下ID文本缩进p id=myid3em/p属性
2.通过设置选择器的属性指定样式属性包括颜色、边界和字体等.值3值是一个属性接受的指定例如，属性“颜色”能接受值red注释
4.样式表里面的注释使用与语言编程中一样的约定方法指定例如C/*COMMENTS CANNOTBE NESTED*/.伪类和伪元素5伪类和伪元素是特殊的类和元素，能自动地被支持的浏览器识别例如CSS visited links（已访问的连接）和（可激活连接）描述了两个定位锚（）的类型伪元素active linksanchors指元素的一部分，例如段落的第一个字母伪类和伪元素规则的形式如下伪类｛属性值｝伪元素｛属性值｝一般的类可以与伪类和伪元素一起使用，如下选择符.类伪类｛属性值｝选择符.类伪元素｛属性值｝常用的伪类和伪元素有定位锚伪类1伪类可以指定元素以不同的方式显示链接已访问链接图像变换a links\visitedlinks\链接和活动连接对应的伪类为、、、hover linksactive linksa:link a:visited a:hover a:activeoa:link{color:red}a:active{color:blue;font-size:125%}a:visited{color:green;font-size:85%}首行伪元素2通常报纸上的文章在文本的首行都会以粗体而且全css=全部当前+»部大写展示首行伪元素可以用于任何块级元素例如、p等以下是一个首行伪元素的例子hi法程涔P知法CSS烷跟p:first-line{font-variant:small-caps;font-weight:Ktt口断集bold}首字母伪元素3首个字母伪元素用于产生加大和下沉效果一个首字母伪元素可以用于任何块级元素例如所有植式列出整个文幽颇Ip:first-letter{font-size:300%;float:left}图2・19CSS设计器”面板则段落中首字母会比普通字体加大倍3例如:在中以可视化方式格式化网Dreamweaver2021页元素时，会自动生成相应的样式，以后要再次使用相同的样式，只需选中对象后,在CSS属性面板的“目标规则”下拉列表中选择需要的样式即可CSS执行“窗口”|设计器”命令，或单击属性面板上的设计器”按钮，即可“CSS“CSS打开设计器”面板,如图所示“CSS2-19在中，全部功能合并在一个面板集合中，通过选项卡式控件Dreamweaver2021CSS协助用户以简便、直观的方式设置属性；精心计算的行可在用户设置属性时进入最适CSS当的选项卡批注[王昭松6]:什么意思？利用设计器”面板可以跟踪影响当前所选页面元素的规则和属性，或影响整本句话的意思是可以将设置的某些特殊“CSS CSS定的行，该句正确个文档的规则和属性，还可以在不打开外部样式表的情况下“可视化”地创建、修改样CSS式和规则，并设置属性和媒体查询下面简要介绍设计器”面板的组成“CSS全部“全部”模式此模式列出当前文档中的所有、媒体查询和选择器，对CSS“设计”或“实时”视图中的选定内容不敏感这意味着选择页面上的元素时，关联的选择器、媒体查询不会在设计器中高亮显示通常使用此选项开始创CSS建、选择器或媒体查询CSS当前“当前”模式此模式列出当前文档的“设计”或“实时”视图中所有选定元素的已计算样式在“代码”视图中将此模式用于文件时，将显示处于“焦CSS点”状态的选择器的所有属性通常使用此模式来编辑与文档中所选元素关联的选择器的属性源列出与文档相关的所有样式表使用此窗格可以创建并将其附加CSS CSS,到文档，或定义文档中的样式@媒体列出所选源中的全部媒体查询如果不选择特定则显示与文档关联CSS,的所有媒体查询选择器列出所选源中的全部选择器如果同时还选择了一个媒体查询，则会为该媒体查询缩小选择器列表范围如果没有选择或媒体查询，则显示文档中CSS的所有选择器属性显示可为指定的选择器设置的属性设计器是上下文相关的这意味着，对于任何给定的上下文或选定的页面元素,用CSS户都可以查看关联的选择器和属性而且，在设计器中选中某个选择器时，关联的源CSS和媒体查询将在各自的窗格中高亮显示任务设计器4CSS任务引入了解了的基本概念后，就可以创建样式，以可视化方式格式化网页元素,这CSS CSS样要再次使用相同样式时，只需选中对象后，在属性面板的“目标规则”下拉列表中选择需要的样式即可，达到了事半功倍的效果，那么要如何创建和附加样式表，如何定义CSS选择器以及设置属性呢？CSS CSS弋，父知识准备.
一、创建和附加样式表创建和附加样式表的步骤如下在设计器”面板的“源”窗格中，单击“添加源”按钮+,在弹出的下1“CSS CSS拉菜单中选择定义规则的方式CSS创建新的文件创建新文件并将其附加到文档选择该项，将弹出“创CSS CSS建新的文件”对话框,如图所示CSS2-20文件指一个包含样式和格式规范的外部文本文件对一个文件进行编辑后,所CSS CSS有与该样式表链接的文档都会进行相应的更新CSS附加现有的文件将现有文件附加到文档选择该项，将弹出“使用现CSS CSS有的文件”对话框，如图所示CSS2-21在页面中定义直接在文档内定义使用现肓的css文件CSS文件/URLF:|剂口为o皤Lo导入0有条件使用《可选〉图2-20“创建新的CSS文件”对话框图2-21“使用现有的CSS文件”对话框单击“浏览”按钮鼻二:,指定文件的名称如果要创建还要指定保存2CSS CSS,新文件的路径指定文件与当前文档的联系方式链接或导入3CSS两者的区别在于，“导入”会将文件的信息带入当前文档；而链接”则只读取和传CSS送信息，不会转移信息虽然“导入”和“链接都可以将外部样式表中的所有样式调CSS用到当前文档中，但“链接可以提供的功能更多，适用的浏览器也更多单击“确定”按钮关闭对话框4
二、定义媒体查询媒体查询是的重要内容之一，可以根据客户端的介质和屏幕大小，提供不同的CSS3样式表或者只展示样式表中的一部分通过响应式布局，可以达到只使用单一文件提供多平台的兼容性在中定义媒体查询的操作步骤如下Dreamweaver2021打开设计器”面板，在“源”窗格中单击要定义媒体查询的源1“CSS CSS在“@媒体”窗格中单击“添加媒体查询“按钮+,弹出“定义媒体查询”对话框，2如图所示，其中列出了支持的所有媒体查询条件2-22Dreamweaver根据需要选择“条件”，确保为选择的所有条件指定有效值否则，无法成功创建相3应的媒体查询熟悉代码的用户也可以直接在代码区域书写不同设备的代码，例如@media screen and min-width:600px{/*style sheetfor screen*/}@media screenand max-width:599px{/*style sheetfor screen*/}通过代码添加媒体查询条件时，“定义媒体查询”对话框中只显示受支持的条件，但“代码”文本框会完整地显示代码包括不支持的条件卜如果不同的代码段有冲突或者重叠,则按照原本的代码优先级排序CSS如果要添加条件，将鼠标移到条件下拉列表框上，右侧将显示“添加条件”和“移4除条件”按钮单击“添加条件”按钮，即可添加条件，且两个条件间显示,如图“And”2-23所示通过使用媒体查询语句，可以对屏幕大小进行判断，生成响应式布局and定义媒体查询后，在页面中声明一个媒体属性可以用或@引入，如下@import01643所示©import urlvoice.css speech;@media screenand min-width:600px{/*style sheetfor screen*/也可以在文档标记中引入媒体vheadlink rel=stylesheet type=text/css media=screenandmin-width:600pxH图2・22定义媒体查询”对话框图2・23添加条件href=foo.css从上面的代码可以看出，和@可匕的区别在于，前者引入外部的样式表©import171用于媒体类型，后者直接引入媒体属性的使用方法是加样式voice.css©import@import表文件的地址再加媒体类型，可以多个媒体共用一个样式表，媒体类型之间用逗号分URL隔用法则是把媒体类型放在前面@media print通过媒体类型，可以对不同的设备指定特定的样式，从而实现更丰富的界面中默认的媒体类型如图所示Dreamweaver20212-24指计算机屏幕screen:o screenprint handheldaural print:指用于打印机的不透明介质brailleprojectionttytv图2・24媒体类型列表指手持式显示设备小屏幕，单色handheld指语音电子合成器aural:盲文系统，指有触觉效果的印刷品braille:指用于显示的项目projection:固定字母间距的网格的媒体，比如电传打字机tty:指电视类型的媒体tv:
三、定义CSS选择器打开设计器”面板，在“源”窗格中选择要定义选择器的源，或在“@媒1“CSS CSS体”窗格中选择某个媒体查询在“选择器”窗格中单击“添加选择器”按钮根据在文档中选择的元素，设计2CSS器会智能确定并提示使用相关选择器最多三条规则b在这里，用户可执行下列一个或多个操作使用向上或向下箭头键选择需要的选择器CSSOrta键入选择器名称以及选择器类型的指示符自定义选择器±9百即例如，如果要指定在选择器名称之前添加前缀ID,♦MW个月♦-若要搜索特定选择器，可以使用窗格顶部的搜索框a及若要重命名选择器，单击选择器，然后键入所需的名称方族至代码所■制班式若要重新整理选择器，使用鼠标将选择器拖至所需位置凝，加样式H»£»J加林式若要将选择器从一个源移至另一个源，则将选择器新式列出格力女曲融I图选择复制样式
2.25拖至“源”窗格中所需的源上若要复制所选源中的选择器，则右键单击选择器，在弹出的快捷菜单中选择需要的复制命令，如图所示，可以复制所有样式或仅复制一个选择器中的布局、2-25文本和边框等特定类别的样式到其他选择器中若要复制选择器并将其添加到媒体查询中，则右击该选择器，将鼠标悬停在“复制到媒体查询中”上，然后选择该子菜单中的媒体查询
四、设置CSS属性默认情况下，只能查看已设置的属性如果要查看为选择器指定的所有属性，取消勾选“显示集”复选框即可属性分为布局、文本、边框、背景和更多等几个类别，并在“属性”窗格顶部以直CSS观、友好的图标表示，图所示2-26在“属性”窗格顶部单击属性类别图标，进入相应的属性选项卡12单击“属性”窗格中下方显示的所需选项批注[王昭松这是什么意7]:思？将“属性右侧”改为使用两套图标表示“未设置/已删除”和“停用”状态，被覆盖的Dreamweaver2021“下方”属性使用删除线格式表示如果要自定义属性，在输入属性值时，将显示代码提示，如图2-27所示任务基础1HTML任务引入网页一般是由语言组成的，是编写网页的主要语言，所以要想编写出自HTML HTML己需要的网页，小明首先需要对有一个详细的了解那么什么事呢，的HTML HTML HTML特性有哪些？声）知识准备’
一、HTML语言概述是的首字母缩写，通常称作超文本标签语言，或HTML HyperTextMarkup Language超文本链接标记语言，它是基于（标准通用SGML StandardGeneral MarkupLanguage,标签语言）的一种描述性语言，由（全球信息网协会）W3C Worldwide WebConsortium,推出，并被国际标准认可，是用于建立页面和其他超级文本的语言，是ISO8879web WWW的描述语言并不是真正的程序设计语言，它只是标签语言使用编写的网页文件是HTML HTML标准的文件，扩展名通常为或可以用任何文本编辑器建立页面，ASCII.htm.html HTML例如的“记事本”程序Windows文本是由命令组成的描述性文本，可以说明文字、图形、动画、声音、表HTML HTML格、链接等，它能独立于各种操作系统平台（如等使用语言描UNIX,WINDOWS1HTML述的文件，需要通过浏览器显示效果，浏览器先读取网页中的代码，分析其语法结HTML构，然后根据解释的结果，将单调乏味的文字显示为丰富多彩的网页内容正是因为如此，网页显示的速+国性后因已囹臼口显示集布U式碘.壬”母今刎度与网页代码的质量有很大的关系，保持精简、高效图2・27属性值提示的源代码是非常重要的HTML近年来，读者可能经常在网络上看到所谓是针对而言的,“HTML5HTML5,HTML4是与（）双方合W3C WHATWGWeb HypertextApplication TechnologyWorking Group作创建的一个新版本的,其前身名为，将成为、HTML WebApplications
1.0HTML XHTML以及的新标准增加了更多样化的提供了嵌入音频、视频、图HTML DOMHTML5API,片的函数、客户端数据存储，以及交互式文档图2-26设置CSS属性面简要介绍一些常用的属性和值F CSS布局属性
1.Layout属性1margin属性分为、、和四个属性,分margin margin-top margin-right margin-bottom margin-left别表示盒模型四个方向的外边距，它的属性值是数值单位，可以是长度、百分比或auto,甚至可以设为负值，实现容器与容器之间的重叠显示，使用示例margin#side{margin-top:6px;}hi{margin-right:
12.5%;}还有一个简写方法，就是直接用属性，四个值之间用空格隔开，顺序是margin margin“上右下左”,例如body{margin:5px10px2px10px;}上面的代码等同于body margin-top:5px;margin-right:10px;margin-bottom:2px;margin-left:10px;当然属性的值也可以不足四个，例如margin所有的都设为#side{margin:2px;}/*margin2Px*/上下为左右为#side{margin:1px5px;}/*margin1px,margin5px*/上为,左右为,下#side{margin:Opx2px3px;}/*margin0margin2px margin为3px*/属性2padding属性用于描述盒模型的内容与边框之间的距离，与属性类似，它也分padding margin为上、右、下、左和简写方式使用示例paddingContainer{padding-left:20px;}属性与类似padding margin属性3position属性用于指定元素的位置类型，各个属性值的含义如下position屏幕上的绝对位置位置将依据浏览器左上角开始计算绝对定位使元absolute:素可以覆盖页面上的其他元素，并可以通过来控制它的层级次序z-index屏幕上的相对位置相对定位时，移动元素会导致它覆盖其他元素relative:固有位置，是属性的初始值static:position相对定位和绝对定位需要配合、来指定具体位置此外，这四个top right,bottom,left属性同时只能使用相邻的两个，不能使用又使用或同时使用和使用top bottomright left示例#menu{position:absolute;left:100px;top:Opx;}#menu ulli{positionrelative;right:100px;bottom:Opx;}和属性4float clear在中，任何元素都可以浮动浮动元素会生成一个块级框，而不论它本身是何种CSS元素设置元素浮动后应指明一个宽度，否则它会尽可能地窄；当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间属性有三个值、、用于指定元素将飘浮在其他元素的左方或右方，float leftright none,或不浮动使用示例#side{height:300px;width:120px;float:left;}相反地，使用属性将禁止元素飘浮其属性值有、、、初始clear leftright bothnone,值为使用示例noneoclearfloat{cleanboth;font-size:1px;line-height:Opx;}属性5overflow在规定元素的宽度和高度时，如果元素的宽度或高度不足以显示全部内容，就要用至属性的属性值含义如下ij overflowOverflow增大宽度或高度，以显示所有内容visible:隐藏超出范围的内容hidden:在元素的右边显示一个滚动条scroll:当内容超出元素宽度或高度时，显示滚动条，让高度自适应auto:使用示例.nav_main{height:36px;overflow:hidden;}属性6z-index在中允许元素重叠显示，这样就有一个显示顺序的问题，属性用于描述CSS z-index元素的前后位置使用整数表示元素的前后位置，数值越大，就会显示在相对越靠前的位置，适z-index用于使用属性的元素初始值为可以使用负数position z-index auto,文本和背景属性
2.属性1font-family・用于指定网页中文本的字体取值可以是多个字体，字体间用逗号分隔使font family用示例body,td,th{font-family:Georgia,Times NewRoman,Times,serif;}属性2font-style属性用于设置字体风格，取值可以是普通,斜体或font-style normalitalicoblique倾斜卜使用示例属性属性用于设p{font-style:normal;}hi{font-style:italic;}3font-size font-size置字体显示的大小这里的字体大小可以是绝对大、“X xx-smalk x-smalk smalLmedium、、相对大小、绝对长度使用的单位为-像素和large x-large xx-large Xlarger smaller\pt英寸或百分比，默认值为使用示例in-mediumo hi{font-size:x-large;}h2{font-size:18pt;}li{font-size:90%;}stong{font-size:larger;}属性4font属性用作不同字体属性的略写，可以同时定义字体的多种属性，各属性之间以空font格间隔使用示例华文宋体;}p{font:italic bold16pt属性5color颜色属性用于指定一个元素的颜色使用示例colorh1{color:black;}h3{color:#ffOOOO;}为了避免与用户的样式表之间的冲突，背景和颜色属性应该始终一起指定6background-color JS14背景颜色属性用于设置一个元素的背景颜色，取值可以是颜色代码background-color或透明］使用示例:transparent匚为了避免与用body{background-colo white;}h1{background-color:#000080;}户的样式表之间的冲突，无论是否指定了背景颜色，背景图像都应该被指定而大多数情况下，都是合适的网页制作者也可以使用略background-image:none写的背景属性，通常会比背景颜色属性获得更好的支持属性7background-image・背景图像属性用于设置一个元素的背景图像使用示例background imagebody{background-image:url/images/bg.gif;}考虑那些不加载图像的浏览者，定义背景图像时，应同时定义一个类似的背景颜色属性8background-repeat・属性用来描述背景图片的重复排列方式，取值可以是沿background repeatrepeat X轴和轴两个方向重复显示图片\沿轴方向重复图片和叩沿轴方向Y repeat-xX reat-yY重复图片\使用示例body{background-image:urlpendant.gif;background-repeat:repeat-y;属性9background背景属性用作不同背景属性的略写，可以同时定义背景的多种属性，各属background性之间以空格间隔使用示例P{background:url/images/bg.gif yellow;}属性10line-height行高属性可以接受一个控制文本基线之间的间隔的值取值可以是line-height normal,数字、长度和百分比当值为数字时，行高由元素字体大小的量与该数字相乘所得百分比的值相对于元素字体的大小而定不允许使用负值行高也可以由带有字体大小的字体属性产生使用示例p{line-height:120%;}边框属性
3.属性用于描述盒模型的边框属性包括、和border borderborder-width border-color这些属性下面又有分支，下面分别进行简要介绍border-style,属性用于设置边框宽度，又分为border-width:border-top-width border-right-width%、和属性，值用长度border-bottom-width border-left-width border-width thin/medium/thick或长度单位表示与属性类似,为简写方式,顺序为上、右、下、左，margin border-width值之间用空格隔开使用示例img{border-width:Opx;...令46属性用来设置对象边框的样式，它的属性值为规定的关键字，平常border-style CSS看不到是因为其初始值为属性值的名称和代表意义简要介绍如下border none无边框none:边框为点线dotted:边框为长短线dashed:边框为实线solid:边框为双线double:和显示不同效果的边框根据属性groove ridgeinset outset:3D color属性用来显示边框颜色，分为border-color border-top-color^border-right-color.属性,属性值为颜色，可以用十六进制border-bottom-color border-right-color border-colorx表示，也可用表示，为快捷方式，顺序为上、右、下、左，值之间用空RGB border-color格隔开使用示例img{border-color:#EC7B37;如果要同时设置边框的以上三种属性，可以使用简写方式属性值之间用空格隔border,开，顺序为“边框宽度边框样式边框颜色”，例如#layout{border:2px solid#EC7B37;还可以用、、分别作为上、右、下、bordeotop border-right border-bottom border-leftN左的快捷方式，属性值顺序与属性相同border综合案例样式的应用css面以一个例子演示样式在格式化文本中的应用本例实现的效果是，在文档F CSS中建立一个链接，用样式控制链接文本字体为隶书、无下划线、蓝色，如图左图所CSS8-10示；当光标移动到链接文本上方时，文本字体变大，且颜色变成红色效果如图右图2-28所示无坛题文也x7图2-28实例效果CSS控制链接文本莺式新建一个文件，打开“页面属性”对话框，设置字体为“隶书”，大小为1HTML36,并设置背景图像然后在“设计”视图中输入控制链接文本格式”“CSS选中文本，在属性面板中的“链接”文本框中随意输入若干字符，这样文本将成为一2个超链接，如图所示2-29选中文本,执行“窗口”|设计器”命令在设计器”面板中单击“添3“CSS“CSS加源”按钮，在弹出的下拉菜单中选择“在页面中定义”；单击“选择器”窗格上的CSS“添加选择器”按钮+,输入选择器名称为如图所示a:link,2-30图2・29普通链接效果在“属性”窗格单击“文本”图标，设置文本颜色为蓝色，字体为隶书，字号为4无下划线，如图・所示36px,231设置完成后，可以在“设计”视图中实时5文件瓶入CSS设计器»I=全部当前预览应用样式的效果+强vstyteA+的眸全后6选中文本，打开“CSS设计器”面板，单+-选泽番:a:hovcr+Ktt击“选择器”窗格上的“添加选择器”按钮+,S日匕砺集S文本设置选择器名称为color:画聿-a:hovero font-family米书font-size48px在“属性”窗格单击“文本”图标，设7textdecoration・区］T亍子置文本颜色为红色，字体为隶书，字号为无48px,图2・32定义a:hover的属性下划线，如图・所示232CSS过曲果CSS设计器=全部当前*源:5tyie+©探体:全后+-:a:hnk+属性SB宣示生国文本color:富#074364font-family隶书font-size36px日MB QTT图2・31定义a:link的属性至此，实例制作完成，可以按下键进行测试了当光标移动到链接文本上方时，文本F12字体变大并且颜色变成红色；光标移开时，链接文本恢复为蓝色和较小字体显示［项目总结实战一编写网页文件执行“文件”/“新建”命令，在打开的“新建文档”对话框中选择“新建文档”类1别的基本项，然后选择框架栏的“无”，单击“创建”按钮，新建一个网页文件HTML切换到代码”视图，用语言编写如下代码2HTMLul〉今天天气真好！vli/li〉今天天气真好！vli/li〉今天天气真好！vli/li/ul执行执行“文件保存”命令，保存网页文件，在浏览器中预览效果结果如图32-33所示今天天气真好！•今天天气真好！•今天天气真好！•图预览效果2-33实战二用CSS样式控制文本样式新建一个文件，在“设计”视图中输入文本“标题一”1HTML选中文本,执行“窗口”|设计器”命令在设计器”面板中单击“添2“CSS“CSS加源”按钮，在弹出的下拉菜单中选择“在页面中定义”；单击“选择器”窗格上的CSS“添加选择器”按钮，输入选择器名称为hi在“属性”窗格单击“文本图标，设置文本颜色为蓝色，字体为楷体，字号为348px,无下划线选中文本，在属性面板的“格式”下拉列表中选择“标题，结果如图4HTML1”2-34所示标题一图・文字效果234默认的文档类型为下面我们来简单了解一下Dreamweaver2021HTML HTML5O中的一些有趣的特性HTML5用于绘画的元素canvas用于媒体回放的和元素video audio对本地离线存储的更好支持特殊内容元素，比如、article footerheader navsection表单控件，比如、、calendar datetime emailurR search尽管仍处于完善之中，然而，现在大部分现代浏览器已经具备了某些支HTML5HTML5持，例如、、、版本以上）及（Firefox ChromeOpera SafarR4Internet Explorer9Platform）已支持技术网页设计师们可以使用和创建页面代码更Preview HTML5HTML5CSS3富语义化、视听效果更炫的网页作品
二、HTML的语法特性超文本标记语言通过各种标记表示和排列各种对象标记由符号以及其中所包容的标记元素组成例如，希望在浏览器中显示一段加粗的文本，可以采用标记和b v/b:vb加粗的文本v/b在用浏览器显示时，标记和不会被显示，浏览器在文档中发现了这对标记，就b v/b将其中包容的文字（这里是“加粗的文本”）以粗体形式显示一般来说，的语法有种表达形式HTML3v标记〉对象/标记》〈标记属性参数属性二参数对象/标记〉1=122〈标，己〉标记的书写是与大小写无关的严格地说，标记与标记元素不同标记元素是位于“v”和“〉”符号之间的内容，而标记则包括了标记元素和“V”和“〉”符号本身由于脱离了“V”和符号的标记元素毫无意义，因此，在本书后面的章节中，如非必要，将不区分标记和标记元素，而统一称作“标记”下面分别对以上种表达形式及标记的嵌套进行介绍3V标记》对象v/标记》
1.该语法示例显示使用封闭类型标记的形式大多数标记是封闭类型的，成对出现在对象内容的前面是一个标记，在对象内容的后面是另一个标记，第二个标记元素前带有反斜线，表明结束标记对对象的控制下面是一些示例这是标题（浏览器以标题格式显示标记间的文本）vh11/h11V》这段文字是斜体文字V/〉（浏览器以斜体格式显示标记间的文本）如果一个应该封闭的标记没有封闭，会产生意料不到的错误，随浏览器不同，出错的结果可能也不同例如，如果忘记以＜＞标记封闭对文字格式的设置，可能后面所有的/h1文字都会以标题的格式出现1〈标记属性参数属性参数＞对象v/标记》
2.1=12=2该语法示例显示使用封闭类型标记的扩展形式利用属性可以进一步设置对象某方面的内容，而参数则是设置的结果例如，在如下的语句中，设置了标记＜＞的属性a href＜ahref=un＞Adobe公司主页v/a＞＞和＞是锚标记，用于在文档中创建超级链接，是该标记的属性之一，用于设va v/a href置超级链接所指向的地址“二”后面的内容是属性的参数，在这里是公司的href Adobe网址公司主页”等文字是被＜＞和＞包容的对象“Adobe av/a一个标记的属性可能不止一个，可以在描述完一个属性后，输入一个空格，然后继续描述其他属性v标记〉
3.该语法示例显示使用非封闭类型标记的形式在语言中，非封闭类型很少，最HTML常用的是换行标记＞vbr例如，希望一行文字中间换行（但是仍然与上面的文字属于一个段落），可以在文字要换行的地方添加标记＞例如vbr,这是一段完整的段落＞中间被换行处理vbr在浏览器上会显示为两行，但它们仍然属于同一段落标记嵌套
4.几乎所有的代码都是上面三种形式的组合，标记之间可以相互嵌套，形成更为复杂的HTML语法例如，希望将一行文本同时设置粗体和斜体格式，可以采用下面的语句＞〈＞vb i这是一段既是粗体又是斜体的文本＞＞v/i v/b在嵌套标记时，需要注意标记的嵌套顺序，如果标记的嵌套顺序发生混乱，可能会出现不可预料的结果例如，对于上面的例子也可以这样写〉＞这是一段既是粗体又是斜体的文本＞＞v vb v/b vA但是尽量不要写成如下的形式＞〈＞这是一段既是粗体又是斜体的文本＞＞vb iv/bv/i上面的语句中，标记嵌套发生了错误幸运的是，大多数浏览器可以正确理解这个例子对于其他的一些标记，如果嵌套发生错误的话，就不一定有这么好的运气了为了保证文档有更好的兼容性，尽量避免标记嵌套顺序的错误任务常用的标签2HTML任务引入小明已经对语言的概念有了一个大概的了解，接下来可以利用语言设计HTML HTML编写网页，但是为了确保语言编写的规范，避免出现错误，还需要了解中一些常用HTNL的标签，那么具体有哪些标签，这些标签的作用是什么呢？炉，知识准备;本节将详细介绍中常用的一些标签掌握这些标签的用法，对今后的网页制作HTML可以起到事半功倍的效果
一、文档的结构标签在中创建一个空白的文档（文档类型默认为）后，Dreamweaver2021HTML HTML5如果切换到“代码”视图，用户会发现，尽管新建文档的“设计”视图是空白的，但是“代码”视图中已经有了不少源代码在默认状态下，这些源代码如下所示!doctype htmlhtmlheadmetacharset=utf-8H由无标题文档vt ev/tme/headbody/body/html基本页面以开始，它声明文档的类型，主要用来说明文档使用的HTML DOCTYPE或者的版本浏览器根据定义的（文档类型定义）解释页XHTML HTMLDOCTYPE DTD面代码声明必须放在每一个或文档最顶部，在所有代码DOCTYPE XHTMLHTML和标识之上，否则文档声明无效上面的代码包括了一个标准文件应该具有的个组成部分下面分别进行简要HTML4介绍＞标签
1.vhtml＞＞标签是文档的开始和结束标签，告诉浏览器这是整个vhtml…v/html HTMLHTML文件的范围文档中所有的内容都应该在这两个标签之间，一个文档非注释代码总是HTMLHTML以＞开始，以＞结束vhtml v/html＞标签
2.vhead＞＞标签一般位于文档的头部，用于包含当前文档的有关信息，例如标vhead…v/head题和关键字等，通常将这两个标签之间的内容统称作的“头部”HTML位于头部的内容一般不会在网页上直接显示，而是通过另外的方式起作用例如，在的头部定义的标题不会显示在网页上，但是会出现在网页的标题栏上HTML＞标签
3.vtitle计＞和＞标签位于文档的头部，即位于＜＞和＞标签之vt lev/title HTMLhead v/head间，用于定义显示在浏览器窗口左上角的标题栏中的内容＞标签
4.vbody＞＞用于定义文档的正文部分，例如文字、标题、段落和列表等，vbody…v/body HTML也可以用来定义主页背景颜色＞＞定义在＞标签之后，vbody…v/body v/head vhtml＞＞标签之间所有出现在网页上的正文内容都应该写在这两个标签之间…v/html＞标签有个常用的可选属性，主要用于控制文档的基本特征，如文本、背景颜vbody6色等各个属性介绍如下＞该属性用于为文档指定一幅图像作为背景background:＞该属性用于定义文档中非链接文本的默认颜色text:＞该属性用于定义文档中一个未被访问过的超级链接的文本颜色link:＞该属性用于定义文档中一个正在打开的超级链接的文本颜色alink:＞该属性用于定义文档中一个已经被访问过的超级链接的文本颜色vlink:＞该属性定义网页的背景颜色bgcolor:例如，如果希望将文档的背景图像设置为主目录下的，文本颜色设置为黑色,OO
1.jpg未访问超级链接的文本颜色设置为绿色，已访问超级链接的文本颜色设置为红色，正在访问的超级链接的文本颜色设置为蓝色，则可以使用如下的＜＞标签body＜body background=
001.gif text=nblack link=green alink=Hbluen vlink=redn＞.•金20在页面中输入文本，并创建超级链接后的页面预览效果如图所示2-1-----------------,|未访问的能接普通文本状）曲二巳访问的坡接，.楂接二正在访问的链接图标签的示例效果2-1body其中，页面背景图像为标签示例”为普通文本，显示为黑色;“链接一”
001.gif;“body为未访问过的链接，显示为绿色；“链接二”为已访问过的链接，显示为红色；“链接三”为正在访问的链接，显示为蓝色
二、注释标签的客户端注释标签为标签内的文本不会在浏览器窗口中显示一般将客户端的HTML脚本程序段放在此标签中，对于不支持该脚本语言的浏览器也可隐藏程序代码例如，在上例中，将链接三”标签为注释文本的语句如下・链接三!-pa href=index html”v/av/p--在的“代码”视图中，注释内容显示为灰色，如图所示修改Dreamweaver20212-2后的文件在浏览器中的预览效果如图所示2-3匕力标无示例pbody^记不例/p便十一这一行是注释pahref=rr
123.htnlrr链接一图2-2注释标签示例效果图2-3注释标签示例效果谯生二对比图可以看出，被注释的文本不会在浏览器中显示但是，如果是服务器端程2-1序代码，即使在这个注释标签内也会被执行
三、文本格式标签文本格式标签用于控制网页中文本的样式，如大小、字体、段落样式等标签
1.vfont标签用于设置文本字体格式，包括字体、字号、颜色、字型等，适vfont../font当地应用可以使页面更加美观标签有个属性、和这个属性可以自由组合，没有先后顺font3face colorsize3序通过设置这个标签属性，可以控制文字的显示效果3用于设置文本字体名称，可以用逗号隔开多个字体名称例如face:叩font face=Times NewRoman,Times,serif*H pyNew Year/font用于设置文本字体大小，取值范围在到之间，数字越大字体越大Size:7用于设置文本颜色，可以用、和等助记符，也可以用进Color:red whitegreen16制数表示，如红色为^^#FF0000^o使用示例〈华文彩云”二欢迎光临font face=size7colornblack”,v/font上述语句在浏览器中的显示效果如图所示2-4标签
2.bs iemx vh#x标签将标签之间的文本设置成粗体例如:b…/b〈教程Dreamweaver bDIYv/b在浏览器中的预览效果如图所示2-5标签将标签之间的文本设置成斜体例如:i…v/i请看这边！vi/i标签用于将标签之间的文字加以强调不同的浏览器效果有所不同，em…/em通常会设置成斜体例如今天零下五度！vem v/em这是一级标题这是一线标题DreamweaverDI\嗷程这是.破标撕请看这动7次力四级标3逮紧五a标哥a fen今天羊尸五度I图2・6h#标签示例效果图2・4font标签示例效果图2・5标签示例效果上述三个例子在浏览器中的显示效果如图所示2-6标签用于设标题字体有到级标题,数字越h#.../h##=1,2,345,6Header,16大字体越小标题显示为黑体字标签自动插入一个空行，不必用h#v/h#p标签再加空行和标签不一样，〉标签中的文本显示在浏览器中使用示例h#这是一级标题vh1v/h1这是二级标题这是三级标题vh2v/h2vh3v/h3vh4这是四级标题这是五级标题这是六级标题显示效果如图v/h4vh5v/h5vh6v/h6所示2-11标签
3.s bigxsmallx vux・・标签为标签之间的文本加删除线即在文本中间加一条横线例如:s»/s。
个人认证
优秀文档
获得点赞 0
