1. 认识网页
网页有图片、链接、文字等元素组成，我们后面的任务就是要把这部分网页元素用代码写出来
2. 浏览器（显示代码）
浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。Google公司发布了它的首款浏览器Chrome浏览器。
在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
3. Web标准（重点）
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。遵循web标准可以让不同我们写的页面更标准更统一外，还有许多优点Web 标准构成
构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
标准 说明 备注
结构 结构用于对网页元素进行整理和分类，咱们主要学的是HTML。
表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为 行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
理想状态我们的源码： .HTML .css .js
HTML 初识
HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。
htm总结:
html 是超文本标记(标签)语言
我们学习html 主要学习html标签
我们用html标签描述网页元素。 比如 图片标签 、文字标签、链接标签等等
标签有自己的语法规范，所有的html标签都是用 <> 表示的
1.1 HTML骨架标签
html骨架标签
标签名 定义 说明
<html></html> HTML标签 页面中最大的标签，我们成为 根标签
undefined<head></head> 文档的头部 注意在head标签中我们必须要设置的标签是title
<titile></title> 文档的标题 让页面拥有一个属于自己的网页标题
<body></body> 文档的主体 元素包含文档的所有内容，页面内容 基本都是放到body里面的
HTML标签名、类名、标签属性和大部分属性值统一用小写
1.2 HTML元素标签分类
常规元素（双标签）
<标签名> 内容 </标签名> 比如 <body> 我是文字 </body>
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。我们以后接触的基本都是双标签
空元素（单标签）
<标签名 /> 比如 <br />空元素 用单标签来表示， 简单点说，就是里面不需要包含内容， 只有一个开始标签不需要关闭。
1.3 HTML标签关系
主要针对于双标签 的相互关系分为两种： 请大家务必熟悉记住这种标签关系，因为后面我们标签嵌套特别多，很容易弄混他们的关系。1.嵌套关系2.并列关系
2. 代码开发工具（书写代码）
普通青年 Dreamweaver文艺青年 sublime
sublime有非常多的优点， 最开心的就是非常轻量级，打开速度超快，后面更高的功能，后面再接触。
3. 文档类型<!DOCTYPE>
4. 页面语言lang
最常见的2个：
en定义语言为英语
zh-CN定义语言为中文
考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
5. 字符集
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文 包括6763个汉字 GUO BIAO
BIG5 繁体中文 港澳台等用GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则基本包含全世界所有国家需要用到的字符
这句代码非常关键， 是必须要写的代码，否则可能引起乱码的情况。
6. HTML标签的语义化
所谓标签语义化，就是指标签的含义。
根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。
方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
表格
table用于定义一个表格标签。tr标签 用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。
表格属性
表格有部分属性我们不常用，这里重点记住 cellspacing 、 cellpadding。
表头单元格标签th
th 也是一个单元格 只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗
表格标题caption
caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
caption 标签必须紧随 table 标签之后。
这个标签只存在 表格里面才有意义。你是风儿我是沙
合并单元格
5.1 合并单元格2种方式
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
5.2 合并单元格顺序
合并的顺序我们按照 先上 后下 先左 后右 的顺序
跟我们以前学习汉字的书写顺序完全一致。
5.3 合并单元格三步曲
1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ： <td colspan="3"> </td>
3. 删除多余的单元格 单元格
typora-copy-images-to: media
第01阶段.前端基础.列表和表单
1. 列表标签 列表总结
标签名 定义 说明
<ul></ul> 无序标签 里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol> 有序标签 里面只能包含li 有顺序， 使用情况较少
<dl></dl> 自定义列表 里面有2个兄弟， dt 和 dd
2. 表单标签(掌握)
作用：
表单目的是为了收集用户信息。
表单控件： 提示信息：表单域：
input 控件
input 输入的意思
<input /标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性
1. type 属性
这个属性通过改变值，可以决定了你属于那种input表单。
比如 type = 'text' 就表示 文本框 可以做 用户名， 昵称等。
比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。
2. value属性 值
value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
3. name属性
name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
name属性后面的值，是我们自己定义的。
radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
4. checked属性
表示默认选中状态。 较常见于 单选按钮和复选按钮。
5. input 属性
属性 说明 作用
type 表单类型 用来指定不同的控件类型
value 表单值 表单里面默认显示的文本
name 表单名字 页面中的表单很多，name主要作用就是用于区别不同的表单。
checked 默认选中 表示那个单选或者复选按钮一开始就被选中了
label标签(理解)
label 标签为 input 元素定义标注（标签）。
第一种用法就是用label直接包括input表单。
第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
textarea控件(文本域)：
<textarea >
文本内容
</textarea>
通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
文本框和文本域区别
表单 名称 区别 默认值显示 用于场景
input type="text" 文本框 只能显示一行文本 单标签，通过value显示默认值 用户名、昵称、密码等
textarea 文本域 可以显示多行文本 双标签，默认值写到标签中间 留言板
select下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
select 中至少包含一对 option
在option 中定义selected =" selected "时，当前项即为默认选中项。
但是我们实际开发会用的比较少
form表单域
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式，其取值为get或post。
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单。
CSS选择器（基础选择器，复合选择器）
选择器 作用 缺点 使用情况 用法
标签选择器 可以选出所有相同的标签，比如p 不能差异化选择 较多 p { color：red;}
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color: red; }
id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用 #nav {color: red;}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 不推荐使用 * {color: red;}
基础选择器我们一共学了4个， 每个都有自己的价值， 可能再某个地方都能用到。
font字体
font属性用于对字体样式进行综合设置
选择器 { font: font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
CSS外观属性
属性 表示 注意点
color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff
line-height 行高 控制行与行之间的距离
text-align 水平对齐 可以设定文字水平的对齐方式
text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none
复合选择器
选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择元素后代 是选择所有的子孙后代 较多 符号是空格 .nav a
子代选择器 选择 最近一级元素 只选亲儿子 较少 符号是> .nav>p
交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one
并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav, .header
链接伪类选择器 给链接更改状态 较多 重点记住 a{} 和 a:hover 实际开发的写法
.5 链接伪类选择器
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active /选定的链接
写的时候，他们的顺序尽量不要颠倒 按照 lv包包好的顺序。
三种模式
元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素
行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度
背景属性
属性 作用 值
background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment 背景固定还是滚动 scroll/fixed
背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明 让盒子半透明 background: rgba(0,0,0,0.3); 后面必须是 4个值
CSS 三大特性
CSS层叠性
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠
CSS继承性
想要设置一个可继承的属性，只需将它应用于父元素即可。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
CSS优先级
1). 权重计算公式
标签选择器 计算权重公式
继承或者 * 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个!important 重要的 ∞ 无穷大
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
!important
2). 权重叠加
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
3). 继承的权重是0
1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。 2） 如果没有选中，那么权重是0，因为继承的权重为0.
盒子模型（CSS重点）
css学习三大重点： css 盒子模型 、 浮动 、 定位
盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
盒子里面的文字和图片等元素是 内容区域
盒子的厚度 我们成为 盒子的边框
盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
内边距：
padding属性用于设置内边距。 是指 边框与内容之间的距离。
设置
属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
当我们给盒子指定padding值之后， 发生了2件事情：
1.内容和边框 有了距离，添加了内边距。
2.盒子会变大了。通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小
、padding不影响盒子大小情况
如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
外边距
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
设置：
属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
块级盒子水平居中（盒子必须指定了宽度（width）然后就给左右的外边距都设置为auto，
外边距合并（1.相邻块元素垂直外边距的合并：取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）2. 嵌套块元素垂直外边距的合并（塌陷）可以为父元素定义上边框。可以为父元素定义上内边距。可以为父元素添加overflow:hidden。
圆角边框(CSS3)
border-radius:length;
其中每一个值可以为 数值或百分比的形式。
技巧： 让一个正方形 变成圆圈
盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
浮动(float)
特点 说明
浮 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动的方式 优点 缺点
额外标签法（隔墙法） 通俗易懂，书写方便 添加许多无意义的标签，结构化较差。
父级overflow:hidden; 书写简单 溢出隐藏
父级after伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题
父级双伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题
定位(position)
定位模式 是否脱标占有位置 移动位置基准 模式转换（行内块） 使用情况
静态static 不脱标，正常模式 正常模式 不能 几乎不用
相对定位relative 不脱标，占有位置 相对自身位置移动 不能 基本单独使用
绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用
固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级
|
|
收藏
淘帖
踩
