html是什么 html（Hypertext Markup Language）—— 结构 超文本 标记 标签 <> 标签对 单标签 在标签中间—— 标签名 语言
css
凡是写在标签名后面的都是标签的属性 可以自动刷新浏览器属性名称 = “属性值”
border
border 区域会不会显示背景图(会显示)
<style>
.box{
width:300px;
height:200px;
border:10px d #0c0c0c;
background: url("img/14.jpg") repeat-y;
margin:40px 30px 20px 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
border-color 边框颜色border-style 边框样式border-width 边框宽度
border
-top
border
-top-color
border
-top-style
border
-top-width
border
-bottom-style: dashed; dashed 虚线 dotted 点线
background 参数不受顺序影响
背景色 background-color 背景图 background-image
背景图平铺 background-repeat
1: repeat 平铺（默认值）；
2: no-repeat 不平铺
3: repeat-x 横向平铺
4： repeat-y 纵向平铺
背景图定位 background-position
背景图定位 如果只给X轴的值(一个值) 那么Y轴会默认center
第一个值 x轴 （num center left right）
第二个值 y轴 （num center left right）
背景图是否滚动 background-attachment
fixed 固定
位置是以浏览器的可视区域来定位
不会随着页面的滚动而改变自身的位置
scroll 滚动
位置是以容器来定位
会随着页面的滚动而改变自身的位置
- 背景图背景色
background: #0b9380 url(img/email.png) no-repeat 0 0 fixed ; 颜色写在前面
font
文字复合样式
font: bold italic 50px '宋体';
font:
第一二个值（文字着重和文字样式）
第三个值 font-size( 文字大小 )
第四个值 font-family( 文字字体 )
font-weight
1: bold 加粗
2: normal (正常，不加粗) 默认值
3: 100 -700
4: border(比较级)
相对于父级更粗一点，并且只有两个状态，一个是正常（normal）一个是加粗 (bold)
文字大小 font-size
文字样式 font-style
italic(倾斜) normal（正常）
font-family: ‘宋体’,’Arial’, “微软雅黑”,’microsoft yahei’;文字颜色 color
文本对齐方式 text-align
: letf 左对齐
: right 右对齐
: center 居中对齐
首行缩进 text-indent
<style>
#box{
border:1px solid #0b9380;
width:400px;
font-size:44px;
text-indent: 2em;
}
</style>
<body>
<div id="box">
邮件地址
</div>
</body>
text-decoration 文本修饰
<
style>
text-decoration:underline;
<
style>
<!--
text-decoration 文本修饰
underline 下划线
line-through 中划线
overline 上划线
-->
文字间距
letter-spacing字母间距
word-spacing 单词间距（是以空格为解析单位）
强制不换行 white-space
white-space:
nowrap 不换行
normal 正常
padding
padding 内边距 内填充占位宽 border padding width margin
margin
1.两个相邻的同级别元素上下margin会叠压
解决方案： 1: 给这个2个元素加 float
2: 转换为行内块 display: inline-block
2.margin的上下传递(父子级元素)
解决方案：01：给父级加overflow:hidden 或者 加边框 border 或者给 子级加 position:absolute;
邮件
<
a href=
"mailto:test@miaov.com">发邮件</
a>
<
a href=
"tel:01029837492">打电话</
a>
标签
锚点
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
.box{
height:30px;
background: #0b9380;
color: #fff;
margin-bottom: 1000px;
}
</style>
</head>
<body>
<a href="#box1" target="_blank"></a>
<a href="#box2">box2
</a>
<a href="#box3">box3
</a>
<div class="box" id="box1">box1
</div>
<div class="box" id="box2">box2
</div>
<div class="box" id="box3">box3
</div>
</body>
a标签target 属性；
_blank 在新窗口中打开被链接文档。
_self 在被点击时的同一框架中打开被链接文档（默认）。
_parent 在父框架中打开被链接文档。
_top 在窗口主体中打开被链接文档。
a 伪类；
a:link{ color: yellow; }
link 未访问过
hover 鼠标悬停
active 鼠标按下
visited 访问过后
常用标签
<header>页眉，主要用于页面的头部的信息介绍，也可用于板块头部
</header>
<nav>导航 （包含链接的的一个列表）
</nav>
<footer>页脚 页面的底部 或者 版块底部
</footer>
<section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节
<section>
<article>用来在页面中表示一套结构完整且独立的内容部分
</article>
<aside>侧边栏、广告
</aside>
<time>用来表现时间或日期
</time>
<h1>这个是h1标签
</h1>
<h2>这个是h2标签
</h2>
<h3>这个是h3标签
</h3>
<h4>这个是h4标签
</h4>
<h5>这个是h5标签
</h5>
<h6>这个是h6标签
</h6>
<div>这个是div标签
</div>
<p>段落
</p>
<strong>强调
</strong>
<b>强调
</b>
<em>强调
</em>
<ul>
</ul>
<ol>
<li>列表项
</li>
<li>列表项
</li>
<li>列表项
</li>
</ol>
<dl>
<dt>列表头
</dt>
<dd>列表项
</dd>
<dd>列表项
</dd>
<dd>列表项
</dd>
<dd>列表项
</dd>
</dl>
<mark>h1标签在一个页面上最好只出现一次 并且，用在logo身上
</mark>
选择器
群组选择器 .name，span，em 包含选择器 .name span em通配符 选中页面上所有的标签 *id 选择器class 选择器选择器 优先级 style > ID > class > 标签
css_reset 清除默认样式
有默认margin的元素
body,h1~h6,p,ul,ol,dl,dd
有默认padding的元素
ul,ol
ul,ol身上都有默认的list-style
在清除的时候，可以直接清除li身上的list-style
但是要记住，默认的list-style是在谁身上产生的
块元素
块元素的特征
1,默认独占一行
2,支持所有css样式
3,没有宽度的时候，默认撑满父级的宽
行内元素
内嵌(内联、行内)的特征
1、同排可以继续跟同类的标签(一行可以显示多个同类型的标签)
2、内容撑开宽度(所有的标签都是内容撑开高度)
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析(解析成空格 —— 一个空格的大小)
行内块
内联块特性：
1、让块在一行显示；
2、让行内元素支持宽高；
3、没有宽度的时候内容撑开宽度
