HTML 基礎篇

時間 2019-11-07

標籤 html 基礎欄目 HTML 简体版

原文原文鏈接

本章內容：javascript

簡介

HTML定義
標籤訂義和屬性
HTML5基本結構
HTML5字符集

<head>標籤

<title>
<base/>
<link/>（rel、href、type）
<meta/>（http-equiv、name、content）

<body>標籤

塊級標籤 & 內聯標籤
基本標籤（<h1>~<h6>、<p>、<b> <strong>、<strike>、<u>、<em> <i>、<sup>、<sub>、<br>、<hr>、<div>、<span>）
特殊符號（>、<、 、"、©...）
<a> 超連接標籤(錨標籤)（href、target、name）
<img> 圖形標籤（src、title、alt、width、height、align）
列表標籤（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）
<table> 表格標籤（<table> 、<caption> 、<tr>、<th>、<td>、<thead>、<tbody>、rowspan、colspan）
<from> 表單標籤（action、method、enctype、<input>、<textarea>、<select>、<label>、<fieldset>）

框架

<frameset>
<iframe>

簡介

HTML 是什麼？css

htyper text markup language 即超文本標記語言。html

超文本: 就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。java

標記語言: 標記（標籤）構成的語言。python

什麼是標籤:web

是由一對尖括號包裹的單詞構成例如: <html> *全部標籤中的單詞不可能以數字開頭.
標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標籤分爲兩部分: 開始標籤<a> 和結束標籤</a>. 兩個標籤之間的部分咱們叫作標籤體.
有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/><hr/><input/><img/>
標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>

標籤的屬性:sql

一般是以鍵值對形式出現的. 例如 name="nick"
屬性只能出如今開始標籤或自閉和標籤中.
屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹例如 name="nick"
若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly

HTML5基本結構:瀏覽器

　　將HTML4中的DTD定義爲以下結構便可，其餘不變。緩存

　　<!DOCTYPE HTML>

HTML5支持的兩種指定頁面使用的字符集的方式:

使用Content-Type指定字符集

<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>

直接使用charset指定字符集

<meta charset="UTF-8">

<head> 標籤

<title>安全

<title>Title</title>

<base/>

標籤爲頁面上的全部連接規定默認地址或默認目標。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="http://images.cnblogs.com/cnblogs_com/suoning/845162/"/>
    <base target="_blank" />
</head>
<body>

<img src="o_s.png" alt="圖片加載失敗。。。"/>
<a href="http://cnblogs.com/suoning/">nick blogs</a>

</body>
</html>

# 上面這段代碼中，<img>標籤的src屬性是一個相對路徑，由於<head>中經過base標籤設置了連接的默認地址，
因此img的src實際的地址是「http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png」。
一樣的，<a>中只是指定了href，並未指定target屬性，因此也會使用base中設置的target屬性的值。

<link/>

引用外部文檔，常見於引用外部樣式。重要屬性有三個：rel、href、type。

rel 規定文檔與被連接文檔之間的關係。

　　 rel="dns-prefetch" 預先解析緩存文檔中使用的域名，目的是爲了提升網頁訪問速度。使用場景：在一個網頁頻繁使用其餘域名資源時。
　　 rel="shortcut icon"或rel="icon" 在收藏和標題欄上用於顯示的圖標。示例：<link rel="icon" href="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意：IE瀏覽器只支持ico格式，爲了兼容IE，圖片文件採用ico格式。
　　 rel="stylesheet" 引用外部樣式表。
　　 rel="nofollow" 用於指示搜索引擎不要追蹤（爬蟲抓取），減小垃圾連接。用於<a>標籤，使用場景：網頁不被信任或是不但願唄搜索引擎錄入的網站。

href 資源的路徑（相對路徑/絕對路徑）。

type 規定被鏈接文檔的MIME類型，用於明確文件的打開方式。例如：.ico文件 image/x-icon。

<meta/>

定義關於HTML文檔的元數據。重要的屬性有三個：http-equiv、name、content

http-equiv 把content屬性值關聯到http頭部。

Content-Type（瀏覽器接受的文檔類型，通常是text/html）
refresh（網頁刷新，以秒爲單位）
expires（設定網頁到期時間，一旦過時，必須到服務器上重傳）

<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
<meta http-equiv="Refresh" content="2">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
<meta http-equiv="expires" content="6 Jun 2016"/>

name 把content屬性關聯到一個名稱。

keywords（搜索關鍵字，用於搜索引擎抓取信息的顯示）
description（搜索到網站後顯示的網頁內容簡描述）
author（站點製做者信息）
generator（用以說明生成工具）
name也能夠根據特定的功能自定義，在新浪網中有使用360認證和搜狐認證（<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>）。

