html學習

1、前期準備

1、語法規範

• 1、所有的標籤都必須包含在開始標籤 結束標籤，裡面都是成對出現的，但是有些標籤是單標籤，
  ，但是單標籤非常的少

• 2、標籤關係

  • 包含關係
    • 就是巢狀的關係(父子關係),html包含了head這個標籤
  • 並列關係
    • head和body是並列關係

• 3、結構標籤

  • html標籤是根標籤
  • head是頭部標籤，在head裡面必須要設定就是title
  • title就是網頁標題，非常的重要
  • body存放網頁的所有內容

2、vscode外掛

• auto rename tag自動修改標籤

• Live server實時更新的

• 格式化程式碼2個√開啟

• easy less編譯less檔案，html不能直接引用less，會將其自動編譯成css檔案來使用

3、快捷鍵

• 快速複製 shift+alt+下箭頭

• 修改相同的標籤，雙擊選中，ctrl+d

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

• 快速跳到某一行 ctrl+g

• 選擇某一個區域塊，shift+alt

4、標籤的學習

• 理解標籤是幹什麼的，標籤的含義

• 在合適的地方給一個合理的標籤，就可以使頁面更加的清晰

2、body標籤的相關的內容

1、標題標籤

• head的縮寫，在body裡面寫，標題的標籤會變粗，獨佔一行
• 一共有6級標籤，在標籤裡面填寫內容

<h1>我是一級標籤</h1>
<h2>我是二級標籤</h2>
<h3>我是三級標籤</h3>
<h4>我是四級標籤</h4>
效果依次遞減，字型的大小依次遞減

2、段落標籤

• p標籤用於定義段落，分段就是用,就分成了上下2段

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

3、換行標籤

• br />,遇到這個標籤文字強制換行,在段落裡面使用的話，就可以再起一行

• 是單標籤，另起一行

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

4、文字格式化標籤

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

• 更加吸引

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

5、盒子標籤div和span

• div和span是沒有語義的，用來存放內容的，圖片，就是一個盒子，分割，分割槽

• 一行只能放一個div，是一個大的盒子，後面不能有其他的內容在這個一行裡面顯示

• span是跨度的，跨距的，橫著顯示，可以在一行裡面顯示多個span

6、影像標籤和路徑

• img標籤來定義html頁面的影像

• 是一個單的標籤，img src="影像url" ,src是必須的屬性，指定檔案的路徑和檔名，屬性就是屬於這個標籤的特性

• 圖片的存放的位置，需要在網頁檔案同一個資料夾裡面才行

• 還有其他的屬性

  • alt 文字，替換的文字，影像不能顯示的時候，用文字來替換

  • title 提示文字，滑鼠放在影像上面，提示文字

  • width，設定影像的寬度，畫素

  • height 設定影像的高度。畫素,一般的話，只修改一個屬性即可

  • border屬性，給影像設定邊框,15畫素的邊框，css後面還可以修改顏色

• 屬性與屬性之間沒有順序,使用空格來進行分割

• 鍵值對的格式,一個鍵，一個值

• 路徑的理解

  • 就是將一些的素材放在資料夾裡面，然後網頁檔案來進行編寫

  • 絕對路徑，就是完整的路徑，電腦的位置

    • 不常用

  • 相對路徑，就是不完整的路徑，就是位於html不同位置來定義的

    • 同一級路徑，直接寫上影像名就可以了

    • 上一層路徑的話，../上一級的目錄/影像名

    • 下一層路徑的話，下一級的目錄/影像名

7、超連結

格式
<a href="跳轉目標" target="目標視窗彈出的方式">文字或影像</a>

href=連結目標的url地址
target= 指定連結頁面開啟的方式，_self為預設值,當前的頁面開啟，_blank為在新的視窗中打卡的方式

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

• 內部連結，網站內部之間的連結，不需要http,內部之間的跳動

• 空連結 a href ="#"> 公司地址

• 下載連結，如果裡面的地址是檔案或者壓縮包 .exe 或者.zip格式的

• 文字，影片，圖片等都可以做成一個超連結，開啟一個圖片跳轉到百度上面去

• 錨點連結，就是點選這個連結，直接就跳到當前的這個頁面，，快速定位到頁面中的某個位置,格式為 a href= "#名字" > 第二集 然後網頁內容的話，就是 <h3 id=名字 第二集,相當於是一種定位的方式，有2個對應的

8、特殊字元

• 就能顯示特殊字元

• 空格 &nbsp，幾個這個就是幾個空格

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

9、表格標籤

• 用於顯示，展示資料可讀性非常的好，股票等展示

<table> 一個的最大的表格
   <tr>  定義表格中的行，代表表格中的每一個行
      <td>單元格內的文字</td> 存放資料內容，單元格，沒有列的概念
   </tr>
</table>

關係如下圖所示

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

