HTML 之標籤

時間 2020-07-07

標籤 html 標籤欄目 HTML 简体版

原文原文鏈接

1、HTMLjavascript

　　1.1 概述：css

　　　Htyper Text Markup Language 即超文本標記語言html

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

　　　標記語言: 標記（標籤）構成的語言.web

　　　網頁==HTML文檔，由瀏覽器解析，用來展現的編程

　　　靜態網頁：靜態的資源，如xxx.html瀏覽器

　　　動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的安全

　　　JS 語言負責網頁動態方面服務器

　　1.2 HTML 文檔樹結構圖框架

　　1.3 標籤

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

　　1.4 標籤的屬性

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

2、標籤詳細介紹

　　2.1 <!DOCTYPE html>標籤

　　　　因爲歷史的緣由，各個瀏覽器在對頁面的渲染上存在差別，甚至同一瀏覽器在不一樣版本中，對頁面的渲染也不一樣。在W3C標準出臺之前，瀏覽器在對頁面

的渲染上沒有統一規範，產生了差別(Quirks mode或者稱爲Compatibility Mode)；因爲W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱爲Strict

mode也有叫作Standarsmode)，這就是兩者最簡單的區別。

W3C標準推出之後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來之前，不少頁面都是根據舊的渲染方法編寫

的，若是用的標準來渲染，將致使頁面顯示異常。爲保持瀏覽器渲染的兼容性，使以前的頁面可以正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這

樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。

　　　　window.top.document.compatMode：
　　　　//BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。 
　　　　//CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

　　這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照本身

的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。

　　若是你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁

面在全部的瀏覽器裏顯示的就都是一個樣子了。這就是<!DOCTYPE html>的做用。

　　2.2 <head> 標籤

　　　2.2.1 <meta>標籤

　　　　meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的

網頁功能。

　　　　 1: name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

1 <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
2  
3 <meta name="description" content="金澤培訓機構是由一個劉飛鐸建立的">

　　　　 2: http-equiv顧名思義，至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

1 <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意後面的引號，分別在秒數的前面和網址的後面)　　*
2  
3 <meta http-equiv="content-Type" charset=UTF8"> 　　// 編碼
4  
5 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />  // 兼容問題

　　　2.2.2 非 <meta> 標籤

1     <title>oldboy</title>　　//　　標題　　*
2     <link rel="icon" href="http://www.jd.com/favicon.ico">　　// rel='icon' 就是任務欄小圖標的地址　　*
3     <link rel="stylesheet" href="css.css">  // 引入 CSS 內容
4     <script src="hello.js"></script>　　　　// 引入 JSS 內容

　　2.3 <body> 標籤

　　　2.3.1 <h*> </h*> 標籤

　　　　做用：n的取值範圍是1~6; 從大到小. 用來表示標題.

1 <body>
2 <h1>helloword</h1>
3 <h2>helloword</h2>
4 <h3>helloword</h3>
5 <h4>helloword</h4>
6 <h5>helloword</h5>
7 <h6>helloword</h6>
8 </body>

　　　2.3.2 <p> 標籤

　　　做用：換行和隔行。段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白。

1 <p>牀前明月光</p>
2 <p>疑是地上霜</p>

　　　2.3.3 <br> 標籤

　　　做用：換行

　　　2.3.4 <hr> 標籤

　　　做用：水平線

　　　2.3.5 <div> 標籤

　　　做用：在顯示方面上並沒有做用，至關於 初始化 的一個做用，能夠對其中的文本進行增長獨有的屬性而不受別的某些標籤特色干擾。

　　　2.3.6 <span> 標籤

　　　做用：功能具體和 <div> 標籤功能同樣，但區別在前者是 塊級標籤 和後者是 內聯標籤 。

　　　2.3.7 <b> 標籤

　　　做用：給字體加粗

　　　2.3.8 <em> 標籤

　　　做用：給字體變斜體

　　　2.3.9 <strike> 標籤

　　　做用：去除，字體上加去除線。

　　　2.3.10 特殊字符

　　 < &gt；&quot；©®

　　2.4 塊級標籤 and 內聯標籤

　　　　1. 全部標籤統分爲塊級和內聯

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

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

　　　block（塊）元素的特色

　　　老是在新行上開始；
　　　寬度缺省是它的容器的100%，除非設定一個寬度。
　　　它能夠容納內聯元素和其餘塊元素

　　　inline元素的特色

　　　和其餘元素都在一行上；
　　　寬度就是它的文字或圖片的寬度，不可改變
　　　內聯元素只能容納文本或者其餘內聯元素

　　2.5 圖像標籤

　　　2.5.1 <img> 標籤

　　屬性：

src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

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

　　2.6 超連接標籤　　

　　　2.6.1 <a> 標籤

　　　　功能：① 超連接 ② 錨

　　　　屬性：

href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.

name: 定義一個頁面的書籤.

用於跳轉 href : #id.（錨）

　　2.7 列表標籤

<ul>: 無序列表

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

<dl>  定義列表

         <dt> 列表標題
         <dd> 列表項

　　2.8 表格標籤

　　　2.8.1 <table> 標籤

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素 百分比.（最好經過css來設置長寬）

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  單元格豎跨多少行

colspan:  單元格橫跨多少列（即合併單元格）

<th>: table header <tbody>(不經常使用): 爲表格進行分區.

　　2.9 表單標籤

　　　2.9.1 <form> 表單標籤

　　　　概述：

　　　　　　表單用於向服務器傳輸數據。

　　　　　　表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。

　　　　　　表單還能夠包含textarea、select、fieldset和 label 元素。　　

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

標籤中。

action: 表單提交到哪。通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web。

method: 表單的提交方式 post/get 默認取值就是 get（信封）

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

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

get/post是常見的兩種請求方式。

　　　2.9.2 表單元素

　　　　<input> 標籤的屬性和對應值

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(須要配合js使用.) button和submit的區別？

             file 提交文件：form表單須要加上屬性enctype="multipart/form-data"   

 name: 表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客 戶端編程，而在css和javascript中使用的

 value:   表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

1. type="button", "reset", "submit" - 定義按鈕上的顯示的文本
 
2. type="text", "password", "hidden" - 定義輸入字段的初始值
 
3. type="checkbox", "radio", "image" - 定義與輸入相關聯的值　　
 checked:  radio 和 checkbox 默認被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

上傳文件注意兩點：

1 請求方式必須是post

2 enctype="multipart/form-data"

 1 def index(request):
 2     print request.POST
 3     print request.GET
 4     print request.FILES
 5     for item in request.FILES:
 6         fileObj = request.FILES.get(item)
 7         f = open(fileObj.name, 'wb')
 8         iter_file = fileObj.chunks()
 9         for line in iter_file:
10             f.write(line)
11         f.close()
12     return HttpResponse('ok')

上傳文件

　　3.0 <select> 標籤

          name:表單提交項的鍵.

          size：選項個數

          multiple：multiple 

                 <option> 下拉選中的每一項 屬性：

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

                 <optgroup>爲每一項加上分組

　　4.0 <textarea> 文本域

name:    表單提交項的鍵.

cols:    文本域默認有多少列

rows:    文本域默認有多少行

　　4.1 <lable> 關聯

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

　　4.2 <fieldset> 組合標籤中元素

<fieldset>
    <legend>登陸吧</legend>
    <input type="text">
</fieldset>

總結：

　　　　　　　　紅線中爲重點

相關標籤/搜索

每日一句

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

HTML 之 標籤

HTML 之標籤