H5基礎標籤淺談（一）

時間 2019-11-19

標籤 h5 基礎標籤淺談简体版

原文原文鏈接

嗯，這是本人的第一篇博客……比較稚嫩，望各位大神見諒。

如下是本人對H5前端基本標籤學習的一些學習筆記，與諸君分享。

文檔聲明格式：

<!DOCTYPE html>

注意：文檔聲明必有，並且必須在文檔頁面的第一行！HTML5已經簡化了，H4之前較爲繁瑣，本着便(tou)捷(lan)的心思，就不重複描述之前繁瑣的格式。

meta標籤：描述文檔的類型和編碼；描述搜索關鍵字的描述（charset; content; http-equiv; name ;）

meta標籤中的屬性：
1，charset:設置文檔的字符集編碼格式
HTML5中設置字符集編碼：<meta charset="UTF-8">
>>>常見的字符集編碼格式：a.GB2312：國標碼，簡體中文；
　　　　　　　　　　　　　 b.GBK,擴展的國標碼；
　　　　　　　　　　　　　 c.UTF-8,萬國碼Unicode
2，http-equiv:將咱們的信息寫給瀏覽器看，按照裏面的要求去執行，須要配合content屬性使用。
（http-equiv屬性只是代表須要設置哪一部分，具體的設置內容放到content屬性中）
可選屬性值：content-type(文檔類型) ;refresh（網頁定時刷新） ;
set-cookie（設置瀏覽器cookie緩存）
3，name屬性：使用方法同http-equiv。經常使用且須要掌握的屬性值：author（做者） keyword（網頁關鍵字） description（網頁描述）。html

　　　　　　　 keyword（網頁關鍵字） description（網頁描述）這兩個屬性設置，網頁必不可少前端

        <!--做者-->
        <meta name="author" content="http://www.jredu100.com" />
        <!--網頁關鍵字用英文逗號分隔-->
        <meta name="keywords" content="HTML5,網頁,web前端開發,Day1" />
        <!--網頁描述：搜索網站時，title下面的解釋相當重要！！-->
        <meta name="description" content="這是準備工做的第一天的學習內容，來自傑瑞教育" />

詳細屬性以下圖（上面介紹的是主要經常使用屬性）：

使用link標籤，連接網頁圖標（title前的小logo）

rel屬性：聲明連接文件的類型，此處選icon

type屬性：能夠省略

href屬性：表示圖片的路徑地址

代碼：

<link rel="icon" type="imag/x-icon" href="img/day1標題圖標.png" />

標籤的分類

塊級標籤：顯示爲塊，先後隔行（自動換行）；

行級標籤：從左往右按行逐一顯示；

常見的塊級標籤

<h1>-<h6>：標題標籤，自動加粗，h1最大，h6最小。web

<hr />:水平線標籤，哪裏須要放哪裏。

<p></p>：段落標籤。正則表達式

<br />,放在p標籤之中（塊級標籤中惟一不會換行的標籤）。瀏覽器

<blockquote cite="http://www.******.com">天道好輪迴，蒼天繞過誰？（其中的換行和空格很差使）</blockquote>引用標籤：cite 屬性，代表引用的來源和網址。

<pre></pre> 預格式標籤pre:瀏覽器默認顯示樣式：1·顯示爲等寬字體緩存

　　　　　　　　　　　　　　　　　　　　　　　　 2·代碼中的換行，空格等元素可在瀏覽器直接顯示

【補充】HTML文件中，空格表示：&nbsp

<ol></ol>:有序列表。其中包含<li>爲列表項。安全

<ul></ul>:無序列表。其中包含<li>爲列表項。服務器

<dl></dl>:定義描述列表。<dt>列表標題。通常僅一項，標題頂格；<dd>列表描述項。能夠有多項，對比標題縮進顯示。cookie

<figure></figure>：組合標籤。用於顯示圖片及圖片標題

　　　　　　　　　兩個子標籤：<img />圖片

　　　　　　　　　　　　　　　 <figcaption></figcaption>圖片的標題

<div></div>:分區標籤。在H5中具備重要地位，全部須要作的樣式均可以被div包裹呈現不一樣的樣式。

常見的行級標籤：

<!--span（文本）無實際意義，用於包裹某段或某個部分文字，修改特定樣式-->
        <span>SPAN中的文字</span>
        這是<span style="color: #F80;font-size: 45px;">Span</span>中的文字

        <!--em（強調）-->
        <em>這是EM中的標籤</em>
        <br />
        <!--strong（強調）-->
        <strong>這是strong中的文字</strong>
        <br />
        <!--i（傾斜）-->
        <i>這是I中的文字</i>
        <br />
        <!--b（加粗）-->
        <b>這是B中的文字</b>

【strong,en,b,i標籤的區別】
1·Strong和em都表示強調，strong顯示爲粗體，em顯示爲傾斜。且strong的強調程度要比em更高。
2·strong和b都能表示加粗，em和i都能傾斜。可是strong和em多了一層強調的語義。
HTML5語言，要求標籤儘量的實現語義話。網絡

