前端学习基础第八天

引入图标字体

字体图标的优点:
体积更小,但携带的信息没有削减。
支持所有的浏览器。
可以随意改变颜色、产生阴影、透明效果等。
移动端设备必备良药。

最常用使用的两种图标字体: icomoon（德国）、icofont （国内）。引入图标字体步骤如下。
第一步：先去官网下载自己需要的图标字体的压缩包,然后进行解压。将其添加至项目src目录下。
第二步:引入图标字体(注意,这个本质是字体,因此占用的存储会比较小,而且还可以方便调大小)。
图解步骤:
第一步:
将下载解压的icomoon文件添加到项目目录下第二步:
用浏览器打开demo.html,出现如下页面:
在这里插入图片描述然后对选中图标字体后面的图案(蓝色的东东)进行复制粘贴至html中即可。
引入图标字体如下代码;

/*先对字体进行声明*/
@font-face {
    font-family: 'icomoon';
    src:  url('../icomoon/fonts/icomoon.eot?90ytl7');
    src:  url('../icomoon/fonts/icomoon.eot?90ytl7#iefix') format('embedded-opentype'),
    url('../icomoon/fonts/icomoon.ttf?90ytl7') format('truetype'),
    url('../icomoon/fonts/icomoon.woff?90ytl7') format('woff'),
    url('../icomoon/fonts/icomoon.svg?90ytl7#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
span{
font-family:"icomoon";
font-size:14px;
}
<body>
<span> </span>  /*span中间的图标字体从下载解压的icomoon文件中的demo.html选择进行复制。*/
</body>

通用设计规范。

注意:line-height 行高会继承,而且行高可以没有单位。
注意:对于块级元素如果需要水平居中,需要指定宽度,不然没有效果。因为块级元素默认宽度就是整行宽度。

{
font-size=12px；
line-height=1.5;  //== line-height=18px;
}

为了跨浏览器兼容做准备,保护有用的浏览器的默认样式而不是完全去掉他们，为大部分HTML元素提供一般化样式.引入一个normalize.css文件。用于初始化网页。

 <link rel="stylesheet" href="../css/normalize.css">

网页设计:
一般对于公共样式,取名为base.css，具体的样式再额外单独命名一个名称,比如index.css等。引入代码如下

 	<link rel="stylesheet" href="../css/jindong.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/base.css">

引入网页标题的小图标的代码如下:

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

版心/浮动样式:

.w{
width:1200px;
margin:0 auto;
}
.fl{
float:left;
}
.fr{
float:right;
}

插入一个logo图片,其中将"京东"两个字隐藏的方式有多种.
使用text-indent:-9999px;结合overflow:hidden;
或者是font-size:0px;将字体大小为0.
快捷键: div>h1>a

 <div class="first">
            <h1>
                <a href="#">京东</a>
            </h1>
        </div>

SEO网站优化三大标签

title,keywords,description。
以小米官网为例。

<title>小米商城 - 小米9、小米MIX 3、Redmi K20，小米电视官方网站</title>
<meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米9、小米MIX 3、小米Play，Redmi 红米系列Redmi K20、Redmi Note 7、Redmi 7A，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />
<meta name="keywords" content="小米,小米9,小米Play,Redmi K20,Redmi Note 7,小米MIX3,小米商城" />

description长度
百度有效字符数为220个（相当于110个汉字）左右，Google有效字符数为240个（相当于120个汉字）左右，都包括标点符号在内。
对title 的要求:
百度：60个字节。
谷歌：70个字节。
搜搜：66个字符。
雅虎：64个字节。
微软：46个字节。
114：45个字符。
搜狗：56个字符。
有道：56个字符。
中搜：52个字符。

练习

自己独立书写完成网页的顶部的书写:以京东首页为例。