编写HTML页面的思路和心得

编写HTML页面的思路和心得

布局

制作HTML页面，首先需要确定布局，确定每个内容区域的位置。最基本的网页布局可分为header、menu、content、nav、footer五个区域，不同区域的位置会根据页面需求不同而有所差异。

W3School使用的就是类似的布局结构。

确定了布局之后，下一步是确定各区域的所在位置和尺寸，如导航（nav）在页面的上方还是右侧，内容（content）是在页面居中还是左对齐，它们各自占了多少空间等，然后使用div标签把确定的区域划分出来，最好添加边框或者背景颜色，让页面的基本布局看的更加清楚。基本的网页结构制作出来之后，就可以对页面即进行详细内容的填充了。

代码

制作HTML页面时，对于不同的内容，灵活地使用各种方式有利于提高制作的效率。

此界面可使用<table>标签制作。

此界面使用<figure>标签，<figure>标签拥有子标签<figcaption>可以很方便的在图片下方添加标题。

此界面可以用<table>来制作，但是使用flex布局可以让代码更短，制作更方便。

此界面的导航栏部分使用了<nav>标签，有利于导航栏的排版和修改；使用flex布局，给属性justify-content设置为space-between，让图片和导航栏分别在屏幕的左右边，比其他形式实现更加高效。

色彩

一个页面的整体观感很重要，制作页面时需要合理的搭配图片和颜色，让页面的整体看起来更协调，看起来更加赏心悦目。

致美创意页面中每一个板块的链接都是一张图片，图片的颜色也以整个网页占比最多的黑红色为主，中间加上特意的部分白色空白分割了不同的板块，使得页面看起来十分协调。


苹果官网中每一个产品页面的背景颜色都与页面剧中的产品本身的颜色有着对应，简洁明了地展现产品的外观，页面的不同区域使用了同样的布局，即使不同区域的背景颜色不同，整体视觉观感都十分的协调。

制作页面需要考虑网站本身特点和遵循一定的艺术规律，合理的搭配颜色，使页面看起来简洁明了，避免使用单一的颜色和一片区域内使用特别多的色彩。

其他

1 . CSS的display属性设置为inline-block可以让对象设置长宽的同时可以与其他元素位于同一行（结合行内元素和块级元素的优点）。
2 . 使用CSS的flex布局可以让元素很方便的垂直居中。
3 . 整张图片不适合作为网页背景。
4 . CSS的line-height属性值和文字所在div的height属性值一致，可以使文字垂直居中。
5 . 给<hr>设置CSS属性border，可以改变分割线的粗细和样式。
6 . CSS的overflow属性设置为hidden，可以让超出范围的元素自动隐藏。