不二如是 发表于 2018-11-5 10:46:10

网站基本框架结构和常用词汇

本帖最后由 不二如是 于 2020-3-17 19:00 编辑



《零基础入门学习Web》(HTML5 & CSS3)很快就要进入网页结构部分咯。

所以今天我就来给大家科普一下常用的单词及基本框架结构,先来看下面的这张图:


图中的几个名词就是常用的结构啦,我们主要偏文字解释,具体实现请看:**** Hidden Message *****

1、container

“container”就是将页面中的所有元素包在一起的部分。

这部分还可以命名为:“wrapper“, “wrap“, “page“.

2、header

“header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。

这部分还可以命名为:“page-header” (或 pageHeader).

3、navbar

“navbar“等同于横向的导航栏,是最典型的网页元素。

这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.

4、menu

“menu”区域包含一般的链接和菜单。

这部分还可以命名为: “subNav “, “links“,“sidebar-main”.

5、main

“main”是网站的主要区域,如果是博客的话它将包含的日志。

这部分还可以命名为: “content“, “main-content” (或“mainContent”)。

6、slider

“sidebar” 部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…

这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.

7、footer

“footer”包含网站的一些附加信息,这部分还可以命名为: “copyright“.



需要注意的点

作为一名前端,我列举一些常用的英文单词,供大家创建时使用,专业词汇还是要懂滴。

(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 版权:copyright



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

如果喜欢,别忘了评分{:10_281:} :

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑☞(传送门)(不喜欢更要订阅{:10_278:} )

xjy123 发表于 2018-11-9 23:21:44

学习

lange 发表于 2018-11-12 20:19:01

看看

丹华抱一 发表于 2018-11-14 18:32:24

{:5_95:}

super6415498 发表于 2018-11-15 07:31:31

学习学习,谢谢分享!

前路 发表于 2018-11-17 11:53:40

好好在学

LJZheng 发表于 2018-11-29 12:08:54

回复

xiao9798 发表于 2018-12-3 09:46:45

学习 学习

JimmyIR 发表于 2018-12-28 10:19:05

实用

Amormo 发表于 2019-4-28 20:06:22

mark

Herrfeng 发表于 2019-7-1 14:13:07

啊·哈?我要看看

不需要排面 发表于 2019-7-5 10:06:20

已学习,多谢分享{:10_277:}

ygrong_2008 发表于 2019-7-6 11:22:21

assdfsdf

鱼豆腐爱吃猫 发表于 2019-11-20 17:31:21

实用Tips - 40 - 网站基本框架结构和常用词汇

ganqiang 发表于 2019-11-27 04:11:49

学习

笑死朕 发表于 2019-12-1 13:09:40

666

写bug的人 发表于 2019-12-12 02:00:32

可以可以

bendon 发表于 2020-4-14 16:06:58

好好学习一下,谢谢楼主的讲解

13698640864 发表于 2020-4-15 09:53:12

加油

lindadizhu 发表于 2020-6-18 09:37:52

学习
页: [1] 2
查看完整版本: 网站基本框架结构和常用词汇