python之路-----前端之html協議一

時間 2019-11-30

標籤 python 之路前端 html 協議欄目 Python 简体版

原文原文鏈接

一.概述javascript

　　1.1 什麼是html語句？css

超文本標記語言（Hypertext Markup Language，HTML）經過標籤語言來標記要顯示的網頁中的各個部分。一套規則，瀏覽器認識的規則
瀏覽器按順序渲染網頁文件，而後根據標記符解釋和顯示內容。但須要注意的是，對於不一樣的瀏覽器，對同一標籤可能會有不徹底相同的解釋（兼容性）
靜態網頁文件擴展名：.html 或 .htm

　　1.2 注意點　html

HTML 不是一種編程語言，而是一種標記語言 (markup language)
HTML 使用標記標籤來描述網頁

　　1.3 html結構java

<!DOCTYPE html>
            <html>
                <head>
                    <meta charset="UTF-8">   <!--設置字符編碼-->
                    <meta name='keywords' content="這是個測試頁面">     <!-- 定義頁面關鍵字,能夠被搜索引擎檢索到 -->
                    <meta name="discription" content="這是個簡單的介紹,會顯示在搜索結果下進行簡單網站介紹">
                    <meta http-equiv="refresh" content="500;https://www.baidu.com/">   <!--設置響應頭部-->
                    <title></title>   窗口標題
                    <link>
   
                </head>
                <body>
                
                </body>
            </html>

html結構

<!DOCTYPE html> 告訴瀏覽器使用什麼樣的html或者xhtml來解析html文檔
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出如今文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，可是其間的元素有特殊重要的意義。
<title></title>定義網頁標題，在瀏覽器標題欄顯示。
<body></body>之間的文本是可見的網頁主體內容

　　html是個樹狀結構,咱們在寫html的時候，能夠根據該結構來進行頁面分析。web

　　1.4 html標籤格式編程

　　標籤的語法：瀏覽器

　　　　<標籤名屬性1=「屬性值1」屬性2=「屬性值2」……>內容部分</標籤名>
　　　　<標籤名屬性1=「屬性值1」屬性2=「屬性值2」…… />服務器

二. 經常使用標籤編程語言

　　<!DOCTYPE>　　ide

　　<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。

　　做用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。

　　document.compatMode：

1. BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。
2. CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

　　這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat

　　<head>內經常使用標籤

　　　　head標籤內容不顯示與瀏覽器，可是head的標籤內容通常跟頁面屬性相關。

　　　　<meta>標籤　　　

　　　　　　<meta>元素可提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞。
　　　　　　<meta>標籤位於文檔的頭部，不包含任何內容。
　　　　　　<meta>提供的信息是用戶不可見的

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

　　　　同的網頁功能。

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

　　　　(2)http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，

　　content中的內容其實就是各個參數的變量值。

1.<meta charset="UTF-8">   <!--設置字符編碼-->
2.<meta name='keywords' content="這是個測試頁面">     <!-- 定義頁面關鍵字,能夠被搜索引擎檢索到 -->
3.<meta name="discription" content="這是個簡單的介紹,會顯示在搜索結果下進行簡單網站介紹">
4.<meta http-equiv="refresh" content="500;https://www.baidu.com/">   <!--設置響應頭部-->

meta標籤應用

    <title>test</title>  #窗口顯示標題
    <link rel="icon" href="http://www.jd.com/favicon.ico">  #連接顯示圖標
    <link rel="stylesheet" href="css.css">  #連接引入css
    <script src="hello.js"></script>　   #連接引入js

其餘標籤

　　<body>內經常使用標籤

　　　　body內容會顯示在瀏覽器中,標籤主要分爲：塊級標籤和內聯標籤。塊級標籤會獨佔一行,內聯標籤內容有多少就佔多少。

<hn></hn>  #標題,能夠加大文字
<p>123</p>  #段落標籤,會換行，而且行間距較大
<b></b>        #加粗
<strong></strong>  #加粗 
<sub></sub>    #下標
<sup></sup>     #上標
<br/>        #換行
<em></em>   #斜體
<strike>123</strike>  #中間劃線
<img src="1.jpg">  #圖片
<hr>    #橫線

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

　　　　<div>和<span>標籤

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

　　　　　　塊級元素與行內元素的區別
　　　　　　　　所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
　　　　　　　　這兩個元素是專門爲定義CSS樣式而生的(沒有任何附帶的樣式屬性)。

　　　　圖片標籤 <img>

　　　　img能夠引入圖片,是自閉合標籤,能夠經過相對路徑,絕對路徑或者連接來引入圖片。

使用示例:
    <img src="hongraorou.jpg" alt="紅燒肉" title="紅燒肉" id="hongshaorou">

屬性說明:
    src: 要顯示圖片的路徑.

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

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

    width: 圖片的寬

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

　　　　超連接表示(錨標籤)<a>　　　

　　　　　　什麼是超級連接？
　　　　　　　　所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，
　　　　　　一個文件，甚至是一個應用程序.

<a href="" target="_blank" >click</a>

href屬性指定目標網頁地址。是a標籤中最重要的屬性.該地址能夠有幾種類型：

    絕對 URL - 指向另外一個站點（好比 href="http://www.jd.com）
    相對 URL - 指當前站點中確切的路徑（href="index.htm"）
    錨 URL - 指向頁面中的錨（href="#top"）
