Dreamweaver-cs6-标准实例教程课件第2章HTML与CSS基础_第1页
Dreamweaver-cs6-标准实例教程课件第2章HTML与CSS基础_第2页
Dreamweaver-cs6-标准实例教程课件第2章HTML与CSS基础_第3页
Dreamweaver-cs6-标准实例教程课件第2章HTML与CSS基础_第4页
Dreamweaver-cs6-标准实例教程课件第2章HTML与CSS基础_第5页
已阅读5页，还剩85页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2章

HTML与CSS基础第2章

HTML与CSS基础1

本章将介绍HTML和CSS的基本知识及使用方法。内容包括：HTML的概念；HTML源文件的构成；各类常用HTML标记的功能及使用；CSS样式表的作用；CSS样式表的组成；样式表的层叠顺序以及样式表的部分常用属性和值。HTML标记和CSS样式表是网页文件的基石。HTML和CSS是网页制作的基础，读者应该认真掌握。HTML源文件的构成各种常用HTML标记的功能及使用方法CSS样式表的组成及部分常用属性CSS样式表的创建和使用方法学习要点本章将介绍HTML和CSS的基本知识及使用方法。内容22.1HTML基础2.1.1什么是HTMLHTML是HypertextMarkupLanguage的首字母缩写，通常称作超文本标记语言。它是Internet上用于编写网页的主要语言。HTML是纯文本类型的语言。HTML语法通过对各种标记、元素、属性、对象等的设置建立与图形、声音、视频等多媒体信息以及其他超文本的链接。网页浏览器的主要作用就是解释超文本文件中的语言，将单调乏味的文字显示为丰富多彩的内容。目前最为流行的浏览器有MicrosoftInternetExplorer以及NetscapeCommunicator。2.1HTML基础2.1.1什么是HTMLHTML是3Dreamweaver-cs6-标准实例教程课件第2章HTML与CSS基础4Dreamweaver-cs6-标准实例教程课件第2章HTML与CSS基础52.1.3HTML的语法特性一般来说，HTML的语法有3种表达形式：<标记>对象</标记><标记

属性1=参数1属性2=参数2>对象</标记><标记>

标记的书写是与大小写无关的。严格地说，标记和标记元素不同。标记元素是位于“<”和“>”符号之间的内容，而标记则包括了标记元素和“<”和“>”符号本身。但是，我们通常将标记元素和标记当作一种东西，因为脱离了“<”和“>”符号的标记元素毫无意义。2.1.3HTML的语法特性一般来说，HTML的语法有361．<标记>对象</标记>

使用封闭类型标记的形式。大多数标记是封闭类型的，就是说它们成对出现。在对象内容的前面是一个标记，在对象内容的后面是另一个标记，第二个标记元素前带有反斜线，表明结束标记对对象的控制。<h1>这是标题1</h1>（浏览器以标题1格式显示标记间的文本）<i>这段文字是斜体文字</i>（浏览器以斜体格式显示标记间的文本）

应该封闭的标记没有被封闭，则会产生意料不到的错误，随浏览器不同，出错的结果可能也不同。1．<标记>对象</标记>使用封闭类型标记的形式。大72．<标记属性1=参数1属性2=参数2>对象</标记>

使用封闭类型标记的扩展形式。利用属性可以进一步设置对象某方面的内容，而参数则是设置的结果。<ahref=”/”>Adobe公司主页</a><a>和</a>是锚标记，用于在文档中创建超级链接，href是该标记的属性之一，用于设置超级链接所指向的地址，在“=”后面的就是href属性的参数。

一个标记的属性可能不止一个，可以在描述完一个属性后，输入一个空格，然后继续描述其他属性。2．<标记属性1=参数1属性2=参数2>对象</标记>83．<标记>

使用非封闭类型标记的形式。在HTML语言中非封闭类型很少，但的确存在，最常用的是换行标记<br>。这是一段完整的段落<br>中间被换行处理在浏览器上会显示为两行，但它们仍然同属于一段。3．<标记>使用非封闭类型标记的形式。在HTML语言94．标记嵌套标记之间可以相互嵌套，形成更为复杂的语法。<b><i>这是一段既是粗体又是斜体的文本</i></b>

在嵌套标记时需要注意标记的嵌套顺序，如果标记的嵌套顺序发生混乱，则可能会出现不可预料的结果。<b><i>这是一段既是粗体又是斜体的文本</b></i>4．标记嵌套标记之间可以相互嵌套，形成更为复杂的语法。<b>102.2常用HTML标记<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title></head><body><!主要内容将放在这里></body></html>

如果利用DreamweaverCS6的HTML5扩展包做网页，首先要声明并创建文档类型，可以这样写：

<!DOCTYPE

html>

