html/css-其他元素-1~8
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.轉義字元:有其他含義的字元，比如< >,會被認為是<> 不用記，查一下
空格   < > > <