当前位置:首页 » 网页前端 » 前端主页面怎么命名
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端主页面怎么命名

发布时间: 2023-06-10 07:49:53

A. 前端开发命名必备单词

一、导航类

导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav

边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu

子菜单:submenu 标题:title 摘要:summary

二、页面结构

容器:container 页头:header 内容:content/container 页面主体:main

页尾:footer 导航:nav 侧栏:sidebar 栏目:column

页面外围控制整体布局宽度:wrapper 左右中:left right center

三、功能

标志:logo 滚动:scroll 广告:banner 标签页:tab

登录:login 文章列表:list 登录条:loginbar 提示信息:msg

注册:regsiter 当前的:current 搜索:search 小技巧:tips

功能区:shop 图标:icon 标题:title 注释:note

加入:joinus 指南:guild 状态:status 服务:service

按钮:btn 热点:hot 合作伙伴:partner 新闻:news

友情链接:friendlink 下载:download 版权:right 投票:vote

四、p英文释译

标题 title 字体 font 身体 body 大小 size

列表 list 文本 text 样式 style 对齐 align

图像 image 修饰 decoration 资源 source 线 line

宽度 width 穿过 through 高度 height 缩进 indent

行 line 斜体 italic 链接 link 加粗 bold

斜体 italic 加重 weight 加粗 bold 宽 width

输入 input 高 height 下面的 under 背景 background

顶部 top 主体 main

五、css英文释译

重复 repeat 填充 padding 位置 position 正常 normal

显示类型 display 父级 parent 显示可见 visibility 子级 children

隐藏 hidden 顶部导航topnav显示 visible 溢出 overflow

列表 list 样式 style 边框 border 导航 nav

广告图片 banner 行高line-height边界 margin 页眉 header

六、样式文件命名

主要的master.css 模块mole.css 基本共用base.css 布局,版面layout.css

主题themes.css 专栏columns.css 文字font.css 表单forms.css

补丁mend.css 打印print.css

七、颜色释译

绿 green 红 red 蓝 blue 黑 black

灰 gray 黄 yellowa 紫 purple 白 white

棕 brown 卡其色 khaki

六、命名参考

登录条loginBar 标志:logo 侧边栏:sideBar 广告:banner

导航:nav 子导航:navBar 菜单:menu 子菜单:subMenu

搜索:search 滚动:scroll 页面主体:main 内容:content

标签页:tab 文章列表:list 提示信息:msg 小技巧:tips

栏目标题:title 加入:joins 指南:guild 服务:service

热点:hot 新闻:news 按钮:btn 投票:vote

状态:status 合作伙伴:partner 外套:wrap 商标:label

顶导航:topnav 左导航:leftSideBar 右导航:rightSideBar菜单内容:menuContent

菜单容器:menuContainer注释:note 边导航图标:sidebarIcon版权:right

友情链接:friendLink容器:container 页脚:footer 当前:current

激活:active 购物车:shop 登录:login 注册:regsiter

下载:download 面包屑:breadCrumb

B. 前端是什么啊

web前端就是用代码的形式,还原UI设计师设计的界面,并实现各种交互效果。web前端工程师是程序员里面入行门槛较低的一个职业,就前端应用开发框架而言,已经形成了HTML5、CSS3、《Ecmascript 6》标准规范。

1.要学的内容主要有:

①计算机基础以及PS基础

②前端开发基础(HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架)

③移动开发

④前端高级开发(ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等)

⑤小程序开发

⑥全栈开发(MySQL数据库、Python编程语言、Django框架等)

⑦就业拓展(网站SEO与前端安全技术)

互联网行业目前还是最热门的行业之一,学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的,发展前景非常好,普通人也可以学习。

2.想要系统学习,你可以考察对比一下开设有相关专业的热门学校,好的学校拥有根据当下企业需求自主研发课程的能力,建议实地考察对比一下。

祝你学有所成,望采纳。

C. 网站前端开发常用的布局方式有哪些

实现网页布局的方式方法比较多,布局方式可以大概分为这几类。

布局种类:

1、table布局(网页的兴起,1995)

2、Flash布局(自由的黄金时代,1996)

3、div+css(CSS的诞生,1998)

4、栅格与响应式(移动端的兴起,2007与2010)

当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧,网页布局看起来貌似简单,但是它需要综合使用很多HTML+CSS的知识,总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识,建议你选择一本比较不错的HTML5相关书籍(主要看知识逻辑、知识的表达方式,比如《HTML5布局之路》)进行学习,让自己的知识更扎实一些,不然学的零零散散的。

Tips:学习好HTML+CSS有利于后面学习JavaScript,毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。

D. 网页开发需要哪几个步骤

