整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
规模的可用性研究揭示了今天最常见和最具破坏性的网页设计错误，它们并不令人惊讶或新奇，而是持续不断的损害网站的可用性。
自1996年以来，我们一直在总结网页设计十大问题的列表。今年，我们完成了一个大规模的可用性研究，在美国和英国有215名参与者，看看今天的网页设计错误是什么。
在分析从小型本地企业到娱乐场所，非营利组织到全球组织的43个站点的结果后，我们确定了10个最常见和最具破坏性的网页设计错误，这些错误对用户造成了伤害。（通过伤害他们的用户，这些设计缺陷绝对也会损害网站的商业指标）
这已经不是大新闻了，今天最重要的问题都不是新的或令人惊讶的。网页设计已经走了很长的一段路，但是这些一贯的问题依然存现代设计模式和美学改变，潜在的用户需求保持不变。用户仍然需要查找信息，能够阅读信息，并知道要点击的内容以及它所在的位置。
人们使用它们找不到信息，许多网站提供的类别名称不完整，没有充分或准确地描述其中的内容，其他的安排是基于公司而不是用户对内容的想法。当网站结构不符合用户的信息组织方式的心理模型（mental models）时，人们无法找到他们需要的东西。
让用户参与创建你的网站结构，一些可用性工作（如卡片分类，决策树或可用性测试）可以在创建一个对用户有意义的网站结构方面发挥很大的作用。
ATT.com：有关旧手机交易的信息是在现有客户下，但用户在智能手机下查找。
当用户不能清楚区分相似的导航类别或链接时，他们很难找到恰当的内容路径。类别和链接名称本身需要有自己的涵义，同时也应该与站点上的其他选项结合。如果多个部分或页面可以满足特定的信息需求，用户必须探索每一个路径或努力做出最好的猜测。或者，他们可能会转向搜索甚至离开网站。
BAM建筑网站上的用户希望了解建设项目的细节，但不确定这些信息是否属于关于我们，公司业务，或者公司技术，大部分是从我们的产品开始，但该部分包含了组织为客户提供的工作类型的概述，而不是项目细节，项目信息和案例研究是我们的技术特色。
卡片分类和可用性测试有助于避免重叠类别名称，链接太相似的问题通常源于糟糕的内容策略。
造成这些问题的两个可能原因是：
有些站点上的信息比较碎片化，分散在站点上，它们之间几乎没有连接。
当用户发现一个没有相关信息的信息孤岛时，他们没有理由认为网站的另一个区域提供了补充材料。如果用户需要更多的信息，他们会到竞争对手的网站或搜索谷歌。
试图重新访问信息的用户可能最终会选择在站点的另一个完全不同的领域，对内容的看法不同于第一次体验。那些找出不连贯信息的信息，拼凑起来。无论哪种方式，他们都对网站留下了负面的印象。
从组织的角度来看，这不仅是用户体验的失败，更是内容管理的噩梦：站点的某个区域的信息可能重复、不同或甚至与其他地方的信息相矛盾。
解决方案之一是在提供相关信息的页面之间添加相关链接，一个更好的解决方案是考虑为什么信息分散在整个网站，挑选适当的时候，并选择最佳位置。站点的其他区域可以引用关于该主题内容的位置，而不是复制信息。
即使用户已经知道他们所需要信息在网站中的位置，但他们依然可能会遭受意外或者漫长工作流的阻碍。
Web团队经常会问，要获取内容需要多少点击。没有确切的数字（no magic number）， 点击质量的重要性要远远大于其数量。当用户在点击页面时应该更接近信息目标，用户在选择他们想到东西时需要重复的点击，这会一次又一次的激怒客户，并让他们进行了不必要的努力。
团队构建页面有时候会闭门造车，从而没有考虑到创建内容的流程。创建新页面时，要考虑用户如何到达那里并思考是否还有更直接的路径。
纽约市政府综合网站：让用户感到沮丧的是当点击寻找消防站（Find a Firehouse）链接时，只能在下一个页面中再点击一次拼写都不一样的链接。
这种偏见也恰好说明了人们为什么忠诚于特定的产品、服务、网站或其他工具。我们会冒险使用其他可能更好用的方法，也可能会继续使用已经尝试过并且靠得住的工具。
人们想要了解价格、订购费用、服务费用以及流程开始之前或之后的额外费用，在一些网站中用户进行复杂的操作只为了寻找基本的信息，例如：他们不得不尝试在AARP网站上购买会员 ，这样才能查明会员费用，用户应该要在进行复杂操作之前就能找到到这些信息。
为部分或者特殊内容单独创建的网页、次级页面需要谨慎的处理这些网站上的用户。在我们的许多研究中，当参与者没有主动的跳转到了一个新的站点或者子站点，然后努力的想要回到父站点，但是该站点并没有提供返回选项。
有些人能够通过多次使用浏览器的“后退”按钮或重新输入网站的网址来导航到父站点，但是许多人甚至没有注意到他们已经切换了站点（因为父站点和子站点的外观和感觉相似） 并且很疑惑为什么他们以前使用的导航消失了。
在创建一个单独的子网站之前需要再三考虑，确保用户可以根据需要轻松导航回到父站点。
英国红十字会主站（www.redcross.org.uk – 上图）及其培训网站（英国（www.redcrossfirstaidtraining.co.uk -下图））看起来非常相似，使用相同的LOGO链接到每个网站各自的主页 ，以及相同的第一个导航类别（我们做什么（What We Do））。寻找急救课程的用户被引导到了培训网站，并在试图返回主站点时迷失方向。
当用户确切地知道他们在寻找什么的时候，用户会选择搜索作为最后的手段。在任何情况下，站点都需要通过提供强大的搜索结果来支持用户。
不幸的是，网站搜索功能仍然是许多网站的主要弱点，有些站点的搜索结果与用户的查询不匹配。此外，有些搜索结果展现的只是网站的一部分内容而已，不会清楚的向用户展示所有的搜索内容。
搜索结果名称不全或者附有无用的摘要，会让用户不由的猜测链接背后的内容。散布在网站搜索结果中的广告也会让用户感到讶异，这些广告会让他们头也不回的离开网站。
定期查看搜索日志，了解更多有关用户的搜索行为和搜索引擎成功与失败的信息。使用网站内容标签和网站搜索工具的功能，如“最佳匹配”，会搜索出针对特定查询的最适合的结果。
功能模块和过滤器通常能提高用户体验，利用它们，用户可以将搜索范围缩小到所需的资源、产品或内容。然而，简单地添加功能模块和过滤器并不能保证得到更好的可用性，这些工具需要支持真正的用户和真正的用户需求。
功能模块和过滤器定义了用户的搜索范围，不同的筛选条件在不同地方也能给用户提供不同的帮助。
假如：专门关注上星期二 ”关于可持续性” PPT演示文稿的员工，可以用文档类型和日期来缩小搜索范围，也可以通过搜索主题来找到内容。一个电子商务网站可能希望买鞋子的客户通过鞋跟高度来缩小购买范围，而购买外套的客户则希望通过衣服特定的保暖等级，来缩小自己的搜索范围。
当网站尝试采用几乎一刀切的方法时，网站所使用的“分面导航”（facets）和过滤器就会存在缺陷。相同的标准和特性可能不适合所有的内容类型，要谨慎地将用户的选择限制为二选一或者接近二选一。
购买家具的人可能在找蓝色的椅子，或者他们在找蓝色以外任何颜色的椅子（个人理解：前者是目标明确，我就要蓝色的椅子；后者是我想要椅子，但是没想好颜色，同时我不喜欢蓝色），这两个需求都应该得到支持。
给内容打的标签必须正确且可靠，这样用户搜索时才能得到相关的结果。例如：在美国退休人员协会网上，用户在搜索鸡肉食谱时会感到很困惑，10个搜索结果的前6个没一个食谱里有用到鸡肉。
Maplin.com：用户无法轻易的找到价格低于50￡的蓝牙音箱，用户没有办法通过网站的过滤器来搜寻符合他们价格要求的商品。相反，他们不得不通过几个价格区间的选项进行查找。用户必须一次只选择一个价格区间（例如40￡-50￡和30￡-40￡），然后记住每个区间里他们想要的商品。
眉目不清的信息会让用户难以找到他们需要的信息，密集的“文字墙”让发现感兴趣的信息变得困难，信息量过载的页面充满了争夺用户注意力的内容。
请记住：用户习惯扫视网页，而不是阅读网页，你可以通过编排网页内容，让用户能轻松的获取他们感兴趣的的信息——使用简短的句子和段落、项目列表、标题和加粗的关键字。
一个狭窄的区域分了好几个长段落，让用户很难看到重点，无法区分耳机的特点。
多年来，我们的可用性研究表明，用户往往会忽略或无视长得像广告或者被放置在通常是放置广告的页面位置的内容。这个问题依然存在，当内容与实际广告一起列出时，情况就更糟了。
网站的设计师有时会认为，将更多的设计元素，如：边框、背景色或图形添加到链接上能让链接脱颖而出，但结果通常是相反的：在链接周围的设计越是奇特，用户越是会误认为它是一个广告。
Pitfield London在网页右边的菜单信息里放有营业时间和链接，在下面放了一张咖啡杯的动态图和一些前往其他网站的广告图。由于这些广告的位置和显示的样式，导致用户很难在这个页面上找到咖啡菜单。这个网站还用了相似的设计画了张banner，用来引导用户前往Pitfield London。
我们可以放心地假设，没有人会着手创建一个设计糟糕的网站。如果这些问题多年以来都是众所周知的，那么它们为什么会持续存在呢?这个问题的潜在答案很多，可能会填满一本书。其中的一些错误可能反映了一个更深层次的、具体到组织的UX战略失败。
例如：
这些问题背后的原因并不比解决这些问题重要，通过在网站开发过程中的用户研究和可用性测试，并关注研究结果，可以很容易地识别上面列出的许多错误（如果不是全部的话）。
网站永远不会是完美的，没有网站是完美的。总有一个表格字段需要修改，还有一个内容需要编辑，还有一个导航类别需要确定，但是知道需要解决的问题对于朝着正确的方向前进是至关重要的。
在进行用户研究时，要坚持以前的发现。当设计偏好在5年后改变时，那些旧的发现可能会使你避免在第二个、第三次或第四次中犯同样的错误。
名词解释：
分面导航（facets/faceted navigation）：也称多维度导航，是分析一系列的内容然后根据条件把不相关的内容排除掉，留下我们想要的内容。
（译者注：a.具体想了解的话可以点击这里；b.文章里用的是facets，但作者提供的链接里用的是faceted navigation，所以两者应该是指同一个东西）。
译文作者： 兔子翻译组
本文由 @ 兔子翻译组 翻译发布于人人都是产品经理。未经许可，禁止转载
题图作者提供
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML从入门到精通!
<br> <!--换行-->
欢迎学习HTML技术
<hr>
<p>
超级文本标记语言是 标准通用标记语言下的一个应用，也是一种规范，一种 标准，
HTML
HTML(16)
它通过标记符号来标记要显示的网页中的各个部分。网页 文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉 浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 浏览器按顺序阅读网页 文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的 浏览器，对同一标记符可能会有不完全 相 同的解释，因而可能会有不同的显示效果。
</p>
<p>
简易性：超级文本标记语言 版本升级采用 超集方式，从而更加灵活方便。
</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h4>四级标题</h4>
<h6>六级标题</h6>
<hr>
<pre>
<<HTML从入门到精通>>
欢迎学习HTML技术
</pre>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yw6CHVL1-1593240920356)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例4.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:400px;height:100px;background:red">导航部分</div>
<div style="width:400px;height:500px;background:yellow">正文部分</div>
<div style="width:400px;height:100px;background:blue">版权部分</div>
<hr>
iphone XP 不要8888，也不要1888，只要<span style="font-size:50px;color:red">98
</span>
</body>
</html>123456789101112131415效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqLIPRpW-1593240920357)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例5.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>2020年网络游戏排行榜</h3>
<ol type="a" start="3">
<li>吃鸡</li>
<li>王者农药</li>
<li>LOL</li>
<li>WOL</li>
</ol>
<hr>
<h3>亲爱的同学们</h3>
<ul type="disc">
<li>冯乐</li>
<li>赵宁</li>
<li>木木</li>
<li>丹丹</li>
</ul>
<hr>
<h3>术语的解释</h3>
<dl>
<dt>LOL</dt>
<dd>它是由腾讯公司代理的一款网络游戏，中文称为叫英雄联盟</dd>
<dd>它分为pc端和移动端</dd>
<dt>HTML</dt>
<dd>是一种用来制作网页的标记语言</dd>
<dt>JAVA</dt>
<dd>是一种跨平台的编程语言</dd>
</dl>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZHuTwuN-1593240920359)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例6.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr color="#FF7300" size="10px">
<hr color="red">
<hr color="blue" width="400">
<hr color="#00FF00" width="50%">
<div style="width:600px;height:300px;background:#FF7300">
<hr color="red" width="50%" size="9px" align="right">
</div>
</body>
</html>12345678910111213141516效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7sI2hPAB-1593240920359)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例7.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="google.png" alt="图片加载失败...."title="只是一个标志">
<hr>
<div style="width:800px;height:800px;background:red">
<img src="mac(1).jpg" alt=""width="50%">
<div style="width:500px;height:500px;background:#CCCCCC">
<img src="mac(1).jpg" alt=""width="50%">
</div>
</div>
<img src="mac(1).jpg" alt=""width="50%"> 父容器body
</body>
</html>123456789101112131415161718192021效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yU93yyiJ-1593240920360)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例8.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <i>to</i>HTML! <br>
welcome <em>to</em>HTML! <br>
welcome to <address>上海市南京东路</address>
<hr>
HTML从<b>入门</b>到精通！
HTML从<strong>入门</strong>到精通！
<br>
原价：<del>188元</del>, 优惠价：<span style="font-size:40px;color:#FF7300">
98元</span>
<hr>
主讲:<ins>hector</ins>
<br>
<hr>
水的分子表达式:H<sub>2</sub>0 <br>
2<sup>3</sup>=8
<hr>
</body>
</html>1234567891011121314151617181920212223242526效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdmsP4or-1593240920362)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例9.png)]
<!DOCTYPE html>
<html lang="en">
<!-- 设置字符编号 -->
<meta charset="UTF-8">
<!-- 设置关键字 -->
<meta name="keywords"content="IT教育，JAVA开发，WEB前端，
Aandroid开发，python">
<!-- 设置描述信息 -->
<meta name="descaription" content="做专业的IT教育.....">
<!-- 设置网站作者 -->
<meta name="author" content="hector">
<!-- 设置网站的跳转 -->
<!-- <meta http-equiv="refrest" content="2";url=https://www.
baidu.com -->
<title>头部标签</title>
<!-- 定义内部的CSS样式 -->
<style>
body{
color:red;
}
</style>
<!-- 引用外部的CSS样式文件 -->
<link rel="stylesheet" href="CSS样式文件的路径">
<!-- 定义或引用脚本 -->
<<script>
alert("欢迎登录")
</script>
<!-- 定义一个基础路径 -->
<base href="../image/">
</head>
<body>
IT教育，计算机等级考试--Hrctor
<img src="../image/google.png" alt="">
<img src="../image/p1.jpg" alt="">
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-445E4McR-1593240920362)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例10.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
alert("哈哈！ ");
</script>
</head>
<body>
<div style="width:200px;height:200px;background:red">
<p>
hello
</p>
</div>
<p style="width:300px;height:300px;background:green">
<div style="width:200px;height:200px;background:blue">
worid
</div>
</body>
</html>1234567891011121314151617181920效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IoPZWeC1-1593240920363)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例11.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<hr>
<a href="d:/b.html" target="_self">b</a>
<hr>
<a href="c.html" target="_blank">c</a>
<hr>
<a href="../d.html">d</a>
<hr>
<a href="../../e.html">e</a>
</body>
</html>1234567891011121314151617效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xsXKs86m-1593240920364)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例12.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="#first">1 简介</a></li>
<li><a href="#second">2 HTML版本</a></li>
<li><a href="#three">3 特点</a></li>
<li><a href="#four">4 编辑方式</a></li>
<li><a href="#five">5 整体结构</a></li>
<li><a href="#six">6 相关要求</a></li>
</ol>
<p>
<a name="first">简介</a>
</p>
<P>
HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
</p>
<p>
自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
</P>
<p><a name="second">HTML版本</a></p>
<p>HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
</p>
<p>HTML历史上有如下版本：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。<br>
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 <br>
③HTML 3.2：1997年1月14日，W3C推荐标准。 <br>
④HTML 4.0：1997年12月18日，W3C推荐标准。<br>
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。<br>
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。<br>
</p>
<p><a name="three">特点</a></p>
<p>
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
</p>
<p><a name="four">编辑方式</a></p>
<p>
HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：
基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。 [7]
半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。 [7]
所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）。Microsoft Visual Studio（出品公司：微软）：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。
</p>
<p><a name="five">整体结构</a></p>
<p>
一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。 [10]
标记符<html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的，它是文件的开头;而</html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
</p>
<p><a name="six">相关要求</a></p>
<p>
在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。 [9]
文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或
html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 [9]
超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成
一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“ （注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。 [9]
标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“ （注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。 [9]
标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 [9]
HTML注释由"<!--"号开始，由符号”-->“结束结束，例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。
</p>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nQwkft9w-1593240920364)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例13.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="13.锚点链接.html#first" target="_blank">
简介</a></li>
<li><a href="13.锚点链接.html#second" target="_blank">
HTML版本</a></li>
<li><a href="13.锚点链接.html#three" target="_blank">
特点</a></li>
<li><a href="13.锚点链接.html#four" target="_blank">
编辑方式</a></li>
<li><a href="13.锚点链接.html#five" target="_blank">
整体结构</a></li>
<li><a href="13.锚点链接.html#six" target="_blank">
相关要求</a></li>
</body>
</html>123456789101112131415161718192021效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Z1Yrksq-1593240920366)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例14.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../image/hh.gif">点击此处下载图片</a>
<br>
<a href="mailto:422133899@qq.com">联系我们</a>
</body>
</html>123456789101112效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSbm5qsd-1593240920366)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例15.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="2" width="400px" height="300px" align="
center" bordercolor="red" bgcolor="#cccccc" backgroud="../..image/timg (1).jpg" cellspacing="0" cellpading="1">
<tr alige="center" bgcolor="cyain">
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr align="right">
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr align="leign" valign="top">
<td>hello</td>
<td align="right" bgcolor="blue">hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr align="right" valign="bottom" background="
../../image/hh.gif">
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b7NrHKsq-1593240920367)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例01.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>(tr>tb{hello$}*4)*4 -->
<table border="1" width="500px" height="300px">
<tr>
<td colspan="4" align="center">hello1</td>
</tr>
<tr>
<td rowspan="3">hello</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr>
<td>hello2</td>
<td rowspan="2" colspan="2">hello3</td>
</tr>
<tr>
<td>hello2</td>
</tr>
</table>
</body>
</html>123456789101112131415161718192021222324252627效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53fwwown-1593240920368)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例02.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>(tr>td*4)*6 -->
<table border="1" width="500px" height="300px" align="
center">
<caption><h2>学生基本信息表</h2></caption>
<<thead bgcolor="cyan">
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</thead>
<tbody align="center" bgcolor="yellow">
<tr>
<td>1001</td>
<td>小明</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>1002</td>
<td>小花</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>1003</td>
<td>小张</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>1004</td>
<td>小狗</td>
<td>19</td>
<td>男</td>
</tr>
</tbody>
<tfoot bgcolor="#FF7300" align="center">
<td width="%25">合计</td>
<td colspan="3">4</td>
</tfoot>
</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rbf0ftcZ-1593240920368)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例03.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="get" enctype="multipart/form-data">
用户名：<input type="text" name="usname" maxlength="4" value="
碧瑶" readonly="readonly">
<br>
密 码：<input type="password" name="pwd" size="6">
<br>
年 龄：<input type="text" name="age" value="18" disabled="">
<br>
性 别: <input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女
<br>
爱 好: <input type="checkbox" name="hobby" value="eat" checked>吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="doudou">打豆豆
<hr>
头 像: <input type="file" name="head" accept="image/jpg">
<input type="hidden" name="usr_id" value="8888">
<br>
<input type="submit" value="注 册">
<input type="reset" value="重 置">
<hr>
<input type="image" src="../../image/tijiao.gif">
<input type="image" src="../../image/chongtian.gif">
<hr>
<input type="button" value="普通按钮">
</form>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2qAPVMq-1593240920368)(C:\Users\lenovo\Desktop\project\result\案例04-2.png)]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
学 历：
<select name="degree">
<option value="0">--请选择你的学历--</option>
<option value="dazhuan">大专</option>
<option value="benke" selected>本科</option>
<option value="yanjiusheng">研究生</option>
<option value="shuoshi">硕士</option>
</select>
<br>
城 市：
<select name="city">
<optgroup label="山西省>"
<option value="taiyuan">太原</option>
<option value="datong">大同</option>
<option value="changzhi">长治</option>
</optgroup>
<optgroup label="山东省">
<option value="jinan">济南</option>
<option value="qingdao">青岛</option>
<option value="rizhao">日照</option>
</optgroup>
<optgroup label="江苏省">
<option value="nanjing">南京</option>
<option value="suzhou">苏州</option>
<option value="yangzhou">扬州</option>
</optgroup>
</select>
<br>
服务协议；
<textarea name="introduce" rows="10" cols="100" readonly>
请遵守本网站的相关协议和国家的法律法规...
请遵守本网站的相关协议和国家的法律法规...
请遵守本网站的相关协议和国家的法律法规...
请遵守本网站的相关协议和国家的法律法规...
请遵守本网站的相关协议和国家的法律法规...
</textarea>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-slxqIosF-1593240920370)(C:\Users\lenovo\Desktop\project\result\案例05.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>个人信息</legend>
<label for="name">用户名</label>
<input type="text" name="ursname" id="name"><br>
<label for="email">邮 箱</label>
<input type="text" name="email" id="email"><br>
</fieldset>
<hr>
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="image" src="../../image/tijiao.gif">
<input type="button" value="普通按钮">
<hr>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button><img src="../../image/tijiao.gif" alt=""></button>
<hr>
<fieldset>
<legend>院校信息</legend>
学号：<input type="text" name="stuld"><br>
学校：<input type="text" name="stuSchool"><br>
专业：<input type="text" name="stuMajor"><br>
</fieldset>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hlv43r7m-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例06.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="top.html" width="100%" height="200px" frameborder="0"
scrolling="auto"></iframe>
<h3>主体部分</h3>
<br>
<a href="01.表格.html" target="hello">01.html</a>
<a href="02.合并单元格.html" target="hello">02.html</a>
<br>
<iframe src="./foot.html" width="600px" height="600px" frameborder="0" name="hello"></iframe>
</body>
</html>1234567891011121314151617效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BvKrpi8R-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例07.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<article>
<header>标题</header>
<section>
第一段
</section>
<section>
第二段
</section>
<footer>脚注</footer>
</article>
<aside>广告</aside>
<figure>
<figcaption>log标识</figcaption>
<img src="../../image/facebook.png" alt="">
<img src="../../image/google.png" alt="">
</figure>
<nav>
<ul>
<li>网页</li>
<li>咨讯</li>
<li>视频</li>
<li>图片</li>
<li>知道</li>
<li>贴吧</li>
<li>采购</li>
<li>地图</li>
</ul>
</nav>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AR5V99DS-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例01…png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <mark>to</mark> html!
<hr>
我在<time datetime="2020年2月14日">情人节</time>有个会!
<hr>
<details>
<summary>HTML简介</summary>
<p>HTML是一门用来制作网页的标签语言</p>
<p>HTML可以包含文本、图像、音频、视频等各种多媒体信息</p>
</details>
<meter max="100" min="1" value="30"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
<meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="65" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="40" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="70" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
<hr>
<progress value="10" max="50"></progress>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcuZlH7Z-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例02.。.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" autocomplete="on" id="myform">
<label for="email">邮箱</label>
<input type="email" name="email" id="email">
<br>
<label for="home">个人主页:</label>
<input type="url" name="home" id="home">
<br>
<label for="phone">电话：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keywords">关键字:</label>
<input type="search" name="keywords" id="keywords">
<br>
<label for="num">数字：</label>
<input type="range" name="num" id="num" min="1" max="10" step="2">
<br>
<label for="birthday">出生日期：</label>
<input type="datetime" name="birthday" id="birthday">
<br>
<label for="color">颜色：</label>
<input type="color" name="color" id="color">
<br>
<label for="name">用户名:</label>
<input type="text" name="usrname" id="name" placeholder="请输入用户名" required="" autocomplete="on" autofocus="">
<br>
<label for="age">年龄：</label>
<input type="text" name="age id="age pattern="\d{1,2}">
<br>
<label for="city">城市：</label>
<input type="text" name+"city" id="city" list="citylist" autocomplete="off">
<datalist id="citylist">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
</datalist>
<hr>
<input type="submit" form="myform">
</form>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ul7yIjAz-1593240920374)(C:\Users\lenovo\Desktop\project\result\案例03…png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<audio controls="">
<source src="../../audio/earth.ogg">
<source src="../../audio/water.mp3">
您的浏览器不支持audio标签，请更换浏览器
</audio>
<video src="../../video/volcano.mp4" controls="" width="400px" poster="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vpMsaoe7-1593240920375)(C:\Users\lenovo\Desktop\project\result\案例04…png)]
<input type="url" name="home" id="home">
<br>
<label for="phone">电话：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keywords">关键字:</label>
<input type="search" name="keywords" id="keywords">
<br>
<label for="num">数字：</label>
<input type="range" name="num" id="num" min="1" max="10" step="2">
<br>
<label for="birthday">出生日期：</label>
<input type="datetime" name="birthday" id="birthday">
<br>
<label for="color">颜色：</label>
<input type="color" name="color" id="color">
<br>
<label for="name">用户名:</label>
<input type="text" name="usrname" id="name" placeholder="请输入用户名" required="" autocomplete="on" autofocus="">
<br>
<label for="age">年龄：</label>
<input type="text" name="age id="age pattern="\d{1,2}">
<br>
<label for="city">城市：</label>
<input type="text" name+"city" id="city" list="citylist" autocomplete="off">
<datalist id="citylist">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
</datalist>
<hr>
<input type="submit" form="myform">
</form>
1234567891011121314151617181920212223242526272829303132333435363738394041```
效果
[外链图片转存中…(img-ul7yIjAz-1593240920374)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<audio controls="">
<source src="../../audio/earth.ogg">
<source src="../../audio/water.mp3">
您的浏览器不支持audio标签，请更换浏览器
</audio>
<video src="../../video/volcano.mp4" controls="" width="400px" poster="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718效果
[外链图片转存中…(img-vpMsaoe7-1593240920375)]
原文链接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html
作者：WanXuang
出处：从CSDN
网页实际是一个文件， 它存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的，网页经由网址（ URL ）来识别与存取。下面介绍怎样设置网页叠加，希望可以为您带来帮助。
XP系统操作：
(1)右击左下角"开始"菜单"
(2)选择"内容"
(3)工具列
(4)类似工具列按钮分组
Win7系统设定：
(1)右击左下角"微软Windows"图标
(2)选择"内容"
(3)点击"工作列"
(4)选择“工作列按钮”
(5)选择 "一律合并,隐藏标签"
(6)确定
2
打开一个网页后，在左上角选择【工具】--【选项】。
在打开的选项设置界面，单击【修改主页】。
在弹出来的主页设置对话框中输入需要设置为主页的网址。单击确定。确定后就可以看到已经将主页设置成功， 在单击【锁定主页】，按照如图的方法设置即可。
最后关闭退出，在重新打开网页就是你刚设置的主页了。
3
打开360安全浏览器，点击右下角“缩放页面比例”
显示控制器页
调节到150%，没有勾选“缩放对所有页面生效”时就只对本网页进行放大150%
勾选“缩放对所有页面生效”就会对所有网页进行缩放大小
结果其它网页也会跟本网页一样放大150%
4
第一步打开IE浏览器
点击浏览器右上角的工具按钮
然后点击internet选项
然后点击选项卡
打开的选项卡浏览设置页面可以勾选各种显示的方式
也可以点击打开选项卡时显示的是空白页，新页或是主页，设置后点击确定。
点击左下角了解更多课程资讯
*请认真填写需求信息，我们会在24小时内与您取得联系。
