1.html元素分类：块级元素、内联元素和行内（内联）块级元素
块级元素：一个元素独占一行，垂直方向排列，<h1><p><ul><table>(可从网页抓取发现)
*允许设置高度、宽度
内联元素：不会独占，水平排列，<a href='#'> </a>
*不允许设置显示的宽度和高度
*高度和宽度由内容（文本、图片、其他元素等）决定
行内块级元素：不会独占一行，水平方向排列 <img>
*允许设置高度、宽度
*元素之间存在空白空间（源代码中的换行）
以上讲的为语义化，2.3 非语义化
2.div
块级元素，非语义化
用于配合CSS，可以制作出想要的任何效果，现在不太用：为了兼容所有设备：手机、微信朋友圈、盲人（听，非语义不说话了）
宽度默认为父级容器的100%，高度0，可以自己设置
3.span
内联元素，非语义化元素
用于配合CSS，可以制作出想要的任何效果
宽度和高度默认为0(没有内容时)
4.display
元素是预定义的，就有点不方便
block 块级元素
inline 内联
inline-block 内联块级
这是浏览器默认写着的，可以更改
5.行内块级元素的特点和问题
inline-block
特点：多个元素之间水平方向排列，允许设置宽和高
问题：两个相邻行内块级之间有空格；对齐方式：文本方式，末行文字底线对齐(一样对齐，内容字数不同就对不齐)--所以要保证多个元素的文本内容数量一致
<style> div{
display:inline-block; height:200px; width:200px; background-color:pink;}
</style>
<div>jfskj f</div>
<div>referger</div>
6.注册按钮案例
行内块级例子：有间距 高度宽度一致，不随文本内容变化
把四个东西放一组，写DIV，div是容器元素
<div>
<a id="phoneM" href="#">手机注册M</a>
<a id="phoneN" href="#">手机注册N</a>
<a id="phoneO" href="#">手机注册O</a>
<a id="phoneP" href="#">手机注册P</a>
</div>
<style>div{display:inline-block; background:url(".png") on-repeat;
width: ; height: ;
color:#ffffff; text-decoration:none;
line-height: px; text-align:center;}
#phoneM {background-position: ;}
</style>
1.div 2.引入格式和图片 3.图片效果 4.文字效果-调整水平方向显示的位置 空格不识别：white-space:pre/nowrap;作用保留空格，强制一行；然后加空格
7.结构元素 html5的
新增替代div和span
<head></head>
<body>
<header><nav></nav><header>，引导和导航的作用
<main>
<article>
<section></section>
<section></section>
</article>
<main> 设置过长页面就可以滚动了，不可以在一些元素内
<aside></aside>
<footer><footer>
<body>
编写顺序变了，页面顺序就变了，你爱改就改，换或者加一个都可以
页面分解：百度分为顶部 主体（搜索框） 底部
<nav>导航，容器元素；比如百度页面右上角，在<header>里面
<article> 文章，独立的结构
<section>对网页内容进行分类
<aside>与其他内容无关的，一般作为侧边栏，比如淘宝右边的购物车一系列小按钮
7.转义字符:有其他含义的字符，比如< >,会被认为是<> 不用记，查一下
空格   < > > <