创建网站一般有以下几个步骤。
1.网站定位在网贞设计前.首先要给网站一个准确的定位,明确建站日的,从而确定站点的主题、风格、网站要提供的服务和网页要表达的主要内容。主肠要有针对性,题材要专而精,网站内的所有网页都要田绕某一主题展开。
2.网站规划根据网站定位和相关主题来构造网站的层次结构,确定网站的栏目内容。规划出组成网站的所有网页和每一个网页的具体内容,包括给每个网页文件命名。如果你想要学好web前端最好加入一个好的学习环境,可以来这个Q群,首先是132,中间是667,最后是127,这样大家学习的话就比较方便,还能够共同交流和分享资料
3.组织素材根据网站内容有目的地收集文字、图像、动画、背景音乐等相关素材.进行整理、筛选、加工和制作。采集素材必须与标肠相符.在采集家材的过程中.应注重特色。同时注京把素材文件按类别进行分类.并放置在网站根目录下的不同文件夹下。
4.网页布局根据实际情况灵活运用表格、框架和层来设置网贞的布局。重要的一个原则是合理地运用空间.网页内容疏密有致,井井有条,井注意保持网站的整体风格。开始制作时千万不要许多页面一起制作,可以先制作有代表性的一页,将灭面的结构、图片的位置、链接的方式设计周全,然后复制出许多相同的页面.再将相应的内容进行填写。
5.设计外观在设计站点外观时,注意要与站点的主题相匹配.如网页背景、文字颜色.图片内容要与主题相吻合.文字颜色与背景拼配要易于阅读等,形式要为主题服务。同时,应注意网站中的所有网页的外观要协调统一包括文字字体、网页色调、导航超链接等,可采川CSS样式来对网站中的网页的字体进行统一设置,这样既可提高效率,又能确保风格统一。
6.网页设计充分利用收集到的数据资料.合理地运用所见即所得的网贞制作软件提供的技术,如Drcamweaver,完美地制作每一个具体的能表达网站中心思想的Web页面。
7.网站测试在网页制作完成后,要对网站进行测试,包括网页是否能正常显示,超链接是否能正常跳转.图片素材是否能正常显示,声音能否正常播放等。可以把本地站点的文件夹复制到另外一台机器上进行侧试。
8.上传发布当完成了网站的设计、调试、侧试和网贞制作等T.作后.需要把设计好的站点上传到服务器来完成整个网站的发布。

E. ui切图怎么命名给前端

1、所有命名全部为小写英文字母

原因是开发小哥哥的代码里面全是小写的英文字母,如何切图命名成中文的话,会导致开发小哥哥将命名全部更改,这样会耽误产品开发的进度。

2、所有命名不得出现大写以及中文和空格或其他符号,单词之间用_隔开

  • 切图格式:Png格式

  • 通用切片命名格式:组件_类别_功能_状态@2x.png

  • 举例:

    [email protected](中文对应的是:标签栏_图标_主页_默认@2x.png)

1.工程师在实现我们效果图的过程中,需要计算好每一个元素的位置,然后再调用我们切好的图进行填充,那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求;

2.切图输出应该尽可能的降低工程师的开发工作量,避免因切图输出而导致的不必要的工作量,养成良好的命名习惯,比如可以利用版本命名,亦或时间命名都可以更清晰地标明。

3.一个团队之间应该统一标准,制定并遵循规范,这样不管是后期版本的跟新迭代或者是设计师之间的交接,都会方便快捷很多。

F. Web前端开发规范之css规范

今天小编要跟大家分享的文章是关于Web前端开发规范之css规范。Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。来和小编一起看一看css规范的原则吧!

css规范


1、编码规范为utf-8。


2、协作开发及分工:i会根据各个模块,同时根据页面相似程序,事先写**体框架文件,分配给前端人员实现内部结构&表现&行为。共用css文件base.css由i书写,协作开发过程中,哗漏每个页面请务必都要引入,此文件包含reset及头部底部样式,此文件不可随意修改。


3、class与id的使用:id是唯一的并是父级的,class是可以重复渣瞎的并是子级的,所以id仅使用在大的模块上如芦空,class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的,为JS预留钩子的除外。


4、为JS预留钩子的命名,请以js_起始,比如:js_hide,js_show。


5、class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&来组合命名,如i_comment,fontred,width200。避免使用中文拼音,尽量使用简易的单词组合。总之,命名要语义化,简明化


6、规避class与id命名(此条重要,若有不明白请及时与i沟通):a)通过从属写法规避,示例见d。b)取父级元素id/class命名部分命名,示例见d。c)重复使用率高的命名,请以自己代号加下划线起始,比如i_clear。d)a,b两条,适用于在2中已建好框架的页面,如,要在2中已建好框架的页面代码中加入新的div元素,按a命名法则:...,样式写法:#mainnav.firstnav{.......}按b命名法则:...,样式写法:.main_firstnav{.......}


7、css属性书写顺序,建议遵循:布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.属性列举:布局定位属性主要包括:display&list-style&position(相应的top,right,bottom,left)&float&clear&visibility&overflow;


