HTML知識點彙總

時間 2019-11-10

標籤 html 知識彙總欄目 HTML 简体版

原文原文鏈接

1、什麼是HTML

HTML是用來描述網頁的一種語言。php

HTML是指超文本標記語言（不只包含純文本，還包含圖片、超連接、音頻、視頻等）。css

HTML使用一套標記標籤來描述網頁。html

2、HTML標籤的做用

充當網頁骨架。web

語義化，使網絡爬蟲更好的抓取網站信息。瀏覽器

3、HTML骨架

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <!--  做用：配置html文件  -->
5     </head>
6     <body>
7         <!-- 書寫標籤組成的網頁結構 -->
8     </body>
9 </html>

一、DOCTYPE是document type(文檔類型)的簡寫，在網頁中用來講明當前使用的XHTML或者HTML是什麼版本緩存

二、head是對HTML進行一些附加信息，內容不顯示在網頁中websocket

三、body是HTML的主體部分，顯示在網頁中的內容網絡

4、head標籤中能夠放的元素

一、meta標籤 session

　　<meta charset = "UTF-8" /> 用於聲明字符編碼級socket

　　<meta name="keywords" content = "內容"> 用於提供給搜索引擎關鍵字

　　<meta name = "discription" content = "內容"> 用於提供給搜索引擎網頁簡單描述

二、title標籤

標識文檔標題，該標題會顯示在瀏覽器的標題欄的標籤頁上

三、style標籤

四、link標籤

五、script標籤

5、HTML語法

一、標籤之間對空格，縮進，換行不敏感，瀏覽器只會當作一個空格處理

二、標籤名必須使用一對尖括號包裹，標籤通常都是成對出現，單標籤除外

常見單標籤：<img/> <br/> <hr/>

三、標籤屬性寫法：鍵值對形勢（key="value"）

eg: <img src="1.png" alt="圖片" title="我是一張圖片"/>

6、HTML中標籤分類

一、塊級元素：h1-h六、p、div、ol、ul、dl、form、table等

二、行內元素 a、img、span、strong、em等

塊級元素特色：

一、獨佔一行；
二、高度，行高以及外邊距和內邊距均可控制；
三、寬度缺省是父容器的寬度，除非設定一個寬度；
四、它能夠容納內聯元素和其餘塊元素。（注意：p標籤不可包含div）

行內元素特色：

一、設置寬高無效

二、對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間

三、不會自動進行換行

7、HTML中經常使用標籤

一、h系列（h1-h6）（headline的縮寫） 
   做用：給文本添加標題語義 
  注意：h系列的標籤不能相互嵌套，網頁通常只有一個h1標籤

二、p（paragragh）段落標籤

  做用：給文本添加段落語義

  注意：p是文本級標籤，內部只能書寫文本類的內容，好比：文本，圖片，表單元素，廢棄標籤

三、img標籤（單標籤）
   <img src="" alt=""/>
   src:路徑，插入圖片所在的位置
   alt：圖片加載失敗時顯示的文本
   width:設置圖片的寬度
   height:設置圖片的高度 注意：寬度和高度通常只設置一個讓圖片按比例縮放
    <img src="images/01.png" alt="圖片加載失敗，請刷新" width="200px"/>

 四、a標籤（超連接）  

　　　href: 屬性值書寫的是要跳轉頁面的路徑（路徑能夠爲相對路徑和絕對路徑）　　

　　　target: 屬性值設置新頁面打開方式

     默認值（_self）：在當前窗口打開

　　　_blank: 在新窗口打開

　　　title: 懸停提示文本

    <a href="#id"></a> 能夠進行頁面內錨連接跳轉

  五、列表
     5.1無序列表 ul
      做用：給文本添加無序列表語義
      ul:unordered list 無序列表
      li:list item   列表項
      注意：
　　    ul和li是第一個成對出現的標籤,出現ul必定有li，有li必定被ul包裹
　    　ul內部只能嵌套li不能出現任何其餘標籤。

     5.2有序列表 ol 
　　   做用：給文本添加有序列表語義
　　    ol:ordered list 有序列表
　　    li:list item 列表項
　　    每個列表項之間有順序之分
　　    ol,li也是一組成對出現的標籤，ol必定嵌套li。
　　    ol內部嵌套一個或者多個li

       5.3自定義列表 
　　    做用：給文本添加自定義列表語義
　　    dl: definition list 自定義列表
　　    dt: definition title 標題
　　    dd: definition description 描述
　　    dl嵌套dt和dd，dt和dd是同級關係，dt是標題，dd是對標題解釋說明（dl>dt+dd）

    六、表單元素
       6.1form  
　　     說明：將全部的表單元素都書寫在form標籤內部
　　　　　   　form標籤是功能標籤不是結構標籤
　　　　　  　 提交位置：action
　　　　　　   提交方式：method
　　　　　　   <form action="1.php" method="get"></form> 
　　　　　　  表單元素：提供給用戶進行輸入或者選擇控件
　　　　　  　屬性：type，根據type屬性值，有不一樣的表單類型 
       6.2單行文本框  <input type="text" name="yonghuming" value="用戶名" /> 
　　    6.3密碼框  <input type="password" name="mima" /> 
       6.4單選框     
　　　　　　<p>
　　　　 　　請選擇性別：
　　　　 　　<input type="radio" name="sex" />男性
　　　　　　 <input type="radio" name="sex" checked="checked" />女性
　　　　　　</p> 
          說明： 
　　　　　　type屬性值：radio
　　　　　　同一組單選框，必須設置相同的name屬性值
　　　　　　checked: 設置表單被選中checked

　　6.5複選框 
　　　　請選擇愛好： 
　　　　<p> 
　　　　　　<input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">學習</label>
　　　　　　<input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label>
　　　　</p> 
　　　　說明：type屬性值：checkbox
  　　　　　　 同一組複選框，必須設置相同的name屬性值
　　　　　　   也具備checked屬性
　　　　　　   可使用label標籤