HTML命名规则

合集下载

html标记的书写规则

html标记的书写规则

html标记的书写规则HTML(Hypertext Markup Language)是用于创建网页结构和内容的标记语言。

以下是HTML标记的书写规则:1. 标签使用小写字母:HTML标签应使用小写字母进行书写。

HTML是不区分大小写的,但为了代码的统一性和可读性,建议使用小写字母。

2. 使用封闭标签:大部分HTML标记都是成对出现的,即开始标签和结束标签。

开始标签用于表示元素的开头,而结束标签用于表示元素的结尾。

开始标签和结束标签之间包含的内容是元素的内容。

3. 属性使用引号:HTML标记可以包含属性,属性用于提供元素的附加信息。

属性的值应该使用引号包裹,常见的引号有单引号(')和双引号(")。

使用引号可以确保属性值正确地被解析,并提高代码的可读性。

4. 标签嵌套正确:HTML标记可以相互嵌套,但必须确保正确的嵌套顺序和层次结构。

嵌套深度应适度,过多的嵌套会使代码难以维护和理解。

5. 使用合适的标记:根据元素的语义和功能,选择合适的HTML标记。

HTML 提供了丰富的标记元素,如标题、段落、列表、链接等,使用适当的标记可以增强页面的可读性和可访问性。

6. 注释代码:在HTML代码中添加注释可以增加代码的可读性和复用性。

注释可以解释代码的用途、目的或特殊注意事项。

注释代码在浏览器中不会被解析和显示。

7. 避免使用过时的标记:HTML标记在不同的HTML版本中会有差异,一些标记已经过时或不推荐使用。

为了保持与最新的HTML标准兼容,尽量避免使用过时的标记。

综上所述,正确书写HTML标记是开发网页的基础。

遵循这些书写规则将帮助我们编写干净、可读和高效的HTML代码,提升网页质量和用户体验。

HTML编码规范

HTML编码规范

HTML编码规范1. 前⾔HTML作为描述⽹页结构的超⽂本标记语⾔,在任何项⽬⼀直有着⼴泛的应⽤。

本⽂档的⽬标是使HTML代码风格保持⼀致,容易被理解和被维护。

2 .代码风格⽰例:<ul><li>first</li><li>second</li></ul>解释:过长的代码不容易阅读与维护。

但是考虑到 HTML 的特殊性,不做硬性要求.⽰例:<!-- good --><div class="sidebar"></div><!-- bad --><div class="left"></div>解释:同⼀个页⾯中,不同的元素包含相同的 id,不符合 id 的属性含义。

并且使⽤ document.getElementById 时可能导致难以追查的问题。

⽰例:<!-- good --><div id="nav"></div><!-- bad --><div id="navigation"></div><!-- good --><p class="comment"></p><!-- bad --><p class="com"></p><!-- good --><span class="author"></span><!-- bad --><span class="red"></span>解释:不允许 class 只⽤于让 JavaScript 选择某些元素,class 应该具有明确的语义和样式。

phpcms 生产html名字规则

phpcms 生产html名字规则

一、概述phpcms是一款常用的开源内容管理系统,它具有灵活的扩展性和丰富的功能,广泛应用于各种全球信息站的建设和维护中。

在phpcms 中,生成静态html页面是常见的操作,而html页面的文件名规则对全球信息站的SEO和用户体验都有重要的影响。

合理的html文件名规则是phpcms全球信息站建设中不可忽视的关键因素之一。

二、html文件名的作用1. 提高全球信息站的SEO效果2. 方便用户记忆和访问3. 优化全球信息站的性能和速度三、phpcms生成html文件名的规则1. 根据页面的属性和内容2. 根据全球信息站的目录结构和后台配置3. 在命名上遵循一定的规范和约定四、常见的html文件名命名规范1. 使用页面的关键词2. 采用短小精悍的方式3. 避免使用特殊字符和符号4. 采用有意义的英文单词或短语5. 保持统一性和规范性五、通过phpcms设置html文件名规则1. 登入phpcms后台管理系统2. 进入“系统设置”-“URL规则”菜单3. 在“生成HTML文件名规则”中进行相应的设置4. 保存设置并更新缓存六、html文件名规则的修改和调整1. 全球信息站运营过程中可能需要调整html文件名规则2. 涉及到文件命名规则的修改需要谨慎操作3. 修改后需要及时更新全球信息站地图和索引文件七、总结html文件名的规则对于phpcms全球信息站的建设和优化至关重要,合理的文件名规则可以提高全球信息站的SEO效果,增强用户体验,优化全球信息站性能和速度。

在实际操作中,需要根据全球信息站的特点和运营需求来设计和调整html文件名规则,以达到更好的效果和效益。

phpcms生成html文件的名字规则是非常重要的,可以直接影响全球信息站的SEO效果以及用户体验。

在建设和维护phpcms全球信息站时,需要对html文件的名字规则进行合理的设置和调整,以确保全球信息站能够更好地为用户提供优质的内容和服务。

html命名规范

html命名规范

html命名规范HTML命名规范是为了保持代码的可读性和可维护性而制定的一些规则。

下面是一套常用的HTML命名规范,包括标签、类名、ID等的命名方式。

标签的命名规范:1. 标签名应该采用小写字母。

2. 标签名应该能准确地描述元素的内容和用途,尽量避免使用无意义的标签名。

例如使用`<div>`来表示一个段落就不够准确。

类名的命名规范:1. 类名应该由小写字母、数字和破折号(-)组成。

2. 类名应该能准确地描述元素的样式和用途。

例如,如果一个类名表示一个按钮的样式,可以使用类似`btn`的命名。

3. 类名应该简洁明了,尽量避免过长的类名。

ID的命名规范:1. ID应该由小写字母、数字和破折号(-)组成。

2. ID应该唯一,每个元素只能拥有一个ID。

3. ID应该用于唯一标识一个元素,而不是用于样式。

注释的命名规范:1. 注释应该清晰地描述代码的作用和用途。

2. 注释应该放置在代码的上方,可以在注释前加上一行分割线,增加可读性。

文件和文件夹的命名规范:1. 文件名应该采用小写字母,单词之间可以使用破折号(-)或下划线(_)分隔。

2. 文件夹名应该采用小写字母,单词之间可以使用破折号(-)或下划线(_)分隔。

属性的命名规范:1. 属性名应该采用小写字母。

2. 属性名应该能准确地描述属性的用途,尽量避免使用无意义的属性名。

总结:HTML命名规范是为了提高代码的可读性和可维护性而制定的一些规则。

通过合理地命名标签、类名、ID等,我们可以更好地理解和维护代码。

同时,命名规范也有助于团队间的协作,提高代码的一致性和可扩展性。

HTML命名规范!

HTML命名规范!

HTML命名规范!HTML基础设施(1)⽂件应以<!DOCTYPE.....>⾸⾏顶格开始,这句话告诉浏览器这是⼀个什么⽂件,我们推荐使⽤<!DOCTYPE html>。

(2)必须在head元素内部的meta标签内声明⽂档的字符编码charset, 如:<meta charset="UTF-8">,这句代码告诉浏览器应该此HTML⽂件使⽤的字符集是什么,如果不加此⾏代码,那么在浏览器中可能显⽰为乱码。

(3)页⾯的title是极为重要的不可缺少的⼀项。

2.HTML代码结构和视觉顺序基本保持⼀致(1).按照从上之下,从左到右的视觉顺序书写HTML结构。

(2).有时候为了便于搜索引擎抓取,我们也会将重要内容在HTML结构顺序上提前,以为搜索引擎抓取⽹页内容是⾃上⽽下的,所以将重要内容在HTML结构顺序上提前可便于抓取重要的内容。

(3).不要使⽤table布局,现在基本上被淘汰了,⽽应该代之以div来布局,⽅便控制。

3.结构、表现、⾏为三者分类,避免内联。

(1).使⽤link引⼊外部css⽂件到head中。

注意:⼀般我们不适⽤@import来引⼊外部css⽂件。

(2).使⽤script将js⽂件引⼊,并置于body底部,这时js⽂件会最后加载,html会最先加载,⽤户体验会更好。

4.保持良好的树形结构每⼀个块级元素都另起⼀⾏,每⼀⾏都使⽤Tab缩进对齐(head和body的⼦元素不需要缩进)。

删除冗余的⾏尾的空格。

使⽤4个空格代替1个Tab(⼤多数编辑器中可设置)。

对于内容较为简单的表格,建议将tr写成单⾏。

你也可以在⼤的模块之间⽤空⾏隔开,使模块更清晰。

!DOCTYPE html><html><head><meta charset="UTF-8"><title>404</title><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge"><style></style></head><body><div class="box"><div class="box__img"><p>******</p></div><div class="box__desc"><p>******</p><ul><li>******</li></ul></div></div></body></html> 5.其他需要注意的问题(1).⼀个标签上引⽤的className不要过多,越少越好。

html页面以及CSS函数命名规则

html页面以及CSS函数命名规则

博图广告html页面以及CSS函数命名规则页面插入FLASH标准方法<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version= 9,0,19,0" width="400" height="495" name="Movie1" id="Movie1"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="swf/Video.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><!--此处根据页面需要决定是否添加--><embed src="swf/Video.swf" quality="high" allowscriptaccess="sameDomain" wmode="transparent" pluginspage="/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="495" name="Movie1" id="Movie1"></embed></object>参数,ID和NAME根据需要命名插入常规视频代码(avi,mov,wmv,rm,asf)(实际调用系统mediaplayer)<embed src="320-180-2.mov" type="video/x-ms-wmv" width="480" height="360" autoStart="1" showControls="1" showstatusbar="1" />参数autoStart=-1表示循环0 表示停止1表示播放1次其它的1表示显示0表示隐藏页面HTML标准布局常规页面只有上下,上中下,左右,左中右等布局,其它基本就是常规布局的组合,所以我们在定义页面时,从一开始就要考虑清楚,需要共用部分一定要单独定义,确保每个页面调用同一样式显示效果都一致。

html类,id命名规范

html类,id命名规范

html类,id命名规范[转⽂]⽹页中使⽤规范的css和id命名原则,有利于提⾼团队效率,减少后期维护成本,良好的结构对SEO(搜索引擎优化)也有作⽤,是对代码的优化是⼀个很关键的步骤。

⼀、⽹页外层重要部分css样式命名:外套 wrap ------------------⽤于最外层头部 header ----------------⽤于头部主要内容 main ------------⽤于主体内容(中部)左侧 main-left -------------左侧布局右侧 main-right -----------右侧布局导航条 nav -----------------⽹页菜单导航条内容 content ---------------⽤于⽹页中部主体底部 footer -----------------⽤于底部⼆、css/ID命名参考表CSS样式命名说明#wrapper页⾯外围控制整体布局宽度#container或#content容器,⽤于最外层#layout布局#head, #header页头部分#foot, #footer页脚部分#nav主导航#subnav⼆级导航#menu菜单#submenu⼦菜单#sideBar侧栏#sidebar_a,#sidebar_b左边栏或右边栏#main页⾯主体#tag标签#msg #message提⽰信息#tips⼩技巧#vote投票#friendlink友情连接#title标题#summary摘要#loginbar登录条#searchInput搜索输⼊框#hot热门热点#search搜索#search_output搜索输出和搜索结果相似#searchBar搜索条#search_results搜索结果#copyright版权信息#branding商标#logo⽹站LOGO标志#siteinfo⽹站信息#siteinfoLegal法律声明#siteinfoCredits信誉#joinus加⼊我们#partner合作伙伴#service服务#regsiter注册arr/arrow箭头#guild指南#sitemap⽹站地图#list列表#list列表#homepage⾸页#subpage⼆级页⾯⼦页⾯#tool, #toolbar⼯具条#drop下拉#dorpmenu下拉菜单#status状态#scroll滚动.tab标签页.left .right .center居左、中、右.news新闻.download下载.banner⼴告条(顶部⼴告条)电⼦贸易相关.products产品.products_prices产品价格.products_description产品描述.products_review产品评论.editor_review编辑评论.news_release最新产品.publisher⽣产商.screenshot缩略图.faqs常见问题.keyword关键词.blog博客.forum论坛三、⽂件命名参考表CSS⽂件命名说明master.css,style.css主要的module.css模块base.css基本共⽤layout.css布局,版⾯themes.css主题columns.css专栏font.css⽂字、字体forms.css表单mend.css补丁print.css打印。

前端开发规范文档

前端开发规范文档

前端开发规范文档规范目的为提高团队协作效率,便于后端开发人员添加功能及前端后期优化维护,输出高质量的代码,特制定该文档。

本规范文档一经确认, 前端开发人员必须按本文档规范进行前端开发。

本文档如有不对或者不合适的地方请及时提出。

经讨论决定后方可更改。

基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良。

页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。

一、html 文件命名及编写规范1、命名规则采用小写英文字母|| _的组合命名,菜单名_功能名称,后缀.html。

如:manage_list.html(管理列表)、manage_add.html(新增)、manage_edit.html(修改)、manage_detail.html(详情)。

同时将页面放在其对应的模块划分目录中。

2、编写规范:(1)文档类型声明及编码统一为html5声明类型“<!DOCTYPE html>”;(2)编码统一为<meta charset="utf-8" />, 书写时利用IDE实现层次分明的缩进;(3)区域块、功能组件以及需要标注的地方,插入注释。

(4)在布局文件结构时,应遵循语义化标签(该用p不要用div、该用ul、li不要用p,h标签应根据标题层级合理利用)、代码结构简单、清晰明了,少用标签、少套结构(一段结构布局中 1个标签能解决的不要用2个,套2层结构能解决的不要套3层)的基本原则。

代码标签、结构嵌套示例:目标效果图代码结构嵌套<ul><li><h4>罗田县九资河徐冲药材</h4><img src=”***.jpg”><div><h3>茯苓</h3><p>小丁</p><p class=”color_red”>32元/公斤</p></div></li></ul>代码分析:根据目标效果图,实现的代码部分别使用了ul/li /h4/ img /div /h3/ p 这些标签。

HTML基础知识

HTML基础知识

HTML学习任何一门语言,都要首先掌握它的基本格式,就像写信需要符合书信的格式要求一样。

HTML标记语言也不例外,同样需要遵从一定的规范。

接下来将具体讲解HTML文档的基本格式。

HTML文档的基本格式主要包括<!DOCTYPE>文档类型声明、<html〉根标记、<head〉头部标记、<body〉主体标记,具体介绍如下:(1)<!DOCTYPE>标记<!DOCTYPE> 标记位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML 或XHTML(可扩展超文本标记语言)标准规范,必需在开头处使用<!DOCTYPE〉标记为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能将该网页作为有效的XHTML文档,并按指定的文档类型进行解析。

(2)〈html〉〈/html〉标记〈html>标记位于〈!DOCTYPE〉标记之后,也称为根标记,用于告知浏览器其自身是一个HTML 文档,<html>标记标志着HTML文档的开始,〈/html>标记标志着HTML文档的结束,在它们之间的是文档的头部和主体内容。

在〈html>之后有一串代码“xmlns=”/1999/xhtml"”用于声明XHTML统一的默认命名空间.(3)<head〉</head〉标记<head〉标记用于定义HTML文档的头部信息,也称为头部标记,紧跟在<html〉标记之后,主要用来封装其他位于文档头部的标记,例如〈title〉、<meta>、〈link>及<style>等,用来描述文档的标题、作者以及和其他文档的关系等。

一个HTML文档只能含有一对<head>标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

(4)〈body>〈/body〉标记<body〉标记用于定义HTML文档所要显示的内容,也称为主体标记.浏览器中显示的所有文本、图像、音频和视频等信息都必须位于〈body>标记内,<body>标记中的信息才是最终展示给用户看的.一个HTML文档只能含有一对<body>标记,且〈body>标记必须在〈html〉标记内,位于<head>头部标记之后,与〈head>标记是并列关系.在HTML页面中,带有“〈〉”符号的元素被称为HTML标记,如上面提到的〈html〉、〈head〉、<body〉都是HTML标记。

HTML编码规范

HTML编码规范

HTML编码规范1、样式表的引用样式表通过外部引用的方式调用,不建议在页面中新定义样式。

页面元素中的展现形式不建议通过html代码进行定义,都统一使用样式表进行。

比如要显示红色字体,用Html代码可以这样进行定义:<font clolor=”red”>红色字体</font>但最好的方法是通过样式表来定义。

<span class=”RedText”>红色字段</font>这样可以将对网站样式的定义集中到一个样式表文件中去,如果对网站进行修改,可以很快进行。

而如果分散到各个网页文件中去,改动起来就非常麻烦了。

2、缩进、换行约定a、网页代码的缩进使用两个空格因为网页嵌套标签可能比较多,所以使用四个空格进行缩进会导致最深层的代码缩进太多,因而使用两个空格进行缩进。

如果一行中代码太长,请换行。

比如这样一行代码:<tr><td><input type=”text” name=”test” value=”test”class=”MyInput” onclick=”alert(‘test’)”></td></tr>可以改成:<tr><td><input type=”text” name=”test” value=”test”class=”MyInput” onclick=”alert(‘test’)”></td></tr>b、如果多行相似的代码出现,属性尽量对齐<input type="hidden" name="ProjectID" value="{$ProjectID}"><input type="hidden" name="ModuleID" value="{$ModuleID}"><input type="hidden" name="BugID" value="{$BugID}"><input type="hidden" name="AssignedTo" value="{$AssignedTo}"> type、name和value属性对齐以后阅读起来比较方便。

文件 扩展名命名规则

文件 扩展名命名规则

文件扩展名命名规则
文件扩展名命名规则是指在文件名后面使用一个点和几个字母来标识文件的类型或格式。

扩展名通常由几个字符组成,常见的包括三个字符的扩展名(如".txt")和四个字符的扩展名(如".html")。

文件扩展名的命名规则通常是由文件系统和操作系统决定的,以下是一些常见的命名规则:
1. 字母全部小写:扩展名通常使用小写字母,以保持一致性和易读性。

2. 使用合适的标识符:扩展名应反映文件的内容或格式,例如,使用".txt"表示纯文本文件,使用".jpg"表示图像文件。

3. 避免特殊字符:扩展名通常不包含特殊字符,如斜杠(/)
或反斜杠(\),以避免与文件路径冲突。

4. 长度限制:某些操作系统对扩展名的长度有限制,通常在2
到4个字符之间。

5. 常见的扩展名:常见的文件扩展名包括"txt"(文本文件),"doc"或"docx"(Microsoft Word文档),"xls"或"xlsx"(Microsoft Excel电子表格),"jpg"或"jpeg"(JPEG图像文件),"png"(PNG图像文件)等。

需要注意的是,扩展名只是一个文件的标识符,并不代表文件
的实际内容或格式。

因此,更可靠的方法是根据文件的实际内容或使用专门的软件工具来确定文件的类型。

网页设计HTML的规则代码教程(很实用)

网页设计HTML的规则代码教程(很实用)

一、HTML的简单规则1、HTML的构成要素要素以段落式形成内容。

要素则由标签表现。

开始标签结束标签要素(如要素名为H1,要素内容为“给网页插上CSS的翅膀“)属性值2、HTML的基本结构标签1、使用“head”标签设定网页1)给文本注标题制作好的标题稍微长一点没关系,关键是要写入供搜索的内容简练的标题能准确传达网站特性的内容公司名或商标名用中文表示主页名2)掌握神奇的<meta> 标签< meta > 标签是用来对文本自身进行说明的,也就是承载了文本由什么内容组成、关键词是什么、文本由谁制作、何时制作等信息。