简单而明显，不区分大小写。它可以更容易向后兼容。2.2常用HTML标记<!DOCTYPEhtmlPU112.2.1文档的结构标记1．<html>标记<html>…</html>标记是HTML文档的开始和结束标记，HTML文档中所有的内容都应该在这两个标记之间。一个HTML文档非注释代码总是以<html>开始以</html>结束。2．<head>标记<head>…</head>标记一般位于文档的头部，用于包含当前文档的有关信息，例如标题和关键字等。2.2.1文档的结构标记1．<html>标记<h123．<title>标记<title>…</title>标记用于设置HTML文档标题。4．<body>标记<body>…</body>用于定义HTML文档的正文部分，通常在</head>标记之后，而在</html>标记之前。所有出现在网页上的正文内容都应该写在这两个标记之间。background：该属性用于为文档指定一幅图像作为背景。text：该属性用于定义文档中文本的默认颜色，也即文本的前景色。link：该属性用于定义文档中一个未被访问过的超级链接的文本颜色。alink：定义文档中一个正在打开的超级链接的文本颜色。vlink：该属性用于定义文档中一个已经被访问过的超级链接的文本颜色。bgcolor：该属性定义文档的背景颜色。3．<title>标记<title>…</title>标记用132.2.2注释标记<!--…-->标记是注释标记，在这个标记内的文本都不会在浏览器窗口中显示出来。但如果是程序代码，即使在注释标记内也会被执行。

一般将客户端的脚本程序段放在此标记中。这样，对于不支持该脚本语言的浏览器也可隐藏程序代码。<!--今天天气真好！-->2.2.2注释标记<!--…-->标记是注释标记142.2.3文本格式标记1．<b>标记<b>…</b>标记将标记之间的文本设置成粗体。2．<big>标记<big>…</big>标记将使用比当前页面使用的字体更大的字体显示标记之间的文本。3．<em>标记<em>…</em>标记用于强调标记之间的文字。不同的浏览器效果有所不同，通常会设置成斜体。2.2.3文本格式标记1．<b>标记<b>…</b>标记154．<font>标记<font>...</font>标记用于设置文本字体格式，有3个可选属性：face：设置文本字体名称，可以用逗号隔开的多个字体名称。Size：设置文本字体大小，取值范围在－7～7之间，数字越大字体越大。Color：设置文本颜色，可以用red、white和green等助记符，也可以用16进制数表示，如红色为“#FF0000”。

