day12--前端基礎之html

來源:互聯網
上載者:User

標籤:自己的   嵌套   程式   oat   序列   實現   結構   資訊   round   

HTML 初識web服務本質
import socketdef main():    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)    sock.bind((‘localhost‘,8081))    sock.listen(5)    while True:        print("server is working.....")        conn, address = sock.accept()        request = conn.recv(1024)        conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello Yuan</h1>","utf8"))        conn.close()if __name__ == ‘__main__‘:    main()
html是什嗎?
  • 超文字標記語言 (HTML)(Hypertext Markup Language,HTML)通過標籤語言來標記要顯示的網頁中的各個部分。一套規則,瀏覽器認識的規則
  • 瀏覽器按順序渲染網頁檔案,然後根據標記符解釋和顯示內容。但需要注意的是,對於不同的瀏覽器,對同一標籤可能會有不完全相同的解釋(相容性)
  • 靜態網頁副檔名:.html 或 .htm
html不是什嗎?

HTML 不是一種程式設計語言,而是一種標記語言 (markup language)
HTML 使用標記標籤來描述網頁

 

html結構

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

標籤的文法:

<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />

常用標籤<!DOCTYPE>標籤

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

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

document.compatMode:

  1. BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。
  2. CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。

這個屬性會被瀏覽器識別並使用,但是如果你的頁面沒有DOCTYPE的聲明,那麼compatMode預設就是BackCompat

<head>內常用標籤 <meta>標籤

meta介紹
<meta>元素可提供有關頁面的元資訊(meta-information),針對搜尋引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部,不包含任何內容。
<meta>提供的資訊是使用者不可見的

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

(1)name屬性: 主要用於描述網頁,與之對應的屬性值為content,content中的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊用的。    

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

(2)http-equiv屬性:相當於http的檔案頭作用,它可以向瀏覽器傳回一些有用的資訊,以協助正確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變數值。

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意後面的引號,分別在秒數的前面和網址的後面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 
 非meta標籤
    <title>oldboy</title>    <link rel="icon" href="http://www.jd.com/favicon.ico">    <link rel="stylesheet" href="css.css">    <script src="hello.js"></script> 
<body>內常用標籤基本標籤( 塊級標籤和內聯標籤
‘‘‘<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.<b> <strong>: 加粗標籤.<strike>: 為文字加上一條中線.<em>: 文字變成斜體.<sup>和<sub>: 上角標 和 下角表.<br>:換行.<hr>:水平線特殊字元:      &lt; &gt;&quot;&copy;&reg;‘‘‘
<div>和<span>

<div></div> : <div>只是一個區塊層級元素,並無實際的意義。主要通過CSS樣式為其賦予不同的表現. 
<span></span>: <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.

區塊層級元素與行內元素的區別
所謂塊元素,是以另起一行開始渲染的元素,行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素,不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。

 1 <head> 2     <meta charset="UTF-8"> 3     <title>Title</title> 4     <style> 5         .sp{ 6             color: red; 7         } 8     </style> 9 </head>10 <body>11 <span class="sp">*</span>  #內聯層級,可以單獨處理某些元素

 

圖形標籤: <img> 
‘‘‘src: 要顯示圖片的路徑.alt: 圖片沒有載入成功時的提示.title: 滑鼠懸浮時的提示資訊.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)‘‘‘
超連結標籤(錨標籤): <a> </a>
什麼是超級連結?所謂的超連結是指從一個網頁指向一個目標的串連關係,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個檔案,甚至是一個應用程式

什麼是URL?URL是統一資源定位器(Uniform Resource Locator)的縮寫,也被稱為網頁地址,是網際網路上標準的資源的地址。URL舉例http://www.sohu.com/stu/intro.htmlhttp://222.172.123.33/stu/intro.htmlURL地址由4部分組成第1部分:為協議:http://、ftp://等 第2部分:為網站地址:可以是網域名稱或IP地址第3部分:為頁面在網站中的目錄:stu第4部分:為頁面名稱,例如 index.html各部分之間用“/”符號隔開。
‘‘‘<a href="" target="_blank" >click</a>href屬性指定目標網頁地址。該地址可以有幾種類型:    絕對 URL - 指向另一個網站(比如 href="http://www.jd.com)    相對 URL - 指當前網站中確切的路徑(href="index.htm")    錨 URL - 指向頁面中的錨(href="#top")‘‘‘
列表標籤
‘‘‘<ul>: 無序列表 [type屬性:disc(實心圓點)(預設)、circle(空心圓圈)、square(實心方塊)]<ol>: 有序列表         <li>:列表中的每一項.<dl>  定義列表         <dt> 列表標題         <dd> 清單項目‘‘‘
表格標籤: <table>

表格概念
表格是一個二維資料空間,一個表格由若干行組成,一個行又有若干儲存格組成,儲存格裡可以包含文字、列表、圖案、表單、數字記號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類資料。表格類資料是指最適合組織為表格格式(即按行和列組織)的資料。
表格的基本結構:

 

<table>         <tr>                <td>標題</td>                <td>標題</td>         </tr>                  <tr>                <td>內容</td>                <td>內容</td>         </tr></table>

屬性:

‘‘‘<tr>: table row<th>: table head cell<td>: table data cell屬性:    border: 表格邊框.    cellpadding: 內邊距    cellspacing: 外邊距.    width: 像素 百分比.(最好通過css來設定長寬)    rowspan:  儲存格豎跨多少行    colspan:  儲存格橫跨多少列(即合併儲存格)‘‘‘

練習:

表單標籤: <form>

      功能:表單用於向伺服器傳輸資料,從而實現使用者與Web伺服器的互動

      表單能夠包含input系欄標籤,比如文字欄位、複選框、單選框、提交按鈕等等。

      表單還可以包含textarea、select、fieldset和 label標籤。

表單屬性

     action: 表單提交到哪.一般指向伺服器端一個程式,程式接收到表單提交過來的資料(即表單元素值)作相應處理,比如https://www.sogou.com/web

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

表單元素

基本概念:
HTML表單是HTML元素中較為複雜的部分,表單往往和指令碼、動態網頁面、資料處理等功能相結合,因此它是製作動態網站很重要的內容。
表單一般用來收集使用者的輸入資訊
表單工作原理:
訪問者在瀏覽有表單的網頁時,可填寫必需的資訊,然後按某個按鈕提交。這些資訊通過Internet傳送到伺服器上。 
伺服器上專門的程式對這些資料進行處理,如果有錯誤會返回錯誤資訊,並要求糾正錯誤。當資料完整無誤後,伺服器反饋一個輸入完成的資訊

<input>系欄標籤

‘‘‘<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 和 passworddisabled: 對所用input都好使.‘‘‘

select標籤

‘‘‘ <select> 下拉選標籤屬性          name:表單提交項的鍵.          size:選項個數          multiple:multiple                  <optgroup>為每一項加上分組                 <option> 下拉選中的每一項 屬性:                       value:表單提交項的值.                          selected: selected下拉選預設被選中‘‘‘

<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>標籤

 

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

day12--前端基礎之html

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.