web前端簡易製作之HTML
1.文章標題
那麼生成的html檔案 名稱就叫做hello world
2.文字標籤
HTML:表示該檔案為HTML檔案
HEAD：包含檔案的標題，使用的指令碼，樣式定義等
BODY:放置瀏覽器中顯示資訊的所有標誌和屬性，其中內容在瀏覽器中顯示。
1.標題標籤：h1-----h6 表示的是標籤的大小 其中h1最大，h6最小。
2.段落標籤：p-------p 段落之間會空一行
3.加粗標籤：b/strong 加粗字型
4.下劃線標籤：u
5.刪除標籤：s
6.預格式化文字標籤（保留文字的原有格式）：pre標籤
7.上標和下標：sup，sub
8.塊引用標籤：blockquote
9普通的文字：span-----行內標籤
10.普通的文字標籤：div-----
以上標籤都是成對出現的
比如：<b … /b>
換行標籤：br-----（第一個沒有成對出現的標籤）
水平分隔符標籤：hr-----（第一個沒有成對出現的標籤）
在瀏覽器中開啟 （圖中第一行處應新增一個world）
這裡我們看到使用塊引用，無論是什麼格式，直接新增都會放在一行，打亂原有格式。
3.css和span和div的理解
從此之後的內容都在body身體裡
文字標籤的常用樣式（屬性）
1.TEXT.ALIGN:LEFT,左對齊
2.TEXT.ALIGN:CENTER,居中
3.TEXT.ALIGN:RIGHT,右對齊
4.width:畫素值或百分比，物件寬度
5.height：畫素值或百分比，物件高度
6.color顏色
7.font-size：設定字型大小
8.border：設定邊框
9.padding.top：文字距邊框上部的距離
10.padding.left:文字距邊框左部的距離
這裡我們注意到border-radius比高度和寬度大很多時，邊框就會變成圓形
如果沒有沒有border-radius，那麼邊框就是正方形
如果較小就是類正方形
4.表格標籤
1.table代表一個表格
caption：中間寫入標題
td：寫入每一列的內容
tr：寫入每一行的內容
cellpadding=‘3’ —設定表格的內邊距
cellspacing=‘5’ —設定表格的外邊距
行輸入法
輸入表格式的行輸入法
5.合併列單元格
6.合併行單元格
7.表單標籤
這裡下拉標籤任選其一
8.個人資訊
高度和寬度也可以用百分比表示
顯示結果
9.圖片標籤
src指定圖片的位置， 可以是url地址， 也可以是本地的圖片;
alt: 如果圖片不能正常載入， 則顯示alt裡面的文字;
建議將圖片從網站上下載到桌面，存放在pycharm中當前目錄裡
新增圖片超連結
<a href=’‘http://連結地址‘’><img src=’‘img01.jpg’’>
10.超連結標籤
在瀏覽器中執行
這裡有5個超連結，分別是百度，4399，本地跳轉
11.序列化標籤
1.無序標籤之ul和li
去掉ul裡面的所有li標籤裡面的樣式
實現水平導航欄和豎直導航欄
list-style-type：none -----去掉原點
display：inline-block ------變為行內元素，並且可以設定高度和寬度
width： -------可以使用300px表示，也可以用百分比表示
此處的HTML是一個超連結
連結如下
2.有序標籤之ol和li and 巢狀標籤
12.編寫CSS樣式——類選擇器
不難看出，進入css樣式後，修改在head裡進行
13.編寫CSS樣式----標籤選擇器
14.編寫CSS樣式----id選擇器
15.CSS聯絡-----導航欄
這裡hover的作用是，滑鼠碰到就變色；html依舊是超連結
16.CSS的引入方式
*引入方式：
1.行內引入：<a style="行內引入的樣式‘’>
2.內部引入：寫在head標籤裡面的style標籤裡面的樣式；
3.外部引入：將css樣式獨立成一個檔案，通過<link rel=’'stylesheet ‘’ href= ‘‘css/main.css’’>與當前html檔案連結在一起。
三種引入方式的優先順序：就近原則
注意：成立前提是有css目錄裡的main檔案
其內容為：div{ width：80%； margin:0 auto; padding:0;}
ul{ list-style-type:none}
li{ display:inline-block; width:%20; background:snow;
color:#333333; padding-top:10px; padding-bottom:10px;
text-align:center;
font-size:large;
text-transform:capitalize;
li:hover{ background:green; color:snow;}
a:hover{ color:snow;}
最終顯示如下：
滑鼠接觸依舊變色
17.層級選擇器
這裡修飾的是ul標籤內的li標籤內的a標籤。
注意：margin：0 auto意思是整體居中。