5．<h#>标记<h#>...</h#>（#=1,2,3,4,5,6）标记用于设标题字体（Header），有1到6级标题，数字越大字体越小。标题将显示为黑体字。<h#>---</h#>标记自动插入一个空行。4．<font>标记5．<h#>标记166．<i>标记<i>…</i>标记将标记之间的文本设置成斜体。7．<s>标记<s>…</s>标记为标记之间的文本加删除线（即在文本中间加一条横线）。8．<small>标记<small>…</small>标记将使用比当前页面使用的字体更小的字体显示标记之间的文本。9．<u>标记<u>…</u>标记为标记之间的文本加下划线。6．<i>标记7．<s>标记8．<small>标记9．<u>172.2.4排版标记1．<br>标记<br>标记用于添加一个换行符，它不需成对使用。2．<hr>标记<hr>标记用于在页面添加一条水平线。3．<center>标记<center>…</center>标记将标记之间的文本等元素居中显示。4．<left>标记<left>…</left>标记将标记之间的文本等元素居左显示。2.2.4排版标记1．<br>标记2．<hr>标记3．<185．<p>标记<p>…</p>标记用来分隔文档的多个段落。6．<right>标记<right>…</right>标记将标记之间的文本等元素居右显示。7．<sub>标记<sub>…</sub>标记将标记之间的文本设置成下标。8．<sup>标记<sup>…</sup>标记将标记之间的文本设置成上标。5．<p>标记<p>…</p>标记用来分隔文档的多个段落。6192.2.5列表标记1．<ul>和<li>标记<ul>…</ul>用来标记无序列表的开始和结束；<li>…</li>用来标记有序或无序列表的列表项目的开始和结束。2．<ol>和<li>标记<ol>…</ol>用来标记有序列表的开始和结束；<li>…</li>用来标记有序或无序列表的列表项目的开始和结束。有序列表有一个参数“type”：type=1：表示用数字给列表项编号，这是默认设置。type=a：表示用小写字母给列表项编号。type=A：表示用大写字母给列表项编号。type=i：表示用小写罗马字母给列表项编号。type=I：表示用大写罗马字母给列表项编号。2.2.5列表标记1．<ul>和<li>标记2．<ol>202.2.6表格标记1．<table>标记<table>…</table>用于标志表格的开始和结束。表格的常用参数如下：align：设置表格与页面对齐方式，取值有left、center和right。background：设置表格的背景图像。bgcolor：设置表格的背景颜色。border：设置表格的边框。width：设置表格的宽度，单位默认为像素，也可以使用百分比形式。height：设置表格的高度，单位默认为像素，也可以使用百分比形式。cellpadding：设置表格一个单元格内数据和单元格边框间的边距。cellspacing：设置单元格之间的间距，以像素为单位。2.2.6表格标记1．<table>标记212．<tr>标记<tr>…</tr>标记用于标志表格一行的开始和结束。<tr>的常用参数如下：align：设置行中文本在单元格内的对齐方式，取值有left、center和right。background：设置行中单元格的背景图像。bgcolor：设置行中单元格的背景颜色。2．<tr>标记223．<th>标记<th>…</th>用于标志表格内表头的开始和结束。<th>的常用参数如下：align：设置在单元格内各种内容的对齐方式，取值有left、center和right。background：设置单元格的背景图像。bgcolor：设置单元格的背景颜色。width：设置单元格的宽度，单位为像素。height：设置单元格的高度，单位为像素。colspan：设置<th>…</th>内的内容应该跨越几列。rowspan：设置<th>…</th>内的内容应该跨越几行。3．<th>标记234．<td>标记<td>…</td>用于标志表格内单元格的开始和结束。<td>标记应位于<tr>标记内部。<td>的常用参数如下：align：设置行内容在单元格内的对齐方式，取值有left、center和right。background：设置单元格的背景图像。bgcolor：设置单元格的背景颜色。width：设置单元格的宽度，单位为像素。height：设置单元格的高度，单位为像素。4．<td>标记242.2.7框架标记1．<frameset>标记<frameset>...</frameset>标记用于标志页面中水平和垂直框架的数目，其参数如下：rows：用于设置行的大小，行的大小为浏览显示器的百分比。cols：用于设置列的大小，列的大小为浏览显示器的百分比。frameborder：用于设置框架是否有边框，取值为yes或no。border：用于设置框架边框的厚度。2.2.7框架标记1．<frameset>标记252．<frame>标记<frame>...</frame>标记代表一个框架，必须在frameset标记内使用。name：用于设置框架名称。scrolling：用于设置框架是否有滚动条，取值为yes有滚动条，取值为no则没有滚动条，取值为auto则根据需要自动设置，默认值是auto。src：用于指定该框架的HTML等页面文件，若不设此参数则框架内没有内容。2．<frame>标记name：用于设置框架名称。263．<noframe>标记<noframe>…</noframe>标记用于设置当浏览器不支持框架技术时显示的文本。通常的做法是在此标记之间放置提示用户浏览器不支持框架的信息。<framesetrows=30%,*><framesrc="Acol.html"frameborder=1><framesetcols=30%,*><framesrc="Bcol.html"frameborder=0><framesrc="Ccol.html"frameborder=0><noframe>对不起，您的浏览器不支持框架。</noframe></frameset></frameset>3．<noframe>标记<framesetrows=30272.2.8表单标记1．<form>标记<form>…</form>标记用于表示一个表单的开始与结束，并且通知服务器处理表单的内容。name：用于指定表单的名称。action：用于指定提交表单后，将对表单进行外理的文件路径及名称（即URL）。method：用于指定发送表单信息的方式，有GET方式（通过URL发送表单信息）和POST方式（通过HTTP发送表单信息）。2.2.8表单标记1．<form>标记name：用于指定28<input>标记用于在表单内放置表单对象。此标记不需成对使用。对于不同的type参数有不同的属性。（1）当type=text（文本域表单对象，在文本框中显示文字）或type=password（密码域表单对象，在文本框中显示*号代替输入的文字，起保密作用）时，<input>标记参数如下：name：用于指定表单文本/密码域对象的名称。size：文本框在浏览器的显示宽度，实际能输入的字符数由maxlength参数决定。maxlength：在文本框最多能输入的字符数。2．<input>标记<input>标记用于在表单内放置表单对象。此标记不29（2）当type=submit（提交按钮，用于提交表单）或type=reset（重置按钮，用于清空表单中用户已输入的内容）时<input>标记参数如下：name：用于指定表单按钮对象的名称。value：在按钮上显示的标签。（3）当type=radio（单选按钮）或type=checkbox（复选按钮）时<input>标记参数如下：name：用于指定表单单选按钮或复选按钮对象的名称。value：用于设定单选按钮或复选按钮的值。checked：可选参数，若带有该参数，则默认状态下该按钮是选中的。同一组radio单选按钮（name属性相同）中最多只能有一个单选按钮带checked属性。复选按钮则无此限制。（2）当type=submit（提交按钮，用于提交表单）或t30（4）当type=image（图像）时<input>标记参数介绍如下：name：图像对象的名称。src：图像文件的名称。width：图像宽度。height：图像高度。alt：图像无法显示时的替代文本。align：图像对象的对齐方式，取值可以是top、left、bottom、middle和right。（4）当type=image（图像）时<input>标记参数313．<select>和<option>标记<select>…</select>标记用于在表单中插入一个列表框对象。它和<option></option>标记一起使用，<option>标记为列表框添加列表项。<formaction=none.jspmethod=POST><selectname=fruitssize=3multiple><optionselected>足球<optionselected>蓝球<optionvalue=My_Favorite>乒乓球<option>羽毛球</select><p><inputtype=submit><inputtype=reset></form>3．<select>和<option>标记<formact324．<textarea>标记<textarea>…</textarea>作用与<input>标记在type=text时的作用相似，不同之处在于<textarea>显示的是多行多列的文本区域，而<input>文本框只有一行。<textarea>和</textarea>之间的文本是文本区域的初始文本。name：指定文本区域的名称。rows：文本区域的行数。cols：文本区域的列数。wrap：用于设置是否自动换行，取值有off（不换行，是默认设置）、soft（软换行）和hard（硬换行）。4．<textarea>标记name：指定文本区域的名称。332.2.9其他标记1．<pre>标记<pre>…</pre>标记用于设定浏览器在输出时，对标记内部的内容几乎不作修改地输出。2．<a>标记<a>…</a>标记用于建立超级链接或标识一个目标。<a>标记有两个不能同时使用的参数href和name，此外还有参数target等。<ahref="url">链接字符串</a><br>2.2.9其他标记1．<pre>标记2．<a>标记<a343．<img>标记<img>标记用于在页面插入图像。src：用于指定要插入图像的地址。alt：用于设置当图像无法显示时的替换文本。align：用于设置图像和页面其他对象的对齐方式，取值可以是top，middle和bottom。width：用于设置图像的宽度，以像素为单位。height：用于设置图像的高度，以像素为单位。border：用于设置图像的边框厚度，以像素为单位。vspace：用于设置图像的垂直边距，以像素为单位。hspace：用于设置图像的水平边距，以像素为单位。3．<img>标记354．<meta>标记<meta>标记是实现元数据的主要标记，它能够提供文档的关键字、作者、描述等多种信息，在HTML的头部可以包括任意数量的<meta>标记。<metaname="keywords"content="webmaster制作"><metaname="description"content="webmaster制作"><metahttp-equiv="Content-Type"content="text/html;charset=gb2312">4．<meta>标记<metaname="keywor365．<base>标记<base>标记定义了文档的基础URL地址，在文档中所有相对地址形式的URL都是相对于这里定义的URL而言的。一篇文档中的<base>标记不能多于一个，必须放于头部，而且应该在任何包含URL地址的语句之前。<basehref="">5．<base>标记<basehref="http:/376．<link>标记<link>标记定义了文档之间的包含。在HTML的头部可以包含任意数量的<link>标记。<linkrel="stylesheet"type="text/css"href="./base.css">href：用于设置链接资源所在的URL。title：用于描述链接关系的字符串。rel：用于定义文档和所链接资源的链接关系，如果希望指定不止一个链接关系，可以在值之间用空格隔开。rev：用于定义文档和所链接资源之间的反向关系。6．<link>标记<linkrel="styleshee382.3CSS基础CSS是CascadingStyleSheets（层叠样式表单）的简称，常称作样式表。顾名思义，它是一种设计网页样式的工具。2.3.1CSS概述CSS样式通常用名称或是HTML标记来表示，HTML文档中的CSS样式不仅可以控制大多数传统的文本格式属性，例如字体、字号和对齐方式，还可以定义一些特殊的HTML属性，例如定位、特别效果和鼠标轮替等。CSS样式的定义代码一般书写在HTML文档的头部，通常由一系列的样式定义组成。2.3CSS基础CSS是CascadingSt392.3.2CSS样式表的组成CSS样式表每个规则的组成包括一个选择符（通常是一个HTML的元素，例如body、p或em）和该选择符所接受的样式。有很多的属性可用于定义一个元素，每个属性带一个值，共同描述选择符应该如何呈现。

