HTML文档标记 - 360文档中心

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

加粗、倾斜与下划线标记
2）加粗、倾斜与下划线的定义标记（b、i、u） <b>……</b>  <i>……</i>  <u>……</u>  <em>……</em>  <strong>……</strong>  使用加粗、倾斜与下划线标记（b、i、u）的组合，可对文本文字进一步修饰。如：<b><font color="red" size="5">此处以红色五号字粗体显示</font></b>
有序列表(Ordered List)
<ul id="nav"> <li><a href="">文章</a> <ol> <li><a href="">CSS教程</a> </li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> <li><a href="">Flash教程</a></li> </ol> </li></ul>
直接写文本
<body> 电子商务专业学习网页设计课程概述电子商务专业学习网页设计的意义电子商务顾名思义就是在internet上做生意，商品展示，广告宣传、发布 </body>
用段落标记<p>……</p>格式化文本
<p>    电子商务顾名思义就是在internet上做生意，商品展示，广告宣传、发布供求信息等活动实现的途径就是网页。</p> <p>因此学习网页设计技术是从事电子商务活动的基石。</p>
超链接是网页的基本元素，网页正是通过超链接而相互链接组织成一个网站，并将 internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。超链接是通过URL（统一资源定位器）来定位目标信息的。URL包括4部分：网络协议、域名或IP地址、路径和文件名。 URL分为绝对URL和相对URL
第三章 HTML标记功能详述
本章要点
文本格式标记文本修饰标记（字体标记）列表标记超链接标记图像和多媒体标记
HTML标记基础
2.什么是标记？
标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记可以具有相应属性即各种参数，如size、 color、 text、 width和noshade等。例如：<p> <font size="+1" color="red"></font></p>
文本修饰标记（字体标记）
文本修饰标记
文本修饰标记是对文本的外观进行修饰的标记，如让文字变色，加大，变粗体，添加下划线等。 1）font标记：定义文字的各种属性。例：<font face="fontname" size= "n" color=
"#0066CC">……</font>
 注意：文本修饰标记没有align属性 (说明）
上标（sup）和下标（sub）标记
用于书写数学公式或分子式。如：H<sub>2</sub>O  X<sup>2</sup> 
由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时 html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。
通常，一个字符实体是由三部分组成的：（1）一个“&”符号（2）字符专用名称或者字符代号（3）一个“;”符号在DW的设计视图中输入这些特殊字符，DW会自动在代码视图添加它们对应的转义字符
DW中插入HTML文本元素的快捷键
1. Enter 插入<p> </p> （硬回车） 2. shift＋enter 插入<br /> （软回车） 3. Ctrl＋shift＋space 插入一个 
定义列表(Defined List)
<dl> <dt>湖南城市</dt> <dd>长沙</dd> <dd>衡阳</dd> <dd>常德</dd></dl> <dl> <dt>湖北城市</dt> <dd>武汉</dd> <dd>襄樊</dd> <dd>宜昌</dd> </dl>
超链接标记<a>
超链接标记<a>
超链接的种类－根据源对象划分
1) 用文本做超链接： <a href="index.htm" target="_blank">首页 </a> 2) 用图像做超链接： <a href="index.htm"><img src="images/info.gif" title="返回首页" border="0" /></a> 3) 文本图像混合做链接：使用图像做超链 <a href="brand1.htm"><img src="green.gif" 接后，图像会自 /><br />格力空调1型</a> 动增加边框，可设置边框为0去掉该方法在商品展示的网站上较常用。
跑马灯<marquee>标记
一个特殊的文本标记，能使其中的文本在浏览器屏幕上不断滚动。示例其中behavior=“alternate”设置滚动方式为来回滚动，设置为scroll表示循环滚动，设置为slide表示滚动到目的地就停止。 direction属性用于控制滚动的方向，可以上下滚动或左右滚动。loop设置滚动的次数，loop为0表示不断滚动。scrollamount 属性设置滚动的速度，scrolldelay属性设置两次滚动间的间隔时间。
用标题标记<hn>……</hn>格式化文本
<h1>第1号标题字体</h1> <h3>第3号标题字体</h3> <h4>第4号标题字体</h4> <h5 align="center">第5号标题字体（居中）</h5>
用预格式化标记<pre>…</pre>格式文本
<pre> 网页设计师这一职业在今后来说还是有需求的。因为随着网络越来越普及，像我国的房地产市场</pre>
相对URL
相对URL是相对于包含超链接页的地点来规定文件的地点。如链接到同一路径下的文档，直接输入文件名即可，如news.htm 如链接到同一路径下子文件夹的文档，则先输入子文件夹名和斜杠（/），再输入文件名，如 yule/news.htm 如链接到上一级路径中，要在文件名前输入“../”，如“../news.htm”，其中“..”表示上级目录，“.” 表示本级目录。
水平线标记<hr />
<hr/>标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、 width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水平线。 <hr size="3" width="85%" color =“red" noshade="noshade" align="center" />
文本的强制换行<br />
电子商务顾名思义就是在internet上做生意， <br />商品展示，广告宣传、发布供求信息等活动实现的途径就是网页。
强制不换行标记<nobr>……</nobr>，常用于一串数字
文本中的空格
标记(<pre>除外)内字符前的空格浏览器将全部忽略，字符与字符间的空格浏览器将只保留一个空格显示，回车视为一个空格，块级元素之间忽略所有空格。如果要输入多个空格或需要在字符之前输入空格需在源代码中插入 （表示一个半角空格）。行内元素可看成一个字符
嵌套的无序列表示例
<ul id="nav"> <li><a href="">文章</a> <ul> <li><a href="">CSS教程</a> </li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> </ul> </li> <li><a href="">参考</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li> </ul>
<marquee>示例
<marquee direction="up" behavior="scroll" scrollamount="10" scrolldelay="4" loop="-1" align="middle" onmouseover=this.stop() onmouseout=this.start() height="120">  测试:网页设计与制作学习：可以将swf文件下载下来用flash播放器全屏播放以达到最好效果，也可以在IE浏览器中按F11键达到全屏效果. </marquee>
相对URL示例
wgzx oa. htm 1
1.href="yule/news.htm" 2.href="../oa.htm" 3.href=“pop.htm”
index .htm
yule
2
news .htm
3
pop .htm
相对URL的优势
可以看出相对URL方式比较简便，不需输入一长串完整的URL；另外相对路径还有一个非常重要的特点是：可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录。
绝对URL
绝对URL是采用完整的URL来规定文件在internet上的精确地点，包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。书写格式为：协议：//计算机域名或IP地址[/文档路径]［/文档名］例如： /download/dow nload.gif
列表标记
列表标记
为了合理地组织文本，网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和定义列表三种。无序列表(Unordered List) <ul>, <li> 有序列表(Ordered List) <ol>, <li> 定义列表(Defined List) <dl>, <dt>, <dd>