自身属性主要包括:width&height&margin&padding&border&background。


文本属性主要包括:color&font&text-decoration&text-align&vertical-align&white-space&


其他&content。


8、书写代码前,提高样式重复使用率。


以上就是小编今天为大家分享的关于Web前端开发规范之css规范的文章,希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助,想要了解更多Web前端知识记得关注北大青鸟Web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的Web前端工程师。


G. 前端html页面id命名问题

常用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
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:right

H. 前端规范一(命名规范)

前端规范一(命名规范)

1、小驼峰命名法(lowerCamelCase) :第一个单词以小写字母开始,第二个单词的首字母大写,例如:firstName、lastName。

2、大驼峰命名法(CamelCase) :每一个单词的首字母都采用大写字母,例如:FirstName、LastName。

3、下划线命名法(snake_case):下划线命名法也叫蛇形法,全由小写字母和下划线组成,在两个单词之间用下滑线连接。例如:first_name。

4、中划线命名法(kebab-case):中划线命名法也叫串式命名法,各个单词之间通过下划线“-”连接。例如:first-name。

强制使用:中划线命名法

命名规则:1、文件名不得含有空格

2、文件名建议只使用小写字母,不使用大写字母

3、文件名包含多个单词时,单词之间建议连词线 ( - ) 分隔

4、有复数结构式,要使用复数

示例:login 、 error-page、 icons

强制使用:全部大写字母

为了醒目,某些说明文件的文件名,可以使用大写字母

示例:README

补充说明: README 标准

◎ 项目简介。
◎ 注意事项。
◎ 线上的示例地址(测试、正式)。
◎ 支持运行的环境。
◎ 必要的依赖准备,以及如何搭建。
◎ 项目的安装指南。
◎ 相关的文档链接。
◎ 相关人员的联系方式。

README.md 示例:

强制使用:小驼峰命名法

命名规则:前缀为动词,见名知意

1、onXxx 监听事件的回调

2、handleXxx 处理事件

3、getXxx 获取某个值

4、setXxx 设置某个值

常见场景:

a、事件处理:

(1).事件主动监听采用 onXxx ,被动处理使用handleXxx

示例:onXxxSubmit: '提交表单'
handleXxxSizeChange: '处理分页页数改变'
handleXxxPageChange: '处理分页每页大小改变'
onXxxKeydown: '按下键'

(2). 其他命名:元素+click、 元素+change、select+范围

示例:selectAllXxx: '选择所有'
xxxCellClick: '当某个单元格被点击时会触发该事件'
xxxSortChange: '当表格的排序条件发生变化的时候会触发该事件'

b、增删改查处理:

增: addXxx 添加子项

createXxx 创建大项

删: deleteXxx 真删除

removeXxx 伪删除

改:updateXxx

查: getXxx 获取原始数据需要修改

fetchXxx 原始数据

示例:getUserList: '获取用户列表', fetchToken: '取得Token', deleteUser: '删除用户', removeTag: '移除标签', updateUserInfo: '更新用户信息', addUser: '添加用户', createAccount: '创建账户'

c、API接口函数:

get: getXxxApi

post: postXxxApi

patch: patchXxxApi

delect: delectXxxApi

域名:xxxUrl

一般属性变量 强制使用:小驼峰命名法

1、布尔值

命名规则:前缀为判断性动词

hasXxx 判断是否含有某个值。true:含有此值; false:不含有此值

isXxx 判断是否为某个值。true:为某个值; false:不为某个值

示例:isShow: '是否显示', isLoading: '是否处于加载中', hasToken: '是否包含Token',

2、数组命名

命名规则:使用名词+List组合

示例: userList: '用户列表'

3、私有属性变量

命名规则:前缀为下划线(_)后面和变量命名一样。

4、枚举变量 \textcolor{red}{强制使用:大驼峰命名法}

枚举的属性使用全大写字母,单词间用下划线隔开。

示例:let TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 };

5、常量: 强制使用:使用全大写字母,单词间用下划线隔开

强制使用:大驼峰命名法

命名规则: 可参考vue官网风格指南

例如: 1、按照功能来命名

2、应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。

3、组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。

示例:components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

强制使用: 中划线命名法

命名规则:

1.class、id 、标签、属性的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用中划线 “-” 连接

2.class必须代表相应模块或部件的内容或功能,不得以样式信息进行命名。

3.元素 id 必须保证页面唯一。

4.禁止创建无样式信息的 class

示例:

1、尽量不要缩写、简写的单词。除了 template => tmp、message => msg、image => img、property => prop 这些单词已经被公认的缩写

2、可读性强的命名优先于简短的命名

3、命名长度最好在 20 个字符以内,避免多长带来的阅读不便

4、命名要有具体的含义,避免使用一些泛指和无具体含义的词

5、不要使用拼音,更不要使用中文

6、正则表达式用 Exp 结尾

7、ref:使用Ref结尾