2020 July 29 HTML与CSS

项目模仿

项目经验总结

  1. 项目结构
    1. 首页文件：index.html
      1. 一个网站总有一个首页，输入网址跳转到的第一个页面
    2. 新建css/fonts/images/js 文件夹目录
  2. 网站的结构
    1. 头部（header）
      1. LOGO、导航、搜索框、登录注册、Slogan
    2. 内容（main）
      1. 核心内容、产品内容
    3. 尾部（footer）
      1. 有情连接、网站备案、版权信息、其他
  3. 初始化css文件
    1. 新建一个reset.css文件在css文件夹中
      1. 用于设置CSS Reset
      2. 对浏览器的一些默认样式进行重置
      3. 百度搜索CSS Rest,可以查到很多网站的reset
    2. 新建一个style.css文件在css文件夹中
      1. 编写页面样式
  4. 常见开发经验

    1. 不用padding-left、right，用固定宽度 pic

      1. 父元素距离左右内容都有一个间距，那么是不是用的padding-left、right呢？
      2. 不是，内部再封装一个子元素，并且将子元素宽度固定g-weight
      3. 效果：
        1. 当用户拉伸<g-weight,会覆盖，防止内部自动伸缩挤压变形
        2. 当用户拉伸>g-weight,内容居中显示

    2. 没有设置宽度的盒子，设置了padding不会撑开盒子

       //不会撑开盒子course-bd
 .course-bd {
     padding: 0 15px;
 }
  5. CSS代码规范
    1. 省略小于1的小数前面的0（例如.5 代替 0.5）
    2. 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如box-shadow）
    3. 不要在 rgb()、rgba()值的内部的逗号后面插入空格（这样利于从多个属性值中区分多个颜色值）
      1. 举例：rgba(0,0,0,.2);
    4. 并集选择器，建议每个每个选择器独立一行
    5. 样式的建议编写顺序：定位、盒子、文本、其他
      1. 定位布局: display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
      2. 盒子模型：width / height / margin / padding / border / background
      3. 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
      4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient … 定位、盒子模型、文字、其他
       .jdc {
     //定位布局
     display: block;
     position: relative;
     float: left;
     //盒子模型
     width: 100px;
     height: 100px;
     margin: 0 10px;
     padding: 20px 0;
            
     //文本
     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
     color: #333;
     //CSS3
     //rgba透明是CSS3属性支持
     background: rgba(0,0,0,.5);
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     -ms-border-radius: 10px;
     border-radius: 10px;
 }

标签的使用经验

  1. h标签的使用
    1. 为何有些地方一定要用h标签？
    2. 把网页看成是一篇文章，因此必须有一级标题、二级标题。。。。
    3. 目的是为了让搜索引擎便于搜索

    4. 注意，如果有些标题仅仅是一张图片，那也要用h标签，然后标签中的文字隐藏掉

       <!-- 输入“网易严选”目的是为了让搜索引擎搜索到，
 然后把a标签font-size属性设置为0隐藏显示 -->
 <h1 class="logo cmp"><a href="#">网易严选</a></h1>
    5. 用官方工具查看一个网页的文章标题结构
      1. 地址:https://validator.w3.org/
      2. 里面有认证选择的项目
        1. Validate by RUL： 验证远程网页
        2. Validate by File Upload： 验证通过上传文件
        3. Validate by direct input： 验证通过直接输入html代码
      3. 选择Validate by File Upload
        1. 上传自己写的html文件
        2. 点击More Options，选择show Outline
        3. 点击check
        4. 然后再次勾选how Outline
        5. 再次次上传html文件
        6. 点击check即可
        7. 展示出当前网页的所有标题结构

        pic

      4. 总结：一遍网页也要当做一片文章一样来排版，这样就能够分清楚那些地方使用h标签了
  2. a标签的使用
    1. 如何判断一个网页哪些地方使用a标签？
      1. 用鼠标放上去，显示小手，可以点击，一般是就是a标签
    2. 经常使用
      1. a标签包裹一张img标签，特点：鼠标挪到图片上显示小手
      2. 列表ul>li里面包含a标签

布局经验

布局流程

  1. 必须确定页面的版心（可视区）宽度，我们测量可得知。
    1. 就是一个网页一定有一个可视区固定宽度，无论窗口怎样拖放，宽度固定不变，这个宽度展示的区域叫版心。

    2. 比如一个网页的版心：每个版心都要水平居中对齐

       .w {
     width: 1200px;
     margin: auto;
 }
  2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成
  3. 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
  4. 然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

