上海上业前端技术规范文档

作者: Lisburn | 来源:发表于2020-07-24 18:21 被阅读0次

上海上业前端技术规范文档
前端名站汇总
前端架构之路（4） - 前端开发文档
前端文档
前端学习链接
【前端文章清单】这是一个好文收藏夹
海投汇前端培训系列 -- 学习资料汇总
使用swagger优雅书写api文档
大连合一技术规范文档
webpack原理学习

PC

一、文档树

普通页面

根目录

Module [ 视图 ]

Index [ 图层 ]

css [ index.css ]
fonts [ 字体图标文件 ]
img [ icon-img ]
image [ 临时图片 ]
js [index.js]
index.html
首页.txt [ 文档说明 ]

公共文件夹

Common
公共模块说明.txt

Header

img
css
js
Header.html

所有公共组件 / 插件 / 框架

WebUI

fonts [ 通用字体图标 ]
css [ 通用样式 ]
js [ 公共JS ]
img [ 公共图片 ]
plugins [ 通用组件 ]

二、须知

显示安全区域

width: 1200px; height: auto;
<!-- 还需提供兼容 1366 × 768 设备的显示方法 -->

可选的优化方案 [ CDN ]

<!-- CDN引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- CDN加载失败处理方法 -->
<script type="text/javascript">
  window.jQuery || document.write('<script src="js/jquery-3.4.1.js"><\/script>');
</script>

链接：BootCDN

可选的优化方案 [ LAZYLOAD IMG ]

<img class="lazy" src="img/loading.gif" data-original="" alt="图片加载失败,请刷新后重试" />
<!-- data-original=" XXX " XXX为图片真实路径 -->

链接：Jquery.lazyload

可选的优化方案 [ CSS解析 ]

/* css解析方式是从后向前解析的 */
/* EXP */
.container .container-fall .header-logo{
    
}
.container div img{
    
}
/* 前者解析速度大于后者解析速度 */

WARNNING：禁止为了提高解析速度而为所有类都添加类名

图片的处理 [ 16 : 9 ]

<div style="position: relative;width:100%;padding-top:56.2%;background: #c3e6c2;">
  <img
  style=" max-width:100%;
  max-height:100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;" 
  src="" alt="图片加载失败,请刷新后重试"
/>
</div>

图片自适应

<style type="text/css">
  .img-box{
    width: 200px;
    height: 200px;
  }
  .img-box img{
    max-width: 100%;
    max-height: 100%;
  }
</style>
<div class="img-box">
  <img>
</div>

页面载入动画

<link rel="stylesheet" type="text/css" href="css/pageloader.css"/>
<div class="page-loader" id="page-loader">
  <div>
    <i class="ion ion-loading-d"></i>
    <p></p>
  </div>
</div>

三、正式开始

初始化

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

<head></head>标签中应包含如下标签

<meta charset="utf-8" />
<!-- 本站语言 -->
<meta http-equiv="Content-Language" content="zh-CN" />
<!-- 安全 -->
<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none';  child-src https:"> -->
<!-- 优先使用 IE 和 CHROME 最新版渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置谷歌内核 -->
<meta name="renderer" content="webkit">
<!-- 360浏览器兼容 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 网页关键词 -->
<meta name="keywords" content="文化云,NAME文化云,文化NAME云,公共文化,公共文化服务,互联网+,文化+,活动,文化活动,NAME文化活动,活动预约,免费活动,NAME免费活动">
<!-- 站点主要内容 -->
<meta name="description" content="文化云-一款聚焦文化领域，提供公共文化生活服务和文化消费的文化互联网平台，展示NAME地区公共服务建设的一个公益性平台，展示了包括NAME的公共文化活动，各类文化场馆门户子平台，文化相关资讯，志愿活动和志愿者风采，网上数字资源等信息，包含市民互动，线上报名等交互性功能，包含大量的非遗资源，是NAME公共文化服务领域的一张名片。">
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- iOS 设备 BEGIN -->
<meta name="apple-mobile-web-app-title" content="网站名称"> 
<!-- IOS中Safari允许全屏浏览 -->
<meta content="yes" name="apple-mobile-web-app-capable"/>
<!-- IOS中Safari顶端状态条样式 -->
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<!-- 忽略将数字变为电话号码 -->
<meta content="telephone=no" name="format-detection"/>
<!-- 先发送请求与服务器确认该资源是否被更改，如果未被更改则使用缓存 -->
<meta http-equiv="cache-control" content="no-cache">
<!-- 禁止百度自动转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 控制显示区域各种属性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- 网站名称 -->
<title>网站名称</title>
<!-- 载入动画 -->
<link rel="stylesheet" type="text/css" href="/Cloud/WebUI/css/pageloader.css">
<!-- 样式 -->
<link rel="stylesheet" type="text/css" href="">
<!-- HTML5标签解析的简单兼容 -->
<script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>

