HTML - 標籤語法

時間 2019-12-01

標籤 html 標籤語法欄目 HTML 简体版

原文原文鏈接

HTML 標籤語言

概念

　　 超文本標記語言，是一種用於建立網頁的標記語言css

ps： html

　　不是編程語言編程

　　利用標籤來描述網頁windows

　　擴展名：.html .htm後端

語法規範

標籤不區分大小寫, 推薦小寫
雙標籤必須寫完整 ( 瀏覽器不會報錯的, 並且自動補全可是最終效果很大可能性影響總體佈局 )
不用標籤的形式的內容會被完整的原內容進行展現
合理的註釋 "  " 和鎖緊增長代碼的可讀性

文檔結構

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css樣式優先級</title>
</head>
<body>

</body>
</html>

屬性說明瀏覽器

　　<!DOCTYPE html> 　聲明爲HTML5文檔。服務器

　　<html></html> 　　　是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部(head)和主體(body)。編程語言

　　<head></head> 　　定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元(meta)數據。佈局

　　<title></title> 　　　　定義了網頁標題，在瀏覽器標題欄顯示。post

　　<body></body> 　　之間的文本是可見的網頁主體內容。

標籤的分類

標籤的分類一

　　自閉合標籤：單標籤

　　閉合標籤：雙標籤

標籤的分類二

　　塊級標籤：就是獨佔一行，能夠自行設置寬高！如：先學到的 div,p,h1-h6

　　內聯標籤：按內容佔位，高度和廣度是由本身的內容填充的如： a,br,img

判斷塊級標籤和內聯標籤的方法

　　1. 是否獨佔一行（能夠經過設置背景顏色去判斷）

　　2. 是否能夠單獨爲元素設置高度和寬度。

標籤關係

標籤嵌套會產生祖先和後代 , 父子, 兄弟關係

父子關係

外層父元素內層子元素

在使用嵌套的時候推薦使用父子結構來實現下拉菜單效果

祖先和後代

外層全部元素統稱祖先元素

內層元素稱爲後代元素

兄弟關係

平級元素之間互爲兄弟元素

head 內的經常使用標籤

title

設置網頁標題

<title></title>

style

設置網頁樣式

<style></style>

link

引入外部樣式表文件

<link/>

script

引入外部JS 代碼用

<script></script>

body內經常使用標籤

基本標籤(內聯標籤)

　　內聯標籤不須要另外一起一行，以文本大小爲定義大小

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<!--換行-->　　<br>

<span></span>

基本標籤(塊級標籤)

　　塊級標籤須要另起一行

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<!--水平線-->　　<hr>
<div></div>
<p></p>

　瀏覽器默認字體大小爲 16px, 渲染的時候小於 12px 的會強制改爲 12px

　　h1 標籤的字體大小爲 32px

　　h4 標籤的字體大小爲 16px

　　h6 標籤的字體大小爲 12px

　　瀏覽器會對代碼文本中的換行和 多餘的空格 會解析成一個空格 ( 所以會致使格式不對應 )

文本標籤屬性

<h1 align = "center / left / right"> 標題 </h1>

　　默認都是左對齊, 其實此內容可徹底被 css 樣式替代

div 和 span 的區別

<div></div> ： <div>只是一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現. 
<span></span>： <span>表示了內聯行(行內元素),並沒有實際的意義,主要經過CSS樣式爲其賦予不一樣的表現.

ps：

　　p 標籤是個特異點，不能夠嵌套其餘塊級標籤，嵌套p標籤也不行

字符實體

$lt;　　　　<
$gt;　　　　>
&nbsp;　　空格
&yen;　　 ¥ 人民幣符號
&copy;　　© 版權符號

特殊標籤

圖片標籤

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高">

ps：

　　寬高兩個屬性只用一個會自動等比縮放

　　windows 下若是 src 屬性使用絕對路徑時須要將全部的反斜線 " \ " 改爲斜線 " / "

　　路徑要補全文件名且加後綴 ( 不加後綴被認爲是目錄 )

超連接標籤

<a href="跳轉路徑" target="跳轉後打開方式" >點我</a>

屬性詳細

