不二如是 发表于 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
查看完整版本: 网站基本框架结构和常用词汇