前端规范_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

前端规范_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:48 AM

参考资料：

https://github.com/ecomfe/spec（百度）

通过分析github代码库总结出来的工程师代码书写习惯

NEC更好的解决方案（网易）

说明：

红字为重要，黄字为不确定或不会，参1～n为参考的资料链接

　　本来整理在印象笔记，无序列表在博客园编辑器显示不正常，望谅解

　　转载请注明出处，建议请留言谢谢。

系列文章

前端规范1-HTML规范

　　前端规范2-CSS规范

　　HTML嵌套规则

敬请期待

　　HTML闭合标签

　　HTML与CSS属性书写顺序

　　更好的利用title与alt属性

　　如何正确的使用HTML标题

总的原则

实用高于完美

尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

重要内容的代码尽量靠前，利于SEO

dome结构

dome
1. index.html(静态页面)
2. styles
  1. reset.css
  2. style
3. scripts
  1. jquery-1.8.2.min.js
  2. script.js
4. images
  1. bg

DOME（百度云下载：http://pan.baidu.com/s/1hqAaST2）

index.html

 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     <meta charset="UTF-8"/> 5     <title>标题</title> 6     <meta name="keywords" content=""/> 7     <meta name="description" content=""/> 8  9     <link rel="stylesheet" href="styles/reset.css"/>10     <link rel="shortcut icon" href="images/bg/favicon.ico"/>11 12     <link rel="stylesheet" href="style/style.css">13     <script src="./scripts/jquery-1.8.2.min.js"></script>14     <script src="./scripts/script.js"></script>15 </head>16 <body>17     18 </body>19 </html>

reset.css

 1 /* reset */ 2 html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} 3 header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} 4 table{border-collapse:collapse;border-spacing:0;} 5 caption,th{text-align:left;font-weight:normal;} 6 html,body,fieldset,img,iframe,abbr{border:0;} 7 i,cite,em,var,address,dfn{font-style:normal;} 8 [hidefocus],summary{outline:0;} 9 li{list-style:none;}10 h1,h2,h3,h4,h5,h6,small{font-size:100%;}11 sup,sub{font-size:83%;}12 pre,code,kbd,samp{font-family:inherit;}13 q:before,q:after{content:none;}14 textarea{overflow:auto;resize:none;}15 label,summary{cursor:default;}16 a,button{cursor:pointer;}17 h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}18 del,ins,u,s,a,a:hover{text-decoration:none;}19 body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}20 body{background:#fff;}21 /*a,a:hover{color:#333;}*/22 /* /reset */23 24 /* 通用样式 */25 26 /* /通用样式 */

script.js

1 window.onload=function(){2 3 }4 $(function(){5     6 })

文件夹命名

方案一（适合一般项目）：

项目名

index.html(静态页面)

styles

reset.css

scripts

jquery.js

images

bg1.png

img1.jpg

方案二（适合较小项目）：

项目名

index.html(静态页面)

img

reset.css

music.mp3

jquery.js

images

bg1.png

img1.jpg

备：如果由多个单词组成，使用-连接符连接

上面bg即为背景图，包括各种logo，按钮背景，CSS Sprite等等

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。