Web | HTML學習筆記

時間  2019-11-17
標籤 web html 學習 筆記 欄目 HTML 简体版
原文   原文鏈接

HTML（Hyper Text Mark-up Language，超文本標記語言），一種使用標記標籤 (tag) 描述網頁的語言，其中的「超文本「是指頁面內除文本以外還能夠包含圖片、連接、程序、音頻、視頻等非文字元素。
HTML 經常使用於編寫頁面主體結構，CSS 經常使用於對頁面進行靜態修飾，JavaScript 經常使用於對網頁增長動態功能。css

1. HTML基本結構

HTML註釋：<!-- HTML註釋格式 -->html

<!-- HTML註釋格式 -->
<!-- 基本HTML文檔格式 -->
<html>
<head>
    <title>文檔標題</title>
</head>
<body>
    文檔主體內容
</body>
</html>
<!-- 標準HTML文檔格式 -->
<!DOCTYPE html>  <!-- H5文檔類型=html -->
<html lang="en">  <!-- language=English -->
<head>
    <meta charset="UTF-8"> <!-- 字符集 -->
    <!-- 屏幕自適應大小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    文檔主體內容
</body>
</html>

2. HTML-頭部標籤

2.1 meta標籤-元信息

(1) meta標籤：頁面元信息，位於<head></head>中。服務器

<meta name="" content=""/>
<meta http-equiv="" content=""/>

(2) meta標籤屬性：鍵值對cookie

  • name:content
  • http-equiv:content
<meta/>屬性 值 描述
content some_text 定義與 http-equiv 或 name 屬性相關的元信息
name author
description
keywords
generator
revised
others		 把 content 屬性關聯到一個name。
http-equiv content-type
expires
refresh
set-cookie		 把 content 屬性關聯到 http 頭部
scheme some_text 定義用於翻譯 content 屬性值的格式

例如：網絡

<title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!">
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東">

2.2 link標籤-連接外部資源

<!--連接外部css文件-->
<link rel="stylesheet" type="text/css" href="文件url" />  
<!--連接icon文件-->
<link rel="icon" href="favicon.ico" />

2.3 base標籤-基準連接

base標籤：爲頁面全部連接規定默認url或默認target。ide

<base href="" target="" />
<base/>屬性 值 描述
herf url 規定頁面全部連接的默認url
target _self
_blank		 規定頁面全部連接的默認打開方式

3. HTML標籤

HTML元素：從開始標籤（start tag）到結束標籤（end tag）的全部代碼；工具

空元素：沒有內容的 HTML 元素；推薦在開始標籤中關閉；如<br/>；oop

3.1 HTML標籤分類

按標籤類型分類：ui

標籤類型 標籤
單標籤 <br/>，<img/>，<input/>...
雙標籤 <p></p>，<div></div>...

按標籤顯示模式分類：url

標籤顯示模式 標籤
塊級元素 <div></div>，<ul></ul>...
行級元素 <span></span>，<a></a>...
行內塊元素 <img/>、<td></td>...

3.2 HTML標籤屬性

HTML標籤屬性格式：name="value" ；

例如：

屬性 值 描述
id id 規定元素的惟一 id
class classname 規定元素的類名（classname）
style style_definition 規定元素的行內樣式（inline-style）
title text 規定元素的額外信息（可在工具提示中顯示）

詳細參考《HTML標準屬性參考手冊》

3.3 排版標籤

排版標籤
標題標籤 <h1>一級標題</h1>~<h6>六級標題</h6>
段落標籤 <p>這是一個段落</p>
換行標籤 <br/>
水平線標籤 <hr/>
塊標籤 <div></div>
行標籤 <span></span>

3.4 文本格式化標籤

文本格式 HTML4 HTML5
加粗 <b></b> <strong></strong>
斜體 <i></i> <em></em>
下劃線 <u></u>不推薦使用 <ins></ins>
刪除線 <s></s>不推薦使用 <del></del>

3.5 圖片標籤-img★

<img src="url" alt="替代文本" />
<img/>屬性 值 描述
src url 本地圖片路徑 / 網絡圖片url
alt text 圖片非正常顯示的替代文本
width&height px，% 設置圖像寬&高
title text 鼠標懸停時的顯示文本
border px 圖像邊框寬度

避免圖片失真：推薦width&height只設置一個值；

3.6 連接標籤-a★

<a herf="url" target="_blank"></a>
<a>屬性 值 描述
href url 超連接url / #id
target _self
_blank		 本標籤頁打開（默認）
新標籤頁打開
name text 錨點名稱

錨點定位：

<a href="#id/name"></a>

3.7 列表標籤

3.7.1 無序列表-ul

<ul>
    <li>表項1</li>
    <li>表項2</li>
</ul>

3.7.2 有序列表-ol