• 1、表格的屬性

  • align=(left,center,right) 規定表格相對周圍元素的對齊方式，寫在table裡面去

  • border，就是表格的邊框，畫素的值,預設是沒有的邊框

  • cellpadding 規定文字距離單元格邊框的距離,預設是1畫素的距離

  • cellspacing 規定單元格和單元格之間的距離，預設是2畫素，就有一定的距離,0的話，之間就是沒有距離的

  • width 規定單元格的寬度

  • height 高度

• 2、單元格之間可以放任何屬性，連結什麼的都可以放

• 3、表格結構標籤

  • 場景，表格非常的長的話，將表格分割成表格頭部和主體區域

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

  • tbody 是表格的主體區域，更好的分清表格的結構

• 4、合併單元格

  • 將多個單元格合併成一個

  • 跨行合併 rowspan="合併單元格的個數"，就是將第一行和第二行進行合併

  • 跨列合併 colspan="合併單元格的個數"，將第一列和第二列進行合併

  • 程式碼的位置，跨行的，最上側單元格為目標單元格，寫合併程式碼

  • 跨列的話，最左側單元格為目標單元格。寫合併程式碼
    如下圖所示
    

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

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

  • 找到目標單元格，寫上合併的方式= 合合並的單元格數量，比如 td colspan="2" <//td>

  • 刪除多餘的單元格

10、列表標籤

• 1、表格式展示資料的，列表就是來佈局的，小米的官網，整齊，有序的

• 2、無序列表(重點)

  • ul表示無序列表，li表示列表項，就是一個很大的框子，每個li佔一個

  • 是並列的，沒有順序的列表，ul只能巢狀li，不能存放p,ul裡面只能存放li標籤，其餘的都不能放

  • 但是li標籤裡面可以存放任何標籤

  • 會帶有自己的樣式屬性，小圓點，學會css會去掉這個

• 3、有序列表

  • ol來定義有序列表，li表示列表項的

  • ol只能存放li，li可以存放很多的標籤

  • 會自動的帶有樣式屬性,如1,2,3

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

  • 就是有一個標題，下面都是圍繞這個標題進行解釋的，就使用自定義列表

  • dl表示自定義列表，dt定義名詞，dd就是來解釋這個名詞的

  • dl只能存放dt和dd標籤，其餘的標籤不能存放,但是dt和dd標籤可以包含任意的標籤

11、表單標籤

• 就是可以輸入姓名，電話，姓名等，這個就是自己來進行輸入

• 1、收集使用者的資訊，自己輸入的電話，別人就能拿到

• 2、表單包含什麼

  • 1、表單域(一個大的區域)

    • form用來定義表單域，實現了使用者資訊收集和傳遞,因此就是定義一個很大的表單域的話，就會將裡面的資料傳送到伺服器裡面去

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

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

    • input輸入表單元素,單標籤

      • type屬性，設定不同的表單元素，決定以什麼樣的形式來呈現給使用者

        • text型別，文字框，使用者可以輸入任何的內容,預設是文字框的樣式

        • password 密碼框，就是*來代替，使用者看不見密碼

        • radio 單選按鈕,但是需要nname就能實現單選了

        • checkbox 定義核取方塊，實現一個多選的效果

        • submit 定義提交按鈕，就會將資訊提交到伺服器中，name和value等值提交給後臺伺服器。可以使用value改變顯示的內容

        • reset 重置按鈕,value可以改變顯示的內容，還原初始的狀態

        • button 點選按鈕，透過javascript來實現的

        • file 提供檔案上傳，頭像等

      • name 使用者自定義名字，表單元素的名字，單選和多選的name必選是一樣的name，才能實現效果，區別不同的表單元素

      • value 使用者自定義表單元素的值,選擇了這個值，就會把這個值送到後臺，單選和預設的按鈕，前臺不能顯示，後臺可以顯示，預設顯示的內容

      • checked 當頁面開啟的時候，預設選上，針對為單選按鈕和，值為checked

      • maxlength 定義最大字元長度

      • label 標籤繫結了一個表單的元素，當點選label標籤內的文字時，瀏覽器會自動的將游標轉到或者選擇對應的表單元素上，增加了使用者的體驗，經常和Input一起使用

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

    • select下拉表單元素

      • 如果有多個選項讓使用者使用的話，並且想要節約空間的時，可以使用select標籤定義下拉選單

      至少包含一對option
      <select>
         <option></option>
         <option selected="selected"></option>
         <option></option>
      </select>
      

      • 顯示預設的選項,option裡面寫selected="selected"

    • textarea文字域元素

      • 留言，這種內容較多的情況下，可以使用這個，評論等。因為text是一行的文字框，存放的內容比較少

      • cols=每行字元數，rows=可以顯示多少行

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

  • 3、提示資訊，提示你這個框輸入什麼，是幹什麼的

    <input placeholder="提示的文字"> 提示資訊，填寫內容的話，會自動的消失