href 屬性指定目標網頁地址。該地址能夠有幾種類型：
- 絕對URL - 指向另外一個站點(好比 href="http://www.jd.com)
- 相對URL - 指當前站點中確切的路徑(href="index.htm")
- 錨URL - 指向當前頁面中的錨(href="#top") 取值爲 "#" 表示當前頁面
target 屬性指定打開方式：
- _blank表示在新標籤頁中打開目標網頁
- _self表示在當前標籤頁中打開目標網頁(默認爲此方式)

錨點實例

建立 a 標籤 href 加 # 表示跳轉 (不加 # 被識別爲新鏈接)

建立 a 空標籤來實現被跳轉 ( 指定內部屬性 name 或者 href 爲約定詞)

<a href="#xxx">跳轉到當前頁面錨點 xxx位置 </a>
<a href="abc.html#xxx">跳轉到 abc.html 文件的錨點 xxx 位置  </a> 


</-- 添加錨點 -->
<a name="xxx"></a> 
<a href="xxx"></a>

列表

無序 ( unordered list )

<ul type="disc">
<li>第一項</li>
<li>第二項</li>
</ul>

type屬性

disc 實心圓點(默認值)
circle 空心圓圈
square 實心方塊
none 無樣式

有序 ( ordered list )

<ol type="1" start="2">
<li>第一項</li>
<li>第二項</li>
</ol>

type屬性

1 數字列表(默認值)
A 大寫字母
a 小寫字母
Ⅰ 大寫羅馬
i 小寫羅馬

標題列表

<dl>
    <dt>標題1</dt>
    <dd>內容1</dd>
    <dt>標題2</dt>
    <dd>內容1</dd>
    <dd>內容2</dd>
</dl>

表格

<table border="1">
    <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>1</th>
            <th>yang</th>
            <th>18</th>
        </tr>

        <tr>
            <th>2</th>
            <th>tuo</th>
            <th>13</th>
        </tr>
    </tbody>
</table>

tr 　　定義表格行標籤

th 　　填入表格標題首行數據單元格標籤, 自帶加粗和居中

td 　　填入表格數據單元格標籤

table 屬性

border　　表格邊框粗細
cellpadding　　內邊距文本內容與邊框的距離
cellspacing　　外邊距表格內單元格中間的邊距
width　　寬像素單位百分比.（最好經過css來設置長寬）
bgcolor　　　　背景顏色

rowspan　　單元格豎跨多少行
colspan　　單元格橫跨多少列（即合併單元格）

tr / td / th 屬性

bgcolor　　行背景顏色
width / height　　　寬 / 高
align　　水平方向文本對齊 ( 默認居左 )
- 可取值　　left / right / center

valign　　

可取值　　top /

ps:

　　知道這些都沒啥用. 咱們不會使用這些東西來處理咱們的樣式

　　可是結構相關屬性須要重點理解

　　　　合併單元格的時候, 不會幫助你刪掉被合併的單元格,

　　　　而是將被合併的單元格日後推, 所以破壞原有結構

　　　　所以必需要你手動刪除被推出的單元格

　　跨列合併:　　刪除當前行多餘的單元格

　　跨行合併:　　刪除其後行多餘的單元格

　　tbody / thead / tfoot 不是必填項. 瀏覽器也會幫咱們自動添加

　　默認全部行自動加入到 tbody 中

form 表單

概念

　　表單收集用戶信息並向服務器提交，從而實現用戶與Web服務器的交互

表單屬性

accept-charset 　　規定在被提交表單中使用的字符集（默認：頁面字符集）　　　　　　
action 　　規定向何處提交表單的地址（URL）（提交頁面）　　　　　　
autocomplete 　　規定瀏覽器應該自動完成表單（默認：開啓）　　　　　　
enctype 　　規定被提交數據的編碼（默認：url-encoded）　　　　　
method 　　規定在提交表單時所用的 HTTP 方法（默認：GET）　　　　　　
name 　　規定識別表單的名稱（對於 DOM 使用：document.forms.name）　　　　　　
novalidate 　　規定瀏覽器不驗證表單 (瀏覽器會自帶一個驗證功能) 　　　　　　
target 　　規定 action 屬性中地址的目標（默認：_self）

input系列標籤

text    　　　    單行輸入文本     <input type=text" /> password       密碼輸入框       <input type="password" /> date    　　　   日期輸入框       <input type="date" /> checkbox      複選框　　　      <input type="checkbox" checked="checked" /> radio    　　  單選框    　　    <input type="radio" /> submit        提交按鈕　　      <input type="submit" value="提交" /> reset    　　  重置按鈕    　　  <input type="reset" value="重置" /> button    　　 普通按鈕　　      <input type="button" value="普通按鈕" /> hidden    　   隱藏輸入框    　  <input type="hidden" /> file    　 　   文本選擇框    　  <input type="file" />

屬性說明

name　　表單提交時的「鍵」,目的爲提交後端的數據標識符(注意和id的區別)

value　　

　　表單提交時對應項的值

　　type="button" / "reset" / "submit"時

　　　　爲按鈕上顯示的文本內容 , 必填

　　type="text" / "password" / "hidden" 時

　　　　爲輸入框的初始值, 設置爲默認值 , 不設置也不要緊, 用戶輸入能夠覆蓋默認值做爲 value 傳回

　　type="checkbox" / "radio" / "file" 時

　　　　爲輸入相關聯的值 , 必填

checked　　radio 和 checkbox 默認被選中的項

readonly　　text 和 password 設置只讀 disabled：禁用,全部input均適用

ps：

1. 當 input 中有文件上傳的時候必需要對 form表單作如下更改

<form action="/xxx" method="post" enctype="multipart/form-data">
    ...
</form>

2. 當有 AJAX 提交的時候不要用 submit ，要用 button

3. 一組 radio / checkbox 類型的時候, 必需要求 name 值同樣才能夠指定單選或者複選

4. 功能按鈕 submit / reset 自帶 value 爲 "提交" / "清空" , 且不須要設置 name 屬性, value 能夠設置自定義顯示文本

select 標籤

<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
</form>

屬性說明

multiple　　布爾屬性，設置後爲多選，不然默認單選
disabled　　禁用
selected　　默認選中該項
value　　定義提交時的選項值

label標籤

label 元素不會向用戶呈現任何特殊效果。

<form action="">
<label for="username">用戶名</label>
<input type="text" id="username" name="username">
</form>

<label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

可實現點擊label標籤的時候自動跳轉到 for所指定的的標籤.實現相同的點擊效果

textarea多行文本

<textarea name="" id="" cols="30" rows="10"></textarea>

屬性說明

name　　名稱
rows　　行數
cols　　　　列數
disabled　　禁用

相關標籤/搜索

每日一句

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