• HTML5 和 CSS3 的新特性--品优购项目开发

    品优购项目规划

    网站制作流程

    现阶段，我们主要做前台页面设计

    网页美工会制作原型图和psd效果图

     品优购项目整体介绍

    项目名称：品优购

    项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作

    开发工具以及技术栈

    1. 开发工具 VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）

    2. 技术栈

    利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式

    采取结构与样式相分离，模块化开发

    良好的代码规范有利于团队更好的开发协作，提高代码质量

    代码规范要求

    1. # 代码规范
    2.  
    3. ## 1. 概述
    4.  
    5. 欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，
    6.  
    7. 以下规范是团队基本约定的内容，必须严格遵循。
    8.  
    9. #### HTML规范
    10.  
    11. 基于 [W3C](http://www.w3.org/)、[苹果开发者](https://developer.apple.com/) 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。
    12.  
    13. #### 图片规范
    14.  
    15. 了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。
    16.  
    17. #### CSS规范
    18.  
    19. 统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
    20.  
    21. #### 命名规范
    22.  
    23. 从 `目录`、`图片`、`HTML/CSS文件`、`ClassName` 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。
    24.  
    25. ##  2. HTML 规范
    26.  
    27. ###  DOCTYPE 声明
    28.  
    29. HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
    30. ~~~html
    31. <!DOCTYPE html>
    32. ~~~
    33.  
    34. **HTML5标准模版**
    35.  
    36. ```html
    37. <!DOCTYPE html>
    38.   <html lang="zh-CN">
    39.   <head>
    40.   <meta charset="UTF-8">
    41.   <title>HTML5标准模版</title>
    42.   </head>
    43.   <body>
    44.  
    45.   </body>
    46. </html>
    47. ```
    48.  
    49. ### 页面语言lang
    50.  
    51. 推荐使用属性值 `cmn-Hans-CN`（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 `zh-CN` 属性值
    52.  
    53. ```
    54. <html lang="zh-CN">
    55. ```
    56.  
    57. 更多地区语言参考：
    58.  
    59. ```
    60. zh-SG 中文 (简体, 新加坡)   对应 cmn-Hans-SG 普通话 (简体, 新加坡)
    61. zh-HK 中文 (繁体, 香港)     对应 cmn-Hant-HK 普通话 (繁体, 香港)
    62. zh-MO 中文 (繁体, 澳门)     对应 cmn-Hant-MO 普通话 (繁体, 澳门)
    63. zh-TW 中文 (繁体, 台湾)     对应 cmn-Hant-TW 普通话 (繁体, 台湾)
    64. ```
    65.  
    66. ### charset 字符集合
    67.  
    68. 一般情况下统一使用 “UTF-8” 编码
    69.  
    70. ```
    71. <meta charset="UTF-8">
    72. ```
    73.  
    74. 由于历史原因，有些业务可能会使用 “GBK” 编码
    75.  
    76. ```
    77. <meta charset="GBK">
    78. ```
    79.  
    80. 请尽量统一写成标准的 “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。
    81.  
    82. ### 书写风格
    83. #### HTML代码大小写
    84.  
    85. HTML标签名、类名、标签属性和大部分属性值统一用小写
    86.  
    87. *推荐：*
    88.  
    89. ```
    90. <div class="demo"></div>
    91. ```
    92.  
    93. *不推荐：*
    94.  
    95. ```
    96. <div class="DEMO"></div>
    97. 	
    98. <DIV CLASS="DEMO"></DIV>
    99. ```
    100. ### 类型属性
    101.  
    102. 不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
    103.  
    104. *推荐：*
    105.  
    106. ```
    107. <link rel="stylesheet" href="" >
    108. <script src=""></script>
    109. ```
    110.  
    111. *不推荐：*
    112.  
    113. ```
    114. <link rel="stylesheet" type="text/css" href="" >
    115. <script type="text/javascript" src="" ></script>
    116. ```
    117.  
    118. ### 元素属性
    119.  
    120. - 元素属性值使用双引号语法
    121. - 元素属性值可以写上的都写上
    122.  
    123. *推荐：*
    124.  
    125. ```
    126. <input type="text">
    127. <input type="radio" name="name" checked="checked" >
    128. ```
    129.  
    130. *不推荐：*
    131.  
    132. ```
    133. <input type=text>	
    134. <input type='text'>
    135. <input type="radio" name="name" checked >
    136. ```
    137. ### 特殊字符引用
    138. 文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
    139.  
    140. 在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
    141.  
    142. *推荐：*
    143.  
    144. ```
    145. <a href="#">more&gt;&gt;</a>
    146. ```
    147.  
    148. *不推荐：*
    149.  
    150. ```
    151. <a href="#">more>>
    152. ```
    153.  
    154. ### 代码缩进
    155.  
    156. 统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
    157.  
    158. ```
    159. <div class="jdc">
    160.     <a href="#"></a>
    161. </div>
    162. ```
    163. ### 代码嵌套
    164.  
    165. 元素嵌套规范，每个块状元素独立一行，内联元素可选
    166.  
    167. *推荐：*
    168.  
    169. ```
    170. <div>
    171.     <h1></h1>
    172.     <p></p>
    173. </div>	
    174. <p><span></span><span></span></p>
    175. ```
    176.  
    177. *不推荐：*
    178.  
    179. ```
    180. <div>
    181.     <h1></h1><p></p>
    182. </div>	
    183. <p> 
    184.     <span></span>
    185.     <span></span>
    186. </p>
    187. ```
    188.  
    189. 段落元素与标题元素只能嵌套内联元素
    190.  
    191. *推荐：*
    192.  
    193. ```
    194. <h1><span></span></h1>
    195. <p><span></span><span></span></p>
    196. ```
    197.  
    198. *不推荐：*
    199.  
    200. ```
    201. <h1><div></div></h1>
    202. <p><div></div><div></div></p>
    203. ```
    204. ## 3. 图片规范
    205.  
    206. ### 内容图
    207.  
    208. 内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
    209.  
    210. - 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
    211. - 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
    212. - **PC平台单张的图片的大小不应大于 200KB。**
    213.  
    214. ### 背景图
    215.  
    216. 背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
    217.  
    218. - PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
    219. - 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
    220. - 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
    221. - 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
    222. - 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式
    223.  
    224. ## 4. CSS规范
    225.  
    226. ### 代码格式化
    227.  
    228. 样式书写一般有两种：一种是紧凑格式 (Compact)
    229.  
    230. ```
    231. .jdc{ display: block;width: 50px;}
    232. ```
    233.  
    234. 一种是展开格式（Expanded）
    235.  
    236. ```
    237. .jdc {
    238.     display: block;
    239.     width: 50px;
    240. }
    241. ```
    242.  
    243. **团队约定**
    244.  
    245. 统一使用展开格式书写样式
    246.  
    247. ### 代码大小写
    248.  
    249. 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
    250.  
    251. ```
    252. /* 推荐 */
    253. .jdc{
    254. 	display:block;
    255. }
    256. 	
    257. /* 不推荐 */
    258. .JDC{
    259. 	DISPLAY:BLOCK;
    260. }
    261. ```
    262.  
    263. ### 选择器
    264.  
    265. - 尽量少用通用选择器 `*`
    266. - 不使用 ID 选择器
    267. - 不使用无具体语义定义的标签选择器
    268.  
    269. ```css
    270. /* 推荐 */
    271. .jdc {}
    272. .jdc li {}
    273. .jdc li p{}
    274.  
    275. /* 不推荐 */
    276. *{}
    277. #jdc {}
    278. .jdc div{}
    279. ```
    280.  
    281. ### 代码缩进
    282.  
    283. 统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
    284.  
    285. ```
    286. .jdc {
    287.     width: 100%;
    288.     height: 100%;
    289. }
    290. ```
    291.  
    292. ### 分号
    293.  
    294. 每个属性声明末尾都要加分号；
    295.  
    296. ```
    297. .jdc {
    298.     width: 100%;
    299.     height: 100%;
    300. }
    301. ```
    302.  
    303. ### 代码易读性
    304.  
    305. 左括号与类名之间一个空格，冒号与属性值之间一个空格
    306.  
    307. *推荐：*
    308.  
    309. ```
    310. .jdc { 
    311.     width: 100%; 
    312. }
    313. ```
    314.  
    315. *不推荐：*
    316.  
    317. ```
    318. .jdc{ 
    319.     width:100%;
    320. }
    321. ```
    322.  
    323. 逗号分隔的取值，逗号之后一个空格
    324.  
    325. *推荐：*
    326.  
    327. ```
    328. .jdc {
    329.     box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
    330. }
    331. ```
    332.  
    333. *不推荐：*
    334.  
    335. ```
    336. .jdc {
    337.     box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
    338. }
    339. ```
    340.  
    341. 为单个css选择器或新申明开启新行
    342.  
    343. *推荐：*
    344.  
    345. ```css
    346. .jdc, 
    347. .jdc_logo, 
    348. .jdc_hd {
    349.     color: #ff0;
    350. }
    351. .nav{
    352.     color: #fff;
    353. }
    354. ```
    355.  
    356. *不推荐：*
    357.  
    358. ```css
    359. .jdc,jdc_logo,.jdc_hd {
    360.     color: #ff0;
    361. }.nav{
    362.     color: #fff;
    363. }
    364. ```
    365.  
    366. 颜色值 `rgb()` `rgba()` `hsl()` `hsla()` `rect()` 中不需有空格，且取值不要带有不必要的 0
    367.  
    368. *推荐：*
    369.  
    370. ```
    371. .jdc {
    372.     color: rgba(255,255,255,.5);
    373. }
    374. ```
    375.  
    376. *不推荐：*
    377.  
    378. ```
    379. .jdc {
    380.     color: rgba( 255, 255, 255, 0.5 );
    381. }
    382. ```
    383.  
    384. 属性值十六进制数值能用简写的尽量用简写
    385.  
    386. *推荐：*
    387.  
    388. ```
    389. .jdc {
    390.     color: #fff;
    391. }
    392. ```
    393.  
    394. *不推荐：*
    395.  
    396. ```css
    397. .jdc {
    398.     color: #ffffff;
    399. }
    400. ```
    401.  
    402. 不要为 `0` 指明单位
    403.  
    404. *推荐：*
    405.  
    406. ```css
    407. .jdc {
    408.     margin: 0 10px;
    409. }
    410. ```
    411.  
    412. *不推荐：*
    413.  
    414. ```css
    415. .jdc {
    416.     margin: 0px 10px;
    417. }
    418. ```
    419.  
    420. ### 属性值引号
    421.  
    422. css属性值需要用到引号时，统一使用单引号
    423.  
    424. ```css
    425. /* 推荐 */
    426. .jdc { 
    427. 	font-family: 'Hiragino Sans GB';
    428. }
    429.  
    430. /* 不推荐 */
    431. .jdc { 
    432. 	font-family: "Hiragino Sans GB";
    433. }
    434. ```
    435.  
    436. ### 属性书写顺序
    437.  
    438. 建议遵循以下顺序：
    439.  
    440. 1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
    441. 2. 自身属性：width / height / margin / padding / border / background
    442. 3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
    443. 4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
    444.  
    445. ```css
    446. .jdc {
    447.     display: block;
    448.     position: relative;
    449.     float: left;
    450.     width: 100px;
    451.     height: 100px;
    452.     margin: 0 10px;
    453.     padding: 20px 0;
    454.     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    455.     color: #333;
    456.     background: rgba(0,0,0,.5);
    457.     -webkit-border-radius: 10px;
    458.     -moz-border-radius: 10px;
    459.     -o-border-radius: 10px;
    460.     -ms-border-radius: 10px;
    461.     border-radius: 10px;
    462. }
    463. ```
    464.  
    465. [mozilla官方属性顺序推荐](https://www.mozilla.org/css/base/content.css)
    466.  
    467. ## 命名规范
    468. 由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。
    469.  
    470. ### 目录命名
    471. * 项目文件夹：shoping
    472. * 样式文件夹：css
    473. * 脚本文件夹：js
    474. * 样式类图片文件夹：img
    475. * 产品类图片文件夹： upload
    476. * 字体类文件夹： fonts
    477.  
    478. ### ClassName命名
    479. ClassName的命名应该尽量精短、明确，必须以**字母开头命名**，且**全部字母为小写**，单词之间**统一使用下划线** “_” 连接
    480.  
    481. .nav_top
    482.  
    483. #### 常用命名推荐
    484.  
    485. **注意**：ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此
    486.  
    487. ```
    488. <div class="ad"></div>
    489. ```
    490.  
    491. 这种广告的英文或拼音类名不应该出现
    492.  
    493. 另外，**敏感不和谐字眼**也不应该出现，如：
    494.  
    495. ```
    496. <div class="fuck"></div>
    497. <div class="jer"></div>
    498. <div class="sm"></div>
    499. <div class="gcd"></div> 
    500. <div class="ass"></div> 
    501. <div class="KMT"></div> 
    502. ...
    503. ```
    504.  
    505. | ClassName              | 含义                   |
    506. | ---------------------- | -------------------- |
    507. | about                  | 关于                   |
    508. | account                | 账户                   |
    509. | arrow                  | 箭头图标                 |
    510. | article                | 文章                   |
    511. | aside                  | 边栏                   |
    512. | audio                  | 音频                   |
    513. | avatar                 | 头像                   |
    514. | bg,background          | 背景                   |
    515. | bar                    | 栏（工具类）               |
    516. | branding               | 品牌化                  |
    517. | crumb,breadcrumbs      | 面包屑                  |
    518. | btn,button             | 按钮                   |
    519. | caption                | 标题，说明                |
    520. | category               | 分类                   |
    521. | chart                  | 图表                   |
    522. | clearfix               | 清除浮动                 |
    523. | close                  | 关闭                   |
    524. | col,column             | 列                    |
    525. | comment                | 评论                   |
    526. | community              | 社区                   |
    527. | container              | 容器                   |
    528. | content                | 内容                   |
    529. | copyright              | 版权                   |
    530. | current                | 当前态，选中态              |
    531. | default                | 默认                   |
    532. | description            | 描述                   |
    533. | details                | 细节                   |
    534. | disabled               | 不可用                  |
    535. | entry                  | 文章，博文                |
    536. | error                  | 错误                   |
    537. | even                   | 偶数，常用于多行列表或表格中       |
    538. | fail                   | 失败（提示）               |
    539. | feature                | 专题                   |
    540. | fewer                  | 收起                   |
    541. | field                  | 用于表单的输入区域            |
    542. | figure                 | 图                    |
    543. | filter                 | 筛选                   |
    544. | first                  | 第一个，常用于列表中           |
    545. | footer                 | 页脚                   |
    546. | forum                  | 论坛                   |
    547. | gallery                | 画廊                   |
    548. | group                  | 模块，清除浮动              |
    549. | header                 | 页头                   |
    550. | help                   | 帮助                   |
    551. | hide                   | 隐藏                   |
    552. | hightlight             | 高亮                   |
    553. | home                   | 主页                   |
    554. | icon                   | 图标                   |
    555. | info,information       | 信息                   |
    556. | last                   | 最后一个，常用于列表中          |
    557. | links                  | 链接                   |
    558. | login                  | 登录                   |
    559. | logout                 | 退出                   |
    560. | logo                   | 标志                   |
    561. | main                   | 主体                   |
    562. | menu                   | 菜单                   |
    563. | meta                   | 作者、更新时间等信息栏，一般位于标题之下 |
    564. | module                 | 模块                   |
    565. | more                   | 更多（展开）               |
    566. | msg,message            | 消息                   |
    567. | nav,navigation         | 导航                   |
    568. | next                   | 下一页                  |
    569. | nub                    | 小块                   |
    570. | odd                    | 奇数，常用于多行列表或表格中       |
    571. | off                    | 鼠标离开                 |
    572. | on                     | 鼠标移过                 |
    573. | output                 | 输出                   |
    574. | pagination             | 分页                   |
    575. | pop,popup              | 弹窗                   |
    576. | preview                | 预览                   |
    577. | previous               | 上一页                  |
    578. | primary                | 主要                   |
    579. | progress               | 进度条                  |
    580. | promotion              | 促销                   |
    581. | rcommd,recommendations | 推荐                   |
    582. | reg,register           | 注册                   |
    583. | save                   | 保存                   |
    584. | search                 | 搜索                   |
    585. | secondary              | 次要                   |
    586. | section                | 区块                   |
    587. | selected               | 已选                   |
    588. | share                  | 分享                   |
    589. | show                   | 显示                   |
    590. | sidebar                | 边栏，侧栏                |
    591. | slide                  | 幻灯片，图片切换             |
    592. | sort                   | 排序                   |
    593. | sub                    | 次级的，子级的              |
    594. | submit                 | 提交                   |
    595. | subscribe              | 订阅                   |
    596. | subtitle               | 副标题                  |
    597. | success                | 成功（提示）               |
    598. | summary                | 摘要                   |
    599. | tab                    | 标签页                  |
    600. | table                  | 表格                   |
    601. | txt,text               | 文本                   |
    602. | thumbnail              | 缩略图                  |
    603. | time                   | 时间                   |
    604. | tips                   | 提示                   |
    605. | title                  | 标题                   |
    606. | video                  | 视频                   |
    607. | wrap                   | 容器，包，一般用于最外层         |
    608. | wrapper                | 容器，包，一般用于最外层         |
    609.

    1. 需要创建如下文件夹：

    2. 需要创建如下文件：

     有些网站初始化的不太提倡 * { 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

    3. 模块化开发

    所谓的模块化：将一个项目按照功能划分， 一个功能一个模块，互不影响 模块化开发具有重复使用、更换方便等优势

    有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构 和样式单独作为一个模块，然后重复使用

    这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式

    模块化开发具有重复使用、修改方便等优点

     common.css 公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。

     网站 favicon 图标

    favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。 目前主要的浏览器都支持 favicon.ico 图标。

     

    一、制作favicon图标

    1. 把品优购图标切成 png 图片。

    2. 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

    二、favicon图标放到网站根目录下

     三、 HTML页面引入favicon图标 

    1. 在html 页面里面的元素之间引入代码。

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

     网站TDK三大标签SEO优化 

    SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索 引擎内自然排名的方式。

    SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

    页面必须有三个标签用来符合 SEO 优化。

    1. title 网站标题

    title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

    建议：网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）

    例如：

    京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

    小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站 

    2. description 网站说明

    简要说明我们网站主要是做什么的。

    我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网 作为…”、“电话：010…”之类语句。

    例如：

    keywords 关键字 

    keywords 是页面关键词，是搜索引擎的关注点之一。

    keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式。

    例如：

    对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备。 

    1. html>
    2. <html lang="zh-CN">
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		
    6. 		<title>品优购商城-正品低价、品质保障、配送及时、轻松购物！title>
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    8. 		    
    9. 		<meta name="description"
    10. 		content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
    11. 		
    12. 		<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
    13. 		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    14. 		
    15. 		<link rel="stylesheet" href="css/base.css">
    16. 		
    17. 		<link rel="stylesheet" href="css/common.css">
    18. 	head>
    19. 	<body>
    20. 		123
    21. 	body>
    22. html>

    前期准备

  • 相关阅读:
    Prometheus 云原生 - 微服务监控报警系统 （Promethus、Grafana、Node_Exporter）部署、简单使用
    Django ORM
    Llama2-Chinese项目：6-模型评测
    android8.1- Show virtual keyboard 默认打开
    让充电器秒供多个快充口，乐得瑞推出1拖2功率分配快充线方案
    致敬最美抗击疫情的逆行者 DIV布局大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载
    动态代理模式
    分支预测机制
    Windows 10 docker 容器添加新端口映射的方法与步骤
    Cpolar+Tipas：在Ubuntu上搭建私人问答网站，为您提供专业的问题解答
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/127347289