HTML基礎之HTML標籤-html header（meta,title） html body(p,br,h,form,div,span,input,lable)

時間 2020-06-22

標籤 html 基礎標籤 header meta title body form div span input lable 欄目 HTML 简体版

原文原文鏈接

摘自：http://www.imdsx.cn/index.php/2017/07/27/html0/php

1、HTML標籤

 1 <!DOCTYPE html> <!--標準的html規則，相似於Python的解釋器-->
 2 <html lang="en"> <!--html標籤（只能一個），指定的語言en-->
 3 <head>          <!-- html head標籤的開始 -->
 4     <meta charset="UTF-8">
 5     <title>頁面標題</title>
 6 </head>  <!-- html head標籤的結束 -->
 7 <body>  <!-- html body標籤的開始 -->
 8 <h1>個人第一個標題</h1>
 9 <p>個人第一個段落</p>
10 
11 </body> <!-- html body標籤的結束 -->
12 </html>

瀏覽器顯示：css

一、html header：

1）meta標籤

 1 <!DOCTYPE html> <!--標準的html規則，相似於Python的解釋器-->
 2 <html lang="en"> <!--html標籤（只能一個），指定的語言en-->
 3 <head>          <!-- html head標籤的開始 -->
 4 <!--指定編碼-->
 5 <meta charset="UTF-8">
 6 <!--每1秒鐘刷新一次-->
 7 <meta http-equiv="refresh" content="1">
 8 <!--1秒後跳轉頁面-->
 9 <meta http-equiv="refresh" content="1;http://www.baidu.com">
10 <!-- 關鍵字檢索 -->
11 <meta name="keywords" content="大師兄，aa,bb">
12 <!-- 網站描述-->
13 <meta name="description" content="阿里山的積分離開家">
14 <!-- ie打開時以最高的兼容模式打開 -->
15 <meta http-equiv="X-UA-Compatible" content="IE=edge">
16 <title>頁面標題</title>
17 </head>  <!-- html head標籤的結束 -->
18 <body>  <!-- html body標籤的開始 -->
19 </body> <!-- html body標籤的結束 -->
20 </html>

2）title標籤

 1 <!DOCTYPE html> <!--標準的html規則，相似於Python的解釋器-->
 2 <html lang="en"> <!--html標籤（只能一個），指定的語言en-->
 3 <head>          <!-- html head標籤的開始 -->
 4 <!--指定編碼-->
 5 <meta charset="UTF-8">
 6 <!-- 在head中所寫的全部標籤所有都看不到，是內部的一些東西，除了一個標籤就是title-->
 7 <title>白羊座</title>
 8     <!-- 前方高能預警，***重要*** -->
 9 <!-- title的圖標,告訴瀏覽器我要把link單作title的圖標 -->
10 <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
11 <!--引入css樣式表-->
12 <link rel="stylesheet" href="tmp.css">
13 <!--css樣式-->
14 <style></style>
15 <!--引入js和編寫js-->
16 <script src="tmp.js"></script>
17     
18 </head>  <!-- html head標籤的結束 -->
19 <body>  <!-- html body標籤的開始 -->
20 </body> <!-- html body標籤的結束 -->
21 </html>

二、html body

1）p、brhtml

段落標籤和換行標籤後端

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 
 6 </head>
 7 <body>
 8 <!--p 段落標籤，佔滿一整行，段落之間有空行,元素會自動在其先後建立一些空白。瀏覽器會自動添加這些空間，您也能夠在樣式表中規定。想換行須要經過<br />標籤 自閉合標籤建議本身寫上/做爲區分-->
 9 <p>年輕,就是拿來折騰的。<br />讓本身具有獨立生活的能力，具有一技之長的資本，是須要無數個夜晚的靜思，無數寂寞時光的堆積而成的。</p>
10 <p>別在最該拼搏的年紀選擇穩定，世界上最大的不變是改變，只有天天進步，才能擁抱生命的無限可能！</p>
11 <p>你覺得你給對方留了電話存了微信，應該彼此也能互相幫忙，卻忘記了一件很重要的事情，只有關係平等，才能互相幫助。</p>
12 <p>不要爲了戶口丟掉生活，爲了穩定丟掉青春，爲了平淡丟掉夢想，由於你所謂的穩定，不過實在浪費生命。</p>
13 <p>真正的勇者不是狼狽的逃脫，而是用閒暇時間，磨練本身。</p>
14 <p>只有等現實的日子富足了，能力夠強了，才能夠去追求那些美好的生活狀態，才該去追求那些偉大的夢。不然那些夢幻般的生活，都只是空中閣樓，不堪一擊。</p>
15 <p>生活是本身的，本身都不求進取，憑什麼讓別人給你美好的將來？</p>
16 </body>
17 </html>