<script></script>标签应放入<body></body>标签中并按顺序引入

<body>
  <script src="" type="text/javascript"></script>
</body>

四、更加规范的 HTML5 标签使用

头部
<header></header>
底部
<footer></footer>
侧边导航栏
<aside></aside>
导航栏
<nav></nav>
视屏 / 音频 / 路径引入
<video></video>
<audio></audio>
<source/>

链接：更多标签

五、命名规范及书写规范

请将 BEGIN && END 的注释一定存在代码段中

头部

        <!-- 头部 -->
        <header class="head-container">
            <div class="head-content">
                <!-- 网站LOGO BEGIN -->
                <div class="head-logo"></div>
                <!-- 网站LOGO END -->
                <!-- 搜索框 BEGIN -->
                <div class="head-search">
                    <input class="head-search-text" type="" name="" id="" value="" />
                    <button class="head-search-button"></button>
                </div>
                <!-- 搜索框 END -->
                <!-- 地址栏 BEGIN -->
                <div class="head-address">
                    <div class="head-address-show"></div>
                    <ul class="head-address-list">
                        <li class="address-active"></li>
                        <li></li>
                    </ul>
                </div>
                <!-- 地址栏 END -->
                <!-- 导航栏 BEGIN -->
                <div class="head-nav">
                    <nav>
                        <!-- 一级导航 -->
                        <ul class="nav-level-one">
                            <li class="nav-active">
                                <!-- 二级导航 -->
                                <ul class="nav-level-two">
                                    <li>
                                        <!-- 三级导航 -->
                                        <ul class="nav-level-thr"></ul>
                                    </li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </li>
                            <li></li>
                            <li></li>
                        </ul>
                    </nav>
                    <!-- 导航栏 END -->
                </div>
            </div>
        </header>
        <!-- 头部结束 -->

主体 [ 独立布局 ]

        <!-- 内容主体 -->
        <!-- 文化资讯 BEGIN -->
        <main class="main-container">
            <div class="main-info">
                <h3 class="main-title"></h3>
                <div class="main-info-content"></div>
                <a class="more-button" href="javascript:void(0);">查看更多</a>
            </div>
        </main>
        <!-- 文化资讯 END -->
        <!-- 文化活动 BEGIN -->
        <main class="main-container">
            <div class="main-activity">
                <h3 class="main-title"></h3>
                <div class="main-activity-content"></div>
                <a class="more-button" href="javascript:void(0);">查看更多</a>
            </div>
        </main>
        <!-- 文化活动 END -->