<meta name="keywords" content="搜索關鍵字">
<meta name="description" content="簡要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以說明生成工具">

content 定義與http-equiv或name屬性相關的元信息，是必要的屬性。

<body> 標籤

一、塊級標籤和內聯標籤

塊級標籤：<p><h1><table><ol><ul><form><div>

內聯標籤：<a><input><img><sub><sup><textarea><span>

block（塊）元素的特色
① 老是在新行上開始；
② 高度，行高以及外邊距和內邊距均可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它能夠容納內聯元素和其餘塊元素

inline（內聯）元素的特色
① 和其餘元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其餘內聯元素

對行內元素，須要注意以下
設置寬度width 無效。
設置高度height 無效，能夠經過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。

二、基本標籤

<h1>~<h6> 標題標籤.

<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

　　　　style="text-indent: 2em"能夠設置樣式爲首行縮進兩個字符。

　　　　<blockquote></blockquote>能夠用來設置整個段落的縮進。

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<u>: 文字下方加下劃線.

<em> <i>: 文字變成斜體.

<sup>和<sub>: 上角標和下角標.

<br>:換行.

<hr>:水平線.

<div>

塊級標籤。塊級標籤經常使用於佈局，行級標籤經常使用語顯示內容。

　　 div的顯示一般使用id或class來標識。id爲惟一的標籤標識，class爲標籤的類標識。

　　 div的大小是由內容來決定的，默認狀況下，高度由內容的高度決定，寬度適應屏幕。

　　能夠容納其餘元素，是一個容器。

<span>

三、特殊符號

　　> >

　　< <

　　  空格

　 " 引號

特殊符號	符號碼
"    &quot ;
&    &amp ;
<	&lt ;
>	&gt ;
©	&copy ;
®	&reg ;
±	&plusmn ;
×	&times ;
§	&sect ;
¢	&cent ;
¥	&yen ;
·	&middot ;
    &euro ;
£	&pound ;
™	&trade ;

四、<a> 超連接標籤(錨標籤)

重要屬性有三個：href、target、name

　　　　href 超連接地址：能夠是Web上任意資源，包括圖片，網頁，樣式，腳本文件等。href="#"時，表示被連接頁面就是當前頁面。

　　　　target 文檔打開時要顯示的目標位置，屬性值通常有：_blank（新窗口中打開）、_self（默認，在超連接所在的容器中打開）、_parent（在超連接的父容器中打開）、_top（整個容器中打開）、name（框架名稱）。

　　　　name 錨記名稱。做用：跳轉到文檔的某個地方。返回首頁。

# 跳轉網頁
<a href="http://cnblogs.com/suoning" target="_blank">Nick Blogs</a>

# 跳轉錨記書籤名稱
<a name="top"><h3>Top！</h3></a>
<div style="height: 800px"></div>
<a href="#top">top</a>

1.標籤最簡式
<a href="mailto:xxx@xx.com">郵件聯繫</a>
2.標籤幫你填抄送地址
<a href="mailto:xxx@xx.com?cc=xxxx@xx.com">郵件聯繫</a>
3.標籤幫你填暗送地址
<a href="mailto:xxx@xx.com?bcc=xxxx@xx.com">郵件聯繫</a>
4.暗,抄
<a href="xxxxx@xx.com">郵件聯繫</a>
5.標籤幫你填主題
<a href="mailto:xxx@xx.com?subject=這是主題">郵件聯繫</a>
6.填郵件內容
<a href="mailto:xxx@xx.com?body=這是內容">郵件聯繫</a>
7.多址發送
<a href="mailto:xxx@xx.com,xxxx@xx.com">郵件聯繫</a>

mailto標籤發送郵件實例

# http://shang.qq.com/v3/widget.html

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="點擊這裏給我發消息" title="點擊這裏給我發消息"/></a>

連接QQ實例一

<a href="tencent://message/?uin=630571017" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a>

# 更多圖片地址以下：
# http://wpa.qq.com/pa?p=1:707321921:1
# http://wpa.qq.com/pa?p=1:707321921:2
# http://wpa.qq.com/pa?p=1:707321921:3
# http://wpa.qq.com/pa?p=1:707321921:4
# http://wpa.qq.com/pa?p=1:707321921:5
# http://wpa.qq.com/pa?p=1:707321921:6
# http://wpa.qq.com/pa?p=1:707321921:7
# http://wpa.qq.com/pa?p=1:707321921:8
# http://wpa.qq.com/pa?p=1:707321921:9
# http://wpa.qq.com/pa?p=1:707321921:10
# http://wpa.qq.com/pa?p=1:707321921:11
# http://wpa.qq.com/pa?p=1:707321921:12
# http://wpa.qq.com/pa?p=1:707321921:13

連接QQ實例二

