前端開發注意事項個人參考
一、html頁面結構
1、標籤儘量使用語義化標籤，使人一目瞭然，下面是一些常見的語義化標籤
<header></header>：通常包括網站標誌、主導航、全站連結以及搜尋框。
<nav></nav>：標記導航，一般用於主要的導航欄
<main></main>：頁面主要內容
<article></article>：包含像報紙一樣的內容，表示文件、頁面、應用或一個獨立的容器。
<section></section>：具有相似主題的一組內容，比如網站的主頁可以分成介紹、新聞條目、聯絡資訊等條塊。
<aside></aside>：指定附註欄，包括引述、側欄、指向文章的一組連結、廣告、友情連結、相關產品列表等
<footer></footer>：整個頁面的底部。
整個頁面的佈局可以像下面一樣
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
把每一個部分細分一下
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<aside id="sidebar">
<section>
<h4>Sidebar</h4>
<ul>
<li><a href="#">nav 1</li>
</ul>
</section>
</aside>
二、class命名注意事項
寫css樣式時肯定要先給元素標籤命名，這裡命名就需要注意一下，我的個人習慣是命名最好不要出現大寫字母，用中劃線分割，都使用英文來命名，不要使用 拼音和英文數字，儘量不要使用縮寫，除非幾個很常見的如 btn ,num等，命名時子元素和父元素要連線在一起，不要重新起名字 如下面一樣。id、class 類名要放在標籤的最前面，函式事件要放在最後面，還有div標籤裡有字型時不要什麼都不寫，要放在一個span或者其他標籤裡。
<section class= "header">
<div class="header-logo">
<p class="logo-title"></p>
<img class="logo-title" src= "">
</div>
<div class="header-search">
<input type="text">
</div>
</section>
常用的class命名規則
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
左右中：left right center
登入條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
選單：menu
子選單：submenu
搜尋：search
友情連結：friendlink
頁尾：footer
版權：copyright
內容：content
三、css書寫順序
寫css樣式一般從上往下寫這個大家都知道，但是也不要隨便亂寫，一般是有一定順序的。
css書寫順序一般是：場合—>尺寸—>裝飾—>顏色—>其他
場合（position，top，right，z-index，display，float等）
尺寸（width，height，padding，margin等）
裝飾（font，line-height，letter-spacing，color ，text-align等）
顏色（background，border等）
其他（animation，transition等）
一般像margin，padding這種不要簡寫，有同學已經寫習慣了，但注意一定要改，簡寫是萬物之源，以後對程式碼維護你就知道你的簡寫帶來的麻煩了。
四：js
寫邏輯程式碼時，一定要先理清業務邏輯和思路再動手，在和後端對 介面時要 先看清 資料結構在寫，而且能簡寫就簡寫，能省一行程式碼就省一行程式碼，哈哈
總結：自己工作了幾個月來，做了一些總結，對於一個剛入坑的新人來說，把自己的程式碼寫規範還是很重要的，讓自己的程式碼更加清晰，可以省去以後維護的時間，因為你以後再看自己的程式碼你可能看不懂的。對於團隊合作來說重要，讓別人看懂你的程式碼也是一件不容易的事。