html网页制作注意事项,一些制作网页过程中的注意事项

本周主要在进行大众点评网页的编辑，出现了很多问题，在此一一记录下来，望以后警醒.

当html文档写的特别乱的时候：

长痛不如短痛，如果发现自己写的乱的一塌糊涂的话，全删了重写吧

关于注释

注释十分的重要，以前在写c++的小程序的时候并没有太过在意，但是一旦代码数量上升到几百行，必须要写注释，有助于整理思路

注释的写法：构思完网页的整体之后要先把每个标签写出来，然后在代码上面的地方写上这一段的内容概括

快捷键：ctrl+？

可以用手写出整体的分析，放在纸上明显易懂不易懵

关于命名

因为编辑的过程中离不开对于css的调整，所以必须要做到命名能让自己迅速定位代码位置

面对一个长的html文档，命名和注释同样重要，css文件的命名请命名为style.css

css文档中各个类的命名我没有学专业的命名规范，自己总结出了一套

命名当中包含英文单词(或缩写)、-、还有数字

随着分块而命名，块是一级一级的向下分的，所以用结构的英文名称打头，然后用 - 分等级，用英文字母和数字来显示文档的顺序表号，这样可以方便自己快速找到类所在位置以及所作用的范围

当文件过长的时候，可以采用多个css文件，并且在每个css文件里进行注释

在css文件里面的类的排序也要有规律，我的做法：所有的下一级紧跟上一级

关于引入bootstrap

两种方法：1.网上引入2.本地下载后引入 实验需要速度故选2

在本地文档引入，一开始看教程我很懵，以至于引用文档的时候引得乱七八糟，现在了解了，bootstrap就是css和js的文件，所以在网上下载之后直接解压放进自己的文档中去，按照正常的引用文件流程走就行了，用标签引用

bootstrap有很多的版本，目前我见到的是三代和四代，不同版本之间的功能不能互相共用

下载的过程中有两个版本，一个是已编译的一个是源码，前者可以直接引用但不能修改，后者可以直接引用也可以修改，前者使用更方便，故选择前者

在网上的bootstrap教程里的一些功能引用文件的时候有引用别的库的，bootstrap里面只有三个文件

其他的暂时不考虑故没必要引用

关于标签

标签里面的话，不是人能读懂的，是浏览器能读懂的(我理解到此)

关于栅格系统

栅格系统是bootstrap里面的一个功能，便于分块来使用，可以节省很多的代码与分段分块的精力

栅格系统的引入需要用到 .container或.contaier-fluid类，前者不占满，后者占满。该类的引入代表着整个标签已经成为了一个可以和谐划分的块

划分的时候，先用 .row 再用 .col 只能把列格式化的分块

使用过程中，一列分为十二份，可以用 .col-xs-n(n是1-12的任意一个整数)划分，原理是：一行分为十二块，将这十二块组合来划分一行

栅格系统，还有bootstrap里面的其他类型，都可以理解为一个基础，可以在这个基础上进行任意的改造，比如改变长宽等等

划分列默认无高度只有宽度

列可以进行偏移，

.col-md-offset-n(n是偏移量)注：只向右偏

关于导航栏的罗列问题

常用的方法来列出标签可以用

• 标签来写，按列来处理但是会出现难以操作的情况，比如文字的大小影响排列结构

margin和padding都没有问题，检查显示是content的问题，通过调整文字的百分比大小可以解决

罗列问题的思考

行和列地位相同，注意排版的时候灵活

写之前想bootstrap和html里有没有相应的功能，我写的时候没有想但是后来发现面包屑导航还有表格的用法可以完成此功能，即.breadcrumb和

菜鸟教程更便于操作直观理解，官网更全面与易懂

检查错误的顺序：是否保存-是否禁用缓存-是否命名正确-浏览器检查

关于内联元素与块元素

修改a标签的时候遇见了以下问题

查阅资料我发现，这是内联元素与块元素的关系

内联元素和块级元素都是html中的范畴，块元素和内联元素的主要差异是块元素是从新的一行开始。而内联元素一般显示在一行上。但是可以通过css的display属性将内联元素改变为块元素，(display：block) 也可以将块元素改变为内联元素(display：inline)。

内联元素的特点

1.和其他的元素显示在一行上；

2.padding和margin、高度，宽度都是不可改变的，他的宽度是根据他的显示文本和图像的宽度

3.可以通过css来将它变成为块元素之后然后就可以用css其他样式应用了。

块元素的特点：

1.总是在新的一行上显示；

2.高度、行高、宽度、内边距、外边距等都是可控制的；

3.他的高度默认为0，是根据元素内的内容而决定的，宽度是父元素的宽度，但是可以通过css控制它，显示的指定他的宽度和高度，可以利用浮动和定位来将他与其他的块元素也显示在一行上；

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset ,form , h1 , h2 , h3 , h4 , h5 , h6 , hr, isindex , menu , noframes , noscript ,ol , p , pre , table ,ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big ,br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

其他见到的小问题

修改css无效的话可以多次刷新

当多次刷新css无效且已经禁用缓存时可以选择重启浏览器或换别的浏览器，笔者本周出现了两次状况第一次是edge第二次是谷歌浏览器，换成火狐浏览器之后均得到解决

美化代码的插件很好用，便于整理思路，自己写的时候美化完再分行分块

Text-align 文本居中

英文写着很舒服，但是感觉引用图片的时候，汉语拼音的方法也不错

我是标题1 h1. 我是副标题1 h1

这种方法加入副标题，改小字号，很简单但是嵌套的思路很实用

class=“text-center”bootstrap文本居中，很方便

Font-size文本大小