其餘a標籤屬性,可見：
    http://www.w3school.com.cn/tags/tag_a.asp

　　　　列表標籤

　　　　列表分類：

　　　　　　無序列表 unorder list （ul）

　　　　　　有序列表 order list　(ol)

　　　　　　自定義列表 define list　(dl)　　　

 無序列表 unorder list 
       <ul>
             <li></li>  #list
                         
       </ul>
                    
有序列表 order list
       <ol>
              <li></li>
      </ol>
                        
 自定義列表 define list
        <dl>
              <dd></dd> define data 元素
       </dl>

各列表使用

　　　表格標籤 table　

　　　表格概念:表格是一個二維數據空間,一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
　　　表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。
　　　表格的基本結構：

<table>
         <tr>  #tablerow
                <th>標題</th>  #table head
                <th>標題</th>
         </tr>
         
         <tr>
                <td>內容</td>  #table data
                <td>內容</td>
         </tr>
</table>

<tr>: table row

<th>: table head cell

<td>: table data cell


屬性:

    border: 表格邊框.

    cellpadding: 內邊距

    cellspacing: 外邊距.

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

    rowspan:  單元格豎跨多少行

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

table 屬性

　　　　表單標籤 form

　　　　　　功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

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

　　　　表單還能夠包含textarea、select、fieldset和 label標籤。

　　　　　　表單屬性

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

　　　　　　https://www.sogou.com/web

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

　　　　　　表單元素

　　　　　　　　基本概念：
　　　　　　　　　　HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
　　　　　　　　　　表單通常用來收集用戶的輸入信息
　　　　　　　　表單工做原理：
　　　　　　　　　　訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
　　　　　　　　　　服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成

　　　　　　　　的信息。　　　　

<1> 表單類型

type:      text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

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

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

                     1 請求方式必須是post
                     2 enctype="multipart/form-data"

 <2> 表單屬性

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都好使.

input系列

input各種別使用

示例：
    <input type="text" name="username">
    <input type="passwoed" name="pwd">
必須定義name,這樣能夠和輸入值values組成鍵值對 {username:values,pwd:values}傳給服務器

     在text中，能夠設置value值，這樣會顯示在輸入框中。
input  text 其實的工做流量是將value值賦值給鍵值對的value值。只是默認自身的value爲空。
整個流程以下：
    輸入值 a ----value='a'------key-value=value----key:key-vlues

text和passwork

 愛好:
        籃球 <input type="radio" name="hobbies" value="basketball" checked> 足球 <input type="radio" name="hobbies" value="football"> 乒乓球 <input type="radio" name="hobbies" value="pingpang">
    <!--radio 單選按鈕，只能選擇一個，必須有name和value來傳遞鍵值對-->
    <!--checked="checked" 默認選擇該單選按鈕-->

radio

示例代碼：     
    愛好:
        籃球 <input type="checkbox" name="hobbies" value="basketball" checked> 足球 <input type="checkbox" name="hobbies" value="football"> 乒乓球 <input type="checkbox" name="hobbies" value="pingpang">
    <!--同radio，不過checkbox能夠多選，checked默認選中-->

checkbox

代碼示例:
    <input type="submit" value="提交">  <!--提交按鈕，value能夠設置按鈕顯示值,點擊後，會將表單內容提交給後臺-->

submit

示例代碼
    <input type="button" value="提交" >  <!--按鈕，和submit類似，value能夠設置按鈕顯示值,可是點擊後，並不會提交數據，須要和js結合使用-->

button

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

      1 請求方式必須是post
      2 enctype="multipart/form-data"

file

　　　　select標籤

<select> 下拉選標籤屬性：
          name:表單提交項的鍵.
          size：選項個數
          multiple：multiple 
                 <optgroup>爲每一項加上分組

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

                       value:表單提交項的值.   
                       selected: selected下拉選默認被選中
代碼示例：
    1、
    <select name="provi" size="4" multiple >
        <option value="fujian">福建</option>
        <option value="guangdong" selected>廣東</option>
        <option value="guangxi">廣西</option>
        <option value="hainan">海南</option>
    </select>

    2、optgroup
    
     <select name="provi" size="5">
        <optgroup label="華南">
              <option value="fujian">福建</option>
            <option value="guangdong">廣東</option>
            <option value="guangxi">廣西</option>
            <option value="hainan">海南</option>
        </optgroup>
    </select>

　　　　<textarea> 多行文本框

<form id="form1" name="form1" method="post" action="">
        <textarea cols=「寬度」 rows=「高度」 name=「名稱」>
                   默認內容
        </textarea>
</form>

　　　　<label>標籤

　　　　　　定義：<label> 標籤爲 input 元素定義標註（標記）。
　　　　　　說明：
　　　　　　　　1 label 元素不會向用戶呈現任何特殊效果。
　　　　　　　　2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

<form method="post" action="">
        <label for=「username」>用戶名</label>
        <input type=「text」 name=「username」 id=「username」 size=「20」 />
</form>

　　　　<fieldset>標籤（醜陋的方框圖形,不推薦使用，後面用 css）

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

相關標籤/搜索

每日一句

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