样式规则组成如下：

选择符{属性1:值1;属性2:值2}<HEAD><TITLE>第一个CSS例子</TITLE><STYLETYPE="text/css">H1{font-size:x-large;color:red}H2{font-size:large;color:blue}</STYLE></HEAD>2.3.2CSS样式表的组成CSS样式表每个规则40样式表的各个组成部分：1．选择符选择符仅仅是指向特别样式的元素。标签：单个html元素作为选择符。P{text-indent:3em}类：为样式规则命名的选择符。一个html元素的选择符能有不同的class（类），因而允许同一元素有不同样式。p.red{color:red}p.green{color:green}复合内容：复合内容选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，并且由于层叠顺序的规则，它们的优先权比单一的选择符大。pem{background:red}样式表的各个组成部分：1．选择符选择符仅仅是指向特别样式的元41ID：ID选择符个别地定义每个元素的成分。一个ID选择符的指定要有指示符"#"在名字前面。#myid{text-indent:3em}使用ID选择符的方式如下：<pid=myid>文本缩进3em</p>ID：ID选择符个别地定义每个元素的成分。一个ID选择符的指422．属性

一个属性被指定到选择符是为了使用它的样式。属性包括颜色、边界和字体等。3．值

值是一个属性接受的指定。例如，属性颜色能接受值red。4．注释

