一、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
写逻辑代码时，一定要先理清业务逻辑和思路再动手，在和后端对 接口时要 先看清 数据结构在写，而且能简写就简写，能省一行代码就省一行代码，哈哈
总结：自己工作了几个月来，做了一些总结，对于一个刚入坑的新人来说，把自己的代码写规范还是很重要的，让自己的代码更加清晰，可以省去以后维护的时间，因为你以后再看自己的代码你可能看不懂的。对于团队合作来说重要，让别人看懂你的代码也是一件不容易的事。
申明：这篇博客借鉴了很多他人的博客，这里结合自己的工作做个总结，只希望能帮助自己和其他人，如有侵权，恕请冒犯。如果有其他不对的地方请多多指教
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
