1. 程式人生 > 實用技巧 >HTML學習(一)

HTML學習(一)

內容預覽

1.HTML的概念與基本用法

2.HTML的一些擴充套件

一、HTML基本學習

1.1.什麼是HTML?

百度百科:

HTML: Hyper Text Markup Language 超文字標記語言

說人話:

HTML就是一款功能比".txt"檔案更強大的語言,它自定義了一些標籤可以使頁面做到純文字語言做不到的事情。比如:<image>標籤可以內嵌圖片,又如<table>標籤可以展示表格資料。

大家都用過.txt檔案,它是一個純文字語言,裡面只能使用一些中文語言、英文語言以及一些常見的符號,不能插入圖片、不能使用連結等等。而HTML就是功能比純文字語言更強大的語言,這就是“超文字”的來源。

其次,HTML自定義了一些標籤,如<image><table>標籤等,可以在頁面內展示圖片資料表格資料等,這就是“標記”的來源。因此HTML是一個“超文字標記語言”。

1.2.HTML的作用是什麼?

記住這幾句話:

HTML: 決定了頁面的框架 -------》 用來展示資料 ---------》相當於一堆傢俱隨意堆砌的房子

CSS: 用來美化我們的頁面 -------》 用來美化頁面 --------》讓房子內的傢俱有條理的擺放

JS: 提高使用者的互動體驗--------》使頁面具有簡單的動態效果 --------》智慧傢俱,住的更舒適

1.3.HTML語法規範

<!DOCTYPE html>
    <html>
        <head>
        <title>文件的標題</title>
        </head>

        <body>
        文件的內容......
        </body>

    </html>

1. 最上面是一個文件宣告
2. 根標籤 html
3. html檔案主要包含兩部分. 頭部分和體部分
  頭部分 : 主要是用來放置一些頁面資訊
  體部分 : 主要來放置我們的HTML頁面內容
4. 通過標籤來對內容進行描述,標籤通常都是由開始標籤和結束標籤組成
5. 標籤不區分大小寫, 官方建議使用小寫

注意:

1.3.1 .關於'<!DOCTYPE>'的定義

'<!DOCTYPE>' 宣告必須是 HTML 文件的第一行,位於 <html> 標籤之前。

'<!DOCTYPE> 宣告不是 HTML 標籤;它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。

在 HTML 4.01 中,<!DOCTYPE> 宣告引用 DTD,因為 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。

HTML5 不基於 SGML,所以不需要引用 DTD。

提示:請始終向 HTML 文件新增 <!DOCTYPE> 宣告,這樣瀏覽器才能獲知文件型別。

1.3.2.HTML 4.01 與 HTML5 之間的差異

在 HTML 4.01 中有三種 <!DOCTYPE> 宣告。在 HTML5 中只有一種:

<!DOCTYPE html>

1.4.一張圖搞定HTML常用標籤

二、擴充套件

2.1 字型擴充套件

  b : 加粗

  i : 斜體

  strong: 加粗, 帶語義標籤

  em: 斜體, 帶語義

2.2 檔案路徑擴充套件

  • 相對路徑

    ./        代表的是當前路徑
    ../       代表的上一級路徑
    ../../    上上一級路徑

2.3 表格擴充套件

  表格標籤table

  table標籤:

  常用的屬性:

    bgcolor : 背景色

    width : 寬度

    height : 高度

    align : 對齊方式

  tr 標籤

  td 標籤

合併單元格:

colspan : 跨列操作

rowspan : 跨行操作

注意: 跨行或者跨列操作之後,被佔掉的格子需要刪除掉

表格的巢狀:

在td中可以巢狀一個表格

2.4 表單擴充套件

表單標籤

<!--
            表單標籤
                action : 直接提交的地址
                
                method : 
                        get 方式  預設提交方式 ,會將引數拼接在連結後面 , 有大小限制 ,4k
                        post 方式  會將引數封裝在請求體中, 沒有這樣的限制
                        
            
            input :
                type: 指定輸入項的型別
                    text : 文字
                    password :  密碼框
                    radio :        單選按鈕
                    checkbox :  複選框
                    file      : 上傳檔案
                    submit   : 提交按鈕
                    button      : 普通按鈕
                    reset     : 重置按鈕
                    hidden  : 隱藏域
                    
                    date    : 日期型別
                    tel     : 手機號
                    number   : 只允許輸入數字
                    
                placeholder : 指定預設的提示資訊
                name : 在表單提交的時候,當作引數的名稱
                id : 給輸入項取一個名字, 以便於後期我們去找到它,並且操作它
            
            textarea : 文字域, 可以輸入一段文字
                        cols : 指定寬度
                        rows : 指定的是高度
            
            select  : 下拉列表
                option : 選擇項
        -->