样式表里面的注释使用与C语言编程中一样的约定方法去指定。5．伪类和伪元素

伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素。2．属性432.3.3层叠顺序

三种不同的源决定了网页上显示的样式：由页面的作者创建的样式表、用户的自定义样式选择（如果有）和浏览器本身的默认样式。网页的最终外观是由所有这三种源的规则共同作用（或者“层叠”）的结果，最后以最佳方式呈现网页。1．!important规则2．计算特性规则body{background:white;background-repeat:repeat-x!important}#id1{xxx}/*a=1b=0c=0-->特性=100*/ULUL

LI.red{xxx}/*a=0b=1c=3-->特性=013*/LI.red{xxx}/*a=0b=1c=1-->特性=011*/LI{xxx}/*a=0b=0c=1-->特性=001*/2.3.3层叠顺序三种不同的源决定了网页上显示的442.3.4部分常用的属性和值1．font-family属性：指定网页中文本的字体。2．font-style属性：设置字体风格。3．font-size属性：设置字体显示的大小。4．font属性：用作不同字体属性的略写，可以同时定义字体的多种属性5．color属性：指定一个元素的颜色。为了避免与用户的样式表之间的冲突，背景和颜色属性应该始终一起指定。6．background-color属性：设定一个元素的背景颜色。7．background-image属性：设定一个元素的背景图像。8．background-repeat属性：描述背景图片的重复排列方式。9．background属性：不同背景属性的略写，可以同时定义背景的多种属性。10．line-height属性：行高属性可以接受一个控制文本基线之间的间隔的值。2.3.4部分常用的属性和值1．font-family属45第2章

HTML与CSS基础第2章

HTML与CSS基础46

本章将介绍HTML和CSS的基本知识及使用方法。内容包括：HTML的概念；HTML源文件的构成；各类常用HTML标记的功能及使用；CSS样式表的作用；CSS样式表的组成；样式表的层叠顺序以及样式表的部分常用属性和值。HTML标记和CSS样式表是网页文件的基石。HTML和CSS是网页制作的基础，读者应该认真掌握。HTML源文件的构成各种常用HTML标记的功能及使用方法CSS样式表的组成及部分常用属性CSS样式表的创建和使用方法学习要点本章将介绍HTML和CSS的基本知识及使用方法。内容472.1HTML基础2.1.1什么是HTMLHTML是HypertextMarkupLanguage的首字母缩写，通常称作超文本标记语言。它是Internet上用于编写网页的主要语言。HTML是纯文本类型的语言。HTML语法通过对各种标记、元素、属性、对象等的设置建立与图形、声音、视频等多媒体信息以及其他超文本的链接。网页浏览器的主要作用就是解释超文本文件中的语言，将单调乏味的文字显示为丰富多彩的内容。目前最为流行的浏览器有MicrosoftInternetExplorer以及NetscapeCommunicator。2.1HTML基础2.1.1什么是HTMLHTML是48Dreamweaver-cs6-标准实例教程课件第2章HTML与CSS基础49Dreamweaver-cs6-标准实例教程课件第2章HTML与CSS基础502.1.3HTML的语法特性一般来说，HTML的语法有3种表达形式：<标记>对象</标记><标记

属性1=参数1属性2=参数2>对象</标记><标记>

标记的书写是与大小写无关的。严格地说，标记和标记元素不同。标记元素是位于“<”和“>”符号之间的内容，而标记则包括了标记元素和“<”和“>”符号本身。但是，我们通常将标记元素和标记当作一种东西，因为脱离了“<”和“>”符号的标记元素毫无意义。2.1.3HTML的语法特性一般来说，HTML的语法有3511．<标记>对象</标记>

使用封闭类型标记的形式。大多数标记是封闭类型的，就是说它们成对出现。在对象内容的前面是一个标记，在对象内容的后面是另一个标记，第二个标记元素前带有反斜线，表明结束标记对对象的控制。<h1>这是标题1</h1>（浏览器以标题1格式显示标记间的文本）<i>这段文字是斜体文字</i>（浏览器以斜体格式显示标记间的文本）