综合实例
<html> <head> <title>分段换行与预格式</title> </head> <body> <h3>以下是直接写文本的情况：</h3> 星期一、星期二、星期三、星期四、星期五、星期六、星期日。 <h3>以下是使用了三个换行标记的情况：</h3> 星期一、星期二、<br />星期三、星期四、<br/> 星期五、星期六、星期日。<br /> <h3>以下使用分段标记（分为两段）：</h3> <p>星期一、星期二、星期三、</p><p>星期四、星期五、星期六、星期日。</p> <h3>以下使用预格式：</h3> <pre> 星期一、星期二、星期三、星期四、星期五、星期六、星期日。 </pre> </body></html>
文本格式标记
网页中添加文本的方法
网页中添加文本的方法
文本格式标记是网页中定义文本格式的标记 1）直接写文本； 2）用段落标记<p>……</p>格式化文本，各段落文本将分行显示； 3）用标题标记<hn>……</hn>格式化文本，作用：定义第n号标题字体，n=1~6，n值越大，字越小；文本将变为粗体显示，可看成特殊的段落标记； 4) 用预格式化标记<pre>……</pre>格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换行和定位符；
文本中的转义字符
在HTML源代码中，有些字符有特别的含义，比如小于号“<”就表示HTML 标记的开始， html源代码中的“<”是不会在浏览器中显示的，如果要浏览器显示这些字符，就需要输出他们对应的转义字符。例如：<表示< , >表示> , &quot表示“ , &表示& ,  表示空格等；