第3讲 文字、段落、列表及图片标记_第1页
第3讲 文字、段落、列表及图片标记_第2页
第3讲 文字、段落、列表及图片标记_第3页
第3讲 文字、段落、列表及图片标记_第4页
第3讲 文字、段落、列表及图片标记_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

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

文档简介

第3讲文字、段落、列表及图片标记3.1文字标记3.2段落标记3.3列表标记3.4图片标记文字标记主要用于设置网页中的所有有关文字方面的内容，具体包括普通文字、特殊字符、标题字、字体以及文字格式等方面的设置3.1文字标记表3-1常用文字标记标记描述文字内容包括普通文字、空格及特殊符号等标题字标记以某几种固定的字号显示文字，共分为六个级别（H1~H6），对应着六种字号文字的修饰标记通过这些修饰标记，可设定文字的不同格式，如粗体、斜体等字体标记设定文字的字体、字号及颜色等1）文字内容网页中涉及到的文字主要包括:普通文字、特殊符号以及页面的注释语句普通文字的输入:

直接在<body>和</body>标记之间输入特殊字符的输入:

在源代码中特殊字符使用其对应的符号码代替.特殊符号符号码空格 “"&&<<>>

·Xק§￠¢￥¥￡£

©®&trade；注释语句基本语法<comment>……</comment>

<!---->语法解释上述两种表示法皆可代表注释语句；注释语句不会显示在浏览器中文字内容综合示例2）标题字标记所谓标题字就是以某几种固定的字号去显示文字，一般用于强调段落要表现的内容或作为文章的标题具有加粗显示并与下一行产生一空行的特性根据字号的大小分为六级，分别用标记H1~H6表示，字号的大小随数字增大而递减标记描述属性属性取值<h1>……</h1>一级标题alignleft（默认值）<h2>……</h2>二级标题<h3>……</h3>三级标题center<h4>……</h4>四级标题<h5>……</h5>五级标题right<h6>……</h6>六级标题标题字标记综合示例3）文字的修饰标记用于对文字进行格式化常用的修饰标记如下：标记描述<b>…</b>、<strong>…</strong>粗体<i>…</i>、<cite>…</cite>、<em>…</em>、<var>…</var>斜体<sup>…</sup>上标<sub>…</sub>下标<big>…</big>大字号<small>…</small>小字号<u>…</u>下划线<s>…</s>、<strike>…</strike>删除线<address>…<address>地址，用于地址、Email文字修饰标记综合示例3-1）字体标记<font>作用：设置文字的字体、字号及颜色基本语法<fontface=“font_name”size=“value”color=“color_value”>…</font>表3-3字体标记的属性属性描述face设置字体size字号，取值范围为从1到7，或者从+1到+7、从-1到-7（正负取值相对于页面默认字号3），超出取值范围的，与取值范围的最近的极值效果相同color文字颜色字体标记综合示例3-2)基字体标记<basefont>作用用于设定文字的字体默认属性，出现在<basefont>标记之后的所有<font>标记的默认属性使用<basefont>标记中所设置的属性基本语法

<basefontface=“font_name”size=“value”color=“color_value”>基字体标记综合示例3.2段落标记1)段落标记<p>所谓段落，指得是一段格式上统一的文本基本语法语法解释从<p>开始处创建一个段落。使用双标记将使所包含的段落与上下文都有一空行的间隔；使用单标记将只使段落与上文有一空行的间隔标记描述属性属性取值

<p>…</p>双标记alignleftcenter<p>…单标记right2)换行标记<br>作用:产生一个换行效果基本语法

<br>3）居中标记<center>基本语法

<center>……</center>作用：使<center></center>标记对之间的文字在浏览器窗口中居中对齐段落、换行及居中标记综合示例4）预格式化标记<pre>基本语法

<pre>……</pre>语法解释预格式化，是指保留<pre></pre>之间的文字在源代码中的格式，使其在页面中显示的效果和源代码中的效果几乎完全一致预格式化标记示例5）水平线标记<hr>水平线用于段落与段落之间的分隔，使文档结构更加清晰，使文字的编排更加整齐基本语法

<hr>常用属性

