[TOC]
开通简书记录一下我在学习前端路上的点点滴滴，有我的笔记，也有过程中所遇到的问题，希望能帮助到有需要的人！这是我的第一篇，可能有点乱，但是我会不断摸索改进的。
第一周笔记主要写了一些关于html基础的知识，一些标签（html5以后添加），还有css的选择器及其权重内容。
1.网页的组成部分
- HTML：是一门标记语言，网页的基本结构
- CSS：是层叠样式表，网页的美化装饰
- JS：javascript，是一门脚本语言，网页的交互效果
2.HTML的梳理
HTML的语法
- 由左右尖括号组成
- 中间是小写的标签名
- 由开始标签和结束标签组成，而且结束标签做一个反斜杠
- 有的标签没有结束标签，这种标签叫做单标签或者自闭和标签，例如
<meta> - 可以用
标签名+tab自动生成一组标签
HTML常用标签
常用的四大标签：p a img h1~h6（h1用在大标题或者网页的logo外层）
-
划分块的标签：
- div 用来划分大结构的标签，独占一行的块级标签
- span 用来划分行内的小模块，不独占一行的行内模块
文本格式化类标签：
斜体标签 em i
变小变大标签 small big
加粗标签 srong b
上标sup 下标sub
删除线 deliframe标签：嵌入外部网站
三大列表：
1.无序列表 ul->li 前面是默认的小黑点
2.有序列表 ol->li 前面是默认的数字
3.定义列表 dl->dt：定义列表的标题 title
->dd：定义列表的描述 description
注：在列表中插入标签只能插在li里边，不能与li并列table单元表格
tr 行 td 列 th 列(标题，加粗居中) caption 表格的标题
border="1" 边框线
cellpadding="10" 单元格的边距，填充
cellspacing="0" 单元格的间距，间距
bgcolor="#6495ed" 背景颜色
align="center" 水平居中
colspan="" 合并单元格的列
rowspan=""合并单元格的行
border-collapse：collapse 去掉单元格默认的塌陷线
table-layout:fixed;width：x； 固定算法表单：input， textarea 多行文本域，select option 下拉框 ，button 点击按钮
input类型及属性
type="text"
type="password"
type="radio"
type="checkbox"
type="button"
type="submit"
type="reset"
type="file"
type="hidden"
name="" 给单选框进行分类，只能选一个
value="" 初始字段
placeholder=""占位符
readonly 规定输入字段为只读（不能修改）
disabled 规定输入字段是禁用的。 被禁用的元素是不可用和不可点击的。 被禁用的元素不会被提交
size=""规定输入字段的尺寸（以字符计）
maxlength=""输入字段允许的最大长度
autofocus属性是布尔属性。 如果设置，则规定当页面加载时<input>元素应该自动获得焦点
required 属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。
- 标签默认的样式(如何去掉默认样式)
1.浏览器自带的间距 * {margin:0;padding:0;}
2.a 标签有默认的下划线 a{text-decoration: none;}
3.h1-h6 默认加粗 h2{font-weight:normal}
4.ul li 有默认小黑点、ol li 有默认的数字 li{list-style: none}
5.em、i 默认变斜 em{font-style: normal}
6.strong、b 默认加粗 strong{font-weight:normal}
3.行内元素span和块级元素div。
它们的区别可从几方面来着手：1.display值；2.是否独占一行；3.排列方式；4.设宽高的情况以及设盒子模型的其他属性；5.不设宽高的情况；6.嵌套情况；7.默认间距是否受空格或换行符的影响
span 行内元素 display：inline
1.不独占一行，在一行显示
2.排列方式：左右水平排列（左右结构）
3.在没有设置宽高的情况下，它的宽高等于本身内容的宽高
4.是否可以设置宽高以及盒子模型的其他属性（padding border margin） 设置宽高不起作用，margin-top/bottom不起作用，但是浏览器可以识别到，padding-top/bottom不起作用
5.嵌套注意: 行内元素不能嵌套块级元素，特殊:a中可以嵌套块级元素
6.默认间距是否受空格或换行符影响: 是div 块级元素 display：block
1.独占一行，不在一行显示
2.排列方式: 上下垂直排列(上下结构)
3.在没有设置宽高的情况下，它的宽高: 宽度 = 父级元素的宽度，高度 = 本身内容的高度
4.是否可以设置宽高以及盒子模型的其他属性:(padding,border,margin):可以设置盒子模型的所有属性
5.嵌套注意: 块级元素可以嵌套行内元素也可以嵌套块级元素，特殊： p标签不能嵌套自己本身； ul，ol 后面紧跟着只能是li,其他的标签只能放在li里面；dl后面紧跟着只能 dt 和 dd
6.默认间距是否受空格或换行符影响: 否行内块元素:img 既有行内元素的特点，又有块级元素的特点 （img、input、textarea）
1.display:inline 在一行显示
2.可以设置宽高和盒子模型的其他属性
3.默认间距是否受空格或换行符影响: 是
注意：去掉行内块元素默认的间距
1.给父元素加一个font-size：0 ，但是会让子元素里的文字消失，手动添加文字大小即可
2.行或行内元素写到一行内，不让出现换行符，一般不采用。
但是有一个问题，IE 8以下的浏览器中，display：inline-block属性不兼容，解决方法：
*display：inline；
*zoom：1；
4.css引入方式
- 行内式：css直接写在开始标签里面（不推荐） style=""
- 内嵌式：css代码从html结构中分离出来
- 外链式：引入一个外部的css文件
<link rel="stylesheet" href="xxx.css"> - 导入式：导入一个外部的css文件
<style>
@important "xxx.css"
</style>
导入式和外链式的区别：
- link和@import虽然都是引入外部的css文件，但是他们是有天差地别的区别的;
- link是html标签，@import完全是css提供的方式，要写在css文件或者style标签中;
- 他们的加载顺序也是有区别的，当一个页面被加载的时候，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载;
- 当使用javascript控制DOM去改变css样式的时候，只能使用link标签，因为@import是不能被DOM控制的;
5.选择器
CSS参考手册这是一个很nice的参考网站
1.元素选择器
- 通配符选择器*（0-1）
- 标签选择器（1）
- 类选择器（10）
- id选择器（100）
2.关系选择器（权重：每个元素选择器权重之和）
- 后代选择器——每个选择器之间用空格隔开
- 子代选择器——每个选择器之间用>隔开
- 相邻兄弟选择器——每个选择器之间用+隔开
- 兄弟选择器——每个选择器之间用~隔开
3.属性选择器
4.伪类选择器
- a标签的四种状态（一定按顺序书写 link（访问前）visited（已访问过） hover（鼠标悬停） active（鼠标被点击））
小方法帮助你记忆：
l ( : link) o v( : visited) e 喜欢
h ( : hover) a ( : active) t e 讨厌 - :not（）过滤（排除）选择器
- 奇偶行
- :first-child——第一个子元素
- :last-child——最后一个子元素
- :nth-child(n)——第几个元素
- :nth-child(2n+1)——奇数行2n+1或odd
- :nth-child(2n)——偶数行2n或even
5.伪元素选择器
- ::before——在前边加一个元素
- ::after——在后边加一个元素
- ::first-letter——设置对象内的第一个字符的样式
- ::first-line——设置对象内的第一行的样式
- ::placeholder——设置对象文字占位符的样式。
- ::selection——设置对象被选择时的样式。
