1、请列举出可以尝试使用的不同于 Internet Explorer 的浏览器，并说明可以从哪个网站下载旧版本的浏览器来体验网络。
可以尝试使用的不同于 Internet Explorer 的浏览器有 Firefox 、 Chrome 、 Safari 、 Lynx 、 Links 等。可以从 http://browsers.evolt.org/ 下载旧版本的浏览器来体验网络。
2、列出你的网站访问者可能对网页抱有的几个目标。目标越明确越好。
对于不同类型的网站，访问者的目标有所不同。例如：
新闻资讯网站 ：访问者的目标可能是获取最新的国内外新闻信息，了解时事动态； 电商网站 ：访问者可能希望找到自己需要的商品，比较不同产品的价格和性能，完成购物； 学习类网站 ：访问者的目标或许是学习专业知识、提升技能； 社交网站 ：访问者可能想与朋友交流互动、分享生活点滴等。
3、设定目标后，访问网络上与你想在自己网站中涵盖主题相似的站点。在查看这些站点时，问问自己它们是否易于导航且内容优质。然后列出你对这些站点喜欢的地方。你将如何让自己的网站变得更好？
网站设计思考步骤
可以先确定网站目标，思考访客在网站可能有的目标并明确列出。
分析类似主题网站
导航是否便捷 内容是否优质 列出喜欢之处
设计网站时的考虑点
内容布局
首页放置有吸引力的内容 内页通过设计和导航让访客了解网站及更多感兴趣的信息
设计框架
牢记目标 避免多余信息干扰
创建网站线框
可利用一些免费工具或移动应用
网站发布
根据自身需求选择合适的网站托管方式 或使用内容管理应用发布内容
通过综合以上方面，让网站更加出色。
4、使用 Chrome 开发者工具在浏览网页时对其进行一些更改。例如，访问维基百科上的 HTML5 文章（http://en.wikipedia.org/wiki/HTML5）并打开 Chrome 开发者工具。使用检查器工具找到文章标题。双击标题并将其更改为其他内容。你还可以更改与页面关联的样式以改变其外观。当你处理自己的网页时，使用开发者工具进行实验，而不是编辑文件、保存更改并重新加载网页。在开发者工具中编辑你的页面，一旦你对看到的结果满意，再将更改转移回你的文件。
操作步骤为：
打开 Chrome 浏览器，访问网页 http://en.wikipedia.org/wiki/HTML5 打开 Chrome 开发者工具 使用检查器工具定位到文章标题 双击标题并修改为其他内容 还可更改页面样式来改变外观 处理自己网页时，用开发者工具实验编辑，满意后将更改转移回文件
5、尝试使用“查看源代码”功能或开发者工具查看你自己喜欢的网页的源代码。将屏幕上的文本与该文本的源代码进行比较，以了解 HTML。
可以在浏览器中操作来查看网页源代码。以谷歌浏览器为例，可通过选择浏览器“视图”菜单中“开发者”子菜单里的“查看源代码”来查看当前页面的源代码。
开发者工具则是更强大的扩展，打开时默认显示“元素”标签页，它展示的是浏览器处理后的 HTML 源代码，与“查看源代码”功能显示的原始 HTML 代码有一些差异。
比较屏幕文本和源代码能帮助了解 HTML 标签如何对应页面上的元素、元素的样式信息以及元素在页面结构中的位置等。
6、创建第二个页面，提供在之前列出的某个主题的更多信息。包含几个副标题。如果你有能力，可以完善页面内容，并在合适的地方加入列表来增强页面效果。
页面标题
副标题一
副标题二
副标题三
页面内容
根据要求，在此部分可以进一步完善页面内容。例如：
列表项一 列表项二 列表项三
如有更多详细信息，也可以继续补充。
7、有序列表和无序列表使用 标签来表示列表项。定义列表使用什么标签？
定义列表使用
<dl>
<dt>
<dd>
8、是否可以在无序列表中嵌套有序列表，反之亦然？
可以，还可以嵌套相同类型的列表。
9、使用哪个属性来设置有序列表的起始编号？那改变列表中某个元素的值又使用哪个属性呢？
使用
<ol>
start
value
10、使用 list-style-type CSS 属性为无序列表指定的三种项目符号类型是什么？
disc、circle、square
11、使用嵌套列表创建一个关于列表相关知识的大纲
课程5：用列表组织信息
1.1 列表介绍
1.1.1 列表由多个标签组成
1.1.2 列表的多种类型及用途
1.2 学习内容
1.2.1 如何创建编号列表
1.2.2 如何创建项目符号列表
1.2.3 如何创建定义列表
1.2.4 与列表相关的级联样式表（CSS）属性
1.3 列表使用注意事项
1.3.1 可更改列表的编号和项目符号样式
1.3.2 可任意嵌套列表
1.3.3 不使用已弃用的列表类型
1.3.4 用列表标签而非手动编号或格式化列表
1.3.5 用级联样式表而非列表标签缩进文本
1.4 列表的其他用途
1.4.1 用于网页导航菜单
1.5 嵌套列表
1.5.1 HTML代码中缩进嵌套列表以显示布局关系
1.5.2 不同浏览器对嵌套列表的格式可能不同
1.5.3 可使用CSS指定列表样式
12、使用嵌套列表和列表样式类型（list – style – type）CSS属性，为自己网站上要涵盖的主题创建一个传统大纲。
可按以下步骤操作：
确定网站要涵盖的主题及子主题； 使用HTML创建嵌套列表结构展示主题层次； 运用CSS的
list-style-type
disc
circle
square
示例代码如下：
<html>
<head>
<style>
ul.level1 { list-style-type: disc; }
ul.level2 { list-style-type: circle; }
ul.level3 { list-style-type: square; }
</style>
</head>
<body>
<ul class='level1'>
<li>主题1
<ul class='level2'>
<li>子主题1.1
<ul class='level3'>
<li>子子主题1.1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
13、打开一个已有的网页，并创建一个返回第一页的链接。此外，在万维网上找到一些讨论相同主题的页面，并创建指向这些页面的链接。
首先需有一个已有的网页，之后在该页面中，使用 HTML 的
<a>
first_page.html
<a href='first_page.html'>返回第一页</a>
接着通过搜索引擎等方式在万维网上找到讨论相同主题的页面，获取其 URL，再用
<a>
<a href='https://example.com'>相关网页</a>
14、既然你已经体验过构建第一个真正详尽的网页了，那就尝试搭建你自己的主页吧。你可以在主页里添加些什么内容来吸引人们深入浏览你的页面呢？别忘了在主页里添加指向你网站其他页面的链接。
可以在主页添加博客、对后续内容的概述、其他主题的链接列表等内容，还需确保这些内容有足够吸引力。 此外，要通过设计和导航让用户明确所处网站及其他可能感兴趣的信息。
15、为什么网页开发者要在多个浏览器中测试自己的主页？
因为网页开发者的设计受用户所用浏览器和平台影响，在多个浏览器中测试主页，能让他们及时了解不同环境对页面的处理情况。
16、为什么在 CSS 中不能可靠地使用绝对单位？
绝对单位在 CSS 中的问题
绝对单位在 CSS 中存在问题，因为无法确切知道用户使用的显示介质是什么。不同显示器的尺寸和分辨率不同，同样的绝对单位（如英寸）在不同显示器上显示可能不同。
例如，浏览器若认为一英寸是 96 像素，同样设置为 1 英寸的标题，在不同显示器上可能显示小于或大于一英寸。
因此，使用相对单位更安全。
17、判断题：在页面中包含样式表需要网络服务器提供的功能。
错误
18、元素的边距（margin）或内边距（padding）是在边框内部吗？
内边距（padding）在边框内部，边距（margin）在边框外部。
19、如何将 CSS 应用到已创建的网页上？
可以采用以下方法将 CSS 应用到已创建的网页上：
若情况允许，可将样式表与 HTML 页面完全分开开发；更常见的是采用迭代过程，先对样式表进行更改，再对 HTML 页面做修改，然后再回到样式表进行微调，直至对结果满意。 若要对已有网站进行重新设计以采用基于 CSS 的展示，可利用新的网站设计进行转换，转换时有可能保持网站原有的外观和感觉。若使用内容管理系统（CMS）从数据库自动生成网站，转换为样式表可能很容易，因为 CSS 在概念层面与内容管理系统使用的模板概念非常兼容。 考虑一些关键问题来规划网站，如确定要支持哪些浏览器，针对旧浏览器的特性进行处理。 参考新 CSS 属性，如学习如何使用 CSS 创建响应式页面，学习更改页面颜色和定义页面及特定元素的背景，深入学习 CSS 选择器和创建页面布局等。 确保 CSS 语法正确，可使用 W3C 提供的 CSS 验证器（http://jigsaw.w3.org/css-validator/）进行检查。 遵循类和 ID 的命名规则，名称必须以字母开头，只能包含字母、数字或破折号（-）。
20、创建或找到一些可以在你的网站的一个或多个页面上用作导航图标或按钮的图像。记住，多次使用图像总是有益的。创建一个可以用在每个页面顶部或底部的简单导航栏。
按照要求需先创建或寻找合适图像，多次利用这些图像，然后创建能置于页面顶部或底部的简单导航栏。
21、创建或找到一些可以用来提升网页外观的图片。找到你喜欢的图片后，尝试创建与它们相匹配的背景色、文本颜色和链接颜色。
这是一个操作任务，需先找能提升网页外观的图片，再创建与之匹配的背景、文本和链接颜色。
22、创建并测试一个简单的客户端图像映射，使其链接到网站不同子目录中的页面或万维网上的其他站点。
创建客户端图像映射，首先需要一张有多个可单独选择的离散视觉区域的图像，照片通常不适合。可以使用以下工具来创建：
Mapedit程序 （可在 http://www.boutell.com/mapedit/ 找到） 许多最新的 HTML 页面和网页图形所见即所得编辑器 在线编辑器（如 http://www.image-maps.com/ ）
若手动创建，先勾勒图像上的活动区域，确定这些区域端点的坐标（可借助图像编辑程序显示鼠标当前位置坐标的功能）。
HTML5 支持使用
<map>
创建完成后进行测试，确保其能正确链接到网站不同子目录中的页面或万维网上的其他站点。
23、为你自己的主页或网站主要板块之一的入口页面创建并测试一个客户端图像映射。记得为使用纯文本浏览器或为残障人士设计的浏览器的用户提供替代方案。
按照如下步骤进行操作：
使用Mapedit程序（可在 http://www.boutell.com/mapedit/ 找到）、最新的HTML页面和网页图形的所见即所得（WYSIWYG）编辑器或在线编辑器（如 http://www.image-maps.com/ ）来创建客户端图像映射；若要手动创建，先勾勒图像上的活动区域，确定这些区域端点的坐标（可借助多数图像编辑程序显示当前鼠标位置坐标的功能）。
测试创建好的图像映射，确保其能正确链接到目标页面。
为使用纯文本浏览器或为残障人士设计的浏览器的用户提供文本版本的链接，以便他们也能访问相关内容。
24、什么是正常流？
正常流是页面的默认布局，元素从左到右、从上到下排列。定位用于改变元素在正常流中的位置，或使其完全脱离正常流。
25、绝对定位和固定定位方案有何不同？
以下是调整为 Markdown 格式的文本内容：
绝对定位方案是相对于最近的已定位祖先元素来定位元素。固定定位方案是相对于视口来定位元素，并在页面滚动时保持该位置。
26、修改下拉导航菜单示例，使其包含二级子菜单。你应该能够按照子菜单的模式创建第二个子菜单。
要在原示例中添加二级子菜单，可按以下步骤操作。首先，在 HTML 代码里，找到想要添加二级子菜单的一级菜单项，然后在其对应的子菜单列表里添加一个新的列表项，在这个新列表项里再嵌套一个无序列表作为二级子菜单。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>Navigation Menus</title>
<style type="text/css">
</style>
</head>
<body>
<h1>A Typical Web Site</h1>
<nav>
<ul>
<li><a href="/home.html">Home</a></li>
<li><a href="/products.html">Products</a>
<ul>
<li><a href="/products/a.html">Something Awesome</a></li>
<li><a href="/products/b.html">Another Awesome Thing</a></li>
<li><a href="/products/c.html">Our Best Thing</a></li>
<li><a href="/products/d.html">A Cheap Thing</a></li>
<li><a href="#">Sub - category</a>
<ul>
<li><a href="/products/sub1.html">Sub - item 1</a></li>
<li><a href="/products/sub2.html">Sub - item 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/about.html">About</a>
<ul>
<li><a href="/history.html">History</a></li>
<li><a href="/team.html">The Team</a></li>
</ul>
</li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
<p>Typical web site content.</p>
</body>
</html>
接着，在 CSS 里，要调整样式来正确显示二级子菜单。例如，当鼠标悬停在一级子菜单的某个列表项上时，显示对应的二级子菜单。可以添加如下 CSS 代码：
#navigationBar ul ul ul {
margin - top: 0;
display: none;
position: static;
height: auto;
}
#navigationBar ul ul li:hover > ul {
display: block;
}
这样，当鼠标悬停在一级子菜单的某个列表项上时，对应的二级子菜单就会显示出来。
27、向你的主机托管提供商索要可用于处理表单的脚本。如果你可以使用这些脚本，询问数据是如何处理的以及你应该在表单控件中使用哪些名称。如果你需要使用表单，但主机托管提供商不允许你使用其脚本，应该怎么做？
向主机托管商索要处理表单的脚本 若可用，询问数据处理方式和表单控件名称 若需用表单但托管商不允许用其脚本，另寻网站托管处
28、访问一些可能使用表单的网站，例如http://www.fedex.com。查看它们使用了哪些表单控件以及如何排列这些控件，并查看源代码以了解HTML代码。
该步骤指导人们访问特定网站，观察其表单控件的使用和排列情况，还可查看HTML代码以学习。
29、将视频上传到 YouTube 或 Vimeo，然后创建一个嵌入该视频的网页。
可以先将视频上传到 YouTube 或 Vimeo 网站。
若上传到 YouTube ：
1. 点击视频的“分享”按钮。
2. 选择“嵌入”。
3. 若需自定义，可点击“显示更多”选择选项。
4. 将框中的 HTML 代码复制到自己的网页。
若上传到 Vimeo ：
1. 在视频页面找到嵌入代码。
2. 复制该代码到自己的网页。
以此创建嵌入该视频的网页。
30、在浮动列之后，哪个属性可以让文本恢复正常流动？
clear 属性可用于浮动列之后，使文本恢复正常流动。
31、如何为绝对定位的元素指定包含块？
通过更改 position 属性来设置包含块，通常将其值设为 relative（不指定偏移属性）。
32、要将导航链接的有序列表转换为水平导航栏，你会编写哪些类型的规则？
以下是给定文本内容的 Markdown 格式版本：
需要在样式表中处理以下事项：
去除列表的项目符号 将顶级列表水平布局 为所有列表和列表项指定尺寸以辅助定位 定位子菜单使其出现在正确位置 默认隐藏子菜单 通过样式自定义菜单外观 鼠标悬停时显示子菜单
具体样式代码示例如下：
首先，为导航栏容器设置样式，使其相对定位，禁用边距和内边距，并指定尺寸：
#navigationBar {
position: relative;
margin: 0;
padding: 0;
height: 30px;
width: 90%;
}
接着，为导航栏中的顶级列表设置样式：
#navigationBar ul {
margin: 0;
padding: 0;
}
33、你可以用 CSS 创建什么样的布局？选择一个网站（可以是自己的网站，也可以是喜欢使用的网站），用 CSS 复制该网站的布局样式。注意除非获得许可，否则不应该直接盗用别人的代码。从网站在屏幕上呈现的视觉外观开始，在纸上画出方框，作为显示各个列位置的指南，再以此为模型编写用于构建类似布局的 HTML 和 CSS。
可以用 CSS 创建多种布局，如使用绝对定位或浮动列布局，还可选择固定布局或液体布局。在复制网站布局时，要从视觉外观入手，在纸上画方框确定列位置，以此为模型编写 HTML 和 CSS 构建类似布局，同时注意不能未经许可盗用他人代码。
34、尝试使用绝对定位内容和使用浮动列这两种 CSS 布局技术。先从其中一种布局技术开始进行页面布局，然后将其转换为另一种布局技术。最后，确定你认为外观合适的页面样式，以及你认为最容易理解、应用和持续修改的 CSS 代码。
这是一个实践操作要求，需按描述进行页面布局实践，先任选一种布局技术开始，再转换为另一种，最后找到合适页面样式与易处理的 CSS 代码。
35、为你的网站设计两种布局的模型：一种是适用于小屏幕的单栏布局，另一种是适用于大屏幕的两栏或三栏布局。
首先，设计适用于小屏幕的单栏布局。将所有内容依次排列在一个垂直的列中，确保文本、图片和其他元素在小屏幕上能够清晰显示，避免内容过于拥挤。
然后，设计适用于大屏幕的两栏或三栏布局。可以将相关内容分组，分别放置在不同的列中，提高页面的信息展示效率和美观度。
可以使用设计工具如 Sketch、Adobe XD 等创建网站的线框图或模型，直观呈现出两种布局在不同屏幕尺寸下的样子。
36、在网页设计中，当对自己的设计草图满意后，接下来应该用什么技术来构建以实现网站在不同屏幕上良好显示效果？
使用 CSS 媒体查询技术来实现这些设计，以让网站在不同屏幕上都能有良好显示效果。
37、下载 jQuery 并使用
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