属性描述width设置水平线宽度,单位为像素或浏览器窗口的%size水平线高度,单位为像素align水平线对齐方式,取值left|center|right,默认居中对齐noshade默认的水平线的空心立体效果改设为实心的不带阴影的效果color水平线颜色,显示颜色时，当水平线将显示成实心水平线标记示例3.3列表标记所谓列表，通俗的讲就是各列表项按一定的方式进行排列而成的一张表按列表项排列方式的不同，可分成：有序列表无序列表嵌套列表有序列表

以数字或字母等表示顺序的符号为项目前导符来排列列表项目的列表。例如:无序列表以无顺序的符号（●、○、■等）为项目前导符来排列列表项目或没有任何符号作项目前导符的列表。嵌套列表

指多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等

1）有序列表<ol>基本语法

<ol><li>项目一</li><li>项目二</li>……</ol>有序列表标记示例常用属性属性描述属性值type设置有序列表的前导符1前导符为数字1、2、3…a前导符为小写字母a、b、c…A前导符为大写字母A、B、C…i前导符为小写罗马数字i、ii、iii…I前导符为大写罗马数字I、Ⅱ、Ⅲ…start设置有序列表的起始编号value在默认情况下，有序列表从数字1开始编号；不论列表编号是数字、英文字母还是罗马数字，value的值都是需要起始的数字有序列表前导符和起始编号设置示例2)无序列表<ul>及<dl>

常用无序列表包含如下两种:项目列表<ul>

前导符默认为实心圆点定义列表<dl>

列表项前没有任何前导符2-1）项目列表<ul>基本语法

<ul><li>项目一</li><li>项目二</li>……</ul>常用属性属性描述属性值type设置项目列表的前导符disc前导符为●（默认前导符）circle前导符为○square前导符为■项目列表标记示例项目列表前导符设置示例2-2)定义列表<dl>基本语法

<dl><dt>名词一</dt><dd>解释1</dd><dd>解释2</dd>……<dt>名词二</dt><dd>解释1</dd>…………</dl>语法解释定义列表是一种具有两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次；使用<dt>定义需解释的名词，使用<dd>解释名词定义列表标记示例3）嵌套列表嵌套列表指的是多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等嵌套列表类型：定义列表的嵌套无序列表和有序列表的嵌套这种嵌套类型是最常见的，它主要是通过在一种列表中的列表项中嵌套另一种列表的定义来实现无序列表和有序列表嵌套示例3.4图片标记网页中的常用图片格式-GIF（GraphicsInterchangeFormat，图形交换格式）

最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，如站点图标、导航条等。-

JPEG（JoinPhotographGraphic，联合图像专家组标准)

又称JGP，用来显示照片等颜色丰富的精美图像-

PNG（PortableNetworkGraphics，可移植网络图形）

既融合了GIF格式透明显示的颜色，又具有JPEG处理精美图像的优势，是逐渐流行的网络图像格式，但目前浏览器对其支持并不一致插入图片基本语法基本语法

<img

src=“file_name”>常用属性

属性描述src指定图片源文件所在路径(必设属性)alt设置提示文字width设置图片的宽度height设置图片的高度hspace设置图片与相邻对象之间的左右间距vspace设置图片与相邻对象之间的上下间距align设置对齐方式border设置图片边框，默认情况下，不显示边框align属性值描述baseline、bottom、absbottom图片底端与文字底端对齐top、texttop图片顶端与文字行最高字符的顶端对齐middle图片的中间线与文字底端对齐absmiddle图片的中间线与文字的中间线对齐right图片在文字的右边left图片在文字的左边插入图片综合示例小结字体标记<font>的size属性的取值范围是1~7，其中“1”为最小字号，“7”为最大字号。空格在源代码中的表示是” ”，一个 表示一个半角空格。另外一些特殊符号如“<“”>”等，在源代码中也要象空格的表示一样，使用字符码。设置文字的格式（如加粗显示文字）需要使用文字修饰标记标题标记的级别范围是h1~h6，其中“h1”的字号是最大的，“h6”的字号是最小的。<pre>标记可使显示的内容的格式与源代码的格式几乎完全一样。段落标记<p>和换行标记<br

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论