一、图标
1、应用
商品缩略图
网页组件logo
2、获取方式
阿里巴巴矢量图标库:https://www.iconfont.cn/
第一步:登陆账号–>选择任意logo–>点击弹出的购物车logo(可多次选择)–>点击购物车logo–>点击下载代码–>保存文件
如图,我下载后的文件如图所示:
3、应用方式
①为使用unicode中图标
第一步:拷贝项目下面生成的 @font-face
<style>
@font-face {
font-family: 'iconfont';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
url('font/iconfont.woff2') format('woff2'),
url('font/iconfont.woff') format('woff'),
url('font/iconfont.ttf') format('truetype'),
url('font/iconfont.svg#iconfont') format('svg');
}
</style>
第二步:定义使用 iconfont 的样式
<style>
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
第三步:挑选相应图标并获取字体编码,应用于页面
<body>
<span id="icon" class="iconfont"></span>
</body>
如图:
②为使用font class图标
css引用
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="font/iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-icon-test"></span>
③为使用Symbol中图标
第一步:引入项目下面生成的 symbol 代码:
<script src="font/iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行)
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
#ii {
font-size: 200px !important;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<body>
<svg id="ii" class="icon" aria-hidden="true">
<use xlink:href="#icon-icon-test1"></use>
</svg>
</body>
二、iframe框架
作用:将另一个html页面嵌入到当前页面
可以使用iframe标签在一个网页上分成数个模块,每个模块都可以是完整的网页。
<body>
<iframe src="https://www.baidu.com" frameborder="0" width="700" height="500" scrolling="yes"></iframe>
</body>
注意:此时的width和height可以用来设置大小。
三、语义化标签
HTML5赋予网页更好的寓意和结构.方便搜索引擎的SEO处理。
<header></header>
页眉,也可用与块头部
<nav></nav>
导航
<section></section>
页面上的板块
<article></article>
用来在页面中表示一套结构完整且独立的内容部分
<aside></aside>
侧边栏,广告,nav元素组,以及其它类似的内容部分aside的内容应该与artical的内容相关
<footer></footer>
页面的底部或者板块的底部
详见菜鸟教程