前端基础html
前端基礎(chǔ)之html
HTML 初識
web服務(wù)本質(zhì)
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是什么？
- 超文本標(biāo)記語言（Hypertext Markup Language，HTML）通過標(biāo)簽語言來標(biāo)記要顯示的網(wǎng)頁中的各個部分。一套規(guī)則，瀏覽器認識的規(guī)則
- 瀏覽器按順序渲染網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示內(nèi)容。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)簽可能會有不完全相同的解釋（兼容性）
- 靜態(tài)網(wǎng)頁文件擴展名：.html 或 .htm
html不是什么？
HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
?
html結(jié)構(gòu)
- <!DOCTYPE html> 告訴瀏覽器使用什么樣的html或者xhtml來解析html文檔
- <html></html>是文檔的開始標(biāo)記和結(jié)束標(biāo)記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
- <head></head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
- <title></title>定義網(wǎng)頁標(biāo)題，在瀏覽器標(biāo)題欄顯示。?
- <body></body>之間的文本是可見的網(wǎng)頁主體內(nèi)容
html標(biāo)簽格式
標(biāo)簽的語法：
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標(biāo)簽名>
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
常用標(biāo)簽
<!DOCTYPE>標(biāo)簽
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
document.compatMode：
這個屬性會被瀏覽器識別并使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat
<head>內(nèi)常用標(biāo)簽
<meta>標(biāo)簽
meta介紹
<meta>元素可提供有關(guān)頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。
<meta>提供的信息是用戶不可見的
meta標(biāo)簽的組成：meta標(biāo)簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能。?
(1)name屬性: 主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。 ? ?
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)"><meta name="description" content="老男孩培訓(xùn)機構(gòu)是由一個很老的男孩創(chuàng)建的">(2)http-equiv屬性：相當(dāng)于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實就是各個參數(shù)的變量值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引號，分別在秒數(shù)的前面和網(wǎng)址的后面)<meta http-equiv="content-Type" charset=UTF8"><meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />?非meta標(biāo)簽
<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>內(nèi)常用標(biāo)簽
基本標(biāo)簽（塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）
''' <hn>: n的取值范圍是1~6; 從大到小. 用來表示標(biāo)題.<p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.<b> <strong>: 加粗標(biāo)簽.<strike>: 為文字加上一條中線.<em>: 文字變成斜體.<sup>和<sub>: 上角標(biāo) 和 下角表.<br>:換行.<hr>:水平線特殊字符：< >；"；©®'''<div>和<span>
<div></div> ： <div>只是一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn).?
<span></span>： <span>表示了內(nèi)聯(lián)行(行內(nèi)元素),并無實際的意義,主要通過CSS樣式為其賦予不同的表現(xiàn).
塊級元素與行內(nèi)元素的區(qū)別
所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨在網(wǎng)頁中插入這兩個元素，不會對頁面產(chǎn)生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
圖形標(biāo)簽: <img>?
''' src: 要顯示圖片的路徑.alt: 圖片沒有加載成功時的提示.title: 鼠標(biāo)懸浮時的提示信息.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)'''超鏈接標(biāo)簽(錨標(biāo)簽): <a> </a>
什么是超級鏈接？ 所謂的超鏈接是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系，這個目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上 的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應(yīng)用程序 什么是URL？ URL是統(tǒng)一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網(wǎng)頁地址，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址。 URL舉例 http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.htmlURL地址由4部分組成 第1部分：為協(xié)議：http://、ftp://等 第2部分：為站點地址：可以是域名或IP地址 第3部分：為頁面在站點中的目錄：stu 第4部分：為頁面名稱，例如 index.html 各部分之間用“/”符號隔開。 '''<a href="" target="_blank" >click</a>href屬性指定目標(biāo)網(wǎng)頁地址。該地址可以有幾種類型：絕對 URL - 指向另一個站點（比如 href="http://www.jd.com）相對 URL - 指當(dāng)前站點中確切的路徑（href="index.htm"）錨 URL - 指向頁面中的錨（href="#top"）'''列表標(biāo)簽
''' <ul>: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]<ol>: 有序列表<li>:列表中的每一項.<dl> 定義列表<dt> 列表標(biāo)題<dd> 列表項'''表格標(biāo)簽: <table>
表格概念
表格是一個二維數(shù)據(jù)空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數(shù)字符號、預(yù)置文本和其它的表格等內(nèi)容。
表格最重要的目的是顯示表格類數(shù)據(jù)。表格類數(shù)據(jù)是指最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)。
表格的基本結(jié)構(gòu)：
屬性：
'''<tr>: table row<th>: table head cell<td>: table data cell屬性:border: 表格邊框.cellpadding: 內(nèi)邊距cellspacing: 外邊距.width: 像素 百分比.（最好通過css來設(shè)置長寬）rowspan: 單元格豎跨多少行colspan: 單元格橫跨多少列（即合并單元格）'''練習(xí)：
表單標(biāo)簽: <form>
? ? ? 功能：表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與Web服務(wù)器的交互
? ? ? 表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
? ? ? 表單還可以包含textarea、select、fieldset和 label標(biāo)簽。
表單屬性
? ? ?action: 表單提交到哪.一般指向服務(wù)器端一個程序,程序接收到表單提交過來的數(shù)據(jù)（即表單元素值）作相應(yīng)處理，比如https://www.sogou.com/web
? ? ?method: 表單的提交方式 post/get默認取值就是get
表單元素
基本概念：
HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動態(tài)頁面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動態(tài)網(wǎng)站很重要的內(nèi)容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網(wǎng)頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務(wù)器上。?
服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。當(dāng)數(shù)據(jù)完整無誤后，服務(wù)器反饋一個輸入完成的信息
<input>系列標(biāo)簽
''' <1> 表單類型type: text 文本輸入框password 密碼輸入框radio 單選框checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區(qū)別？file 提交文件：form表單需要加上屬性enctype="multipart/form-data" 上傳文件注意兩點：1 請求方式必須是post2 enctype="multipart/form-data"
<2> 表單屬性
name: 表單提交項的鍵.注意和id屬性的區(qū)別：name屬性是和服務(wù)器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的value: 表單提交項的值.對于不同的輸入類型，value 屬性的用法也不同：type="button", "reset", "submit" - 定義按鈕上的顯示的文本type="text", "password", "hidden" - 定義輸入字段的初始值type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值checked: radio 和 checkbox 默認被選中readonly: 只讀. text 和 passworddisabled: 對所用input都好使.'''
select標(biāo)簽
'''<select> 下拉選標(biāo)簽屬性name:表單提交項的鍵.size：選項個數(shù)multiple：multiple <optgroup>為每一項加上分組<option> 下拉選中的每一項 屬性：value:表單提交項的值. selected: selected下拉選默認被選中'''<textarea> 多行文本框
?
'''<form id="form1" name="form1" method="post" action=""><textarea cols=“寬度” rows=“高度” name=“名稱”>默認內(nèi)容</textarea> </form>'''?
<label>標(biāo)簽
定義：<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
說明：
1 label 元素不會向用戶呈現(xiàn)任何特殊效果。
2 <label> 標(biāo)簽的 for 屬性值應(yīng)當(dāng)與相關(guān)元素的 id 屬性值相同。
<fieldset>標(biāo)簽
'''<fieldset><legend>登錄吧</legend><input type="text"> </fieldset>'''轉(zhuǎn)載于:https://www.cnblogs.com/amiee-785563694/p/6895691.html
總結(jié)
- 上一篇： 完美的单例实现（The Perfect
- 下一篇： 2017年html5行业报告,云适配发布