在本节中，我们将了解 HTML 中的列表元素。 列表方法在网站设计中发挥着很大的作用，显示的信息非常整齐直观，方便用户理解。 在之前的CSS样式学习中，会大量使用列表元素的中间函数。
用于组织数据的列表
学习了这么多控制网页显示的HTML标签后，读者就可以开始创建纯文章页面了。 在本节中，我们将了解 HTML 中的列表元素。 列表方法在网站设计中发挥着很大的作用，显示的信息非常整齐直观，方便用户理解。 在之前的CSS样式学习中，会大量使用列表元素的中间函数。
4.4.1 列表的结构组成
HTML 列表元素是由列表标记包围并包含列表项组成的结构。 具体结构如图4.17所示。
4.4.2 制作无序列表
顾名思义，无序列表是列表结构中的列表项不按顺序排列的列表。 Web应用程序中的大多数列表都使用无序列表，它们的列表标签编译如下：
4.4.3 制作有序列表
顾名思义，有序列表是列表结构中的列表项按顺序排列的列表。 从上到下可以有各种序号，如1、2、3或a、b、c等。在D:web目录下创建一个网页文件，命名为ul_ol.htm，编译代码为如代码4.17所示。
代码4.17列表设置：ul_ol.htm
Web前端技术
网页后台学习
ASP
ASP.net
PHP
计算机图形图像处理
红宝石
Python
在浏览器地址栏输入，浏览效果如图4.18所示。
图 4.18 列表设置
本节从文字的详细修改入手，让读者掌握HTML各种字体格式的变化，创作出更专业的网页。
4.2 文字多样化修改
在上一节中，我们学习了大段落的各种设置，但文本本身的修改也变得越来越有吸引力。 本节从文字的详细修改入手html显示列表，让读者掌握HTML各种字体格式的变化，创作出更专业的网页。
4.2.1 文本样式设置的基本标签—
设置字体样式的基本标签是其中包含的文本是样式范围。 初学者HTML代码编译中，很容易出现多重嵌套，比如文本。还有一种情况是标签嵌套错位，比如
文本
。 为了规范代码的编译，防止不必要的错误，读者在学习时一定要谨慎。
4.2.2 设置文字颜色
颜色是标签的属性之一，用于设置文字颜色。 在D:web目录下创建一个网页文件，命名为font_color.htm，编译代码如代码4.7所示。
代码4.7字体颜色设置：font_color.htm
浅蓝色文字：HTML学习的本质就是该用什么就用什么
深棕色文字：HTML学习的本质是该用什么就用什么
浅红色文字：HTML学习的本质是该用什么就用什么
深红文：HTML学习的本质是该用什么就用什么
浅黄色文字：HTML学习的本质是该用什么就用什么
深红文：HTML学习的本质是该用什么就用什么
浅蓝色文字：HTML学习的本质是该用什么就用什么
深棕色文字：HTML学习的本质是该用什么就用什么
浅蓝色文字：HTML学习的本质是该用什么就用什么
深蓝色文字：HTML学习的本质是该用什么就用什么
浅蓝色文字：HTML学习的本质是该用什么就用什么
深棕色文字：HTML学习的本质是该用什么就用什么
在浏览器地址栏输入，浏览效果如图4.7所示。
图 4.7 字体颜色设置
读者不仅可以从代码4.7中了解到font标签中color属性的用法，还可以熟悉各种颜色的表示方法。
4.2.3 设置文本规格
size也是标签的一个属性，用于设置文本大小。 size的取值范围为1-7，默认为3。我们可以在size属性值前添加“+”和“-”字符来指定相对于字体大小初始值的增量或减量。 在D:web目录下创建一个网页文件，命名为font_size.htm，编译代码如代码4.8所示。
代码4.8 字体大小设置：font_size.htm
大小为1：HTML学习
大小为2：HTML学习
大小为3：HTML学习
大小为4：HTML学习
大小为5：HTML学习
大小为6：HTML学习
大小为7：HTML学习
在浏览器地址栏输入，浏览效果如图4.8所示。
图 4.8 字体大小设置
读者可以尝试在尺寸值后添加“+”和“-”字符，以更灵活地设置文本规格。
4.2.4 设置文本字体
face也是标签的一个属性，用于设置文本的字体（字体类型）。 HTML网页中显示的字体是从浏览器系统调用的，所以为了保持字体一致，建议使用粗体，HTML页面也默认使用粗体。 在D:web目录下创建一个网页文件，命名为font_face.htm，编译代码如代码4.9所示。
代码4.9字体设置：font_face.htm
字体加粗：沁园春长沙-毛泽东
字体为宋体：沁园春·长沙-毛泽东
字体为宋体：沁园春·长沙-毛泽东
字体为楷书：沁园春·长沙-毛泽东
在浏览器地址栏输入，浏览效果如图4.9所示。
图4.9 Font字体设置
作者将改变的字体部分的文字大小设置为5号html显示列表，方便读者查看。
4.2.5 将文本设置为斜体
使用双标签可以倾斜文本以实现特殊效果，例如文章的日期。 叫做指出标签，也是斜体的。 目前它比标签使用得更频繁。 其编译如下：
这是粗体文本
这也是斜体文本
4.2.6 将文本设为粗体
使用双标签可以使受影响的文本加粗，使文本更加显眼，例如文章的标题部分。 它被称为非常尖的标签，也是粗体，目前比标签使用得更频繁。 其编译如下：
这是 Times New Roman
这也是宋朝
4.2.7 在文本中添加逗号
使用双标记向受影响的文本添加逗号。 下面是文本斜体、粗体和逗号的组合示例。 在D:web目录下创建一个网页文件，命名为font_style.htm，编译代码如代码4.10所示。
代码4.10文字装饰设置：font_style.htm
加粗：沁园春·长沙-毛泽东
加粗：沁园春长沙-毛泽东
逗号：沁园春长沙-毛泽东
加粗加粗逗号：沁园春长沙-毛泽东
在浏览器地址栏中输入，浏览效果如图4.10所示。
图 4.10 字体修改设置
作者将文中所有文字规格设置为5，方便读者查看。
—注意：多个标签包含同一段文字时，其包含顺序不能错。
4.2.8 多种标题样式的使用
在网页上的文章中，为了凸显标题的重要性，标题的风格比较特殊。 HTML技术为标题保护了一组样式标签，即双标签，文本规格从大到小代表不同级别的标题。 标题标签的特点是占一行、文字加粗、文字居中。 这样，设置标题就非常容易了，而且可以设置多级标题。 在D:web目录下创建一个网页文件，命名为font_h.htm，编译代码如代码4.11所示。
清单 4.11 标题设置：font_h.htm
标题No.1
标题 2
标题 3
标题4
标题5
标题 6
财富出版物：为什么微软没有从繁荣走向繁荣
遇到了潜在的问题
有业内人士认为，多年来垄断互联网搜索和广告市场的微软可能盛极而衰。 ……同时，微软最近推出的多项新计划，例如开放手机联盟、社交网站通用平台OpenSocial，以及可能投资数十亿港元收购无线频段等，也受到了广泛的批评。
将继续垄断搜索
最近有一些文章称，如果出现更好的搜索引擎，人们会毫不犹豫地抛弃微软。 而且，虽然更好的搜索引擎确实出现了，但微软已经能够保持自己的地位一段时间了。 ...在这些情况下，网站速度往往决定胜负。
在浏览器地址栏中输入，浏览效果如图4.11所示。
图4.11 标题设置
4.2.9 学会处理网页中的特殊字符
在 HTML 中，某些字符具有特殊含义。 例如“”是标签的左括号和右括号，标签控制HTML的显示。 标签本身只能被浏览器解析，不能显示在页面上。 那么，如何在HTML中显示“”呢？ HTML规定了一些特殊字符的写法，方便在网页中显示，如表4.1所示。
表 4.1 HTML 中的特殊字符
特殊符号
HTML代码
特殊符号
HTML代码
<
™（商标符号）
™
>
®（注册符号）
®
“”（中文全角）
”
X
X
§
§
在做Web开发的时候，你可能会遇到flash遮挡页面元素的情况。 无论你如何设置flash容器和图层的深度（z-index），都没有帮助。 现有的解决方案是将其添加到插入的flash的embed或object标签中。 “wmode”属性并设置为wmode=“透明”或“不透明”，但是wmode属性是什么意思以及为什么可以解决
在Flash标签中
“窗口”在网页上使用电影自己的圆形窗口来播放应用程序，但仍然位于顶部。
“不透明”显示页面上位于其前面的内容。
“透明”使 HTML 页面的背景能够透过应用程序的所有透明部分显示，并且可以提高动画性能。
注意：“不透明”和“透明”都与 HTML 层交互，从而允许 SWF 文件上方的层遮盖应用程序。 这两个选项之间的区别在于“透明”允许透明度。 因此，如果 SWF 文件的某个部分是透明的，则该 SWF 文件下面的 HTML 层可以透过该部分显示，而“不透明”则不会显示。
即如果FLASH覆盖了DIV层，需要将wmode属性改为“Transparent”
在做Web开发的时候，你可能会遇到flash遮挡页面元素的情况。 无论你如何设置flash容器和图层的深度（z-index），都没有帮助。 现有的解决方案是将其添加到插入的flash的embed或object标签中。 “wmode”属性设置为wmode=“transparent”或“opaque”，但是wmode属性的含义是什么，为什么可以解决这个问题呢？
窗口模式(wmode)
wmode共有三种，即窗口模式。 看看Macromedia官方是怎么说的： 窗口：使用窗口值在网页上播放自己的矩形窗口。这是w模式的默认值，它的工作方式是经典的FlashPlayer工作方式。这通常提供最快的动画性能。 不透明：通过使用不透明值，您可以使用JavaScript来移动或调整不需要透明背景的电影的大小。不透明模式使电影隐藏在背景后面的所有内容此外，不透明模式会移动 Flash 影片后面的元素（例如，使用动态 HTML），以防止它们透显。 透明：透明模式允许 HTML 页面的背景或 Flash 影片或图层下方的 DHTML 层通过电影的所有透明部分显示。 这允许您将影片与 HTML 页面的其他元素重叠。使用此值时，动画性能可能会降低。
窗口模式
默认的显示模式，在这些模式下flashplayer有自己的窗口句柄，这意味着flash影片是存在于Windows中的一个显示实例，并且位于浏览器核心显示窗口之上，因此flash只是看起来显示在浏览器中，这也是Flash最快、最高效的渲染模式。 因为它是一个独立于浏览器的HTML渲染表面，这导致flash在默认显示方式下总是遮挡所有与其重叠的DHTML层。
而且，大多数苹果笔记本浏览器都会允许DHTML层显示在flash之上，但是在播放flash电影时会出现奇怪的现象。 例如，DHTML层会显示异常，就像被flash截掉了一部分一样。
不透明模式
这是无窗口模式。 在这些情况下，FlashPlayer没有自己的窗口句柄，这需要浏览器告诉FlashPlayer在浏览器的渲染表面上绘制的时间和位置。 此时，Flash影片不会位于浏览器HTML渲染面下方，而是与其他元素位于同一页面上，因此可以使用z-index值来控制DHTML元素是否覆盖Flash或被覆盖。
透明模式
透明模式。 在这些模式下，flashplayer 会将舞台的背景颜色 alpha 值设置为 0，并且仅勾勒出舞台上真实可见的对象。 同样，你也可以使用z-index来控制flash影片的深度值，与Opaque模式不同的是，这样做会增加flash影片的播放效果，但在设置wmode="opaque"或"transparent"时9.0.115之前的flashplayer版本会导致全屏模式失败。
了解了各种模式的实现方法和意义后，就可以在后续开发中根据具体情况选择设置wmode属性的值了。
发表评论