最好将这些基本信息写入<META> 标签中,这样可以最大限度地被搜索引擎关注从而增加访问量,也可以确实地向他人告知基本信息。

提供建立网站的相关信息可使网站被搜索引擎关注设定在万维网上便于出现的中文网页文本地址变更时可及时转换画面效果。

< meta属性=“值”content=“内容”>例如:< meta HTTP-EQUIV=“项目名”content=“内容”> < meta NAME=“项目名”content=“内容”>< meta > 标签可使访问者增加< meta name =“keywords”content=“HTML、CSS、JA V ASCRIPT”>< meta name=“description”content=“可以学习关于标签的一切知识”>例如:<html><head><title> 利用META Tag </title><meta http-equiv="Keywords" content="HTML, CSS, JA V ASCRIPT, DESIGN"><meta http-equiv="Description" content="此处有与HTML, CSS, JA V ASCRIPT, DESIGN相关的一切信息。

网页文件命名规范

网页文件命名规范

网页文件命名规范
网页文件命名规范
一. 文件命名的原则:以最少的字母达到最容易理解的意义。

二. 索引文件统一使用index.html文件名(小写)
index.html文件统一作为"桥页",不制作具体内容,仅仅作为跳转页和meta标签页。

主内容页为main.html
三. 按菜单名的英语翻译取单一单词为名称。

