html經常使用標籤的使用方法

時間 2019-11-18

原文原文鏈接

1 html標題html

　　<h1> to <h6>html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

</body>
</html>

h1到h6演示代碼

2 html水平線 <hr/>python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h6>h6</h6>
<hr/>
</body>
</html>

水平線演示代碼

3 html註釋linux

註釋並不會顯示在網頁上正則表達式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h6>h6</h6><!-- hello world -->
<hr/>
</body>
</html>

註釋演示代碼

4 html段落<p>以及段落換行<br/>算法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<p>hello          world</p>
<hr/>
</body>
</html>

段落演示代碼

當顯示頁面時，瀏覽器會移除源代碼中多餘的空格和空行。全部連續的空格或空行都會被算做一個空格。須要注意的是，HTML 代碼中的全部連續的空行（換行）也被顯示爲一個空格。編程

段落換行使用<br/>swift

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<p>hello     <br/>     world</p>
<hr/>
</body>
</html>

段落換行演示代碼

5 html文本格式化windows

6 html超連接<a>瀏覽器

<a>比較重要的屬性有兩個，分別是href、target

href指定超連接地址

target指定打開方式

　　_blank 新頁面打開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<a href="http://www.baidu.com">百度</a>
<hr/>
</body>
</html>

超連接演示代碼

另提供了較爲全面的<a>標籤使用方法連接：http://blog.csdn.net/ao_xiaoqiang/article/details/44345565

7 html的圖像<img>

使用格式：<img src="url">

　　alt 定義當圖片沒法加載時，顯示什麼信息

　　width 定義寬度，單位能夠爲像素也能夠爲百分比

　　height 定義高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<a href="http://www.baidu.com"><img src="l.jpg"/></a>
<hr/>
</body>
</html>

View Code

8 html的表格<table>

表格由<table>來定義，每行<tr> 有許多單元格<td>。表頭可使用<th>

<table>標籤屬性：

　　border 定義邊框

在<table>中能夠嵌入<th> <tr> <td>等標籤

　　<tr> 定義行

　　<th> 定義表頭

　　　　colspan 定義表頭單元格能夠橫跨的列數。

　　　　rowspan 定義表頭單元格橫跨的行數

　　　　heardes 定義與表頭單元格相關聯的一個或者多個單元格。(html5新增)　　　

　　<td> 定義單元格

　　　　colspan 定義單元格能夠橫跨的列數。

　　　　rowspan 定義單元格橫跨的行數

　　　　heardes 定義與單元格相關聯的一個或者多個單元格。(html5新增)　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <tr>
        <th colspan="2" >name</th>
        <th rowspan="2">list</th>
    </tr>
    <tr>
        <th headers="name">first name</th>
        <th headers="name">last name</th>
    </tr>

</table>

View Code

在瀏覽器中顯示以下：

另外，若某個單元格爲空，瀏覽器可能沒法顯示出這個單元格的邊框。爲了防止這種狀況，能夠在該單元格加一個空格佔位符&nbsp。

9 html列表<ul> <ol>

列表分爲

　　無序列表<ul>

　　有序列表<ol>

列表項內部可使用段落、換行符、圖片、連接以及其餘列表等等

<ul>
    <li>male</li>
    <li>female</li>
</ul>
<hr/>
<ol>
    <li>male</li>
    <li>female</li>
</ol>

瀏覽器顯示爲：

10 html表單<form>

表單是一個包含表單元素的區域。

表單元素是容許用戶在表單中（好比：文本域、下拉列表、單選框、複選框等等）輸入信息的元素

<form>中的屬性：

　　action：後面加url 指定當提交表單時向何處發送表單數據

　　method：get/post兩個值，get爲明文 post爲加密

　　name：指定表單的名稱

　　target：_blanket _self _parent _top 指定網頁打開方式

　　<from>標籤中較爲經常使用的標籤有<input> <select> <label> <button>

　　<fieldset> 標籤能夠將表單內的相關元素分組。會在相關表單元素周圍繪製邊框。

　　　　name 規定fieldset的名稱

　　　　form 值：form_id 規定fieldset所屬的表單

　　　　<legend> 定義了 <fieldset> 元素的標題。

　　<input>中最爲經常使用的幾個屬性:

　　　　form 後面跟所屬form的id。規定所屬的form

