HTML&CSS基础篇之十七：补充

最新推荐文章于 2024-08-31 15:09:14 发布

原创最新推荐文章于 2024-08-31 15:09:14 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML&CSS&JS 专栏收录该内容

16 篇文章

订阅专栏

框架

HTML允许把网页拆分为几个框架，每个框架都能在网页中显示。
可能已经注意到带有多框架的网页允许访问第三方页面，同时保持标题和原导航点不受影响。如今框架的大部分已经被认为“过时”，因为它们造成了导航和可用性问题，并且W3C也不建议使用。然而，在这些地方你仍然会发现它们的有用之处。

使用freameset和frame元素在网页中创建一组框架
创建了一系列框架做为三行，第一行占浏览器30%，最后一行占浏览器的20%，中间那行占浏览器的50%。

<frameset row= "30%, *,20%">
    <frame name="header" src="header.html" />
    <frame name="content" src="content.html" />
    <frame name="footer" src="footer.html" />
</frameset>

可以定义列框架，或者兼有行和列框架。

一个框架一个frame元素，每个框架指定了一个框架名和HTML源文件。

以单个name为锚点，使用a元素在目标链接(target link)中指定框架名

<a href="newpage.html" target="content"> new content</a>

iframe的关系元素，它能够被新版本的浏览器所支持。这个内联元素iframe 允许你在页面的任何地方放置框架。用法如下：

<iframe name="inlinecontent" src="newcontent.html" width="500" height="200" />

为newcontent.html，页面创建一个内联框架。

如果要使用框架，需要含有框架布局(frameset)的网页中使用DOCTYPE。

框架布局的DOCTYPE被认为是一种过渡性文本，所以不能设置框架和规范。

HTML 4.0.1用法：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0 用法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-frameset.dtd">

多媒体和Flash

浏览器可以播放声音、显示视频或者动画，比如网页中的Flash应用。

HTML通过object元素支持这些类型的媒体。object负责在网页中嵌入外部内容（你的网页需要插件程序(plugin viewer),它知道如何显示内容）。

embed元素。如果你想在自己的网页中包含多媒体，我们鼓励你访问其媒体类型设计者的网站，并使用他们推荐给你的设置。

一个object元素嵌入一个Quicktime电影

<object classid="clsid:02BF25D-8c17-4B23-BC80-D3488ABDDC6B" 
    codebase="http://www.apple.com/qtactivex/qtplugin.cab
    height="200"
    width="300>
    <param name="src" value="buckaroo.mov">
    <param name="autoplay" value="true">
    <param name="controller" value="true">
    <embed height="200"
        width="300"
        src= "buckaroo.mov"
        pluginspage= "http://www.apple.com/quicktime/download/"
        type="video/quicktime"
        controller="true"
        autoplay="true">
        Sorry your browser does not support this movie type</embed>
</object>

这是object开始标签，object中需要罗列出一系列的标签和属性，用以指定嵌入在网页中纠错程序。

可以在object元素中嵌入一些元素来提供一组选择。假如浏览器不支持外部的object可以试一试embed。

嵌入的embed元素用来支持旧版本的浏览器

object元素可能是一件麻烦的事情，需要查阅此类viewer产品文档信息中关于如何在你的网页中嵌入它们的viewers

创建网页的工具

Dreamweaver、Golive、FrontPage
所有这些应用工具试图提供一个所见即所得的（WYSIWYG）方式来创建网页。

提供非常便利的特征

一个代码窗口，用来进入具体语法检察功能的XHTML和CSS，它能够在你输入的时候检查出常犯的错误，还能够提供一些常用的名字和属性。
预览和出版的功能，允许你在网页存活于Web之前测试它们。
网站管理员，允许组织你的网站，还能使你的本地语法修改与你在浏览器上的网站保持联系。注意：这通常会帮你关照好所有的FTP任务。

不包括下面这些方面：

通常，这些工具偏离了标准支持，所有为了保持你的XHTML和CSS的时效性-需要自己书写XHTML
通常，这些工具都没有严格遵循标准，并且可能允许你使用XHTML和CSS做很不规范的编写，所有不要忘记校验（同时有些工具能够帮助你检验）。

谨记：可以使用简单的编译器连同这些更复杂工具的组合；一个解决方案并不能满足你所有的需求。所以，当这个创建网页的工具有意义时，你再去使用它。

工具参考：

Dreamweaver
GoLive
FrontPage
Emacs

客户端脚本

HTML网页不是被动的文档，通常有些内容是可执行的。可执行内容会对网页产生影响。你可以通过编写程序或者脚本的方式创建可执行内容。这里有许多配合浏览器工作的脚本语言，其中JavaScript脚本语言起主导作用。

