时间：2023-10-03 07:00:01 | 来源：网站运营
时间：2023-10-03 07:00:01 来源：网站运营
Part1 HTML网页开发 模块3：文章内容输出来源：拉勾教育大前端就业集训营
在线咨询
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">③CSS分级引入/* 项目公共样式 *//* -header区域- */.header{ width: 100%; height: 40px; line-height: 40px; background-color: #32373E;}.header_c{ height: 40px;}/* header 左侧 */.header_c .header_left{ float: left;}/* LOGO区域 */.header_c .header_left .logo{ /* 定位和文档流 */ float: left; /* 盒模型属性 */ width: 43px; height: 31px; padding-top: 9px; margin-right: 34px;}.header_c .header_left .logo a{ display: block; width: 100%; height: 21px; background: url(../images/logo.png) no-repeat 0 0; text-indent: -999em; overflow: hidden;}/* 城市选择 */.header_c .header_left .city{ float: left; width: 110px; margin-right: 34px; cursor:pointer;}.header_c .header_left .city span{ margin-right: 12px; color: #20CA9F;}.header_c .header_left .city i{ font-size: 12px; color: #AFB5C0;}.header_c .header_left .city:hover i{ color: #ffffff;}/* 导航区域 */.header_c .header_left .nav{ float: left;}.header_c .header_left .nav li{ float: left;}.header_c .header_left .nav li a{ display: block; position: relative; padding: 0 20px; color: #AFB5C0;}.header_c .header_left .nav li a:hover{ color: #ffffff;}.header_c .header_left .nav li.current a{ color: #ffffff; background-color: #000000;}.header_c .header_left .nav li a .tips{ position: absolute; top: 3px; right: -2px; width: 29px; height: 18px; border-radius: 25% / 50%; line-height: 18px; color: #FFFFFF; background-color: #FF7452;}/* header 右侧 */.header_c .header_right{ float: right;}.header_c .header_right a{ float: left; color: #AFB5C0;}.header_c .header_right a:hover{ color: #FFF;}.header_c .header_right .upload{ margin-right: 23px;}.header_c .header_right .subscribe{ margin-right: 66px;}.header_c .header_right .login{ position: relative;}.header_c .header_right .login::before{ content: ''; position: absolute; top: 50%; display: block; width: 18px; height: 18px; transform: translate(-26px,-50%); background: url(../images/sprite_01.png) no-repeat -76px -136px;}.header_c .header_right .login:hover::before{ background-position: -76px -174px;}.header_c .header_right span{ float: left; margin: 0 8px; color: #5E5A50;}.header_c .header_right .register{ margin-right: 50px;}.header_c .header_right .app{ position: relative; margin-right: 20px; color: #00C295;}.header_c .header_right .app::before{ content: ''; display: block; position: absolute; top: 50%; width: 12px; height: 18px; transform: translate(-20px,-50%); background: url(../images/sprite_01.png) no-repeat -64px -212px;}.header_c .header_right .app:hover{ color: #8edeaf;}.header_c .header_right .app:hover::before{ background-position: ; background-position: -96px -212px;}header.css<!-- header 区域开始 --> <div class="header"> <div class="inner_c header_c"> <!-- header 左侧 --> <div class="header_left"> <!-- logo 区域 --> <h1 class="logo"> <a href="index.html">拉勾招聘|专业|互联网|招聘|求职|培训|JAVA|前端</a> </h1> <!-- 城市选择 --> <div class="city"> <span>全国站</span><i>[切换城市]</i> </div> <!-- 导航区域 --> <ul class="nav"> <li class="current"><a href="index.html">首页</a></li> <li><a href="company.html">公司</a></li> <li><a href="school.html">校园招聘</a></li> <li><a href="#">职位</a></li> <li><a href="#">言职</a></li> <li><a href="#">课程<span class="tips">new</span></a></li> </ul> </div> <!-- header 右侧 --> <div class="header_right"> <a href="" class="upload">上传简历</a> <a href="" class="subscribe">职位订阅</a> <a href="" class="login">登录</a> <span>|</span> <a href="" class="register">注册</a> <a href="" class="app">拉勾APP</a> <a href="" class="">进入企业版</a> </div> </div> </div> <!-- header 区域结束 -->header of index.html# 代码规范## 1. 概述欢迎使用前端代码规范， 这里借鉴、引用的是京东前端代码规范。遵循代码规范的目的在于增强团队开发协作、提高代码质量和打造开发基石的编码规范。以下规范是团队基本约定的内容，必须严格遵循。实际工作中，也可以根据公司的需求制定自己的代码规范。#### HTML规范基于 [W3C](http://www.w3.org/)、[苹果开发者](https://developer.apple.com/) 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。#### 图片规范了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。#### CSS规范统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。#### 命名规范从 `目录`、`图片`、`HTML/CSS文件`、`ClassName` 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。#### JavaScript 规范（暂时不讲）统一团队的 JS 语法风格和书写习惯，减少程序出错的概率，其中也包含了 ES6 的语法规范和最佳实践。## 2. HTML 规范### DOCTYPE 声明HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：~~~html<!DOCTYPE html>~~~**HTML5标准模版**```html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5标准模版</title> </head> <body> </body></html>```### 页面语言lang推荐使用属性值 `cmn-Hans-CN`（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 `zh-CN` 属性值```<html lang="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” 编码```<meta charset="UTF-8">```由于历史原因，有些业务可能会使用 “GBK” 编码```<meta charset="GBK">```请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 [IETF对UTF-8的定义](http://www.ietf.org/rfc/rfc3629)，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。### 书写风格#### HTML代码大小写HTML标签名、类名、标签属性和大部分属性值统一用小写*推荐：*```<div class="demo"></div>```*不推荐：*```<div class="DEMO"></div> <DIV CLASS="DEMO"></DIV>```### 类型属性不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含*推荐：*```<link rel="stylesheet" href="" ><script src=""></script>```*不推荐：*```<link rel="stylesheet" type="text/css" href="" ><script type="text/javascript" src="" ></script>```### 元素属性- 元素属性值使用双引号语法- 元素属性值可以写上的都写上*推荐：*```<input type="text"><input type="radio" name="name" checked="checked" >```*不推荐：*```<input type=text> <input type='text'><input type="radio" name="name" checked >```### 特殊字符引用文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体*推荐：*```<a href="#">more>></a>```*不推荐：*```<a href="#">more>></a>```### 代码缩进统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）```<div class="jdc"> <a href="#"></a></div>```### 代码嵌套元素嵌套规范，每个块级元素独立一行，行内元素可选*推荐：*避免行内元素的空白折叠现象。```<div> <h1></h1> <p></p></div> <p><span></span><span></span></p>```*不推荐：*```<div> <h1></h1><p></p></div> <p> <span></span> <span></span></p>```段落元素与标题元素只能嵌套行内元素*推荐：*```<h1><span></span></h1><p><span></span><span></span></p>```*不推荐：*```<h1><div></div></h1><p><div></div><div></div></p>```## 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 选择器- 不使用无具体语义定义的标签选择器```css/* 推荐 */.jdc {}.jdc li {}.jdc li p{}/* 不推荐 */*{}#jdc {}.jdc div{}```### 代码缩进统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）```.jdc { width: 100%; height: 100%;}```### 分号每个属性声明末尾都要加分号；```.jdc { width: 100%; height: 100%;}```### 代码易读性左括号与类名之间一个空格，冒号与属性值之间一个空格*推荐：*```.jdc { width: 100%; }```*不推荐：*```.jdc{ width:100%;}```逗号分隔的取值，逗号之后一个空格*推荐：*```.jdc { box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;}```*不推荐：*```.jdc { box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;}```为单个css选择器或新申明开启新行*推荐：*```css.jdc, .jdc_logo, .jdc_hd { color: #ff0;}.nav{ color: #fff;}```*不推荐：*```css.jdc,jdc_logo,.jdc_hd { color: #ff0;}.nav{ color: #fff;}```颜色值 `rgb()` `rgba()` `hsl()` `hsla()` `rect()` 中不需有空格，且取值不要带有不必要的 0*推荐：*```.jdc { color: rgba(255,255,255,.5);}```*不推荐：*```.jdc { color: rgba( 255, 255, 255, 0.5 );}```属性值十六进制数值能用简写的尽量用简写*推荐：*```.jdc { color: #fff;}```*不推荐：*```css.jdc { color: #ffffff;}```不要为 `0` 指明单位*推荐：*```css.jdc { margin: 0 10px;}```*不推荐：*```css.jdc { margin: 0px 10px;}```### 属性值引号css属性值需要用到引号时，统一使用单引号```css/* 推荐 */.jdc { font-family: 'Hiragino Sans GB';}/* 不推荐 */.jdc { font-family: "Hiragino Sans GB";}```### 属性书写顺序建议遵循以下顺序：1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）2. 自身属性：width / height / margin / padding / border / background3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …```css.jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; background: rgba(0,0,0,.5); font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}```[mozilla官方属性顺序推荐](https://www.mozilla.org/css/base/content.css)## 命名规范由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。### 目录命名* 项目文件夹：lagou* 样式文件夹：css* 脚本文件夹：js* 样式类图片文件夹：img* 产品类图片文件夹： upload* 字体类文件夹： fonts### ClassName命名ClassName的命名应该尽量精短、明确，必须以**字母开头命名**，且**全部字母为小写**，单词之间**统一使用下划线** “_” 连接.nav_top#### 常用命名推荐**注意**：ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此```<div class="ad"></div>```这种广告的英文或拼音类名不应该出现另外，**敏感不和谐字眼**也不应该出现，如：```<div class="fuck"></div><div class="jer"></div><div class="sm"></div><div class="gcd"></div> <div class="ass"></div> <div class="KMT"></div> ...```| ClassName | 含义 || ---------------------- | -------------------- || about | 关于 || account | 账户 || arrow | 箭头图标 || article | 文章 || aside | 边栏 || audio | 音频 || avatar | 头像 || bg,background | 背景 || bar | 栏（工具类） || branding | 品牌化 || crumb,breadcrumbs | 面包屑 || btn,button | 按钮 || caption | 标题，说明 || category | 分类 || chart | 图表 || clearfix | 清除浮动 || close | 关闭 || col,column | 列 || comment | 评论 || community | 社区 || container | 容器 || content | 内容 || copyright | 版权 || current | 当前态，选中态 || default | 默认 || description | 描述 || details | 细节 || disabled | 不可用 || entry | 文章，博文 || error | 错误 || even | 偶数，常用于多行列表或表格中 || fail | 失败（提示） || feature | 专题 || fewer | 收起 || field | 用于表单的输入区域 || figure | 图 || filter | 筛选 || first | 第一个，常用于列表中 || footer | 页脚 || forum | 论坛 || gallery | 画廊 || group | 模块，清除浮动 || header | 页头 || help | 帮助 || hide | 隐藏 || hightlight | 高亮 || home | 主页 || icon | 图标 || info,information | 信息 || last | 最后一个，常用于列表中 || links | 链接 || login | 登录 || logout | 退出 || logo | 标志 || main | 主体 || menu | 菜单 || meta | 作者、更新时间等信息栏，一般位于标题之下 || module | 模块 || more | 更多（展开） || msg,message | 消息 || nav,navigation | 导航 || next | 下一页 || nub | 小块 || odd | 奇数，常用于多行列表或表格中 || off | 鼠标离开 || on | 鼠标移过 || output | 输出 || pagination | 分页 || pop,popup | 弹窗 || preview | 预览 || previous | 上一页 || primary | 主要 || progress | 进度条 || promotion | 促销 || rcommd,recommendations | 推荐 || reg,register | 注册 || save | 保存 || search | 搜索 || secondary | 次要 || section | 区块 || selected | 已选 || share | 分享 || show | 显示 || sidebar | 边栏，侧栏 || slide | 幻灯片，图片切换 || sort | 排序 || sub | 次级的，子级的 || submit | 提交 || subscribe | 订阅 || subtitle | 副标题 || success | 成功（提示） || summary | 摘要 || tab | 标签页 || table | 表格 || txt,text | 文本 || thumbnail | 缩略图 || time | 时间 || tips | 提示 || title | 标题 || video | 视频 || wrap | 容器，包，一般用于最外层 || wrapper | 容器，包，一般用于最外层 |<div class="content"> <div class="left"> <p>左侧盒子宽度自适应内容宽度</p> <img src="images/smile01.jpg" alt=""> </div> <div class="right"> <p>右侧盒子占有父级剩余的宽度部分</p> </div> </div> * { margin: 0; padding: 0; } .content { width: 1000px; height: 500px; background-color: lightblue; } .left { float: left; background-color: pink; } .left img { width: 400px; } .right { height: 300px; /* 触发 BFC，不会与浮动的元素重叠 */ overflow: hidden; background-color: lightyellow; }<div class="container"> <div class="center"> <h2>圣杯布局，中间自适应宽度</h2> </div> <div class="left">左侧固定宽度</div> <div class="right">右侧固定宽度</div> </div>* { margin: 0; padding: 0; } .container { position: relative; box-sizing: border-box; max-width: 1500px; height: 500px; /* 用内边距为左右固定的两个子元素留取空位 */ padding-left: 200px; padding-right: 200px; margin: 0 auto; background-color: lightyellow; } /* 定位在左侧，padding 区域 */ .left { position: absolute; left: 0; top: 0; width: 190px; height: 300px; background: skyblue; } /* 定位在右侧，padding 区域 */ .center { width: 100%; height: 400px; background: yellowgreen; } .right { position: absolute; right: 0; top: 0; width: 190px; height: 400px; background: skyblue; }③等高布局 <div class="container"> <div class="center"> <h2>登高布局，中间自适应宽度，自身高度决定父级高度</h2> </div> <div class="left">左侧固定宽度，高度自动等于中间内容高度</div> <div class="right">右侧固定宽度，高度自动等于中间内容高度</div> </div>* { margin: 0; padding: 0; } .container { position: relative; box-sizing: border-box; max-width: 1500px; /* 父级不设置高度，被中间标准流内容撑开 */ /* 用内边距为左右固定的两个子元素留取空位 */ padding-left: 200px; padding-right: 200px; margin: 0 auto; background-color: lightyellow; } /* 定位在左侧，padding 区域 */ .left { position: absolute; left: 0; top: 0; width: 190px; /* 高度设置为父级的 100%，与父级共同变化 */ height: 100%; background: skyblue; } /* 定位在右侧，padding 区域 */ .center { width: 100%; height: 400px; background: yellowgreen; } .right { position: absolute; right: 0; top: 0; width: 190px; height: 100%; background: skyblue; }④粘连布局<div class="wrapper"> <div class="main"> <p>主体内容 1</p> <p>主体内容 2</p> <p>主体内容 3</p> </div> </div> <div class="footer">底部</div> * { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; padding-bottom: 100px; box-sizing: border-box; background: lightyellow; text-align: center; overflow: hidden; } .wrapper .main { background-color: skyblue; } .wrapper .main p { height: 100px; } .footer { height: 100px; margin-top: -100px; line-height: 50px; background: pink; text-align: center; } 关键词：
