1、前期準(zhǔn)備

1、語(yǔ)法規(guī)范

• 1、所有的標(biāo)簽都必須包含在開(kāi)始標(biāo)簽 結(jié)束標(biāo)簽，里面都是成對(duì)出現(xiàn)的，但是有些標(biāo)簽是單標(biāo)簽，
  ，但是單標(biāo)簽非常的少

• 2、標(biāo)簽關(guān)系

  • 包含關(guān)系
    • 就是嵌套的關(guān)系(父子關(guān)系),html包含了head這個(gè)標(biāo)簽
  • 并列關(guān)系
    • head和body是并列關(guān)系

• 3、結(jié)構(gòu)標(biāo)簽

  • html標(biāo)簽是根標(biāo)簽
  • head是頭部標(biāo)簽，在head里面必須要設(shè)置就是title
  • title就是網(wǎng)頁(yè)標(biāo)題，非常的重要
  • body存放網(wǎng)頁(yè)的所有內(nèi)容

2、vscode插件

• auto rename tag自動(dòng)修改標(biāo)簽

• Live server實(shí)時(shí)更新的

• 格式化代碼2個(gè)√打開(kāi)

• easy less編譯less文件，html不能直接引用less，會(huì)將其自動(dòng)編譯成css文件來(lái)使用

3、快捷鍵

• 快速?gòu)?fù)制 shift+alt+下箭頭

• 修改相同的標(biāo)簽，雙擊選中，ctrl+d

• 快速編輯,ctrl+alt+上下箭頭

• 快速跳到某一行 ctrl+g

• 選擇某一個(gè)區(qū)域塊，shift+alt

4、標(biāo)簽的學(xué)習(xí)

• 理解標(biāo)簽是干什么的，標(biāo)簽的含義

• 在合適的地方給一個(gè)合理的標(biāo)簽，就可以使頁(yè)面更加的清晰

2、body標(biāo)簽的相關(guān)的內(nèi)容

1、標(biāo)題標(biāo)簽

• head的縮寫(xiě)，在body里面寫(xiě)，標(biāo)題的標(biāo)簽會(huì)變粗，獨(dú)占一行
• 一共有6級(jí)標(biāo)簽，在標(biāo)簽里面填寫(xiě)內(nèi)容

<h1>我是一級(jí)標(biāo)簽</h1>
<h2>我是二級(jí)標(biāo)簽</h2>
<h3>我是三級(jí)標(biāo)簽</h3>
<h4>我是四級(jí)標(biāo)簽</h4>
效果依次遞減，字體的大小依次遞減

2、段落標(biāo)簽

• p標(biāo)簽用于定義段落，分段就是用,就分成了上下2段

• 段落和段落之間有較大的空隙

3、換行標(biāo)簽

• br />,遇到這個(gè)標(biāo)簽文本強(qiáng)制換行,在段落里面使用的話，就可以再起一行

• 是單標(biāo)簽，另起一行

• 換行與換行之間有較小的空隙

4、文本格式化標(biāo)簽

• 突出文字的重要性，粗體，斜體，下劃線等效果

• 更加吸引

將文字放入到標(biāo)簽里面就能顯示效果
<strong></strong> 或者<b></b> 加粗
<em></em> 或者 <i></i> 傾斜
<del></del> 或者 <s></s>  刪除線
<ins><ins> 或者 <u></u>下劃線

5、盒子標(biāo)簽div和span

• div和span是沒(méi)有語(yǔ)義的，用來(lái)存放內(nèi)容的，圖片，就是一個(gè)盒子，分割，分區(qū)

• 一行只能放一個(gè)div，是一個(gè)大的盒子，后面不能有其他的內(nèi)容在這個(gè)一行里面顯示

• span是跨度的，跨距的，橫著顯示，可以在一行里面顯示多個(gè)span

6、圖像標(biāo)簽和路徑

• img標(biāo)簽來(lái)定義html頁(yè)面的圖像

• 是一個(gè)單的標(biāo)簽，img src="圖像url" ,src是必須的屬性，指定文件的路徑和文件名，屬性就是屬于這個(gè)標(biāo)簽的特性

• 圖片的存放的位置，需要在網(wǎng)頁(yè)文件同一個(gè)文件夾里面才行

• 還有其他的屬性

  • alt 文本，替換的文本，圖像不能顯示的時(shí)候，用文本來(lái)替換

  • title 提示文本，鼠標(biāo)放在圖像上面，提示文字

  • width，設(shè)置圖像的寬度，像素

  • height 設(shè)置圖像的高度。像素,一般的話，只修改一個(gè)屬性即可

  • border屬性，給圖像設(shè)置邊框,15像素的邊框，css后面還可以修改顏色

• 屬性與屬性之間沒(méi)有順序,使用空格來(lái)進(jìn)行分割

• 鍵值對(duì)的格式,一個(gè)鍵，一個(gè)值