五、<img> 圖形標籤

行級標籤，用來顯示圖片。

重要屬性有：src、title、alt、width、height、align。

　　　　src 圖片地址。

　　　　title 鼠標懸浮在圖片上的文字。

　　 alt 圖片找不到時要替換的文字。若是圖片資源使用的是外網資源，則不會顯示要替換的文字。若是使用的是本網站的資源（相對路徑給出），則找不到圖片時會顯示替換的文字，並保留圖片設置的寬高結構。

　　　　align 圖片周圍文字的垂直對齊狀況。經常使用的屬性值有：top（與圖片的頂部對齊）、middle（與圖片的中部對齊）、bottom（默認，與圖片的底部對齊）。

width 圖片的寬

height 圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

<img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" alt="圖片加載失敗。。。" title="The knife girl, kiss"/>

六、列表標籤　

<ul> :無序列表標籤

<li>:列表中的每一項.

<ol> :有序列表標籤

<li>:列表中的每一項.

<li>主要的屬性有：type、value兩個:

type指明項目的類型，屬性值有：A，a，I，i，1，disc（實心圓），square（實心正方形），circle（空心圓）。
value表示序號值從幾開始。

<dl> 定義列表

<dt> 列表標題

<dd> 列表項

    <ur>
        <li type="circle">A</li>
        <li type="1">B</li>
        <li type="1">C</li>
    </ur>
    <ol>
        <li value="3">3</li>
        <li>4</li>
    </ol>
    <dl>
        <dt><i>標題</i></dt>
        <dd>第一項</dd>
        <dd>第二項</dd>
        <dd>第三項</dd>
    </dl>

七、<table> 表格標籤

    <table border="1">
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1.</th>
                <td>nick</td>
            </tr>
            <tr>
                <th>2.</th>
                <td>jenny</td>
            </tr>
        </tbody>
    </table>

<table> 表格標籤

border:（表格邊框）
align（水平對齊方式）
bgcolor（背景顏色）
cellpadding（內邊距，單元格與內容之間的距離）
cellspacing（外邊距，單元格的間距，設置爲0時，表格變爲實線表格）
width（表格的寬度，能夠用%或者像素，最好經過css來設置長寬）

<caption> 表格的標題

<tr> 表格的數據行，table row

<th> 表格的表頭名稱，與<td>不一樣在於文字採用加粗居中的形式顯示，table head cell

<td> 單元格，用來顯示錶格內容，table data cell

<thead> 表格頭部，使結構更加分明

<tbody> 表格主體部分，使結構更加分明

rowspan 單元格豎跨多少行，做用在th或者td上

colspan 單元格橫跨多少列（即合併單元格），做用在th或者td上

<table>
    <caption>xxxxxxxxxx</caption>
    <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>女神</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1.</th>
                <td>nick</td>
                <td>18</td>
                <td>可可西</td>
            </tr>
            <tr>
                <th>2.</th>
                <td>jenny</td>
                <td>21</td>
                <td>nick!!!</td>
            </tr>
        </tbody>
</table>

八、<form>表單標籤

表單屬性

HTML 表單用於接收不一樣類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中。

屬性：action、method、enctype

　　　　action 表單要提交的地址，用於處理表單的內容（通常是提交字典到後臺的一個接口，這個接口是java寫成的，提交到這個接口後後臺就知道如何處理這些數據了）。

　　　　method 提交的方法，默認是get方式提交。

get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

　　　　enctype 對錶單數據進行編碼，默認都是要編碼的。格式爲：application/x-www-form-urlencoded（表單默認的編碼格式，表單發送前對全部字符進行編碼。編碼規則：空格轉換爲「+」號，特殊符號轉換爲ASC HEX值）。提交普通的文本內容到服務器就能夠採用這種默認的編碼方式。當你須要提交的是一個文件時，編碼就須要採用另外一種格式：multipart/form-data（不對字符編碼，文件上傳時使用）。text/plain（是一種純文本編碼，空格轉換爲「+」號，可是不對特殊字符進行編碼）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <form action="https://www.baidu.com/s">
            <input type="text" name="wd">
            <input type="submit" value="百度一下">
        </form>
</body>
</html>

百度搜索實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <form action="https://www.sogou.com/web">
            <input type="text" name="query">
            <input type="submit" value="搜狗搜索">
        </form>
</body>
</html>

搜狗搜索實例

表單元素

<input> type 屬性：

text 文本框輸入（默認text文本框類型）。

autocomplete（自動完成輸入的內容，要求表單元素要有name屬性纔有自動完成的效果，off表示自動完成不可用，on表示自動完成可用）

disabled（設置或者獲取控件的狀態，默認是false便可用，等於true時不可用，不能輸入內容）

　　　　password 密碼框。（如下屬性text和password共有）