2）h、form、div、span、input、label瀏覽器

h服務器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 
 6 </head>
 7 <body>
 8 <!-- 標題標籤 h1最大 h6最小 自帶屬性 -->
 9 <h1>標題標籤</h1>
10 <h2>標題標籤</h2>
11 <h3>標題標籤</h3>
12 <h4>標題標籤</h4>
13 <h5>標題標籤</h5>
14 <h6>標題標籤</h6>
15 
16 </body>
17 </html>

span微信

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 </head>
 6 <body>
 7 <!-- 行內標籤的表明 什麼屬性都不帶，或叫作內聯標籤-->
 8 <!-- 行內本身有多大，就佔多大。也是白板標籤，沒有附着任何css樣式的就是白板標籤-->
 9 <span>滴滴滴</span>
10 </body>
11 </html>

div 塊級標籤post

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 </head>
 6 <body>
 7 <!-- 塊級標籤的表明 什麼屬性都不帶，html代碼中出場率最高，塊級標籤不管本身有多大 都佔了一整行-->
 8 <!--僞白板標籤-->
 9 <div>滴滴滴</div>
10 </body>
11 </html>

瀏覽器展現：網站

inputui

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 </head>
 6 <body>
 7 <!--文本框輸入框，默認text-->
 8 <!--name屬性是跟後端交互的key,value是跟後端交互的值-->
 9 <!--{"username":"admin","passwd":"123456"}-->
10 
11 <!--placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）,該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。註釋：placeholder 屬性適用於如下的 <input> 類型：text, search, url, telephone, email 以及 password。-->
12 <input type="text" placeholder="請輸入用戶名" name="username" value="admin">
13 
14 <!--密碼輸入框-->
15 <!--type="password"密文-->
16 <input type="password" placeholder="請輸入密碼" name="passwd">
17 
18 <!--radio單選，name屬性相同的時候，互斥-->
19 <span>男</span><input type="radio" name="sex">
20 <span>女</span><input type="radio" name="sex">
21 
22 <!-- 多選框 checkbox {"name"：[1,2,3]} 默認值checked=checked-->
23 <span>奔馳</span><input type="checkbox" checked="checked">
24 <span>寶馬</span><input type="checkbox">
25 
26 <!-- 文件類 file 若是上傳文件必定要在form中添加特殊屬性 enctype="multipart/form-data" 意思是一點一點的發給服務器-->
27  <!--<p>上傳文件</p>-->
28 <input type="file">
29 
30 <!-- button按鈕 點擊什麼用也沒有 須要結合js綁定事件 -->
31 <!--submit按鈕若是和form表單連用則會直接出發請求-->
32 <input type="button" value="登陸">
33 <input type="submit" value="登陸">
34 <!--當rest和form表單連用時，會觸發重置操做，單獨沒啥用，和form連用-->
35 <input type="reset">
36 </body>
37 </html>

寫一個登陸：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 </head>
 6 <body>
 7 <!-- 表單標籤 能夠理解爲載體白紙 input 就是寫在紙上的文字，將白紙遞交給後臺，後端才能接到信息-->
 8 <!--表單裏的屬性，action：提交到哪一個地址（接口信息）；method：具體是什麼請求，get或post-->
 9 <form action="http://www.baidu.com" method="post">
10     <!--div包裹，佔一整行，實現換行的效果-->
11     <div>
12         <span>用戶名：</span><input type="test" name="username" placeholder="請輸入用戶名">
13     </div>
14     <div>
15         <span>密碼：</span><input type="test" name="passwd" placeholder="請輸入密碼">
16     </div>
17 
18     <!--button，若是想要有操做 只能經過js綁定事件-->
19     <input type="button" value="登陸">
20     <!--submit和form表單連用，則會直接出發請求-->
21     <input type="submit" value="註冊">
22     <!--reset必須和form表單連用-->
23     <input type="reset" value="重置">
24 </form>
25 </body>
26 </html>

form：表單標籤能夠理解爲載體白紙 input 就是寫在紙上的文字，將白紙遞交給後臺，後端才能接到信息，input寫到form標籤裏面

lable標籤：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 </head>
 6 <body>
 7 <!-- label 標題標籤 與input聯合運用，增長input的點擊範圍 可直接點擊文字就輸入 for：映射到input的id-->
 8 <label for="i1">用戶名</label>
 9 <input id="i1" type="text" placeholder="請輸入用戶名">
10 </form>
11 </body>
12 </html>

相關標籤/搜索

html&html

html

HTML標籤

html+css+javascript+html

每日一句

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