应该封闭的标记没有被封闭，则会产生意料不到的错误，随浏览器不同，出错的结果可能也不同。1．<标记>对象</标记>使用封闭类型标记的形式。大522．<标记属性1=参数1属性2=参数2>对象</标记>

使用封闭类型标记的扩展形式。利用属性可以进一步设置对象某方面的内容，而参数则是设置的结果。<ahref=”/”>Adobe公司主页</a><a>和</a>是锚标记，用于在文档中创建超级链接，href是该标记的属性之一，用于设置超级链接所指向的地址，在“=”后面的就是href属性的参数。

一个标记的属性可能不止一个，可以在描述完一个属性后，输入一个空格，然后继续描述其他属性。2．<标记属性1=参数1属性2=参数2>对象</标记>533．<标记>

使用非封闭类型标记的形式。在HTML语言中非封闭类型很少，但的确存在，最常用的是换行标记<br>。这是一段完整的段落<br>中间被换行处理在浏览器上会显示为两行，但它们仍然同属于一段。3．<标记>使用非封闭类型标记的形式。在HTML语言544．标记嵌套标记之间可以相互嵌套，形成更为复杂的语法。<b><i>这是一段既是粗体又是斜体的文本</i></b>

在嵌套标记时需要注意标记的嵌套顺序，如果标记的嵌套顺序发生混乱，则可能会出现不可预料的结果。<b><i>这是一段既是粗体又是斜体的文本</b></i>4．标记嵌套标记之间可以相互嵌套，形成更为复杂的语法。<b>552.2常用HTML标记<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title></head><body><!主要内容将放在这里></body></html>

如果利用DreamweaverCS6的HTML5扩展包做网页，首先要声明并创建文档类型，可以这样写：

<!DOCTYPE

html>

简单而明显，不区分大小写。它可以更容易向后兼容。2.2常用HTML标记<!DOCTYPEhtmlPU562.2.1文档的结构标记1．<html>标记<html>…</html>标记是HTML文档的开始和结束标记，HTML文档中所有的内容都应该在这两个标记之间。一个HTML文档非注释代码总是以<html>开始以</html>结束。2．<head>标记<head>…</head>标记一般位于文档的头部，用于包含当前文档的有关信息，例如标题和关键字等。2.2.1文档的结构标记1．<html>标记<h573．<title>标记<title>…</title>标记用于设置HTML文档标题。4．<body>标记<body>…</body>用于定义HTML文档的正文部分，通常在</head>标记之后，而在</html>标记之前。所有出现在网页上的正文内容都应该写在这两个标记之间。background：该属性用于为文档指定一幅图像作为背景。text：该属性用于定义文档中文本的默认颜色，也即文本的前景色。link：该属性用于定义文档中一个未被访问过的超级链接的文本颜色。alink：定义文档中一个正在打开的超级链接的文本颜色。vlink：该属性用于定义文档中一个已经被访问过的超级链接的文本颜色。bgcolor：该属性定义文档的背景颜色。3．<title>标记<title>…</title>标记用582.2.2注释标记<!--…-->标记是注释标记，在这个标记内的文本都不会在浏览器窗口中显示出来。但如果是程序代码，即使在注释标记内也会被执行。

一般将客户端的脚本程序段放在此标记中。这样，对于不支持该脚本语言的浏览器也可隐藏程序代码。<!--今天天气真好！-->2.2.2注释标记<!--…-->标记是注释标记592.2.3文本格式标记1．<b>标记<b>…</b>标记将标记之间的文本设置成粗体。2．<big>标记<big>…</big>标记将使用比当前页面使用的字体更大的字体显示标记之间的文本。3．<em>标记<em>…</em>标记用于强调标记之间的文字。不同的浏览器效果有所不同，通常会设置成斜体。2.2.3文本格式标记1．<b>标记<b>…</b>标记604．<font>标记<font>...</font>标记用于设置文本字体格式，有3个可选属性：face：设置文本字体名称，可以用逗号隔开的多个字体名称。Size：设置文本字体大小，取值范围在－7～7之间，数字越大字体越大。Color：设置文本颜色，可以用red、white和green等助记符，也可以用16进制数表示，如红色为“#FF0000”。