多个行内标签水平一定间距排列并且在父元素居中问题

  1. 一般情况下元素水平排布布局，用float布局，但是float只能左、右浮动，然后设置元素之间的margin，不能在父元素居中
    1. 标准流行内标签可以实现，但是不能解决行内标签默认间距问题
      1. 给父元素设置text-align;center即可
      2. 但是行内标签的默认间距，怎么解决呢？

    2. 除了之前讲过的办法，还可以通过js来实现

       <!-- 引入jQuery -->
 <script src="js/jquery-3.2.1.min.js"></script>
 <!-- 自定义函数 -->
 <script>
     function removeSpace(){
         for(var i in arguments){
             $(arguments[i]).contents().filter(function(){
                 return this.nodeType === 3
             }).remove();
         }
     };
     $(function(){
         // 传入指向父元素的选择器
         removeSpace('.slider .page-list', '.product .attrs');
     });
 </script>

块级元素（div）的子元素设置margin-right超出父元素问题

  1. 场景

     span {
     display: inline-block;
 }
    
 <div class="div1">
     <div class="div2">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
     </div>
 </div>
    1. div1宽度为1090，div2宽度填充div1
    2. 内部有4个子元素span，每个宽度为265
    3. 则剩余宽度为1090-265*4 = 30
    4. 如果此时给每个子元素设置margin-right:10px;，则子元素总宽度为 （265+10）*4 = 1100>1090
    5. 那么第4个子元素就会换到下一行显示了
    6. 那么如何才能让第4个子元素不换行显示呢？
  2. 解决办法

    1. 方法1：给第4个子元素设置一个class，然后单独设置

       .last {
     margin-right:0;
 }

    2. 方法2：（重要!!！）

      1. 给div2设置margin-right:-10px;
      2. 这样等于给div2加宽了10px
      3. 因为标准流布局公式

        1. 标准流块级、非替换元素

           包含块宽度= margin-left + padding-left +width + padding-right + margin-right
  3. 计算包含块的宽度公式

    1. 标准流块级、非替换元素

       包含块宽度= margin-left +border-left-width + padding-left +width + padding-right + border-right-width + margin-right

    2. 绝对定位的非替换元素

       包含块宽度= left + margin-left +border-left-width + padding-left +width + padding-right + border-right-width + margin-right + right

浏览器私有前缀

  1. 有时候可能会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、mso-、-moz-、-webkit-

     -o-animation-duration: 2s;
 mso-background:red;
 -webkit-background-clip: border-box;
 -moz-background-size: contain;
 -ms-word-wrap: normal;
  2. 上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用
    1. -o-、-xv-：Opera等
    2. -ms-、mso-：IE等
    3. -moz-：Firefox等
    4. -webkit-：Safari、Chrome等
  3. 官方文档给出的专业术语叫做：vendor-specific extensions（供应商特定扩展）
  4. 为何会有浏览器私有前缀？
    1. W3C提出的某项新技术（比如columns），如果想要成为W3C正式标准，需要经过复杂、漫长的审查流程
    2. 有些浏览器供应商不愿等正式标准发布，觉得columns技术已成熟，就会在浏览器中添加支持columns
    3. 为了防止W3C以后发布正式标准时变更名字，就加上一个浏览器私有前缀，比如-moz-columns
    4. 等到W3C发布正式标准，再让新版本浏览器直接支持使用columns（确定正式名字是columns），不用再加上浏览器私有前缀
    5. 最终结果
      1. 旧版本浏览器使用-moz- columns，新版本浏览器使用columns。新旧版本浏览器都能够支持这个新技术
    6. 所以说，浏览器私有前缀是是浏览器对新CSS属性的一种提前支持

  5. 浏览器的1x/2x图片适配

     -moz-image-set(url("1x图片路径") 1x,url("2x图片路径") 2x);
 -ms-image-set(url("1x图片路径") 1x,url("2x图片路径") 2x)
 -o-image-set(url("1x图片路径") 1x,url("2x图片路径") 2x)
 -webkit-image-set(url("1x图片路径") 1x,url("2x图片路径") 2x)
    1. 浏览器会根据当前PC屏幕的像素来自动选择用1x、2x图片

网站优化三大标签

  1. SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！
  2. 常见的搜索引擎，比如百度，谷歌，雅虎，搜狗等等..
  3. SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。
  4. 我们现在阶段主要进行站内优化

网页title 标题

  1. title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
  2. 建议：首页标题：网站名（产品名）- 网站的介绍
  3. 例如：
    1. 品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
    2. 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
  4. 标题长度有要求
    1. 谷歌：小于35个中文
    2. 百度：小于28个中文