• 路徑的理解

  • 就是將一些的素材放在文件夾里面，然后網(wǎng)頁(yè)文件來(lái)進(jìn)行編寫(xiě)

  • 絕對(duì)路徑，就是完整的路徑，電腦的位置

    • 不常用

  • 相對(duì)路徑，就是不完整的路徑，就是位于html不同位置來(lái)定義的

    • 同一級(jí)路徑，直接寫(xiě)上圖像名就可以了

    • 上一層路徑的話，../上一級(jí)的目錄/圖像名

    • 下一層路徑的話，下一級(jí)的目錄/圖像名

7、超鏈接

格式
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口彈出的方式">文本或圖像</a>

href=鏈接目標(biāo)的url地址
target= 指定鏈接頁(yè)面打開(kāi)的方式，_self為默認(rèn)值,當(dāng)前的頁(yè)面打開(kāi)，_blank為在新的窗口中打卡的方式

• 外部鏈接,a href="http://wwww.baidu.com target=_blank" > 百度

• 內(nèi)部鏈接，網(wǎng)站內(nèi)部之間的鏈接，不需要http,內(nèi)部之間的跳動(dòng)

• 空鏈接 a href ="#"> 公司地址

• 下載鏈接，如果里面的地址是文件或者壓縮包 .exe 或者.zip格式的

• 文字，視頻，圖片等都可以做成一個(gè)超鏈接，打開(kāi)一個(gè)圖片跳轉(zhuǎn)到百度上面去

• 錨點(diǎn)鏈接，就是點(diǎn)擊這個(gè)鏈接，直接就跳到當(dāng)前的這個(gè)頁(yè)面，，快速定位到頁(yè)面中的某個(gè)位置,格式為 a href= "#名字" > 第二集 然后網(wǎng)頁(yè)內(nèi)容的話，就是 <h3 id=名字 第二集,相當(dāng)于是一種定位的方式，有2個(gè)對(duì)應(yīng)的

8、特殊字符

• 就能顯示特殊字符

• 空格 &nbsp，幾個(gè)這個(gè)就是幾個(gè)空格

• &lt < 是小于 &gt是大于

9、表格標(biāo)簽

• 用于顯示，展示數(shù)據(jù)可讀性非常的好，股票等展示

<table> 一個(gè)的最大的表格
   <tr>  定義表格中的行，代表表格中的每一個(gè)行
      <td>單元格內(nèi)的文字</td> 存放數(shù)據(jù)內(nèi)容，單元格，沒(méi)有列的概念
   </tr>
</table>

關(guān)系如下圖所示

• 表頭單元格表示表頭的部分，突出重要性，加粗，居中顯示，將td改為th

• 1、表格的屬性

  • align=(left,center,right) 規(guī)定表格相對(duì)周圍元素的對(duì)齊方式，寫(xiě)在table里面去

  • border，就是表格的邊框，像素的值,默認(rèn)是沒(méi)有的邊框

  • cellpadding 規(guī)定文字距離單元格邊框的距離,默認(rèn)是1像素的距離

  • cellspacing 規(guī)定單元格和單元格之間的距離，默認(rèn)是2像素，就有一定的距離,0的話，之間就是沒(méi)有距離的

  • width 規(guī)定單元格的寬度

  • height 高度

• 2、單元格之間可以放任何屬性，鏈接什么的都可以放

• 3、表格結(jié)構(gòu)標(biāo)簽

  • 場(chǎng)景，表格非常的長(zhǎng)的話，將表格分割成表格頭部和主體區(qū)域

  • thead 是表頭區(qū)域，th是表頭單元格，不要混淆

  • tbody 是表格的主體區(qū)域，更好的分清表格的結(jié)構(gòu)

• 4、合并單元格

  • 將多個(gè)單元格合并成一個(gè)

  • 跨行合并 rowspan="合并單元格的個(gè)數(shù)"，就是將第一行和第二行進(jìn)行合并

  • 跨列合并 colspan="合并單元格的個(gè)數(shù)"，將第一列和第二列進(jìn)行合并

  • 代碼的位置，跨行的，最上側(cè)單元格為目標(biāo)單元格，寫(xiě)合并代碼

  • 跨列的話，最左側(cè)單元格為目標(biāo)單元格。寫(xiě)合并代碼
    如下圖所示
    

• 5、合并單元格三部曲、

  • 先確定是跨行還是跨列合并

  • 找到目標(biāo)單元格，寫(xiě)上合并的方式= 合合并的單元格數(shù)量，比如 td colspan="2" <//td>

  • 刪除多余的單元格

10、列表標(biāo)簽

• 1、表格式展示數(shù)據(jù)的，列表就是來(lái)布局的，小米的官網(wǎng)，整齊，有序的

• 2、無(wú)序列表(重點(diǎn))

  • ul表示無(wú)序列表，li表示列表項(xiàng)，就是一個(gè)很大的框子，每個(gè)li占一個(gè)

  • 是并列的，沒(méi)有順序的列表，ul只能嵌套li，不能存放p,ul里面只能存放li標(biāo)簽，其余的都不能放

  • 但是li標(biāo)簽里面可以存放任何標(biāo)簽

  • 會(huì)帶有自己的樣式屬性，小圓點(diǎn)，學(xué)會(huì)css會(huì)去掉這個(gè)