例如:
关于我们\aboutus
信息反馈\feedback
产品\product
所有单英文单词文件名都必须为小写,所有组合英文单词文件名第二个起第一个字母大写;
所有文件名字母间连线都为下划线
四. 图片命名原则以图片英语字母为名。

大小原则写同上。

例如:网站标志的图片为logo.gif
鼠标感应效果图片命名规范为"图片名+_+on/off"。

例如:menu1_on.gif/menu1_off.gif
五. 其它文件命名规范
1.js的命名原则以功能的英语单词为名。

例如:广告条的js文件名为:ad.js
2.所有的CGI文件后缀为cgi
所有CGI程序的配置文件为config.cgi。

HTML5编码规范标准[详]

HTML5编码规范标准[详]

HTML5编码规规目的本文档的目标是使HTML5代码风格保持一致,容易被理解、维护和升级,提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档,同是为有一个更好的前端架构,的发展及未来打好一个基础。

基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.文件规1、html, css, js, images文件均归档至约定的目录中。

2、html文件命名: 必须单词全字母小写,单词间以-分隔,依实际模块命名,如果同一模块以_& title& _ 来组合命名, 以方便添加功能时查找对应页面,团结里的相互理解。

HTML5代码规1. 代码风格1.1 缩进与换行[建议]使用4个空格作为一个缩进层级。