这是一个把可执行内容放到你网页上的小尝试。

<script type="text/javascript">
    function validBid(form) {
        if(form.bid.value > 0) return true;
        eles return false;
    }
</script>

一个新的HTML元素，script ,它允许你在HTML中编写代码。注意我们还设置了JavaScript的类型。

用来检查用户的出价是否是0美元还是低于零美元。

<form onsubmit="return validBid(this);" method="post" action="contest.php">

然后，在XHTML中，你能够创建一个表单，使用这个脚本来检查在表单提交之前用户的出价,如果出价大于0，表单就能够提交。

onsubmit 当提交按钮按下时调用脚本。

脚本还可以做什么？

表单输入校验是一种工作。

JavaScript实际上访问的是整个文档元素树，通过编程可以改变文档树中的值和元素。你可以基于用户行为来编写一个脚本以改变网页的不同方面。

创建一个交互式的游戏，如填字游戏
当用户把鼠标移到图片上时，可以动态地改变图片。
在用户的浏览器中设置本地信息，那么你就能够在他们下次访问时记住这些信息。
让用户选择网页的不同样式。
从一组格言中随机显示一个格言。
显示圣诞节前的购物天数。

服务器端脚本

许多网页都不是由手工创建，而是由运行在服务器上的Web应用程序创建的。
要创建一个Web应用，需要懂得一些服务器端脚本或程序语言。

转到搜索引擎

提高你的排序

搜索引擎通过网页中的组合单词和词组进行搜索排序。为了提供网页排序并告知搜索引擎网页相关的内容，需要在head开始处添加两个meta标签：一个列举关键字，另外一个提供内容描述。关键字是一两个描述网站的单词。比如“咖啡”或者“旅行日志”

<meta name="description" content="This would be your description of what is on your page.Your most important keyword phrases should appear in this description." />

<meta name="keywords" content="keyword phrase 1, keyword phrase 2, keyword phrase 3, etc."/>

如何阻止我的网站列入搜索列表？

可以请求搜索引擎忽略你的网页，不过不能保证所有的引擎都会这么做。
只需要在XHTML表头中插入一个meta标签就行了

<meta name="robots" content="noindex, nofollow" />

这个meta标签告诉搜索引擎忽略这一页及该页上链接的其他页面。

关于打印的样式表

<line rel="stylesheet" type="text/css" media="print" href="forprint.css" />

注意：

把打印区的文本背景颜色设置为白色，这可以增加被打印网页的可读性。
在你的样式表中用点比用像素、百分数或者em来定义字体大小要好得多。点是特别为打印文本设计的，对大多数字体来说，典型的点的大小是12pt
San-serif字体在显示屏上易读，而serif字体在打印网页上易读。你可以使用你的打印样式表来改变你的font-family。
如果你的导航菜单、工具条或者网页的主要内容周围的其他内容，对主要内容而言无关紧要，那么可以为打印版本的网页隐藏这些元素。通过把这些元素的显示性质设置为”none”来完成隐藏。
如果你已经在网页上将元素定位，你可以考虑到移除定位属性，那么网页可以用综合的方式打印内容，这对内容的读取有很大的意义。
如果你已经在网页上设置了元素的宽度，你可能用margins或者其他方式把这些宽度改为灵活的宽度，如果你的网页有特定的宽度，那么它可能并不适合打印页面。

制作好打印样式表的关键是着眼于网页的主要内容，并且确保这些内容打印清晰，适合打印页面，并且易读。要想知道你的网页在打印出来时看起来是否好看，最好的方法就是用打印页面来测试你的打印样式表。

适合移动设备的网页

<link rel="stylesheet" type="text/css" media="handheld" href="formobile.css" />

支持handheld样式表的媒体类型始终是有限的。
注意技巧：

记住许多移动服务器按照数据流量收费。这是我们编写简短、正确的XHTML并使用CSS来样式化你网页的最佳理由。
尽可能缩小网页比例。如果你有handheld样式表，用它来尽可能减少字体尺寸、边界和边框。
注意你的多栏布局常常在小设备上被忽略，所以留意你的XHTML中元素的排列。
有些移动设备不支持框架和弹出窗口，所以避免使用它们。
最后，最好的办法就是经常测试你的网页，这样才能知道它们在小设备上的真实表现。

Blog博客

博客自定义样式表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title><$BlogPageTitle$></title>
    <$BlogMetaData$>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
            text-align: center;
            color: #554;
            backgroud: #689C54 url(http://www.blogblog.com/dots_dark/bg_mindots.gif)
            font-family: "Lucida Grande", lucida, helvetica, sans-serif;
            font-size: small;
        }
        ....
        ...
    </style>
</head>
<body>
....
</body>
</html>