初一开源

# 阿里图标

  • 顾名思义就是阿里巴巴开发的图标网站,免费为我们提供大量精美的图标的网站

  • 将图标以字体的形式加载到自己的网站上.

  • 这就是大企业的责任,要为社会提供有价值的东西,所以阿里图标是为中国开发者提供的便利性服务

  • 总结

1.登录阿里巴巴矢量图标库 2,购物(添加到购物车) 3.添加到项目 4.直接下载 5.下载好的文件解压到你的项目中的iconfont文件里面 6.点击.html文件查看演示

阿里图标的强大之处在于我们挑选图标,我们生成项目,生成在线链接,直接用

# 代码复用(组件化)

  • 一行代码可以多次利用,通过添加不同的css类名

    我们之前如果要去浮动或者清除浮动

.father .son{
  float:left;
}
.wrap .content{
  float: left;
}
.wrap .content:after{
  content: "";
  display: block;
  clear:both;
}
<div class="father">
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
</div>	
<div class="wrap">
  <div class="content"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
浮动
	.fl{
		float:left;
	}
	.fr{
		float:right;
	}
/*我们可以写一个浮动的类名,这个类就相当于工具类.
哪个元素需要浮动我就直接在其前面添加这个类名他就拥有了浮动的样式.*/

清除浮动
	.clearfix:after{
    	content:"";
    	display:block;
    	clear:both;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
我们单独去写一个css的样式用于不同html的复用 
例如我们创建一个外部CSS文件引入,里面写的是小米的头部区域
 <link rel="stylesheet" href="topbar.css">
你打开小米商城里别的链接,可以发现这个头部经常会用到.
我们不止可以在这个HTML页面使用,我们在写下一个页面的时候也可以把这个拿来使用.
其实无论是模块化开发还是组件化开发,强调的都是代码的复用性.
可以大幅提高工作效率,减少开发时长.你可以把别人的东西拿来使用,只需自己定义较少的部分.
1
2
3
4
5
6
7

# swiper

轮播图:在有限的空间展示多张图片和文字;

  • **我们看文档(操作手册)**是为了什么?

理解操作规范,思维设计理念

  • 学框架,工具库的意义

  • 帮助我们去高效正确的规范开发工具

  • 合理复制粘贴不是坏事,可以提高我们的效率,

计算机很经典的法则:开源思想 :github

swiper本质上也是一个开源项目:

  • 学习框架的过程
1.合理使用它
2.了解它的思想  vue:mvvm react:mvc
3.研究代码,底层实现(最重要)
4.创新  公司魔改框架
1
2
3
4
  • 假如你下载好了框架

请在package文件夹找生成好的框架代码

  • .css和.min.css的区别
.min.css 压缩版  清除了所有不需要的空格和换行
1
  • 引入顺序
引入框架样式的时候,保证在自己写的样式前面,方便自己的样式覆盖它

引入框架js的时候,需要写在body标签结束之前,保证页面元素加载完成以及被解析
1
2
3

CDN引入

让页面加载的时候在线下载

CDN 资源服务器(缓存) 找最近的服务器去拿资源(重定向)

# html5的定义

狭义:HTML发展到了第五代版本,出现了很多新的功能标签,新的语义化标签

广义:出现了新的开发体系,直播,玩游戏,各种功能,3d

  • HTML5是一个完备的全新的网站开发的解决方案. canvas标签(画布)进行渲染式的开发,
  • 脱离了div盒子的浮动,定位等等.

# 语义化标签:

  • 理论上任何标签的效果都可以用div实现,但是我们肯定是想让网站变得更好遵守语义化的特点.
  • 所谓语义化就是写出这个标签名字我们就知道这个标签的作用和存在的意义,更有利于seo搜索引擎的优化.

语义化标签的优点

  • 比div标签有着更加丰富的含义,方便开发和维护.
  • 搜索引擎能更方便的识别页面的每个部分,
  • 方便其他设备的解析.(如移动设备,盲人设备).

header标签存放网站公共头部分的标签,通常被放置在页面或者页面中某个区块的顶部，包含整个页面或者块级的标题、简介等信息，起到引导与导航的作用。

我们不但可以放置页面或者页面中某个区级的标题，还可以放置搜索表单、logo图片等元素

标签的位置没有太大限制,不一定非得网站顶部,也可以是一个区域的顶部

/*网站头部实例*/
<header>
		<img src="" alt="">
		<h1>小米</h1>
	</header>
1
2
3
4
5

nav元素,表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分.

nav不但可以作为页面独立的导航区域存在，我们还可以在header标签中使用

nav标签还可以显示在侧边栏中,由此可见一个页面可以有多个nav元素.我们可以将主要的,基本的链接组放进nav标签内即可.

/*nav示例*/
<header>
		<img src="" alt="">
		<h1>小米</h1>
		<nav>
			<a href="">小米手机</a>
			<a href="">小米家具</a>
			<a href="">小米家电</a>
		</nav>
	</header>
1
2
3
4
5
6
7
8
9
10

aside标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。

所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。

<div>
		<aside>
			<h2>小米家电的优势</h2>
			<p>优势是.....</p>
		</aside>
	</div>
1
2
3
4
5
6

footer一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式,公司介绍等信息。

<div>	
	<aside>
			<h2>小米家电的优势</h2>
			<p>优势是.....</p>
		</aside>
	</div>
1
2
3
4
5
6

article标签应该使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它,一个article元素包括标题,正文和脚注.

article标签还可以嵌套使用

<article>
    <h1>HTML5学习之语义化标签</h1>
    <p>....正文.....</p>
    <footer>版权所有*伪版必究</footer>
</article>
1
2
3
4
5

section是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段.

<section>
    <h1>前端</h1>
    <p>前端大致包含HTML、CSS和JavaScript三个部分</p>
    <article>
        <h2>HTML<h2>
        <p>内容</p>
    </article>
    <article>
        <h2>CSS<h2>
        <p>样式</p>
    </article>
    <article>
        <h2>JavaScript<h2>
        <p>行为</p>
    </article>
</section>
/*在这个例子中，<section>标签代表一段内容
在这段内容中，HTML、CSS、Javascript是三个完全独立的部分.
因而我们为这三个不同的部分分别使用<article>标签*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

div section article三者的比较：

  • div应用广泛，只要我们想为一个区域定义一个样式或者为其添加JS行为，就可以使用div标签
  • section：包含的内容是一个明确的主题，通常有标题区域.
  • 如果我们的页面中需要一个单独的模块来实现一个单独的功能就用article,其他的时候都用section

image-20200723153503088

← 17-响应式 →