千鋒前端浠浠呀老師HTML+CSS教程，零基礎web前端開發(fā)入門必看視頻
P2：什么是網(wǎng)頁
網(wǎng)頁的組成：html c、css JavaScript
html ：決定網(wǎng)頁顯示什么內(nèi)容
css：修飾每一個內(nèi)容的外觀
JavaScript：網(wǎng)頁中的動態(tài)效果
P3：HTML 揚帆
專業(yè)讀寫html文件的的軟件，讀寫編輯器（vscode，hbuilder等）
vscode：<1>chinese中文插件，安裝完重啟，切換中文格式
創(chuàng)建html文件，手動寫.html文件后綴
alt+B快捷鍵打開瀏覽器
標簽：<h1>內(nèi)容</h1>
P4：HTML啟航
標簽：雙標簽和單標簽
雙標簽：<h1></h1>等
單標簽(空標簽)：<br> <img>等
標簽屬性：書寫在標簽自己本身，可以為標簽提供一些額外信息或者對標簽進行修飾，多個屬性之間用空格隔開
title：鼠標懸停的提示信息
<img src="圖片的地址">
P5：HTML基本格式
<!DOCTYPE html>后面書寫的html5語法
<html></html>包括頁面所有元素，稱為根元素
<head></head>描述文檔的各種屬性和信息
<meta charset="UTF-8">設置字符集
<title>頁面的標題</title>
<body></body>頁面展示的所有內(nèi)容
快捷鍵：！+tab=html的基本格式
P6：標題和段落標簽
6個標題標簽h1-h6，字體大小和加粗效果由h1-h6逐漸遞減
段落標簽<p></p>
空格:
align:center文本居中
P7：圖片和標簽切探
<img src="圖片路徑">
圖片在文件夾：相對路徑和絕對路徑
相對路徑：<1>頁面文件和圖片是同級關系，可以省去路徑，直接使用圖片名稱；
<2>頁面文件和圖片所在的文件夾是同級關系，定義路徑，先寫入圖片所在的文件夾名稱，通過/進入文件夾,mg/11.png
<3>頁面所在的文件夾和圖片是同級關系，“..//img/11.png”
頁面和圖片在同一個文件夾，不需要定義路徑頁面引用子文件里的圖片，路徑查找使用 img1/img2/img3頁面引用外層文件夾里的圖片，路徑查找使用 ../../...
絕對路徑:從根目錄開始通過完整的路徑定義來查找資源的,對于多層目錄有用
P8：圖片和標簽進階
img標簽添加屬性 alt意味在圖片加載失敗時的提示信息，文本提示占用頁面空間；title屬性鼠標放在圖片上的提示信息，默認隱藏，不占用頁面空間。
P9：圖片標簽拓展
常使用的圖片格式：gif png jpg bmp jpeg webp
有損壓縮：對圖像本身的改變，保留較多亮度信息，壓縮比高，圖片質(zhì)量下降，減少所占用的空間；
無損壓縮：對文件本身的壓縮，壓縮率高，不減少占用空間
P10：超鏈接之頁面跳轉(zhuǎn)
<a></a> 沒有任何樣式
<a href=""></a>默認藍色，下劃線
屬性：target=_頁面在當前頁面打開
target=_blank頁面在新的頁面打開
P11：超鏈接之錨點
1.跳轉(zhuǎn)目標的定義：給對應的標簽添加id屬性，并添加屬性值，意味錨點的名字（遵循命名規(guī)則）
2.錨點的定義，給a標簽添href屬性，屬性值為#錨點的名字
P12：文本修飾之常用標簽
文本加粗：<b></b> <strong></strong> b標簽僅僅是為了加粗顯示文本，strong標簽語義化更強，表示該文本比較重要
文本傾斜：<i></i><em></em> i標簽僅僅為了讓字體顯示斜體，沒有強調(diào)的語義，em標簽不僅能讓字體顯示斜體，還可以加強語氣
刪除線：<s></s><del></del> HTML5已經(jīng)不支持s標簽了，建議使用del標簽
P13：文本修飾之其他標簽
下劃線：<u></u>
角標標簽:<sub></sub>下角標
<sup></sup>上角標
標簽的嵌套：<b><i></i></b>(加粗傾斜的效果)
P14：文本修飾標簽案列
Ctrl+/注釋快捷鍵她
P15：有序列表
? <ol>
? ? <li>內(nèi)容</li>
? </ol>
序號：給ol標簽添加type屬性值，A/a/I/i/1，start屬性值從第幾開始
P16：無序列表
?<ul>
? ? <li>內(nèi)容</li>
? </ul>
給ul標簽添加type屬性值，disc實心圓點，circle空心圓，square實心方塊，none隱藏
P17：自定義列表
?<dl>
? <dt></dt>
? <dd></dd>
?</dl>
P18：快速創(chuàng)建標簽的小技巧
<h1>:<h1>+tap
創(chuàng)建一個標簽且里面有文本：標簽名{標簽文本內(nèi)容}+tab或者回車鍵
創(chuàng)建多個相同標簽且里面有文本：標簽名[標簽文本內(nèi)容}*標簽重復次數(shù)
創(chuàng)建多個不相同標簽且里面有文本：標簽 ${標題文本內(nèi)容}*標簽重復的次數(shù)
嵌套標簽的快速書寫：父標簽名>子標簽名{子標簽文本}*子標簽重復次數(shù)
P19：列表綜合案例
一個 代表一個中文漢子大小的空格
P20：表格基礎
<table>
? <tr>代表行
? ? <td></td>代表列
? ? <td></td>
? </tr>
</table>
P21：表格屬性
<th></th>：表頭單元格
表格線：border="1"
width表格的寬度
height表格的高度
cellspacing:定義是單元格之間的距離
cellpadding:定義單元格邊框和文本之間的距離;
<table bgcolor="表格背景色"bordercolor="表格邊框顏色">
P22：表格行屬性
<tr></tr>
height:高度
bgcolor="表格背景色"
align="left center right"水平對齊方式
valign="top middle bottom"垂直對齊
P23：表格列屬性
<td></td>
height:高度
bgcolor="表格背景色"
align="left center right"水平對齊方式
valign="top middle bottom"垂直對齊
P24：合并單元格
rowsapn=“”合并行的總數(shù)
colspan=“”合并列的總數(shù)
P25:表格標題和結構分組
表格標題：<caption></caption>
表格頭：<thead></thead>
表格體：<tbody></tbody>
表格腳：? <tfoot></tfoot>
一個表格只允許使用一個 thead和一個tfoot,但是允許使用多個 tbody
列分組：<colgroup span=“”> </colgroup>意為多少列分成一組
P26:顏色值和長度單位
顏色名稱：必須使用這140個標準的英文名稱中文漢字不能作為顏色值
十六進制值：指使用 #RRGGBB 的形式來定義顏色值(#號不要丟掉,字母全部小寫,所有瀏覽器都支持)
RGB顏色值：指使用 RGB(red,green,blue) 的形式來定義顏色值(不區(qū)分大小寫,括號里的數(shù)字和逗號前后可以有空格,所有瀏覽器都支持)
長度單位
絕對長度單位：固定的,用這些單位表示的長度會顯示為設置的尺寸，px像素最常用
相對長度單位：指相對于一個長度計算出來的長度，一般用來適配不同的設備，如%
P27:塊元素和內(nèi)聯(lián)元素
塊元素block-level：獨占一行，div、p、h1、ol、ul、dl、tabel等；
內(nèi)聯(lián)元素inline：不會獨占一行，只占用必要的寬度，不能簽到塊級元素，a、span、i、strong、em等