• 3、有序列表

  • ol來(lái)定義有序列表，li表示列表項(xiàng)的

  • ol只能存放li，li可以存放很多的標(biāo)簽

  • 會(huì)自動(dòng)的帶有樣式屬性,如1,2,3

• 4、自定義列表(重點(diǎn))

  • 就是有一個(gè)標(biāo)題，下面都是圍繞這個(gè)標(biāo)題進(jìn)行解釋的，就使用自定義列表

  • dl表示自定義列表，dt定義名詞，dd就是來(lái)解釋這個(gè)名詞的

  • dl只能存放dt和dd標(biāo)簽，其余的標(biāo)簽不能存放,但是dt和dd標(biāo)簽可以包含任意的標(biāo)簽

11、表單標(biāo)簽

• 就是可以輸入姓名，電話，姓名等，這個(gè)就是自己來(lái)進(jìn)行輸入

• 1、收集用戶的信息，自己輸入的電話，別人就能拿到

• 2、表單包含什么

  • 1、表單域(一個(gè)大的區(qū)域)

    • form用來(lái)定義表單域，實(shí)現(xiàn)了用戶信息收集和傳遞,因此就是定義一個(gè)很大的表單域的話，就會(huì)將里面的數(shù)據(jù)發(fā)送到服務(wù)器里面去

    • 里面屬性，action=url地址，method=提交方式，name=表單域的名稱

  • 2、表單控件(表單元素) ，就是可以自己輸入，或者點(diǎn)擊，自己選擇，不同的內(nèi)容

    • input輸入表單元素,單標(biāo)簽

      • type屬性，設(shè)置不同的表單元素，決定以什么樣的形式來(lái)呈現(xiàn)給用戶

        • text類型，文本框，用戶可以輸入任何的內(nèi)容,默認(rèn)是文本框的樣式

        • password 密碼框，就是*來(lái)代替，用戶看不見(jiàn)密碼

        • radio 單選按鈕,但是需要nname就能實(shí)現(xiàn)單選了

        • checkbox 定義復(fù)選框，實(shí)現(xiàn)一個(gè)多選的效果

        • submit 定義提交按鈕，就會(huì)將信息提交到服務(wù)器中，name和value等值提交給后臺(tái)服務(wù)器。可以使用value改變顯示的內(nèi)容

        • reset 重置按鈕,value可以改變顯示的內(nèi)容，還原初始的狀態(tài)

        • button 點(diǎn)擊按鈕，通過(guò)javascript來(lái)實(shí)現(xiàn)的

        • file 提供文件上傳，頭像等

      • name 用戶自定義名字，表單元素的名字，單選和多選的name必選是一樣的name，才能實(shí)現(xiàn)效果，區(qū)別不同的表單元素

      • value 用戶自定義表單元素的值,選擇了這個(gè)值，就會(huì)把這個(gè)值送到后臺(tái)，單選和默認(rèn)的按鈕，前臺(tái)不能顯示，后臺(tái)可以顯示，默認(rèn)顯示的內(nèi)容

      • checked 當(dāng)頁(yè)面打開(kāi)的時(shí)候，默認(rèn)選上，針對(duì)為單選按鈕和，值為checked

      • maxlength 定義最大字符長(zhǎng)度

      • label 標(biāo)簽綁定了一個(gè)表單的元素，當(dāng)點(diǎn)擊label標(biāo)簽內(nèi)的文本時(shí)，瀏覽器會(huì)自動(dòng)的將光標(biāo)轉(zhuǎn)到或者選擇對(duì)應(yīng)的表單元素上，增加了用戶的體驗(yàn)，經(jīng)常和Input一起使用

        <label for="sex">男</label>  for和id搭配使用，相同的才能實(shí)現(xiàn)效果
        <input type="radio" name="sex" id="sex" />
        

    • select下拉表單元素

      • 如果有多個(gè)選項(xiàng)讓用戶使用的話，并且想要節(jié)約空間的時(shí)，可以使用select標(biāo)簽定義下拉列表

      至少包含一對(duì)option
      <select>
         <option></option>
         <option selected="selected"></option>
         <option></option>
      </select>
      

      • 顯示默認(rèn)的選項(xiàng),option里面寫(xiě)selected="selected"

    • textarea文本域元素

      • 留言，這種內(nèi)容較多的情況下，可以使用這個(gè)，評(píng)論等。因?yàn)閠ext是一行的文本框，存放的內(nèi)容比較少

      • cols=每行字符數(shù)，rows=可以顯示多少行

      <tr>
      <td>自我介紹</td>
      <td><textarea>自我介紹</textarea></td>
      </tr>
      

  • 3、提示信息，提示你這個(gè)框輸入什么，是干什么的

    <input placeholder="提示的文字"> 提示信息，填寫(xiě)內(nèi)容的話，會(huì)自動(dòng)的消失