Description 网站说明

  1. 对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。
  2. 我们提倡，Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句。

  3. 品优购网：

     <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
  4. 注意点：
    1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击
    2. 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。
    3. 补充在 title 和 keywords 中未能充分表述的说明.
    4. 用英文逗号 关键词1,关键词2
     <meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX、小米Note 2，红米手机系列红米Note 4、红米4，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />

Keywords 关键字

  1. Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。

  2. 品优购网：

     <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />

  3. 小米网

     <meta name="keywords" content="小米,小米6,红米Note4,小米MIX,小米商城" />

总结

  1. 我们的网页要做的优秀，符合搜索引擎的要求，才可以让搜索引擎优先显示我们的网页。所以我们的网站要做很多的优化， 其中就有这三大标签。
  2. 一般情况下，三大标签里面的优化词，都是专门的优化人员写的，我们大概了解一下规范就可以了。
  3. 我们的主要任务是，能写出这三大标签， 然后把优化人员给我们的内容，添加到里面

字体图标

  1. 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的”http请求”，这都会大大降低网页的性能
  2. 更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。
  3. 字体图标优点
    1. 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
    2. 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
    3. 本身体积更小，但携带的信息并没有削减。
    4. 几乎支持所有的浏览器
    5. 移动端设备必备
  4. 字体图标使用流程
    1. UI人员设计字体图标（svg格式）
    2. 前端人员上传生成兼容性字体文件包
    3. 前端人员下载兼容性文件包到本地
    4. 把字体文件包引入到HTML页面中

UI人员设计字体图标

  1. 在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，之后保存为svg格式，然后给我们前端人员
  2. 如果图标是大众的，网上本来就有的，可以直接执行第3步

上传生成字体包

  1. UI设计人员给我们svg文件，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。
  2. 推荐网站：
    1. icomoon字库 （最全，常用）
      1. IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
    2. 阿里icon font字库
      1. 这个是阿里巴巴M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。

下载兼容字体包（这里使用的是icomoon）

  1. 上面2个网站上既可以将自己自作的svg上传生成字体图标，然后下载，也可以直接搜索然后下载。
  2. 下载后的文件夹解压后打开内部有个fonts文件夹
  3. 注意：下载的压缩包要保存，以后还会用到

字体引入到HTML

  1. 首先把 fonts文件夹放入我们项目根目录下 。
  2. html标签内里面添加结构
  3. 在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)
  4. 给盒子使用字体

  5. 代码举例：

     <!DOCTYPE html>
 <!--<html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         //定义字体
         @font-face {
             /*1. 这个字体名称要注意 icomoon*/
             font-family: 'icomoon';
             /*2. 一定要注意路径的问题*/
             src:  url('fonts/icomoon.eot?7kkyc2');
             src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
             url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
             url('fonts/icomoon.woff?7kkyc2') format('woff'),
             url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
             font-weight: normal;
             font-style: normal;
         }
         span,
         div,
         strong {
             //使用字体
             font-family: 'icomoon';
             font-size: 50px;
             color: red;
         }
     </style>
 </head>
 <body>
     <!--注意：这个标签中的内容都是在下载的字体demo.html中复制过来的-->
     <span>  </span>
     <div>  </div>
     <strong>  </strong>
 </body>
 </html>-->

追加字体图标

  1. 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做
  2. 把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。
    1. 打开icomoon网站->点击import Icons->选择selection.json上传，然后选择新加入的字体，重新下载替换即可
    2. selection.json就是选中字体的记录

拓展@常见字体格式

  1. 不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
  2. TureType(.ttf)格式
    1. .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
  3. OpenType(.otf)格式
    1. .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
  4. Web Open Font Format(.woff)格式
    1. woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
  5. Embedded Open Type(.eot)格式
    1. .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
  6. SVG(.svg)格式
    1. .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

项目的logo 优化

  1. logo 里面首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
  2. h1里面在放一个连接，可以返回首页的，给连接一个大小和logo的背景图片
  3. 连接里面要放文字（网站名称），为了搜索引擎收录我们。但是文字不要显示出来
    1. 要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法
    2. 直接给font-size: 0; 就看不到文字了， 京东的做法。

  4. 最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了

     <div class="logo">
     <h1>
         <a href="index.html" title="品优购">品优购</a>
     </h1>
 </div>
    
 .header .logo {
     position: absolute;
     left: 0;
     top: 25px;
     width: 175px;
     height: 56px;
     /* background-color: #0f0; */
 }
 .logo a {
     display: block;
     width: 175px;
     height: 56px;
     background: url(../img/logo.png) no-repeat;
     /* 淘宝方法 */
     /* overflow: hidden;
     text-indent: -99px; */
     /* 京东方法 */
     font-size: 0;
 }

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents