JustDoIt - html
type: channel
link: https://www.wangmanyuan.com/tag/html/
items: 代码规范
items: 品优购项目-下
items: 品优购项目-上

代码规范
type: item
date: 2022-04-30T02:22:19+00:00
description: 1. 概述欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。HTML规范基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。图片规范了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。CSS规范统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。命名规范从 目录、图片、HTML/CSS文件、ClassName 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。2. HTML 规范DOCTYPE 声明HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明： HTML5标准模版 HTML5标准模版 页面语言lang推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值 更多地区语言参考：zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡) zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港) zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门) zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾) charset 字符集合一般情况下统一使用 “UTF-8” 编码 由于历史原因，有些业务可能会使用 “GBK” 编码 请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。书写风格HTML代码大小写HTML标签名、类名、标签属性和大部分属性值统一用小写推荐： 不推荐： 类型属性不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含推荐： 不推荐： 元素属性 元素属性值使用双引号语法 元素属性值可以写上的都写上 推荐： 不推荐： 特殊字符引用文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体推荐：more>> 不推荐：more>> 代码缩进统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置） 代码嵌套元素嵌套规范，每个块状元素独立一行，内联元素可选推荐： 不推荐： 段落元素与标题元素只能嵌套内联元素推荐： 不推荐： 3. 图片规范内容图内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大 PC平台单张的图片的大小不应大于 200KB。 背景图背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片 PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式 4. CSS规范代码格式化样式书写一般有两种：一种是紧凑格式 (Compact).jdc{ display: block;width: 50px;} 一种是展开格式（Expanded）.jdc { display: block; width: 50px; } 团队约定统一使用展开格式书写样式代码大小写样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。/* 推荐 */ .jdc{ display:block; } /* 不推荐 */ .JDC{ DISPLAY:BLOCK; } 选择器 尽量少用通用选择器 * 不使用 ID 选择器 不使用无具体语义定…

品优购项目-下
type: item
date: 2022-04-29T17:43:00+00:00
description: 目标 能够写出列表页 能够写出注册页 能够把品优购网站部署到本地服务器 能够把品优购网站上传到远程服务器 品优购项目首页制作main 主体模块制作以前书写的就是模块化中的公共部分。main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css main 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动 main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点图模块 main 里面包含右侧盒子，宽度为 250像素，右浮动，newsflash 新闻快报模块结构代码 ... ... 样式代码.main { width: 980px; height: 455px; margin-left: 220px; margin-top: 10px; } .focus { float: left; width: 721px; height: 455px; background-color: purple; } .newsflash { float: right; width: 250px; height: 455px; } 左侧 focus 模块制作 大的 focus 盒子 包裹 1 号展示图片的盒子，2号 3号 左右箭头的盒子，4号 小圆点的盒子 < > 包裹 1 号盒子（ul > li > a > img），轮播图这样的布局是为了后面方便配置js逻辑代码 2 号盒子 跟 3 号盒子 左右箭头，利用定位的方式来实现样式代码.arrow-l, .arrow-r { position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; } .arrow-r { right: 0; } 4 号盒子 里面放 小圆点 （ol > li） 小圆圈利用边框实现 小圆点里面背景颜色来实现 样式代码.circle { position: absolute; bottom: 10px; left: 50px; } .circle li { float: left; width: 8px; height: 8px; /*background-color: #fff;*/ border: 2px solid rgba(255, 255, 255, 0.5); margin: 0 3px; border-radius: 50%; /*鼠标经过显示小手*/ cursor: pointer; } .current { background-color: #fff; box-shadow: } 右侧 newsflash 模块制作 右侧的模块 分为上中下三个盒子结构代码 ... ... ... 1 号盒子为 news 新闻模块 高度为 165px 分为上下两个结构，但是两个模块都用 div，上面是 news-hd，下面是 news-bd结构代码 ... ... 样式代码.news { height: 165px; border: 1px solid #e4e4e4; } 上面是news-hd，设置高度是 33px，设置下边框 里面放一个h5 标题 放一个a标签，内容是 更多，然后让 a 进行右浮动，三角用伪元素设置字体图标就好 结构代码 品优购快报 更多 样式代码.news-hd { height: 33px; line-height: 33px; border-bottom: 1px dotted #e4e4e4; padding: 0 15px; } .news-hd h5 { float: left; font-size: 14px; } .news-hd .more { float: right; } .news-hd .more::after { font-family: 'icomoon'; content: '\e920'; } 下面是news-bd 里面包含 ul 和 li 还有链接 给li设置高度，24px，设置单行文字溢出省略： 1. 设置 overflow: hidden; 2.设置 white-space: nowrap; 3. 设置 text-overflow: ellipsis; 结构代码 [重磅] 它来了它来了，pink老师走来了, 它是谁？ [重磅] 它来了它来了，pink老师走来了 [重磅] 它来了它来了，p…

品优购项目-上
type: item
date: 2022-04-29T17:42:00+00:00
description: 目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化 品优购项目规划网站制作流程原型图： 页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容**效果图：**告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等品优购项目介绍 **项目名称：**品优购 **项目描述：**品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作 主页列表页注册页品优购项目的学习目的 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术 品优购项目能复习、总结、提高基础班所学布局技术 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知 为后期学习移动端项目做铺垫 开发工具以及技术栈开发工具VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）技术栈 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式 采取结构与样式相分离，模块化开发 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹--- 品优购代码规范.md） 品优购项目搭建工作创建的文件夹如下（称为项目结构）创建文件如下初始化样式有些网站初始化的不太提倡 * { margin: 0; padding: 0; } 比如新浪： html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0} 项目模块化开发所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有(如下图)。此时，可以把这些结构和样式单独作为一个模块，然后重复使用 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式 模块化开发具有重复使用、修改方便等优点 网站 favicon 图标（★★★）favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。制作favicon图标 把品优购图标切成 png 图片 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/ 使用favicon图标favicon图标放到网站根目录下HTML页面引入favicon图标在html 页面里面的 元素之间引入代码 TDK三大标签SEO优化（★★）SEO是什么**SEO（Search Engine Optimization）**汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。页面必须有三个标签用来符合 SEO 优化TDK是什么T -- Title（网站标题）title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。**建议：**网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）例如： 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！ 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站 D -- description（网站描述）简要说明我们网站主要是做什么的。我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。例如： K -- keywords （关键字）keywords 是页面关键词，是搜索引擎的关注点之一。keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式例如： 对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备示例代码 ... 品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！ ... 品优购首页制作我们开始制作首页的头部和底部的时候，根据模块化开发，…