<!--q（短引用）:顯示爲文字用「」引發來-->
        <q cite="www.*******.com">這是短引用標籤Q中的文字</q>
        <br/>

        <!--small（縮小字體）small能夠嵌套，big同理，直到字號最小或最大爲止-->
        <small>其間的文字會被small縮小一號</small>
        <br />
        <big>這是big標籤的效果</big>
        <br />

<a>:（超連接）href="http//:www.jerui100.com"
　　　href:超連接的路徑，能夠是網絡連接，也能夠是本地文件（路徑同img）。
　　　target:超連接打開的位置。—self自身頁面（默認） —blank 新頁面。
　　　title：鼠標指上時顯示的文字。

　　　rel:用於標明被連接文檔與當前文檔的關係。
　　　　 rel="prev"(被連接文檔是)前一篇文檔 rel="next"後一篇文檔
　　　　 rel="icon"被連接圖片是當前文檔的圖標rel="stylesheet"被連接文檔是當前文檔的樣式表
　　　　 rel="prefetch"預加載，在當前文檔加載完成後利用空餘時間預加載即將連接的文檔。
　　錨連接
　　　(1)本頁面錨連接設置：a.設置錨點：<a name="top"></a>
　　　　　　　　　　　　　 b.在超連接上，使用#name跳轉到對應錨點。<a href="#top" target="_self">這是一個超連接</a>
　　　(2)頁面間錨連接：a.在即將跳轉的頁面的指定位置，設置錨點
　　　　　　　　　　　 b.在超連接的href屬性中，使用「頁面地址.html#name」
　　　　　　　　　　　　<a href="地址#name">跳轉到知指定地址
　　　功能型連接：mailto:*******@***.com給指定郵箱發郵件
　　　　　　　　　tencent://message/?uin=845870427給指定QQ發消息
　　　　　　　　　file:///e:/***.*** 打開指定文件

<!--<s>有誤刪除線-->
        <s>S標籤中的文字</s>
        <!--cite標籤；瀏覽器顯示傾斜，經常使用語書，畫做，做品的引用-->
        <cite>這是cite標籤</cite>
        <!--code表示計算機代碼。只是表示是計算機代碼，可是不會保存代碼格式，須要配合pre使用-->
        <pre>
        <code>
        setLayout(new BorderLayout());
          setLocation(dimen.width / 3, dimen.height / 3);// dimen.width/3,dimen.height/3
        setSize(FWIDTH, FHEIGHT);
          setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          setResizable(false);
          setVisible(true);
        </code>
        </pre>
        <!--bdo表示文本方向,dir="ltr"左往右；dir="rtl"右往左-->
        <bdo dir="rtl">123456789</bdo>
        <bdo dir="ltr">123456789</bdo>
        <!--kbd:表示須要用戶用鍵盤輸入的內容，可是瀏覽器僅顯示爲等寬字體-->
        請輸入「<kbd>ESC</kbd>」退出系統
        <!--sup:上標文本 sub下標文本-->
        X<sup>4</sup>
        X²
        <!--版權符號-->
        ©  &copy;
        下劃線
        <u>傳說中的下劃線</u>
        <!--mark:高亮或標記文本，瀏覽器顯示爲黃色背景。-->
        <mark>笑而不語</mark>

效果：

表格：

表格的行：tr 每行中的列：td

表格的表頭：<th></th>單元格居中，默認加粗

【經常使用屬性】：

border:給表格添加邊框。當border屬性增大時，僅外圍框線增長，單元格的邊框始終爲1px.

Cellspacing:單元格與單元格之間的間隙，當cellspacing值爲0時，間隙爲0，可是線不重合。

【表格邊框合併】style="border-collapse: collapse;"

cellpadding:每一個單元格中的內容，與邊框線的距離。

cellpadding="10"

aligh:表格在屏幕的左中右位置顯示，left，center，right

注意：給表格加速align屬性，至關於讓表格浮動。會直接打破錶格後面元素的原有排列方式。

bgcolor:背景顏色，等同於style=「background-color：；」

bgcolor="blanchedalmond"

background:背景圖片background=「img/aaa.png」等同於style="background-image:;"且背景圖會覆蓋背景顏色。

bordercolor=「blue」邊框顏色

【tr和td的相關屬性】

1.width/height：單元格的寬高

2.bgcolor:單元格的背景顏色

3.align：left，center，right 單元格中的文字水平對齊方式

4.valign：top,center,bottom 單元格中的文字垂直對齊方式

5.nowrap：nowrap,單元格中文字不換行。

【注意】1.當表格屬性和行列屬性衝突時，以行列屬性爲準。（近者優先）

2.表格的align屬性，是控制表格在瀏覽器中的顯示位置。

單元格的align屬性，是控制單元格中的文字在單元格中的位置；

