HTML 基礎知識

時間  2019-12-11
標籤 html 基礎 知識 欄目 HTML 简体版
原文   原文鏈接

HTML基本結構

HTML頭部標籤

  • meta 標籤

  • base 標籤

HTML標籤

HTML（Hyper Text Mark-up Language，超文本標記語言），一種使用標記標籤 (tag) 描述網頁的語言，其中的「超文本「是指頁面內除文本以外還能夠包含圖片、連接、程序、音頻、視頻等非文字元素。

HTML 經常使用於編寫頁面主體結構，CSS 經常使用於對頁面進行靜態修飾，JavaScript 經常使用於對網頁增長動態功能。

1、 HTML 基本結構

<!-- 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>文檔標題</title>
</head>
<body>
    文檔主體內容
</body>
</html>

2、HTML 頭部標籤

1. meta 標籤 - 元信息

  • meta標籤：頁面元信息，位於<head></head>中javascript

  • meta標籤屬性：鍵值對css

1 定義編碼格式：<meta charset="UTF-8">
2 爲搜索引擎定義關鍵詞：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
3 爲網頁定義描述內容：<meta name="description" content="HTML基礎">
4 定義網頁做者：<meta name="author" content="Mr mo">5 每30秒中刷新當前頁面：<meta http-equiv="refresh" content="30">
6 經常使用的針對移動網頁優化過 viewport 的 meta：<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

2. link標籤 - 連接外部資源

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

3. base標籤 - 基準連接

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

3、HTML 標籤

1. HTML標籤分類

按標籤類型分類：html

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

按標籤顯示模式分類：java

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

2. HTML標籤屬性

HTML標籤屬性格式：name="value";後端

例如：服務器

屬性 值 描述
id id 規定元素的惟一 id
class classname 爲 html 元素定義一個或多個類名(classname)
style style_definition 規定元素的行內樣式（inline style 內聯樣式）
title text 描述了元素的額外信息 (做爲工具條使用)

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

3. 排版標籤

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

4. 文本格式化標籤

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

5. 圖片標籤 - img

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

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

6. 連接標籤 - a

<a herf="url" target="_blank"></a>
<a>屬性 值 描述
href url 超連接url / #id
target _self
_blank		 本標籤頁打開（默認）
新標籤頁打開
name text 錨點名稱
title " " 鼠標移到上面顯示的文本描述

(1) 錨點定位：<a href="#id/name"></a>

  • 給每一個錨點添加ID，點擊連接直接跳轉到對應ID的位置
<a href="index.html#box1">錨點1</a>
<a href="http://www.baidu.com/#box2">錨點2</a>
....
<div id="box1">
<div id="box2">

(2) 路徑

  • 內部頁面用相對路徑，外部連接用URL
<a href="images/drinks.gif"></a>// images文件夾下的drinks.gif文件
<a href="../../book/index.html"></a> // .. 表明上行到父文件夾

7. 列表標籤

(1) 無序列表 - ul

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

(2) 有序列表 - ol

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

(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開始計數工具

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;oop

<table>屬性：

  • border-spacing：單元格之間邊框間距

    • border-spacing:10px 30px; 10px的水平間距，30px的垂直間距（IE6不兼容）

  • Border-collapse ：摺疊兩個邊框爲一個

    • 給 table 加 border-collapse:collapse;

  • cellspaceing：單元格間距；

  • cellpadding：單元格邊距；

<td>屬性：

  • 合併單元格：rowspan=""跨行， colspan=""跨列；

    • <td colspan="2"></td> ：兩列合併爲一個

  • 水平對齊方式：align="left/center/right"；

9. 表單標籤 - form

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

HTTP 方法：

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

  • POST：表單數據在地址欄不可見，密文；

(1) input 標籤

  • <input type="" name="" value="" />

  • name是後端使用的，可是習慣是要寫個空的值

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

  • <input type="checkbox" name="" checked/>運動 （checked就是默認選中，disabled 禁用）

  • 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 星期 年

(2) label 標籤

  • 爲 input 元素定義標註
<input type="checkbox" name="" id="a"/>
<label for="a">……</label> //只有這樣才能兼容IE6
<label>屬性 值 描述
for id 規定 label 綁定到哪一個表單元素。
form form_id 規定 label 字段所屬的一個或多個表單。

(3) select 標籤-下拉列表

<select name="" id="">
    <option value="">下拉項1</option>
    <option value="">下拉項2</option>
</select>
值 描述
selected selected 定義下拉列表默認項
disabled disabled 禁用表單元素
value text 定義送往服務器的選項值
  • 對高度的支持不兼容,因此通常只給寬，高度不會控制

(4) textarea 標籤-文本域

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

(5) fieldset 標籤-元素分組

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

(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>

10. 多媒體標籤

(1) embed 標籤 - 嵌入內容

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

(2) audio 標籤 - 音頻

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

(3) video 標籤 - 視頻

  • <video src=""></video>
<video>屬性 值 描述
src url 音頻的url
autoplay autoplay 自動播放
control control 顯示視頻控件
loop loop 循環播放
width&height px 視頻的寬&高
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程