17图标icon、iframe与语义化标签

最新推荐文章于 2020-11-19 05:30:57 发布

宠儿呀

最新推荐文章于 2020-11-19 05:30:57 发布

阅读量437

点赞数

分类专栏： html+css笔记文章标签： css3 html5 html css

本文链接：https://blog.csdn.net/qq_46055080/article/details/104638043

版权

html+css笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

一、图标

1、应用

商品缩略图
logo

网页组件logo
logo

2、获取方式

阿里巴巴矢量图标库：https://www.iconfont.cn/

第一步：登陆账号–>选择任意logo–>点击弹出的购物车logo（可多次选择）–>点击购物车logo–>点击下载代码–>保存文件

如图，我下载后的文件如图所示：

icon font

3、应用方式

①为使用unicode中图标

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">&#xe60c;</span>
</body>

如图：
icon

②为使用font class图标

css引用
font class
第一步：引入项目下面生成的 fontclass 代码：

 <link rel="stylesheet" href="font/iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

 <span class="iconfont icon-icon-test"></span>

③为使用Symbol中图标

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>页面的底部或者板块的底部

详见菜鸟教程

宠儿呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
17图标icon、iframe与语义化标签

文章目录一、图标1、应用2、获取方式3、应用方式①为使用unicode中图标②为使用font class图标③为使用Symbol中图标二、iframe框架三、语义化标签一、图标1、应用商品缩略图网页组件logo2、获取方式阿里巴巴矢量图标库：https://www.iconfont.cn/第一步：登陆账号–>选择任意logo–>点击弹出的购物车logo（可多次选择）–...
复制链接

扫一扫

专栏目录