html的基本结构
<head>
<!--meta 元信息，编码utf-8，网页的关键词-SEO去搜索，网页的描述内容，视口 viewpoet meta：vp tab(移动端手机页面开发必须加的代码)
<title>标题</title>
</head>
1.<body>
2.<p></p>
3.<h></h>
4.<div></div>
5.</body>
网页的基本组成 以及要熟悉的标签
网页的基本组成
html+css+js
<img>
src=”放图片路劲地址”
alt=”图片路径加载失败或图片丢失时图片的描述说明文字内容”
title=“鼠标移动到图片上时文字描述说明内容”
<a>
href=”超链接要跳转的路径地址”
href=”javascript: ;”指的是禁止默认的连接跳转
target=“—blank”表示新窗口打开
target=“—self”表示在当前窗口打开
<article>定义文文章
<audio>音频引入
src=”音频路径地址”
autoplay=“autoplay”自动播放 loop表示循环播放
<b>加粗
<br>折行,换行
<button>按钮
<caption>定义table的标题
<canvas>画布
<div>划分块结构
<dl> <dt> <dd>定义列表
<datalist>下拉列表和input连用
<em>斜体
<embed>定义外部交换资源文件 格式是：.swf
1.<embed src="文件路径"/>
<form>表单
<frame>定义框架或者窗口
<footer>底部
<figure><figcaption>图文的组合
1.<figure>
2.<figcaption>
3. 图片的文字描述说明
4.</figcaption>
5.<img src="" alt="">
6.</figure>
<head>网页的头部
<hr>水平线
<html>根元素
<header>页面的头部
<i>斜体
<img>插入图片
<input>表单元素
1.<input type="text">
2.<input type="password"表示密码>
<ul> <li>无序列表默认小黑点
<ol> <li>有序列表默认数
1.<select name="" id="">
2.<option value="">年</option>
3.<option value="">2017</option>
4.</select>
<object>定义外部的资源文件
<progress>进度条
<s>中划线
<span>定义小块，小图标
<style>内嵌式的样式标签
<strong>加粗
<small>变小
<sup>上标
<sub>下标
<section>相当于
<table>单元表格 th、tr、td、thead、tftoo
<time>时间
<textarea>多行文本,一般用在评论区
1.<textarea name="" id="" cols="30" rows="10"></textarea>
<u>下划线
<video>视频播放器
行内元素
1.<a><button><big><datalist><em><i><input><mark><span><select><option><s><strong><b><small><sub><sup><textarea><u>
1.不独占一行
2.排列方式：从左往右
3.设置宽高不起作用，如果要起作用需要转换为块级元素或者行内块如：display: block 或者display: inlineblock<a href="#" style="display:block;width:;></a>"
4.不设置宽高是它本身的宽高
5.行内元素天生自带display：inline
6.行内元素不能嵌套块级元素（a特殊）{a标签不可以嵌套它本身}
块级元素
1.<table><dl><dt><dd><figure><figcaption><div><h1-h6><hr><ol li><ul li><nav><p><form><menu>
1.独占一行
2.排列方式：从上到下
3.可以设置宽高以及盒子模型的其他属性
4.不设置宽高的情况下它的宽度就是父元素的宽度 它的高度本身内容的高度
5.天生自带display：block
6.块级元素可以嵌套行内元素
7.ul ol 下面只能是li dl下面只能是 dt、dd、
8.p标签里面不能嵌套任何块级元素包括它本身
行内块级元素
1.<img><input>
语义化
log标签一般都用<h1>来包含<a>
css的三个引入方法
行内样式<div style="color">
内嵌式
1.<body>
2.<style type="text/css">
3.color:red;
4.</style>
5.</body>
外链式：
1.<link rel="stylesheet" type="text/css" href="css外部文件路径">
导入式：
1.<style type="text/css">
2.@import"css样式路径"
3.</style>
*通配符
此代码表示去掉所有样式间距
1.*{
2.margin:0;/*外间距*/
3.padding:0;/*内间距*/
4.}
css选择器
交集选择器：
此用法是为了更精准的缩小查找范围
1.div#id{
2.color:red
3.}
*注意：标签名和ID或者class中间没有空格
后代选择器：
中间要有空格，由大到小排列
层级的嵌套最好不要超过三个，只需要保留关键节点
1.ol li strong{
2.color:red
3.}
子代选择器：
只作用于子元素一代，
1.div>p{
2.color:blue
3.}
属性选择器：
1.[type="password"]{
2.color:blue
3.}
4.[type]{
5.color:pink
6.}
伪类选择器：
1.a:lingk{
2.color:green
3.}/*表示没有访问之前的颜色*/
4.a:visited{
5.color:gray
6.}/*表示向已访问的网址添加样式*/
7.a:hover{
8.color:pink
9.}/*表示鼠标移上的效果*/
10.a:active{
11.background-color:blue
12.}/*鼠标按下的效果*/
表单元素input：获取焦点或者失去光标:
1.input：focus{
2. border:1px solid blue
3.}/*获取边框焦点*/
4.input: blur{
5.border:1px solid black
6.}/*失去光标*/
7.input：{
8.color:blue
9.}/*表示默认样式*/
10.失去焦点的样式
css3的新增加的伪类选择器
a:link 没有访问之前a的样式
a:visited 已访问a的样式
a:hover a鼠标移上的样式
a:active a鼠标按下的样式
input:focus 获取光标
css3新增的
:not 排除
1.ul li:not(:last-child){
2.border-right:2px solid #000
3.}/*表示除了最后一个li没有右边框线，其余都有*/
:last-child 最后一个子元素
:nth-child(number) 奇数（odd）偶数（even）number表示具体的第几个
:only-child 唯一只有一个元素时起作用
:nth-last-child 表示倒数第几个元素
css盒子模型
宽度和高度的单位
1.px像素单位写死
2.%百分比—动态计算的单位(自然适应，响应式)
自适应
一个页面有9个色块9个色块
1.<body>
2.<div class="page1"></div>
3.<div class="page2"></div>
4.<div class="page3"></div>
5.<div class="page4"></div>
6.<div class="page5"></div>
7.<div class="page6"></div>
8.<div class="page7"></div>
9.<div class="page8"></div>
10.<div class="page9"></div>
11.</body>
12.<style>
13.*{
14.padding:0;
15.margin:0;
16.}
17.html.body{
18.width:100%;
19.height:100%;
20.overflow:hidden;
21.}
22.div{
23.float:left;
24.width:33.3%;
25.height:33.%;
26.}
27..page1{
28.background:blue
29.}/*这里给9给图片设置成不同的背景颜色*/
盒子模型内边距（padding）
遵循上右下左
内边距会影响盒子在浏览器中的实际大小要想盒子模型不变必须如下：
盒子模型边框线（border）
1.border:1px solid #000/边框的宽度，边框线的类型，边框线的颜色/
边框线类型：
solid 实线
dashed 虚线
dotted 点状线
**注意：**如果border属性只有边框宽度，没有边框线的类型和颜色导致border属性失效
三角箭头的原理：
正方形的任意相邻的两条边，然后旋转一定的角度，得到我们需要的任意方向的箭头deg角度单位，rotate旋转角度，小三角的大小由正方形的宽高控制，小三角的粗细有边框线的宽度控制
三角形（triangle）
transparent透明的意思
border-radius：40（控制四个方向的圆角）
盒子模型margin
margin兼容margin-top的问题
大盒子里面嵌套小盒子 ，给小盒子加margin-top值 不但没有实现和大盒子的间距反而传递到大盒子身上，导致整体下移。
解决兼容性问题：
overflow：hidden 解决margin-top的传递问题（此处并不是溢出隐藏）
padding-top：1px 这种方法会影响最后的实际宽高，需要在width/height基础上减掉才不会影响实际的高度。
border-top：1px solid transparent这种方法会影响最后的实际宽高，需要在width/height基础上减掉才不会影响实际的高度。
给子元素的margin-top值改为给父元素加padding-top值这样就避免了margin-top值导致的传递问题
padding与margin区别
盒子模型的计算
背景
主要属性：
background-color
不能继承，其默认值是transparent。有透明之意，也就是说如果一个没有指定背景颜色，那么背景颜色就是透明的，这样其祖先元素的背景才可见
1.transparent：指定背景颜色是透明
2.inherit： 指定背景颜色，应该从父元素继承。
3.text-align： 文字对齐方式（center，left，right，）
4.line-height： 控制文字内容垂直居中（行间距）
5.margin： 块级元素居中
background-image
background-repeat（背景重复）
指定如何重复背景图像，默认情况下，重复background-image的垂直水平方向
1.repeat 背景图像将向垂直水平方向重复。这是默认
2.repeat-x 只有水平位置会重复背景图像
3.repeat-y 只有垂直位置会重复背景图像
3.no-repeat background-image不会重复
background-position
分为xy轴，
background-attachment
background-size
background-origin
background-clip （css3新增属性）
这是菜鸟的记录日常，希望大家一起进步。
2674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