<ol>
    <li>表項1</li>
    <li>表項2</li>
</ol>

3.7.3 自定義列表-dl

<dl>
    <dt>上級表項1</dt>
        <dd>下級表項11</dd>
        <dd>下級表項12</dd>
    <dt>上級表項2</dt>
        <dd>下級表項21</dd>
        <dd>下級表項22</dd>
</dl>

列表項計數問題：從1開始計數，dl從dt開始計數；

3.8 表格標籤-table

<table border="1px">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行第1格</td>
            <td>第1行第2格</td>
        </tr>
        <tr>
            <td>第2行第1格</td>
            <td>第2行第2格</td>
        </tr>
    </tbody>
</table>

空單元格邊框未顯示問題：在空單元格中添加一個空格佔位符&nbsp;；

<table>屬性：

  • border：設置邊框；
  • cellspaceing：單元格間距；
  • cellpadding：單元格邊距；

<td>屬性：

  • 合併單元格：rowspan=""跨行， colspan=""跨列；
  • 水平對齊方式：align="left/center/right"；

3.9 表單標籤-form

<form action="" method="GET">
    表單域：表單元素；
</form>
<form>屬性 值 描述
action url 規定提交表單的目的地址url
method GET
POST		 規定提交表單使用的 HTTP 方法
target _self
_blank		 規定action的打開方式

HTTP 方法：

  • GET：表單數據在地址欄可見，明文；（默認）
  • POST：表單數據在地址欄不可見，密文；

3.9.1 input標籤★

<input type="" name="" value="" />
<input/>屬性 值 描述
type text
password
radio
checkbox
button
submit
reset
image
file		 單行文本輸入框
密碼輸入框
單選框
複選框
普通按鈕
提交按鈕
重置按鈕
圖片
文件
name 用戶自定義 input控件名稱
value 用戶自定義 input控件初始文本值
checked checked 定義選框預選項
disabled disabled 禁用表單元素
size number 字段顯示寬度
maxlength number 字段最大長度

H5新增input屬性：

<input/>屬性（H5） 值 描述
placeholder text 輸入字段的提示
autofocus autofocus 規定在頁面加載時是否得到焦點
（不適用於 type="hidden"）
multiple multiple 多文件上傳
autocomplete on
off		 是否使用字段的自動完成功能
required required 必填項，不能爲空

H5新增input type值：

input type值（H5） 描述
email 郵箱格式
tel 手機號碼
url url格式
number 數字格式
search 搜索框
range 自由拖動滑塊
time 時分
date 年月日
datetime 時間
month 月年
week 星期 年

3.9.2 label標籤

label標籤：爲 input 元素定義標註

<label for=""></label>
<label>屬性 值 描述
for id 規定 label 綁定到哪一個表單元素。
form form_id 規定 label 字段所屬的一個或多個表單。

3.9.3 select標籤-下拉列表

<select name="" id="">
    <option value="">下拉項1</option>
    <option value="">下拉項2</option>
</select>
<option>屬性 值 描述
selected selected 定義下拉列表預選項
disabled disabled 禁用表單元素
value text 定義送往服務器的選項值

3.9.4 textarea標籤-文本域

<textarea name="" id="" cols="30" rows="10">
    文本域：多行文本
</textarea>
  • rows&cols：定義文本的可見行&列；

3.9.5 fieldset標籤-元素分組

<fieldset>
    <legend>元素組標題</legend>
    表單元素1: <input type="text" />
    表單元素2: <input type="text" />
</fieldset>

3.9.6 datalist標籤-input可能值（H5）

datalist標籤：定義選項列表。與 input 連用，定義 input 可能的值。

<input list="datalist-id" />
<datalist id="datalist-id">
    <option value="input可能值_01">
    <option value="input可能值_02">
    <option value="input可能值_03">
</datalist>

3.10 多媒體標籤

3.10.1 embed標籤-嵌入內容

<embed src="" type=""/>
<embed/>屬性 值 描述
src url 嵌入內容的url
type type 嵌入內容的類型
width&height px 嵌入內容的寬&高

3.10.2 audio標籤-音頻

<audio src=""></audio>
<audio>屬性 值 描述
src url 音頻的url
autoplay autoplay 自動播放
control control 顯示音頻控件
loop loop 循環播放

3.10.3 video標籤-視頻

<video src=""></video>
<video>屬性 值 描述
src url 音頻的url
autoplay autoplay 自動播放
control control 顯示視頻控件
loop loop 循環播放
width&height px 視頻的寬&高

4. HTML代碼約束

  • 始終首行聲明文檔類型<!DOCTYPE html>；
  • 建議關閉全部 HTML 元素；空元素，推薦在開始標籤中關閉；
  • HTML標籤對大小寫不敏感，推薦使用小寫標籤；
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程