主体 [ 切屏 ]

        <!-- 内容主体 -->
        <main class="main-fullpage">
            <div class="main-container">
                <!-- ———————————— 一楼 文化资讯 ———————————— -->
                <div class="fl-first">
                    <div class="main-info">
                        <h3 class="main-title"></h3>
                        <div class="main-info-content"></div>
                        <a class="more-button" href="javascript:void(0);">查看更多</a>
                    </div>
                </div>
                <!-- ———————————— 二楼 文化活动 ———————————— -->
                <div class="fl-second">
                    <div class="main-activity">
                        <h3 class="main-title"></h3>
                        <div class="main-activity-content"></div>
                        <a class="more-button" href="javascript:void(0);">查看更多</a>
                    </div>
                </div>
                <!-- ———————————— 三楼 文化场馆 ———————————— -->
                <div class="fl-third"></div>
                <!-- ———————————— 四楼 文化地图 ———————————— -->
                <div class="fl-fouth"></div>
                <!-- ———————————— 五楼 非遗特色 ———————————— -->
                <div class="fl-fivth"></div>
            </div>
        </main>

足部

        <!-- 足部开始 -->
        <footer class="foot-container">
            <div class="foot-content">
                <!-- 事业单位图标 -->
                <div class="foot-government"></div>
                <!-- 网站信息 BEGIN -->
                <ul class="foot-website-info">
                    <li>今日到访<var class="foot-visitor">9786</var></li>
                    <li>
                        <!-- 公安部备案编号 BEGIN -->
                        <div class="foot-polic">
                            <!-- 公安图标 -->
                            <img src="" alt="">
                        </div>
                        <!-- 公安部备案编号 结束 -->
                    </li>
                    <li></li>
                    <li>Copyright&copy;2020-2021</li>
                </ul>
                <!-- 网站信息 END -->
                <!-- 多媒体 BEGIN -->
                <div class="foot-multi-media">
                    <!-- 如果分享 -->
                    <!-- <div class="foot-share"></div> -->
                    <div class="wechat"></div>
                    <div class="weibo"></div>
                    <div class="qq"></div>
                    <div class="app-download"></div>
                </div>
                <!-- 多媒体 END -->
            </div>
        </footer>
        <!-- 足部结束 -->

上海上业前端技术规范文档
PC 一、文档树普通页面根目录Module [ 视图 ]Index [ 图层 ]css [ index.css...
前端名站汇总
前端名站： w3ctech ： https://www.w3ctech.com/ 技术规范：https://dev...
前端架构之路（4） - 前端开发文档
前端开发文档 1. 为什么需要 “前端开发文档” 上一节讲到开发规范，不以规矩，不成方圆，团队开发离不开规范，这一...
前端文档
webpack https://doc.webpack-china.org/concepts/entry-points/
前端学习链接
综合文档前端相关所有常用文档汇总：http://devdocs.io/ 前端基础:http://www.w3sc...
【前端文章清单】这是一个好文收藏夹
持续更新中 Web前端知识体系精简如何成为一名优秀的web前端工程师【前端文档清单】这是一个文档收纳盒【前端...
海投汇前端培训系列 -- 学习资料汇总
海投汇前端培训官方文档 Vue文档 VueRouter文档 Vuex文档 Vue 服务端渲染文档 Nuxt.js...
使用swagger优雅书写api文档
书写和前端对接的api文档十分痛苦，工作中经常会有下面场景接口文档地址分散接口文档相对代码更新滞后前端同事找...
大连合一技术规范文档
常见技术规范记录 Dev 前端部分字符串截取 || 小数取整要判断为空 vue绑定的数据要存在,不初始化绑定数...
webpack原理学习
来来来，学一下这两年前端一大热门轮子——webpack 文档地址中文文档地址前端存在的问题：最初，前端的文件是...

上海上业前端技术规范文档

PC

一、文档树

二、须知

三、正式开始

四、更加规范的 HTML5 标签使用

五、命名规范及书写规范

相关文章

上海上业前端技术规范文档

前端名站汇总

前端架构之路（4） - 前端开发文档

前端文档

前端学习链接

【前端文章清单】这是一个好文收藏夹

海投汇前端培训系列 -- 学习资料汇总

使用swagger优雅书写api文档

大连合一技术规范文档

webpack原理学习

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

初学前端

前端

上海上业前端技术规范文档

PC

一、文档树

二、须知

三、正式开始

四、更加规范的 HTML5 标签使用

五、命名规范 及 书写规范

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

五、命名规范及书写规范