一、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
写逻辑代码时,一定要先理清业务逻辑和思路再动手,在和后端对 接口时要 先看清 数据结构在写,而且能简写就简写,能省一行代码就省一行代码,哈哈
总结:自己工作了几个月来,做了一些总结,对于一个刚入坑的新人来说,把自己的代码写规范还是很重要的,让自己的代码更加清晰,可以省去以后维护的时间,因为你以后再看自己的代码你可能看不懂的。对于团队合作来说重要,让别人看懂你的代码也是一件不容易的事。