html网页制作之细谈HTML前端项目开发过程中的细节及心得_避免入坑
Posted 小牛儿学JAVA
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html网页制作之细谈HTML前端项目开发过程中的细节及心得_避免入坑相关的知识，希望对你有一定的参考价值。
细谈两类前端项目与编写过程中的技巧、心得
快乐的五一小长假,由于回家路途遥远，只好自己在校编前端网页。两天多的时间编写了两种不同风格的网页，人都敲傻了，还好只涉及到了html和CSS，并未加入JS模块。不然花的时间肯定翻倍了。下给大家看看成果(一个是致美创意网站和飘城旅行社）：
作者整理的html全面知识点
由于图片篇幅过长只是截取了部分，展示两个模块，一个首页一个关于致美
致美创意
关于致美
飘城旅行社
设计网站中应当注意的细节及技巧
设计网站需要严谨的思考和周全计划，每一步都要规划到位，甚至不要放过任何一处的细节。最重要的事情是了解您的用户，你所设计网站针对的用户群体，有可能的融入他们，真心感受使网站更具有完整性。
如果您认为一般的用户会完完整整地阅读您的网页，那么您就错了。无论您在网页中发布了多么有用的信息，一个访问者在决定是否继续阅读之前仅仅会花几秒钟的时间进行浏览。如果您希望用户阅读您的文字，请确保在页面段落的第一句就说明您的观点。另外，您还需要在整个页面中使用简短的段落以及有趣的标题。
使所有的句子尽可能地短。使所有的段落尽可能地短。使所有的章节尽可能地短。使您的页面尽可能地短。请在段落和章节之间使用很多的留白。充斥着冗长文字的页面会赶走您的用户。也不要在单一的页面上放置太多的内容。如果确实有必要传递大量的信息，请尽量把内容分为小块，然后放入不同的页面中。不要指望每个访问者都能把一张数千字的页面一路滚动到底。
尽量创建通用于网站中所有页面的导航结构。把文本段落中的超链接使用量降至最低。请不要使用文本段落内的超链接随意地把访问者带到别的页面。因此这样做会破坏导航结构一致性的感觉。如果您必须使用超级链接，请把它们添加到段落的底部，或站点的导航菜单。
最常见的错误是用于网站开发者的开发环境造成的，例如使用一台本地的机器开发站点，或者使用一条高速的因特网连接。开发人员有时不会意识到下载他们的页面要花很长的时间。因特网可用性方面的研究告诉我们，如果网页的下载时间超过7秒，大多数的访问者会选择离开。在您发布任何大量的内容前，请确保这些页面在低速的调制解调器连接上进行过测试。如果您的页面需要花大量的时间下载，您或许应当考虑删除某些图片或多媒体内容。
得到来自用户的反馈是件好事情。您的访问者就是你的“客户”。他们经常会给您一些有价值的点子，或者无偿地向您提供改进的建议。如果您提供了某种方便的联系途径，您将得到来自很多技能和知识都各不相同的人们大量有益的反馈
编写过程中的技巧
1.对于网页整体布局不熟悉的同学，可以用一张纸把css框架盒子先画出，并现在编译软件上把盒子搭建出来，然后在往里面添加元素，最好是加上盒子的边框方便观察。但应当注意的一点是边框也要加入盒子高度和宽度的计算当中。
2.编写过程中难免会出现一些小BUG，例如我在编写过程中的一个盒子的边框去不掉，border里面的值设置为0px之后还是不成功，然后我也没得法子了，只好把所有边框去掉，把类容抹掉了再来观察。其实遇到BUG是好事，这样才能显现出我们还有提升的空间，当然遇到BUG也不要气馁，出问题了我们就要去解决问题。通常遇到问题是先确认哪一块的出现的问题然后再确定某一个位置，通常HTML的bug目前看来都是自己不细心造成的，某个标签缺了一部分或者是单词没写对。这些都是粗心造成的，编写过程中一定要注意这些细节。出现问题最多的应该是在style里面定义的id或类标识符，特别容易写错单词，导致body里面的类容显示出错。
3.通常在命名的方式是也值得注意，关于css命名法，和其他的程序命名差不多，主要有三种：驼峰，帕斯卡，匈牙利法
驼峰 命名法：除第一个单词首字母小写外，其余所有单词首字母都大写#headerBlock
帕斯卡命名法：与驼峰相似，区别都是所有单词首字母都大写#HeaderBlock
匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀#head_block。
当然根据自己习惯选择其一就可，但是最好不要采用一个网站内有多种命名方式，这样的话估计后端开发者会骂人。命名有问题，会给后期开发带来很大的困扰，所以细节问题大家还是应当提前注意，以防形成习惯。
4.通常css采用的方式是内链的方式，这样提高了代码的可读性和美观性，将html和css分开，方便规划设计。一般是现在body里把盒子布局规划好，再去css文本里增添css样式，大概是这样一个流程。
编写过程中的思路
思路是必要的，每当客户提供给我们的UI页面时，我们要实现为网页式。看见页面的每一个部件，我们都要反映出这个部件应该选择什么样的布局和标签来实现。大致实现思路是要非常清晰的，一定不能存在模棱两可的状态。
在没有任何思路的情况下，可以参考大量同类型的网站，了解一下大致结构，我们将要做的网站是一个旅行社的企业网站，经过大量参考，首页上，我们选择了最基本的4个模块。
分别是nav 导航
header 头部
section 首页主体
footer 尾部
LOGO 采用的是h1标签 一般为了让搜索引擎更好的抓取关键字，我们建议一个页面只有一个h1 而且是最重要的关键词放在里面，在首页上，最重要的关键词就是旅行社的名称，当然如果其他页面，比如新闻网站的单个新闻，最重要的应该是新闻标题 网站的名称就其次了。
编写过程中需注意的几个知识点
（自己容易弄混淆的几个点）
display 属性是用于控制布局的最重要的 CSS 属性，每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
块级元素的例子
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
行内元素（inline element）
内联元素不从新行开始，仅占用所需的宽度。
行内元素的一些例子：
<span>
<a>
<img>
display: none; 通常与 javascript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。
更改了li为行内元素，在一行显示所有列表
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>把链接列表显示为水平导航栏：</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>
伪类用于定义元素的特殊状态。例如，它可以用于：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。
五个不同位置值
static
relative
fixed
absolute
sticky
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。
介绍最常用的三种定位方式：
position: relative;
position: relative; 的元素相对于其正常位置进行定位。不脱离文档流，上下左右距离相对离本身最近的模块，进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
position: fixed;
position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
position: absolute;
position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。绝对定位的盒子会脱离文档流，如果当前不存在父框架，则文档主题是body，其父框架的定位为relative才会生效。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
position: sticky;
position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
用绝对定位将其推出可视区 不过虽然可视性不存在，但仍占据物理空间，与隐藏文字的宗旨相背,绝对坐标定位margin这个属性，margin在不同浏览器中总是带来不可预料的bug.
重叠元素
在对元素进行定位时，它们可以与其他元素重叠。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
元素可以设置正或负的堆叠顺序：
css的隐藏
1.display:none
这个普遍的说法是 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略，不为隐藏的对象保留物理占位空间
GG也搜CSS文件？不过如果使用这个方法h1应该如何设计也变成了难题
2.visibility:hidden
和display:none相对应 ，为隐藏的对象保留物理占位空间
3.overfolw:hidden
这种用法是网站最多的用法，但是我认为对于隐藏h1的站点名称文字不太合适
5.text-indent：-9999px;
把h1作为以个块来显示(display:block)
指定长宽（和图片的大小一样），然后指定h1的北京图片，也就是将我们需要的图片作为h1这个标签的背景 而h1标签中插入的，仍然是作为字符形式出现的博客标题，然后用text-indent：-9999px将文字甩到屏幕看不到的地方。
总结：
text-indent就是首行缩进，大家都在中文段落首行空两个格子的时候用过他，这里通过负值进行缩进
使文字超出可视区域 而这时h1下的北京就显示出来了，
h1中包含的<a>标签又不影响使用，对于隐藏文字重点名称应该是最佳方案 但对于多段文字的隐藏这个方法就不合适了
这里还有个问题就是点击<h1><a>链接时
会产生一个虚线框
对于IE还好，没有什么问题，虚线框只是在北影图片大小但是 火狐就有些麻烦，它把缩进的文字范围也包含进来了，不是很美观
于是需要屏掉点击时产生的虚线框 IE 和FF屏虚线框方法不一样
IE采用的遍历方法（HTC css表达式）有些耗系统资源
正好我们只需要隐藏FF下的虚线框就可以了
IE就不用管了
下面是火狐去掉链接虚线框的方法
a{
outline:none;/去掉Firefox点击时产生的虚线框/
}
谈谈心得
整体看来代码量是不少，至少两个网页加起来少折上3000行。过程虽难受了一点，不过结果还是比较满意，除了某些地方的小瑕疵还需要改进之外。这两票网页模板来自老师的推荐，敲完之后发现自己以前写的网页叫网页吗，整体看来丑的不忍直视。一次次的改变自己敲代码的质量，也是每一次的进步。只有自己满怀期待，结果才会漫天欢喜。作者会一直坚持下去，把自己所学到都写出来，供大家参考。一起加油！有源码！
以上是关于html网页制作之细谈HTML前端项目开发过程中的细节及心得_避免入坑的主要内容，如果未能解决你的问题，请参考以下文章