我今年27岁，以前做过很多工作，现在自己也在开店，但是不想过自己现在的生活，所以想改变自己。为什么选择学习web前端，因为自己朋友是做这一块的，了解后觉得这个不错，自己也比较有兴趣，但是刚开始选择的时候也有犹豫，害怕自己毕业几年了，年龄也不小了，学习能力跟不上年轻人，对自己没有很大的信心，但是觉得想要改变自己做什么都会有困难，所以坚定了学习的信心。我现在刚刚学习了两周时间，想要把自己的一些学习心得分享一下。
首先我很喜欢这段时间学习的日子，遇到的老师和同学让我觉得每一天都很开心，日子也比以前充实很多，觉得生活都有了意义，我很想在成都这个城市拥有自己的一个小家，现在的每一份努力都让我的梦想更进一步。
第一周的时候，因为我很久没有学习了，所以有点不适应，怕自己跟不上节奏，但是第二周开始，我觉得比第一周状态好了很多，学习的效率也好了很多，所以对自己也越来越有信心了。
了解HTML和CSS
根据w3c（万维网联盟）定义，HTML指的是超文本标记语言（hyper text markup language),它是用来描述网页的一种编程语言，用于定义文档的内容结构。
HTML5在2008年发布草案，2012年形成稳定
HTML5的变化
标签：新增语义化标签和属性，去掉纯展示性标签，doctype、meta,添加canvas、video、audio,本地储存、拖拽。
语法：标记不区分大小写（推荐小写），空标记可以不闭合，属性值可以不添加引导（推荐双引号），属性值中包含true和false的可以省略
DOCTYPE所影响的渲染模式：
Quirks Mode 怪异模式（混杂模式）
Almost Standard Mode 准标准模式
Standard Mode 标准模式（严格模式）
CSS全称cascading style sheets,中文名是层叠样式表，控制布局、元素的渲染，定义HTML文档的样式，CSS是一种表示性语言。
1998年引入CSS，倡导内容与样式的分离
引用CSS
1、外部样式表（外联）：在head标签里通过link标签引入
2、内部样式表（内联）：在head标签里通过style标签书写css代码
3、内嵌（行内）样式表：在开始标记里通过style属性书写css样式
4、导入样式表：@import
就近原则：先行内再内部，最后外部
CSS的注释
/* 内容 */
CSS的书写
选择器{声明块} 声明块{属性名：属性值；}
CSS选择器
1、元素选择器：选择页面所以被选中的元素，嵌套的也会被选中
2、类选择器：.类名{属性名：属性值;},可以有多个类名
取类名不能用纯数字或者数字开头，望名知意，驼峰命名法footerTop,蛇形命名法footer_top,匈牙利命名法footer-top
3、id选择器：#id名{声明块}，只能有一个id名，在页面上id名出现过一次就不能再出现了
4、子级选择器：父元素>子元素{属性名：属性值;},选中对应父元素下的子元素，只能一层一层的选，不能跳过选
head元素又叫做文档头，是html的第一个子元素，包含所有元数据（页面有关的附加信息）,元素内容不会显示在页面上，但它通常包含了其它元素。
空元素
没有元素内容和结束标记
img元素没有元素内容和结束标记，类似于这种元素称之为空元素、自闭合元素
<标记名 属性> <标记名 属性/>
元素的层次结构
一个元素的内容中可以包含其它元素，形成嵌套的层次结构，但是两个元素之间不能相互嵌套
元素之间的关系
1、父子关系
若A元素之间包含B，A是B的父元素，B是A的子元素
2、兄弟关系
若两个元素有同一个父元素，它们互为兄弟关系
3、祖先和后代
若A元素直接或者间接包含B元素，A是B的祖先元素，B是A的后代元素
学习网站
W3C中国
W3Cschool
W3C
语义化概述
HTML发展至今从WEB1.0发展到WEB2.0标准化，一直到今天的 语义化
HTML5以前用div，现在用语义化标签
结构元素
div article header section nav footer aside
文本元素
strong 重要的文本
b 应突出显示的文本
strong在语义上是强调文本的重要性
b语义上意味着在文本上突出的文本
em 强调的文本
i 应区别对待的文本
em在语义上用来在文本上加上强调，设置为斜体
i用来在语义上用一种可选的语音语调来表达文本
h1-h6 一级标题到六级标题
p 段落
blockquote 整段的引用
cite 对参考文献的引用
q 小段文本的引用
abbr 对缩写词的引用
span 跨越多个字符
target属性控制新页面打开的位置
_self默认情况，在当前页面打开
_blank在新窗口打开
<a href="text.html" target="_blank">点击</a>
<a href="text.html" target="_self">点击</a>相对路径
./当前资源
../返回上一级
绝对路径
书写格式
协议://域名/目录
站外资源用绝对路径
站内资源推荐用相对路径，也可以用绝对路径（网站已部署，可省略协议和域名）
实体字符
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | &加nbsp； | |
| < | 小于符号 | &加lt; |
| > | 大于符号 | &加gt; |
| & | 并且符号 | &加amp; |
| © | 版权符号 | &加copy; |
| ® | 注册符号 | &加reg |
| <p>版权©</p> | 上标 | sup |
| <p>版权©</p> | 下标 | sub |
*CSS常见属性
color 设置元素内容的颜色
text-align 设置元素内容对齐方式
font-size 设置元素内容的文字大小
font-weight 设置元素内容的文字粗细
background-color 设置元素的背景颜色
16进制颜色由一个#后跟一个三位数或者六位数组成，数字用0-9以及大小写a-f组成
RGB值
rgb函数，每个值都是从0-255的整数
rgba a代表饱和度
HSL值
表示色环，值表示了一个颜色在色环上的角度
饱和度和亮度值从0-100%表示
长度单位
绝对长度
px 一个像素的具体大小会根据设备的分辨率有所不同
计算机屏幕由很多的小点组成，每一个点就是一个像素
其他尺寸单位，在经过浏览器计算后，都会变成px
相对长度
%在不同的CSS属性中，有不同的含义
em 相对于当前元素的字体大小(px)
rem 相对于根元素的大小
通配符
匹配页面上所以的元素
*{
margin:0;
padding:0;
}后代选择器
祖先元素 后代元素{声明块}
并集选择器
通过逗号把各种元素或者类名选在一起
伪类选择器
父元素>子元素：first-child 父元素>子元素：last-child
a标签配套的伪类选择器
优先顺序 love-hate
:link 访问前 （当href的属性值为空时不生效）
:visited 访问后
:hover 鼠标移入时
:active 访问点击时
元素分类
行类元素：多个元素可以在一行显示，不会自动换行，宽高自动
a img strong b em i cite abbr span q
块级元素:独占一行，会自动换行，宽高可设
h p blockquote
伪类选择器
:nth-child( ) 匹配父元素下的第N个子元素
1、括号里直接写数字
:nth-child( 2) 匹配父元素的第二个儿子
2、括号里写odd或even
odd:奇数
even:偶数
3、括号里写公式 an+b（当a为0的时候b必须有值，当b为0的时候a必须有值）
a、 几n就是几的倍数
b、 2n+1（n从0开始） 2n（n从1开始）
3n 3n+1
4、nth-of-type( ) 匹配父元素中指定类型元素的第二个儿子
声明冲突
属性相同值不同，这就是声明冲突
什么是层叠
层叠是一种机制，用于解决CSS声明冲突
层叠的过程
1、比较优先级
优先级高的会保留
优先级与它的来源和重要性有关
属性值后加上 ！important 表示这是一条重要声明
优先级从低到高的顺序
浏览器默认声明
用户的普通声明
作者的普通声明
作者的重要声明
用户的重要声明
2、比较特殊性
| 嵌入 | id | class | 元素 | |
|---|---|---|---|---|
| a | b | c | d | |
| style | 1 | 0 | 0 | 0 |
| id | 0 | 1 | 0 | 0 |
| class、属性、伪类 | 0 | 0 | 1 | 0 |
| 元素、伪元素 | 0 | 0 | 0 | 1 |
| 通配符 | 0 | 0 | 0 | 0 |
| ！important | 最高 | 最高 | 最高 | 最高 |
规则适用范围越大，特殊性越低
适用范围越小，特殊性越高
3、比较源次序
代码顺序，就近原则
源次序低的被淘汰
什么是继承
子元素会自动拥有父元素的一些CSS属性
可被继承的属性：color font-size font-weight text-align
不可被继承的属性： background-color
继承具有传递性
强制继承也叫做显式继承，将CSS属性值设置为inherit
这样做的原因是：为了继承有些不可继承的属性，为了继承已被声明过的属性
属性值计算过程
无属性值（1、确定声明值 2、层叠冲突 3、使用继承 4、使用默认值）每个属性都有值
2305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
