一些製做網頁過程當中的注意事項

本週主要在進行大衆點評網頁的編輯，出現了不少問題，在此一一記錄下來，望之後警醒.
當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文本大小