前端101

0 前端概览

前端 html / css / js / resource / ….
html 描述了网页的骨架/结构
css 描述了网页的表现形式/模样
js 给网页更多的可能, 动态操作dom/AJAX请求/改变样式/动画/…

前端历史

1 HTML基础

HTML的发展历史
参考链接

1.1 HTML是什么

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)

HTML 使用标记标签来描述网页

1.2 HTML基本结构

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="theme.css" />
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

保存为index.html，然后用浏览器打开这个文件就可以看到你写的html文件的展示效果

HTML中就是使用标签来描述网页的结构,如内容这是一个表示网页段落的标签。

标签需要闭合,有的标签需要开始标签与结束标签，如内容 而有的标签是自闭合的, 如 

lab:
打开index.html观察效果
DOCTYPE html的作用？

1.3 常用的标签

<p></p>
<h1></h1>
<a></a>
<br/>
<div></div>
<input/>
<img/>

1.4 标签的属性

1.4.1 属性是什么

1	<img src="xxxxx"/>

标签可以用于属性，用来描述标签的性质
比如上面的src属性可以用来表示img标签中显示图片的地址

1.4.2 一些例子

1
2
3

<div style="background:black;width:100px">
    hello world
</div>

style属性描述了div标签的表现形式，通俗的说就是描述了div标签在页面中张什么样子。可以试着改变100这个值为其他东西，比如600，或者更改black为red。观察效果如何。这将与我们之后提到的css有关

1.4.3 class/id

你可以通过给标签添加class属性给你的标签分组
你可以通过给标签添加id属性给你的标签加唯一的身份标识
有什么用呢？
针对某些特定的标签做一些事情的时候

举例

<!DOCTYPE html>
<html>
    <head>
    <style>
        .red {
        color:red;
        }
        .green {
        color:green;
        }
        #yellow {
        color:yellow;
        }
    </style>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p class="red">我的第1个段落。</p>
        <p class="green">我的第2个段落。</p>
        <p class="red">我的第3个段落。</p>
        <p class="green">我的第4个段落。</p>
        <p class="red">我的第5个段落。</p>
        <p id="yellow">我的第6个段落。</p>
    </body>
</html>

lab:
打开classId.html
请观察这些标签的效果，试着做一些改变看看会发生什么

1.4.4 自定义属性

你还可以自定义属性

1
2
3

<div data-blah="blah">
    hello world
</div>

这样你可以添加自己对标签的一些额外的描述

1.5 HTML注释

1	<!-- 在此处写注释 -->

example

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <!-- <p>我的第一个段落。</p>-->
    </body>
</html>

lab:
打开comment.html观察效果
观察上述代码的结果

1.6 HTML链接

1.6.1 认识`<a></a>`标签

1	<a href="www.baidu.com">Link text</a>

lab:
试着在之前的a.html点击这个链接，观察发生了什么

1.6.2 页面内跳转

<!DOCTYPE html>
<html>
    <head>
    <style>
        p {
        height:200px;
        }
    </style>
    </head>
    <body>
        <a href="#7th">go to 7th p</a>
        <a href="#8th">go to 8th p</a>
        <h1>我的第一个标题</h1>
        <p>我的第1个段落。</p>
        <p>我的第2个段落。</p>
        <p>我的第3个段落。</p>
        <p>我的第4个段落。</p>
        <p>我的第5个段落。</p>
        <p>我的第6个段落。</p>
        <a name="7th">我的第7个段落。</a>
        <p id="8th">我的第8个段落。</p>
    </body>
</html>

lab:
打开anchor.html观察效果

1.7 HTML的头部

常用的头部标签

<title> 页面title</title> 
<meta> 设置页面的元数据 比如使用的编码
<link>
<script></script>

HTML head
note:
关注链接中的相关链接部分

1.8 更多标签->

w3cschool
MDN
请关注表单控件/表格

1.10 行内元素和块级元素

参考链接
Note：
关注常见的行内元素/块级元素
关注行内元素与块级元素的区别
lab:
打开blockInline.html观察效果
尝试给span元素增加高度设置

1.11 Chrome开发者工具的简单用法

2 css基础

有了html你可以很好表达你的页面中需要有什么，你可以说我的页面里需要有一个我的自拍照。
这很妙，可是你无法很好的表达你的页面中的元素应该长什么样子，比如你的照片多大，放在哪里，加个滤镜？
又比如这段文字的大小，颜色应该是什么样的？
其实我们在这之前就已经接触到了css(style属性/style标签)
但我们需要一个更好的表达我们页面样式的方式来做到更好的复用性/与我们的html分离
2.1 css是什么
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

2.2 css基础语法

selectorlist {
  property: value;
  [more property:value; pairs]
}

strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}

2.3 css选择器

如何写selectorlist
选择器
Note:
关注

简单选择器(元素/class/id选择)
属性选择器
伪类和伪元素
组合器

2.4 css伪类

伪类

2.5 css伪元素

伪类

2.4 css注释

/**/

.exciting-text::after {
/*     content: "<- 让人兴兴兴奋!";  */
    color: green;
  }

2.5 css优先级

继承和优先级
优先级取决于
1 重要性（Importance）！important优先
2 专用性（Specificity）详细的优先
3 源代码次序（Source order）后面的战胜之前的

继承规则决定
后代元素是否继承祖先元素的某些属性值

2.6 盒模型

盒模型
Note:
content（页面的主要内容）
padding (分隔页面与边框的距离)
border(边框大小)
margin (分离与其他元素)
关注 box-sizing
box-sizing

2.7 css布局(position/flex/grid)

兼容性 position > flex > grid
简易度 grid = flex > position

2.7.1 position

position (MDN)
Note:

position:static/relative/absoulte/fixed/sticky
注意absoulte定位

If there is no such parent, it will default all the way back up to the \ element itself meaning it will be placed relatively to the page itself.
注意文档流的概念

lab:
打开position文件夹下的html文件观察效果

2.7.2 flex

flex (css-tricks的一篇文章)
css-trick有许多比较好的css文章
Note

flex-basis(在其他元素分配剩余空间之前设定默认尺寸)

2.7.3 grid(补充)

grid (css-tricks的一篇文章)

2.7.4 float定位(补充)

lab:
打开 float.html查看效果

2.7.5 高度塌缩(补充)

高度塌缩问题

2.7.6 position 和flex冲突吗(补充)

position 和flex冲突吗

2.8 css prefix

2.8.1 为什么需要前缀？

参考链接

试验一些还未成为标准的的CSS属性——也许永远不会成为标准
对新出现的标准的CSS3属性特征做实验性的实现
对CSS3中一些新属性做等效语义的个性实现

Android: -webkit-
Chrome: -webkit-
Safari: -webkit-
iOS: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
Opera: -o-

2.8.2 如何加前缀？

autoprefix工具

lab:
打开prefix.css并将其中内容复制到autoprefix工具中查看结果

2.9 css预处理(stylus/sass/less…)

预处理器的好处以及简单的对比
 stylus如何使用？