首頁 > 開發者 > JavaScript
前端--1、HTML基礎，--1,HTML基礎
web服務
處於應用程式層的http協議負責的資料轉送與解析。
HTML是什麼
位於socket上層，用socket傳輸http資料時需要在訊息開頭處聲明是http協議/相應http版本 狀態代碼 狀態代碼含義 \r\n\r\n 真正的字串內容。Hypertext Markup Language，是一種標記語言，來標記要顯示的網頁中的各個部分。一套瀏覽器認識的規則。
瀏覽器會按順序渲染網頁代碼檔案，根據標記符解釋和顯示內容。不同瀏覽器的標籤解釋可能有差異。靜態網頁副檔名： .html .htm .js ……
html代碼檔案的結構
使用標記標籤來設定網頁的展示 如<!DOCTYPE html> #讓瀏覽器知道用哪種HTML來解析它。 #開頭標記，結束時有對應標記。告訴瀏覽器自身是一個HTML文檔。 <head> #頭部定義 <meta charset="UTF-8"/> <title>網頁的標題</title> </head> <body> #網頁主題內容 </body> #結尾標記
html標籤格式標籤的文法：
- 關鍵詞是被角括弧<> 包住的。
- 通常成對出現，如 開始標籤， 結束標籤。有些功能簡單的標籤一個即可，稱為自閉和標籤，
- 不區分大小寫
- 可以有若干個屬性，也可不加屬性。
- 標籤內可嵌套標籤，但不能交叉嵌套。
<標籤名 屬性1= "屬性值1" 屬性2= "屬性值2" ……> 內容部分 </標籤名>
常用標籤<!DOCTYPE>
<標籤名 屬性= "屬性值1" 屬性2= "屬性值2" …… />寫與文檔最前面，<html>標籤之前。告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
解析類型
作用：聲明文檔的解析類型。避免瀏覽器的怪異模式。
- backcompat 怪異模式，瀏覽器用自己的方式解析渲染
- CSS1compat 標準模式。瀏覽器用w3c標準解析渲染
若沒寫，預設是backcompat
<head><meta>提供有關頁面的元資訊，針對搜尋引擎和更新頻度的描述和關鍵詞。
位於文檔頭部，不包含任何內容。
提供的資訊對使用者不可見meta標籤的屬性
- http-equiv屬性 相當於http檔案頭，想瀏覽器傳回一些資訊，以協助正確的顯示網頁內容，與之對應的屬性值為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" />
- name屬性 描述網頁，與之對應的屬性值為content（為便於搜尋引擎尋找和分類資訊）
<title><meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="培訓機構是由一群很人建立的">網頁標籤名
<link>給標籤連結一些圖片等。
<script>???
<body>區塊層級元素與行內元素的區別 所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
塊級標籤
這兩個元素是專門為定義CSS樣式而生的。內聯標籤
- <hn> n為1~6，表示內容中標題大小。
段落標籤，換行後與上下間有空格
換行- 水平線
- 文字加粗
特殊字元
- <strike> 在文字上加一條中線
- 下角標、上角標
<div>< >；"；©®區塊層級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span>內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
<img>圖片標籤
<a> </a>src: 要顯示圖片的路徑.alt: 圖片沒有載入成功時的提示.title: 滑鼠懸浮時的提示資訊.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)超連結標籤
從一個網頁指向一個目標的串連關係，這個目標可以是另一個網頁，也可以是相同網頁上 的不同位置，還可以是一個圖片，一個電子郵件地址，一個檔案，甚至是一個應用程式註：URL地址由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"）<table><ul>: 無序列表 [type屬性：disc(實心圓點)(預設)、circle(空心圓圈)、square(實心方塊)]<ol>: 有序列表 <li>:列表中的每一項.<dl> 定義列表 <dt> 列表標題 <dd> 清單項目表格是一個二維資料空間，一個表格由若干行組成，一個行又有若干儲存格組成，儲存格裡可以包含文字、列表、圖案、表單、數字記號、預置文本和其它的表格等內容。
基本結構
表格最重要的目的是顯示表格類資料。表格類資料是指最適合組織為表格格式（即按行和列組織）的資料。<table> <tr> <th>標題<th> #第一列，th會加粗字型 <th>標題<th> </tr> <tr> <td>內容</td> <td>內容</td> </tr></table>表單標籤<from><tr>: table row<th>: table head cell<td>: table data cell屬性: border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. width: 像素 百分比.（最好通過css來設定長寬） rowspan: 儲存格豎跨多少行 colspan: 儲存格橫跨多少列（即合併儲存格）用於向伺服器傳輸資料，從而實現使用者與web伺服器的互動
能包含input系欄標籤，如文字欄位、複選框、單選框、提交按鈕等。
還可以包含textarea、select、fieldset和label等標籤。
表單屬性表單元素
- action ： 表單提交到哪個地址，程式要有相應的接收表單資料與處理機制，
- method: 表單的提交方式 post/get預設取值就是get
HTML表單是HTML元素中較為複雜的部分，表單往往和指令碼、動態網頁面、資料處理等功能相結合，因此它是製作動態網站很重要的內容。
表單一般用來收集使用者的輸入資訊。
<input>標籤
表單工作原理： 訪問者在瀏覽有表單的網頁時，可填寫必需的資訊，然後按某個按鈕提交。這些資訊通過Internet傳送到伺服器上。
伺服器上專門的程式對這些資料進行處理，如果有錯誤會返回錯誤資訊，並要求糾正錯誤。當資料完整無誤後，伺服器反饋一個輸入完成的資訊類型
type: text 文本輸入框 password 密碼輸入框 radio 單選框 checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區別？ file 提交檔案：form表單需要加上屬性enctype="multipart/form-data" 上傳檔案注意兩點： 1 請求方式必須是post 2 enctype="multipart/form-data"屬性
select標籤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都好使.<textarea> 多行文字框<select> 下拉選標籤屬性 name:表單提交項的鍵. size：選項個數 multiple：multiple <optgroup>為每一項加上分組 <option> 下拉選中的每一項 屬性： value:表單提交項的值. selected: selected下拉選預設被選中<label>標籤<form id="form1" name="form1" method="post" action=""> <textarea cols=“寬度” rows=“高度” name=“名稱”> 預設內容 </textarea></form>定義：<label> 標籤為 input 元素定義圖說文字（標記）。
說明： 1 label 元素不會向使用者呈現任何特殊效果。 2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。<fieldset>標籤<form method="post" action=""> <label for=“username”>使用者名稱</label> <input type=“text” name=“username” id=“username” size=“20” /></form>fieldset 元素可將表單內的相關元素分組。
<fieldset> 標籤將表單內容的一部分打包，產生一組相關表單的欄位。
當一組表單元素放到 <fieldset> 標籤內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可建立一個子表單來處理這些元素。
<fieldset> 標籤沒有必需的或唯一的屬性。 <legend> 標籤為 fieldset 元素定義標題。
包含的所有全域屬性
- disabled HTML5 如果設定了這個 bool 值屬性, 它的後代表單控制元素也會繼承這個屬性, 它的首個可選的 legend 元素除外, 例如, 禁止編輯. 該元素和它的子項目不會接受任何瀏覽器事件, 比如點擊或者 focus 事件, 一般來說瀏覽器會將這樣的元素展示位灰色.
- form HTML5 規定fieldset所屬的form表單. 這個屬性的值與其所屬的form的ID相同. 預設值是最近的那個form.
- name HTML5 控制元素分組的名稱
<fieldset> <legend>登入吧</legend> 輸入登入資訊，布拉布拉…… <input type="text"></fieldset>
前端學習網站推薦：https://developer.mozilla.org/en-US/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