5．<h#>标记<h#>...</h#>（#=1,2,3,4,5,6）标记用于设标题字体（Header），有1到6级标题，数字越大字体越小。标题将显示为黑体字。<h#>---</h#>标记自动插入一个空行。4．<font>标记5．<h#>标记616．<i>标记<i>…</i>标记将标记之间的文本设置成斜体。7．<s>标记<s>…</s>标记为标记之间的文本加删除线（即在文本中间加一条横线）。8．<small>标记<small>…</small>标记将使用比当前页面使用的字体更小的字体显示标记之间的文本。9．<u>标记<u>…</u>标记为标记之间的文本加下划线。6．<i>标记7．<s>标记8．<small>标记9．<u>622.2.4排版标记1．<br>标记<br>标记用于添加一个换行符，它不需成对使用。2．<hr>标记<hr>标记用于在页面添加一条水平线。3．<center>标记<center>…</center>标记将标记之间的文本等元素居中显示。4．<left>标记<left>…</left>标记将标记之间的文本等元素居左显示。2.2.4排版标记1．<br>标记2．<hr>标记3．<635．<p>标记<p>…</p>标记用来分隔文档的多个段落。6．<right>标记<right>…</right>标记将标记之间的文本等元素居右显示。7．<sub>标记<sub>…</sub>标记将标记之间的文本设置成下标。8．<sup>标记<sup>…</sup>标记将标记之间的文本设置成上标。5．<p>标记<p>…</p>标记用来分隔文档的多个段落。6642.2.5列表标记1．<ul>和<li>标记<ul>…</ul>用来标记无序列表的开始和结束；<li>…</li>用来标记有序或无序列表的列表项目的开始和结束。2．<ol>和<li>标记<ol>…</ol>用来标记有序列表的开始和结束；<li>…</li>用来标记有序或无序列表的列表项目的开始和结束。有序列表有一个参数“type”：type=1：表示用数字给列表项编号，这是默认设置。type=a：表示用小写字母给列表项编号。type=A：表示用大写字母给列表项编号。type=i：表示用小写罗马字母给列表项编号。type=I：表示用大写罗马字母给列表项编号。2.2.5列表标记1．<ul>和<li>标记2．<ol>652.2.6表格标记1．<table>标记<table>…</table>用于标志表格的开始和结束。表格的常用参数如下：align：设置表格与页面对齐方式，取值有left、center和right。background：设置表格的背景图像。bgcolor：设置表格的背景颜色。border：设置表格的边框。width：设置表格的宽度，单位默认为像素，也可以使用百分比形式。height：设置表格的高度，单位默认为像素，也可以使用百分比形式。cellpadding：设置表格一个单元格内数据和单元格边框间的边距。cellspacing：设置单元格之间的间距，以像素为单位。2.2.6表格标记1．<table>标记662．<tr>标记<tr>…</tr>标记用于标志表格一行的开始和结束。<tr>的常用参数如下：align：设置行中文本在单元格内的对齐方式，取值有left、center和right。background：设置行中单元格的背景图像。bgcolor：设置行中单元格的背景颜色。2．<tr>标记673．<th>标记<th>…</th>用于标志表格内表头的开始和结束。<th>的常用参数如下：align：设置在单元格内各种内容的对齐方式，取值有left、center和right。background：设置单元格的背景图像。bgcolor：设置单元格的背景颜色。width：设置单元格的宽度，单位为像素。height：设置单元格的高度，单位为像素。colspan：设置<th>…</th>内的内容应该跨越几列。rowspan：设置<th>…</th>内的内容应该跨越几行。3．<th>标记684．<td>标记<td>…</td>用于标志表格内单元格的开始和结束。<td>标记应位于<tr>标记内部。<td>的常用参数如下：align：设置行内容在单元格内的对齐方式，取值有left、center和right。background：设置单元格的背景图像。bgcolor：设置单元格的背景颜色。width：设置单元格的宽度，单位为像素。height：设置单元格的高度，单位为像素。4．<td>标记692.2.7框架标记1．<frameset>标记<frameset>...</frameset>标记用于标志页面中水平和垂直框架的数目，其参数如下：rows：用于设置行的大小，行的大小为浏览显示器的百分比。cols：用于设置列的大小，列的大小为浏览显示器的百分比。frameborder：用于设置框架是否有边框，取值为yes或no。border：用于设置框架边框的厚度。2.2.7框架标记1．<frameset>标记702．<frame>标记<frame>...</frame>标记代表一个框架，必须在frameset标记内使用。name：用于设置框架名称。scrolling：用于设置框架是否有滚动条，取值为yes有滚动条，取值为no则没有滚动条，取值为auto则根据需要自动设置，默认值是auto。src：用于指定该框架的HTML等页面文件，若不设此参数则框架内没有内容。2．<frame>标记name：用于设置框架名称。713．<noframe>标记<noframe>…</noframe>标记用于设置当浏览器不支持框架技术时显示的文本。通常的做法是在此标记之间放置提示用户浏览器不支持框架的信息。<framesetrows=30%,*><framesrc="Acol.html"frameborder=1><framesetcols=30%,*><framesrc="Bcol.html"frameborder=0><framesrc="Ccol.html"frameborder=0><noframe>对不起，您的浏览器不支持框架。</noframe></frameset></frameset>3．<noframe>标记<framesetrows=30722.2.8表单标记1．<form>标记<form>…</form>标记用于表示一个表单的开始与结束，并且通知服务器处理表单的内容。name：用于指定表单的名称。action：用于指定提交表单后，将对表单进行外理的文件路径及名称（即URL）。method：用于指定发送表单信息的方式，有GET方式（通过URL发送表单信息）和POST方式（通过HTTP发送表单信息）。2.2.8表单标记1．<form>标记name：用于指定73<input>标记用于在表单内放置表单对象。此标记不需成对使用。对于不同的type参数有不同的属性。（1）当type=text（文本域表单对象，在文本框中显示文字）或type=password（密码域表单对象，在文本框中显示*号代替输入的文字，起保密作用）时，<input>标记参数如下：name：用于指定表单文本/密码域对象的名称。size：文本框在浏览器的显示宽度，实际能输入的字符数由maxlength参数决定。maxlength：在文本框最多能输入的字符数。2．<input>标记<input>标记用于在表单内放置表单对象。此标记不74（2）当type=submit（提交按钮，用于提交表单）或type=reset（重置按钮，用于清空表单中用户已输入的内容）时<input>标记参数如下：name：用于指定表单按钮对象的名称。value：在按钮上显示的标签。（3）当type=radio（单选按钮）或type=checkbox（复选按钮）时<input>标记参数如下：name：用于指定表单单选按钮或复选按钮对象的名称。value：用于设定单选按钮或复选按钮的值。checked：可选参数，若带有该参数，则默认状态下该按钮是选中的。同一组radio单选按钮（name属性相同）中最多只能有一个单选按钮带checked属性。复选按钮则无此限制。（2）当type=submit（提交按钮，用于提交表单）或t75（4）当type=image（图像）时<input>标记参数介绍如下：name：图像对象的名称。src：图像文件的名称。width：图像宽度。height：图像高度。alt：图像无法显示时的替代文本。align：图像对象的对齐方式，取值可以是top、left、bottom、middle和right。（4）当type=image（图像）时<input>标记参数763．<select>和<option>标记<select>…</select>标记用于在表单中插入一个列表框对象。它和<option></option>标记一起使用，<option>标记为列表框添加列表项。<formaction=none.jspmethod=POST><selectname=fruitssize=3multiple><optionselected>足球<optionselected>蓝球<optionvalue=My_Favorite>乒乓球<option>羽毛球</select><p><inputtype=submit><inputtype=reset></form>3．<select>和<option>标记<formact774．<textarea>标记<textarea>…</textarea>作用与<input>标记在type=text时的作用相似，不同之处在于<textarea>显示的是多行多列的文本区域，而<input>文本框只有一行。<textarea>和</textarea>之间的文本是文本区域的初始文本。name：指定文本区域的名称。rows：文本区域的行数。cols：文本区域的列数。wrap：用于设置是否自动换行，取值有off（不换行，是默认设置）、soft（软换行）和hard（硬换行）。4．<textarea>标记name：指定文本区域的名称。782.2.9其他标记1．<pre>标记<pre>…</pre>标记用于设定浏览器在输出时，对标记内部的内容几乎不作修改地输出。2．<a>标记<a>…</a>标记用于建立超级链接或标识一个目标。<a>标记有两个不能同时使用的参数href和name，此外还有参数target等。<ahref="url">链接字符串</a><br>2.2.9其他标记1．<pre>标记2．<a>标记<a793．<img>标记<img>标记用于在页面插入图像。src：用于指定要插入图像的地址。alt：用于设置当图像无法显示时的替换文本。align：用于设置图像和页面其他对象的对齐方式，取值可以是top，middle和bottom。width：用于设置图像的宽度，以像素为单位。height：用于设置图像的高度，以像素为单位。border：用于设置图像的边框厚度，以像素为单位。vspace：用于设置图像的垂直边距，以像素为单位。hspace：用于设置图像的水平边距，以像素为单位。3．<img>标记804．<meta>标记<meta>标记是实现元数据的主要标记，它能够提供文档的关键字、作者、描述等多种信息，在HTML的头部可以包括任意数量的<meta>标记。<metaname="keywords"content="webmaster制作"><metaname="description"content="webmaster制作"><metahttp-equiv="Content-Type"content="text/html;charset=gb2312">4．<meta>标记<metaname="keywor815．<base>标记<base>标记定义了文档的基础URL地址，在文档中所有相对地址形式的URL都是相对于这里定义的URL而言的。一篇文档中的<base>标记不能多于一个，必须放于头部，而且应该在任何包含URL地址的语句之前。<basehref="">5．<base>标记<basehref="http:/826．<link>标记<link>标记定义了文档之间的包含。在HTML的头部可以包含任意数量的<link>标记。<linkrel="stylesheet"type="text/css"href="./base.css">href：用于设置链接

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论