size（指定表單元素的初始寬度。當type爲text或password時，表單元素的大小以字符爲單位，對於其餘元素，寬度以像素爲單位）

maxlength（type爲text或password時，表示輸入的最大字符數），有利於防止sql的注入攻擊

readonly 只讀.　

　　　　　　placeholder 框內預置內容(灰色)，寫上內容時才消失

radio 單選按鈕。屬性：

name（將name的值設置爲相同值，才表示一組數據，才能實現單選功能）

value（必需要寫，提交到服務器的key值，實際開發過程當中value通常是編號）

checked（是否被選中的狀態）

checkbox 複選框。

name（名字必定要同樣同樣的，才表示是一組數據，添加到同一value值列表提交到服務器）

value（必需要寫，提交到服務器的key值，實際開發過程當中value通常是編號）

checked（是否被選中的狀態）

file 文件域，上傳文件（不一樣的瀏覽器表現形式不一樣）

　　　　submit 提交按鈕。用於提交表單。

　　　　reset 重置按鈕。清空表單的輸入，恢復到表單默認的狀態。

button 普通按鈕。通常結合javascript使用。

　　　　image 圖片按鈕，用來提交表單，與submit是同樣的效果。

src（圖片路徑）

　　　　hidden 隱藏字段。

value（隱藏的內容）

　　　　color 顏色標籤。value指定顏色值（採用#十六進制數表示）。

　　　　date 日期。value值指定默認的日期，格式爲****-**-**（年月日）。

　　　　datetime-local 顯示本地時間，value值指定默認的時間，格式爲2016-05-20T11:10:10（年月日T時分秒）。

　　　　number 數字向上或者向下滑動。能夠填數字而後向上或者向下選擇不一樣的值。

　　　　range 滑動標籤。min（指定最小值）、max（指定最大值）、value（指定當前默認值）。

　　　　week 每一年的週數。value指定哪一年第幾周，格式爲2016-W25（2016年第25周）。

<textarea> 文本域標籤。默認表現形式是能夠輸入不少行文本的文本框。

name （表單提交項的key）

　　　　cols（設置文本域寬度）

rows（設置文本域高度，即行數）

<select> 下拉框標籤。使用時要結合<option>子標籤一塊兒使用。

name:表單提交項的key

size：選項個數

multiple：多選

<option> 下拉選中的每一項

value（表單提交項的值）
selected（selected下拉選默認被選中）

<optgroup>爲每一項加上分組

<label> 把元素與文本結合起來

友好設計：不僅是選中複選框才能選中並打鉤，要求點擊對應的文字也能選中該複選框。
這種狀況下要用到<label>標籤的for屬性（設置或獲取給定標籤對象指定到的對象，值=另外一個元素的id號便可）

    <label for="name">姓名</label>
    <input id="name" type="text">

<fieldset> 對錶單中的相關元素進行分組

<fieldset>
    <legend>舒適提示</legend>
    <div align="middle">不要忘記點贊哦 ==</div>
</fieldset>

value: 表單提交項的值

對於不一樣的輸入類型，value 屬性的用法也不一樣：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值

框架

<frameset> 框架

用來劃分窗體，不能放在<body>中，不然沒有效果。

cols （縱向分割頁面。其數值表示方法有三種：「30%、30（或者30px）、*」；數值的個數表明分紅的視窗數目且數值之間用「,」隔開。「30%」表示該框架區域佔所有瀏覽器頁面區域的30%；「30」表示該區域橫向寬度爲30像素；「*」表示該區域佔用餘下頁面空間。例如：cols="25%,200,*" 表示將頁面分爲三部分，左面部分佔頁面30%，中間橫向寬度爲200像素，頁面餘下的做爲右面部分。）

rows（橫向分割頁面。屬性和cols同樣）

frameborder（設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）

border（框架之間的距離，通常設置爲0）

bordercolor（邊框的顏色）

framespacing（設置框架與框架間的保留的空白距離）

<frameset cols="40%,*,*"> 第一個框架佔整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個框架。
<frameset cols="*,*,*,*"> 瀏覽器窗口等分爲四部分。

<iframe> 框架

元素會建立包含另一個文檔的內聯框架（即行內框架）

name （設置框架名稱。此爲必須設置的屬性）

src （設置此框架要顯示的網頁名稱或路徑。此爲必須設置的屬性）

scrolling （設置是否要顯示滾動條。設定值爲auto, yes, no）

bordercolor （設置框架的邊框顏色）

frameborder （設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）

noresize （設置框架大小是否能手動調節）

marginwidth （設置框架邊界和其中內容之間的寬度）

marginhight （設置框架邊界和其中內容之間的高度）

width（設置框架寬度）

height （設置框架高度）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。