3.表格的align屬性，並不影響表格內的文字的對齊方式

tr的align屬性，能夠控制一行中全部單元格的水平對齊方式。

【表格的跨行與跨列】--td

colspan跨列，當某個格跨N列時，其右邊N-1個單元格需刪除

rowspan跨行，當某個格跨N行時，其下邊N-1個單元格需刪除

【表格的結構化】

完整表格結構：thead tbody tfoot

不管各部分在表格什麼位置，顯示時，caption都會在表格外最上方；thead會在表格內最上方；tfoot會在表格內最下方

【表格的直列化】

效果：

【form表單】

1.兩個重要屬性：action-表單提交的服務器地址，method-表單提交數據的方法（get/post）

2.get和post的區別：

(1)使用URL傳參：http://服務器地址？name1=value1&name2=value2（?表示傳遞參數?後面採用name=value的形式傳遞，多個參數之間，用&連接）

so,URL傳參不安全，全部信息能夠在地址欄看到，而且能夠經過地址欄隨意傳遞其餘數據。

URL傳遞數據量有限，只能傳遞少許數據。

（2）使用HTTP請求傳遞數據。URL地址欄不可見，比較安全。且傳遞數據量沒有限制。

綜上所述：經常使用post傳遞數據

【input標籤及屬性】

（1）type：表示input輸入框的類型。可選值有：

（2）name：input輸入框的別名。通常狀況下，必填。由於傳遞數據時，使用name=value的形式傳遞

（3）value：input 輸入框的默認值

（4）placeholder：input的提示內容,當輸入框有value的時候，placeholder消失。

【input特殊屬性值】

（1）checked=「checked」默認選中。

（2）disable=「disable」設置控鍵不能使用。用在按鈕上不能點擊，用在輸入框上不能修改。

並且，若是輸入框disable，輸入框信息不能日後臺傳遞。

（3）hidden=「hidden」隱藏。等同於<input type="hidden" name="username" value="1234">

經常使用於配合disable，或者根據其餘須要，使用隱藏域傳遞數據。

【input-type屬性詳解】

（1）text：文本輸入框

（2）password：密碼輸入框，輸入內容是顯示小黑點。

（3）radio：單選按鈕；

checkbox：多選按鈕。

》》》》name和value必須同時處在，提交的是value中的屬性值。例如：<input type="radio" name="sex" value="男" />男；提交時「sex=男」

》》》》radio憑藉name屬性來區分是否爲同一組。name相同，爲同組，同組中只能選一個。

》》》》checked=「checked」默認選中。（radio只能選一個，checkbox能夠選多個）

(4)submit：提交按鈕。提交表單數據。

(5)Reset：重置按鈕，將表單數據重置爲初始狀態。

(6)file：文件上傳按鈕。

(7)image:圖形提交按鈕。功能同submit，能夠提交數據。

（8）buttom:普通按鈕。無任何功能。

【下拉選擇控件select】

(1)寫法：<select>

<option></option>//能夠有不少；

</select>

(2)name屬性應該寫在<select>上，全部選項只有一個name

(3)multiple=「multiple」可在選擇頁面按住Ctrl使用多選。

（4）option經常使用屬性：

value=「」：當option沒有value屬性值時，提交的是<option></option>中間的文字；

當option有屬性值時，提交的是value的值。

title：鼠放上的時候顯示的文字。

selected="selected"默認選中。

（5）<optgroup label="山東省"></optgroup>:用於將option個標籤進行分組，label屬性表示分組名。

代碼：

<td>
                        <select name="city">
                            <optgroup label="山東省">
                            <option value="1" title="青島市**區**地段**居民委員會" >青島</option>
                            <option value="2" selected="selected" title="煙臺市萊山區煙臺大學東門">煙臺</option>
                            <option value="3">濟南</option>
                            </optgroup>
                            <optgroup label="北京市">
                                <option value="1" >朝陽區</option>
                            <option value="2" selected="selected">海淀區</option>
                            <option value="3">。。。</option>
                            </optgroup>
                        </select>
                    </td>

效果：

【文本域textarea】

（1）寫法<textarea></textarea>

（2）設置寬高style="width:200px;height:150px"自身有row和col兩個屬性，但不經常使用。

（3）readonly=「readonly」只讀屬性。不容許編輯。

（4）style="resize:none";設置爲寬高不容許修改。

（5）style="overflow:;"設置當前文字超出區域時如何處理（滾動條）。

也能夠經過overflow-x和overflow-y分別設置水平垂直方向的顯示方式。

經常使用屬性值：hidden 超出區域的文字，隱藏沒法顯示。

scroll 不管文字多少，均會顯示滾動條

auto 自動，根據文字多少決定是否顯示滾動條。（默認爲此）

代碼：

<td colspan="2">
                        <textarea style="width: 200px; height: 100px; resize: none; overflow-y: auto;
                            " readonly="readonly" >文本框內的內容。</textarea>
                    </td>