一些制做网页过程当中的注意事项

本周主要在进行大众点评网页的编辑，出现了不少问题，在此一一记录下来，望之后警醒.
当html文档写的特别乱的时候：
长痛不如短痛，若是发现本身写的乱的一塌糊涂的话，全删了重写吧

关于注释

1. 注释十分的重要，之前在写c++的小程序的时候并无太过在乎，可是一旦代码数量上升到几百行，必需要写注释，有助于整理思路
2. 注释的写法：构思完网页的总体以后要先把每一个标签写出来，而后在代码上面的地方写上这一段的内容归纳
3. 快捷键：ctrl+？
4. 能够用手写出总体的分析，放在纸上明显易懂不易懵

关于命名

1. 由于编辑的过程当中离不开对于css的调整，因此必需要作到命名能让本身迅速定位代码位置
2. 面对一个长的html文档，命名和注释一样重要，css文件的命名请命名为style.css
3. css文档中各个类的命名我没有学专业的命名规范，本身总结出了一套
4. 命名当中包含英文单词（或缩写）、-、还有数字
5. 随着分块而命名，块是一级一级的向下分的，因此用结构的英文名称打头，而后用 - 分等级，用英文字母和数字来显示文档的顺序表号，这样能够方便本身快速找到类所在位置以及所做用的范围
6. 当文件过长的时候，能够采用多个css文件，而且在每一个css文件里进行注释
7. 在css文件里面的类的排序也要有规律，个人作法：全部的下一级紧跟上一级

关于引入bootstrap

1. 两种方法：1.网上引入2.本地下载后引入 实验须要速度故选2
2. 在本地文档引入，一开始看教程我很懵，以致于引用文档的时候引得乱七八糟，如今了解了，bootstrap就是css和js的文件，因此在网上下载以后直接解压放进本身的文档中去，按照正常的引用文件流程走就好了，用<link>标签引用
3. bootstrap有不少的版本，目前我见到的是三代和四代，不一样版本之间的功能不能互相共用
4. 下载的过程当中有两个版本，一个是已编译的一个是源码，前者能够直接引用但不能修改，后者能够直接引用也能够修改，前者使用更方便，故选择前者
5. 在网上的bootstrap教程里的一些功能引用文件的时候有引用别的库的，bootstrap里面只有三个文件
6. 
7. 其余的暂时不考虑故不必引用

关于<meta>标签

1. <meta>标签里面的话，不是人能读懂的，是浏览器能读懂的（我理解到此）

关于栅格系统

1. 栅格系统是bootstrap里面的一个功能，便于分块来使用，能够节省不少的代码与分段分块的精力
2. 栅格系统的引入须要用到 .container或.contaier-fluid类，前者不占满，后者占满。该类的引入表明着整个标签已经成为了一个能够和谐划分的块
3. 划分的时候，先用 .row 再用 .col 只能把列格式化的分块
4. 使用过程当中，一列分为十二份，能够用 .col-xs-n（n是1-12的任意一个整数）划分，原理是：一行分为十二块，将这十二块组合来划分一行
5. 栅格系统，还有bootstrap里面的其余类型，均可以理解为一个基础，能够在这个基础上进行任意的改造，好比改变长宽等等
6. 划分列默认无高度只有宽度
7. 列能够进行偏移，

.col-md-offset-n（n是偏移量）注：只向右偏

关于导航栏的罗列问题

1. 经常使用的方法来列出标签能够用<ul>标签来写，按列来处理可是会出现难以操做的状况，好比文字的大小影响排列结构
2. 
3. margin和padding都没有问题，检查显示是content的问题，经过调整文字的百分比大小能够解决
4. 还有一种是按照行来处理，用<p>标签+标签，这样的话就很便于操做了，行和列各有优点，因此能够酌情使用

罗列问题的思考

1. 行和列地位相同，注意排版的时候灵活
2. 排版问题文字处理的位置连接https://www.runoob.com/bootstrap/bootstrap-typography.html
3. 写以前想bootstrap和html里有没有相应的功能，我写的时候没有想可是后来发现面包屑导航还有表格的用法能够完成此功能，即.breadcrumb和<table>
4. 菜鸟教程更便于操做直观理解，官网更全面与易懂
5. 检查错误的顺序：是否保存-是否禁用缓存-是否命名正确-浏览器检查

关于内联元素与块元素

1. 修改a标签的时候碰见了如下问题
2. 
3. 查阅资料我发现，这是内联元素与块元素的关系

内联元素和块级元素都是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

其余见到的小问题

1. 修改css无效的话能够屡次刷新
2. 当屡次刷新css无效且已经禁用缓存时能够选择重启浏览器或换别的浏览器，笔者本周出现了两次情况第一次是edge第二次是谷歌浏览器，换成火狐浏览器以后均获得解决
3. 美化代码的插件很好用，便于整理思路，本身写的时候美化完再分行分块
4. Text-align 文本居中
5. 英文写着很舒服，可是感受引用图片的时候，汉语拼音的方法也不错
6. <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 这种方法加入副标题，改小字号，很简单可是嵌套的思路很实用
7. class=“text-center”bootstrap文本居中，很方便
8. Font-size文本大小