[建议]模板代码的缩进优先保证HTML 代码的缩进规则。

1.2 命名规则[强制]class:必须单词全字母小写,单词间以-分隔,且必须代表相应的模块或部件的容或功能,不得以html置样式进行命名,命名应该具有明确的语义。

[强制]id:必须保持在页面中的唯一性,命名应该具有明确的语义。

1.3 标签[强制]Html中的标签名必须使用小写字母。

[强制]标签的闭合要符合html5的规定。

[强制]标签的使用必须符合标签的嵌套规则,例:div不得置于p中,tbody必须置于table 中。

[建议]标签的使用必须遵循标签的语义,例:p -段落h1,h2,h3,h4,h5,h6 -层级标题strong,em -强调ins -插入del -删除abbr -缩写code -代码标识cite -引述来源作品的标题q -引用blockquote -一段或长篇引用ul -无序列表ol -有序列表dl,dt,dd -定义列表[建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。

1.4 属性[强制]属性必须使用小写字母,其属性值必须用双引号包围。

关于Htmlclassid命名规范

关于Htmlclassid命名规范

关于Htmlclassid命名规范CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏⽬:column 页⾯外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo ⼴告:banner 页⾯主体:main 热点:hot 新闻:news 下载:download ⼦导航:subnav 菜单:menu ⼦菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content 标签页:tab ⽂章列表:list 提⽰信息:msg ⼩技巧:tips 栏⽬标题:title 加⼊:joinus 指南:guild 服务:service 注册:regsiter 状态:status 投票:voteXHTML⽂件中id的命名(1)页⾯结构 容器: container 页头:header 内容:content/container 页⾯主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏⽬:column 页⾯外围控制整体布局宽度:wrapper 左右中:left right center(2)导航 导航:nav 主导航:mainbav ⼦导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu ⼦菜单:submenu 标题: title 摘要: summary(3)功能 标志:logo ⼴告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索:search 功能区:shop 标题:title 加⼊:joinus 状态:status 按钮:btn 滚动:scroll 标签页:tab 提⽰信息:msg 当前的: current ⼩技巧:tips 图标: icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyrightCSS+DIV的命名规则: 登录条:loginBar 标志:logo 侧栏:sideBar ⼴告:banner 导航:nav ⼦导航:subNav 菜单:menu ⼦菜单:subMenu 搜索:search 滚动:scroll 页⾯主体:main 内容:content 标签页:tab ⽂章列表:list 提⽰信息:msg ⼩技巧:tips 栏⽬标题:title 友情链接:friendLink 页脚:footer 加⼊:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态:status 按钮:btn 投票:vote 合作伙伴:partner 版权:copyRight 1.CSSID的命名 主导航:mainNav ⼦导航:subnav 页脚:footer 整个页⾯:content 页眉:header 页脚:footer 商标:label 标题:title 主导航:mainNav(globalNav) 顶导航:topnav 边导航:sidebar 左导航:leftsideBar 右导航:rightsideBar 旗志:logo 标语:banner 菜单内容1:menu1Content 菜单容量:menuContainer ⼦菜单:submenu 边导航图标:sidebarIcon 注释:note ⾯包屑:breadCrumb(即页⾯所处位置导航提⽰) 容器:container 内容:content 搜索:search 登陆:login 功能区:shop(如购物车,收银台) 当前的current 2.样式⽂件命名 主要的:master.css 布局版⾯:layout.css 专栏:columns.css ⽂字:font.css 打印样式:print.css 主题:themes.css说明:均为class,需要扩展,则在当前命名内以“_“(下划线)后缀⾃定名称。

HTML标签的命名CSS标准化命名大全

HTML标签的命名CSS标准化命名大全

HTML标签的命名CSS标准化命名⼤全在⼀个内容较多的HTML页⾯中,需要设计许多不同的框架,再为这些不同的框架及内容进⾏分类,给予相应的名称,从⽽使得⽹页结构更加清晰,也为⼯作提供了⽅便。

许多新⼿朋友在设计⼀个HTML⽂件时,可能只会依据⾃⼰的想法随便给⼀些简单的名称,但若是⼀味的乱起名称,不仅会让团队的伙伴看不明⽩,还会导致标签名称混乱,这样会使得代码维护⼗分困难,是⾮常不利于管理的。

所以我们在设计整个⽹站,还是⼀个单独的HTML页⾯,都应该要有良好的命名规则。

在本⽂中,主要讲解CSS命名规则,这也包括了对HTML标签命名。

⽂件名称必须由英⽂字母开头,通常命名的规则是根据内容的分类和框架的类型翻译成英⽂单词来命名,例如:div id="nav"(表⽰为这个div是个导航条),所有单词应当⽤⼩写字母,名称中可以使⽤数字,或下划线,例如:div="main_piclist"(表⽰主要内容下的图⽚列表)、div="nav_bg.jpg"(表⽰导航条的背景图),还可以使⽤中划线进⾏名称之间的连接,例如:div="main-left"(表⽰左侧内容的布局)所有命名要尽量避免使⽤中⽂字符,要以最少的字母达到最容易理解的含义,除⾮⼀看即懂,否则尽量不缩写。

HTML标签的命名/CSS标准化命名⼤全页⾯结构命名1. page:代表整个页⾯,⽤于最外层。

2. wrap:外套,将所有元素包在⼀起的⼀个外围包,⽤于最外层3. wrapper:页⾯外围控制整体布局宽度,⽤于最外层4. container:⼀个整体容器,⽤于最外层5. head、header:页头区域,⽤于头部6. nav:导航条7. content:内容,⽹站中最重要的内容区域,⽤于⽹页中部主体8. main:⽹站中的主要区域(表⽰最重要的⼀块位置),⽤于中部主体内容9. column:栏⽬10. sidebar:侧栏11. foot、footer:页尾、页脚。

前端开发规范:命名规范、html规范、css规范、js规范

前端开发规范:命名规范、html规范、css规范、js规范

前端开发规范:命名规范、html规范、css规范、js规范上周⼩组的培训内容是代码可读性艺术,主要分享如何命名、如何优化代码排版,如何写好的注释。

我们都知道写出优雅的代码是成为⼤⽜的必经之路。

下⾯感谢⼀位前端开发⼩伙伴总结的前端开发规范,通过学习相关开发规范,提升⾃⼰代码的可读性。

⼀个好的程序员肯定是要能书写可维护的代码,⽽不是⼀次性的代码,怎么能让团队当中其他⼈甚⾄⼀段时间时候你再看你某个时候写的代码也能看懂呢,这就需要规范你的代码了。

我是有⼀点强迫症的⼈,上周我们后端给我了⼀个CanUsename的接⼝(该接⼝的⽬的是判断输⼊的⽬的地是否是4级⽬的地),我真的是崩溃的。

我只是觉得这个名字不够语义化,但是让我⾃⼰想⼀个名字我⼜想不出来,于是我就在想,如果有⼀套命名规范的话,那么以后起名字就不⽤发愁了,直接按照规范来就好了~于是端午在家就百度了⼀下~命名驼峰式命名法介绍Pascal Case ⼤驼峰式命名法:⾸字母⼤写。

eg:StudentInfo、UserInfo、ProductInfoCamel Case ⼩驼峰式命名法:⾸字母⼩写。

eg:studentInfo、userInfo、productInfo⽂件资源命名⽂件名不得含有空格⽂件名建议只使⽤⼩写字母,不使⽤⼤写字母。

( 为了醒⽬,某些说明⽂件的⽂件名,可以使⽤⼤写字母,⽐如README、LICENSE。

)⽂件名包含多个单词时,单词之间建议使⽤半⾓的连词线 ( - ) 分隔。

引⼊资源使⽤相对路径,不要指定资源所带的具体协议 ( http:,https: ) ,除⾮这两者协议都不可⽤。

不推荐:<script src="/foundation.min.js"></script>推荐<script src="///foundation.min.js"></script>变量命名命名⽅式 : ⼩驼峰式命名⽅法命名规范 : 类型+对象描述的⽅式,如果没有明确的类型,就可以使前缀为名词类型⼩写字母array aboolean bfunction fnint iobject oregular rstring s推荐var tableTitle = "LoginTable"不推荐var getTitle = "LoginTable"函数命名⽅式 : ⼩驼峰⽅式 ( 构造函数使⽤⼤驼峰命名法 )命名规则 : 前缀为动词动词含义返回值can判断是否可执⾏某个动作 ( 权限 )函数返回⼀个布尔值。

html的语法

html的语法

html的语法
1. HTML标签必须用尖括号包围。

2. 标签通常成对出现,一个是起始标签,一个是结束标签,其中结束标签在标签名称前添加一个斜杠。

3. 标签名称和属性值均用双引号或单引号括起来。

4. 标签和属性名称是不区分大小写的。

5. HTML文档必须包括一个根元素,通常是<html>元素。

6. HTML文档中的空格和换行没有意义,但可以使得源代码更易读。

7. 嵌套标签必须正确闭合,不能产生交叉或不完整的情况。

8. 大写标签建议用于概要节点,小写标签建议用于具体节点。

9. 给标签添加“id”属性可用于CSS和JavaScript。

10. 给标签添加“class”属性可用于CSS样式表指定样式。

写出html文档的命名规则

写出html文档的命名规则

写出html文档的命名规则下载提示:该文档是本店铺精心编制而成的,希望大家下载后,能够帮助大家解决实际问题。

文档下载后可定制修改,请根据实际需要进行调整和使用,谢谢!本店铺为大家提供各种类型的实用资料,如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等,想了解不同资料格式和写法,敬请关注!Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you! In addition, this shop provides you with various types of practical materials, such as educational essays, diary appreciation, sentence excerpts, ancient poems, classic articles, topic composition, work summary, word parsing, copy excerpts, other materials and so on, want to know different data formats and writing methods, please pay attention!HTML文档的命名规则是指在为HTML文件命名时需要遵循的一些规则和约定。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

网页切图过程中div+css命名规则
内容:content/container 导航:nav 侧栏:sidebar
栏目:column 标志:logo 页面主体:main
广告:banner 热点:hot 新闻:news
下载:download 子导航:subnav 菜单:menu
搜索:search 页脚:footer 滚动:scroll
版权:copyright 友情链接:friendlink 子菜单:submenu
内容:content 标签页:tab 文章列表:list
注册:regsiter 提示信息:msg 小技巧:tips
加入:joinus 栏目标题:title 指南:guild
服务:service 状态:status 投票:vote
尾:footer 合作伙伴:partner 登录条:loginbar
页面外围控制整体布局宽度:wrapper 左右中:left right center
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container 页头:header 内容:content/container
页面主体:main 页尾:footer 导航:nav
侧栏:sidebar 栏目:column 左右中:left right center
页面外围控制整体布局宽度:wrapper
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu 子菜单:submenu 标题: title 摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线; (我倒是经常加)
4.尽量不缩写,除非一看就明白的单词. (偷懒经常缩写)主要的master.css 模块module.css 基本共用base.css 主题themes.css 专栏columns.css 打印print.css
文字font.css 表单forms.css 补丁mend.css 布局,版面layout.css。

相关文档
最新文档