html基礎學習

時間 2019-12-13

標籤 html 基礎學習欄目 HTML 简体版

原文原文鏈接

head標籤

<meta>javascript

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

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

  1 <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
  2 <meta name="description" content="老男孩培訓機構是由一個老的男孩建立的">

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

  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" />
  6

注意：X-UA-Compatible

每一個主要版本IE新增的功能都是爲了讓瀏覽器更容易使用、增長安全性及更支持業界標準。以這些做爲IE的特點，其中
一個風險就是舊版本網站沒法正確的顯示。

爲了將這個風險降到最低，IE6容許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirks mode"爲預設，這會
使頁面以舊版本瀏覽器的視點顯示，"Standards mode"(也稱爲"strict mode")特色是支持業界標準最爲完善。
然而要利用這個加強的支持功能，網頁必須包含恰當的<!DOCTYPE>指令。

若一個網頁沒有包含<!DOCTYPE>指令，IE6會將它以quirks mode顯示。若網頁包含有效的<!DOCTYPE>指令但瀏
覽器沒法辨識，IE6會將它以IE6 standards mode顯示。由於少數網站已經包含<!DOCTYPE>指令，兼容性模式的
切換至關成功。這使網頁開發人員能選擇將他們的網頁轉移爲standards mode的最佳時機。

隨著時間通過，更多網站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來講，IE6
不支持universal selector(即css之全局選擇器 * {})，一些網站便使用它來針對IE作特定的對應。

當 IE7增長了對全域選擇器的支持，那些依賴IE6特色的網站便沒法偵測出這個新版本的瀏覽器。所以那些針對IE的
特定對應沒法應用於IE7，形成這些網站便沒法如他們預期的顯示。因爲<!DOCTYPE>只支持兩種兼容性模式，受到影
響的網站擁有者被迫更新他們的網站使其能支持IE7。

IE8 比以前的任何版本瀏覽器都更支持業界標準，所以針對舊版本瀏覽器設計的網頁可能沒法如預期般呈現。爲了幫
助減輕全部問題，IE8引入文件兼容性的概念，使你能選擇你的網頁設計要對應的特定IE版本。文件兼容性在IE8增長
了一些新的模式，這些模式能告訴瀏覽器如何解析和編譯一個網頁。若你的網頁沒法在 ie8正確的顯示，你能夠更新
你的網站使它支持最新的網頁標準(優先選項)或在你的頁面上新增一個meta元素用於告訴IE8如何依照舊版本瀏覽器
編譯你的頁面。

這能讓你選擇將你的網站更新支持IE8新特色的時機。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 <!DOCTYPE> 指令來確
定如何顯示該網頁。 若是該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式
（Quirks 模式）顯示該網頁。

非meta標籤web

  1     <title>oldboy</title>
  2     <link rel="icon" href="http://www.jd.com/favicon.ico">
  3     <link rel="stylesheet" href="css.css">
  4     <script src="hello.js"></script>
  5

body標籤

一基本標籤（塊級標籤和內聯標籤）

  1 <hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
  2
  3 <p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.
  4
  5 <b> <strong>: 加粗標籤.
  6
  7 <strike>: 爲文字加上一條中線.
  8
  9 <em>: 文字變成斜體.
 10
 11 <sup>和<sub>: 上角標 和 下角表.
 12
 13 <br>:換行.
 14
 15 <hr>:水平線
 16
 17 <div><span>

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

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

block（塊）元素的特色安全

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

inline元素的特色框架

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

特殊字符

< &gt；&quot；©®

二圖形標籤: <img>

src: 要顯示圖片的路徑.

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

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

width: 圖片的寬

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

三超連接標籤(錨標籤)<a>

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

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

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

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

四列表標籤：

<ul>: 無序列表

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

<dl>  定義列表

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

五表格標籤: <table>

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

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

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  單元格豎跨多少行

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

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

eg:

  1 <table cellpadding="2px" cellspacing="2px" border="2px" aria-rowspan="3">
  2     <tr>
  3         <td>1111</td>
  4         <td>2222</td>
  5         <td>3333</td>
  6     </tr>
  7     <tr>
  8         <td>1111</td>
  9         <td>2222</td>
 10         <td>3333</td>
 11     </tr>
 12     <tr>
 13         <td>1111</td>
 14         <td>2222</td>
 15         <td>3333</td>
 16     </tr>
 17 
 18 
 19 </table>

結果：

六表單標籤<form>

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

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

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

1.表單屬性

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

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

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

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

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

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

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 屬性的用法也不一樣：



type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password", "hidden" - 定義輸入字段的初始值

type="checkbox", "radio", "image" - 定義與輸入相關聯的值
 checked:  radio 和 checkbox 默認被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

eg:

  1 <h1>註冊頁面</h1>
  2 
  3 <form action="http://127.0.0.1:8090/index" method="post" >
  4     <p>姓名&nbsp;&nbsp;<input type="text" name="username"></p>
  5     <p>密碼&nbsp;&nbsp;<input type="password" name="password"></p>
  6     <p>愛好&nbsp;&nbsp;<input type="checkbox" name="hobby" value="music">音樂<input type="checkbox" name="hobby" value="movie">看電影</p>
  7     <p>性別&nbsp;&nbsp;男<input type="radio" name="grender" value="men">女<input type="radio" name="grender" value="women"></p>
  8 
  9     <p><input type="file" value="上傳文件" ></p>
 10     <p><input type="reset" value="重置"></p>
 11     <p><input type="radio">贊成此協議</p>
 12     <p><input type="submit" value="註冊"></p>
 13 </form>
 14 
 15 
 16 
 17 
 18 </body>
 19 </html>

結果：

上傳文件注意兩點：

1 請求方式必須是post

2 enctype="multipart/form-data"

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')

<select> 下拉選標籤屬性

 name:表單提交項的鍵.

          size：選項個數

          multiple：multiple

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

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

                 <optgroup>爲每一項加上分組

<textarea> 文本域

name:    表單提交項的鍵.

cols:    文本域默認有多少列

rows:    文本域默認有多少行

<label>

<label for="www">姓名</label>

<input id="www" type="text">

<fieldset>

<fieldset>

<legend>登陸吧</legend>

<input type="text">

</fieldset>

相關標籤/搜索

每日一句

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

html基礎學習

head標籤

body標籤

一 基本標籤（塊級標籤和內聯標籤）

二 圖形標籤: <img>

三 超連接標籤(錨標籤)<a>

四 列表標籤：

五 表格標籤: <table>