　　　　required 值：required 規定必需在提交表單以前填寫輸入字段。

　　　　disabled 值： disabled disabled 屬性規定應該禁用的 <input> 元素。

　　　　type:決定輸入類型

　　　　　　text 文本域

　　　　　　radio 單選按鈕

　　　　　　checkbox 複選框

　　　　　　submit 提交按鈕

　　　　　　password 密碼輸入

　　　　　　reset 重置

　　　　　　color 設置拾色器 html5

　　　　　　number 定義用於輸入數字的字段（您能夠設置可接受數字的限制）

　　　　　　range 定義用於精確值不重要的輸入數字的控件（好比 slider 控件）。您也能夠設置可接受數字的限制

　　　　name:input元素的名稱

　　　　value：input元素的值

　　　　size：輸入字段的寬度

　　　　pattern 規定用於驗證 <input> 元素的值的正則表達式。pattern 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password

　　　　list 值爲datalist的id 該屬性引用 <datalist> 元素，其中包含 <input> 元素的預約義選項。

　　　　autofocus 該屬性是一個 boolean 屬性，讓頁面載入後，input自動得到焦點

　　　　<datalist> html5中的新特性標籤規定了 <input> 元素可能的選項列表。<datalist> 標籤被用來在爲 <input> 元素提供"自動完成"的特性。

　　　　　　用戶能看到一個下拉列表，裏邊的選項是預先定義好的，將做爲用戶的輸入數據。

　　　　　　與<option>標籤配合使用

　　<button> 定義一個點擊按鈕

　　　　form 所屬的form表單

　　　　name button名稱

　　　　type　　

　　　　　　button 該按鈕是可點擊的按鈕

　　　　　　reset 該按鈕是重置按鈕

　　　　　　submit 該按鈕是提交按鈕

　　<label>標籤爲 input 元素定義標註（標記）

　　　　label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。

　　　　就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上

　　　　for 值爲某個元素的id 規定 label 與哪一個表單元素綁定。

　　　　form form_id

　　　　name 規定textarea的名稱

　　　　form form_id 規定從屬的表單

　　　　cols　規定可見列數

　　　　rows 規定可見行數

　　<select>使用<option>標籤訂義下拉列表的可用選項.常見的屬性：

　　　　name：指定select名稱

　　　　multiple：規定可選擇多個選項

　　　　<optgroup> 用於把相關的選項組合在一塊兒。

　　　　　　label 爲選項組規定描述。

　　　　<option> 常見的屬性：

　　　　　　value：指定送往服務器的選項值

　　　　　　selected：只有一個值--selected 默認選項

　　<keygen> 定義了表單的密鑰對生成器字段

　　　　form 所屬的表單名稱

　　　　name 名稱

　　　　keytype 使用的加密算法

　　　　　　rsa 默認的算法

　　　　　　dsa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form name="biaoge" action="/return/" method="get">
    請選擇語言:
    <br/><br/><input type="radio" name="language" id="jtzw" value="chinese"/><label for="jtzw">簡體中文</label><br/><br/>
    <input type="radio" name="language" value="english" id="eng"/><label for="eng">English</label><br/><br/>
    請選擇熟悉的編程語言:<br/><br/>
    <fieldset>
        <legend>編程語言</legend>
            <input type="checkbox" name="python" />python
            <input type="checkbox" name="c" />c
            <input type="checkbox" name="swift" />swift<br/><br/>
    </fieldset><br/>

    請選擇地區：
    <select name="district">
        <optgroup label="China">
            <option value="shandong">山東</option>
            <option value="zhejiang" selected="selected">浙江</option>
            <option value="guangdong">廣東</option>
        </optgroup>
        <optgroup label="USA">
            <option value="ny">紐約</option>
            <option value="lsj">洛杉磯</option>
        </optgroup>
    </select><br/><br/>
    請選擇顏色:<input type="color"><br/><br/>
    name:<input type="text" name="name" value="slyoyo"/>
    password:<input type="password" name="passwd" value="hahaha"/>
    <input type="submit"  value="login"/><br/><br/>
    系統：<input list="xuanze" type="text">
    <datalist id="xuanze">
        <option value="windows">Windows</option>
        <option value="linux">Linux</option>
    </datalist>
</form>

</body>
</html>