標籤：height 文檔 就是 縮放 輸入框 bsp ref col abc
1.html 的學習 https://www.cnblogs.com/yuanchenqi/articles/5976755.html
htyper text markup language 即超文字標記語言 (HTML)
超文本: 就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。
標記語言: 標記（標籤）構成的語言.
網頁==HTML文檔，由瀏覽器解析，用來展示的
靜態網頁：靜態資源，如xxx.html
動態網頁：html代碼是由某種開發語言根據使用者請求動態產生的
html文檔樹形結構圖：
什麼是標籤
標籤的屬性
<meta> 標籤
meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
1: name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊用的。
<meta name="keywords" content="你搜尋的關鍵字的內容1,內容2"> keywords 關鍵字搜尋，content 是值
<meta name="description" content="老男孩培訓機構是由一個老的男孩建立的"> description 網站描述
2: http-equiv顧名思義，相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以協助正確和精確地顯示網頁內容，與之對應的屬性值為content， content中的內容其實就是各個參數的變數值。
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意後面的引號，分別在秒數的前面和網址的後面，2秒後跳轉到baidu.com)
下面兩個用到的少
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非meta標籤
<title>oldboy</title>
代碼引入，link,script <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
上面的都是放在 head 標籤裡的
下面說的是都放在body 標籤裡的
一 基本標籤（ 塊級標籤和內聯標籤）<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.常值內容的大小，這個標籤獨佔一行，內建換行，且字型變黑加粗<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.<b> <strong>: 這兩個都是加粗標籤.<strike>: 為文字加上一條中線<em>: 文字變成斜體.<sup>和<sub>: 上角標 和 下角標，多少多少的平方. 3<sup>2</sup> 表示的是 3的2次方
<br>:換行.只做換行 <hr>:水平線 <div><span>
div 標籤 就是一個沒有任何樣式的空標籤
<div style="color: orangered; background-color: orange;font-size: 30px;"> 好好學習</div>
span 標籤
分類：
塊級標籤：<p><h1><table><ol><ul><form><div> 樣式獨佔一行，比如說我們給他設定 background-color，那麼這個整行都會被設定成該顏色，即使內容沒有寫到最後
比如說下面的就是塊級標籤，
<div style="color: orangered; font-size: 30px;"> 好好學習</div>
內聯標籤：<a><input><img><sub><sup><textarea><span> ，這個就是和塊級標籤相反，內容是多少，樣式就和字型一樣到那
比如說下面的就是內聯標籤
<span style="color: red; background-color: greenyellow;font-size: 30px;"> 天天向上</span>
block（塊）元素的特點
總是在新行上開始，獨佔一行；
寬度預設是它的容器的100%，除非設定一個寬度。
它可以容納內嵌元素和其他塊元素
inline元素的特點
和其他元素都在一行上；
寬度就是它的文字或圖片的寬度，不可改變
內嵌元素只能容納文本或者其他內嵌元素
特殊字元
< >；"；©®
二 圖形標籤: <img><img src="123.png" alt="圖片載入失敗時候的提示" title="滑鼠放在圖片上懸浮時的提示">
src: 要顯示圖片的路徑.alt: 圖片沒有載入成功時的提示.title: 滑鼠懸浮時的提示資訊.超連結標籤(錨標籤)<a>
下面兩個屬性幾乎不用width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<a href="https://www.xiaohua.com/" target="_blank"> 笑話網</a> 點擊 “笑話網” 跳轉到指定URL
<a href="https://www.xiaohua.com/" target="_blank"> <img src="123.png" ></a> 點擊 圖片 跳轉到指定URL
href:要跳轉的連結的資源路徑 格式如下: href="http://www.baidu.com" target: _blank : 在新的視窗開啟超連結. 架構名稱: 在指定架構中開啟串連內容. _bank 新視窗開啟,_self 是當前視窗開啟name: 定義一個頁面的書籤.用於跳轉 href : #id.（錨）
列表標籤：
<ul>: 無序列表 unorder list,經常用到<ol>: 有序列表 order list <li>:列表中的每一項.<dl> 定義列表 define list <dt> 列表標題 <dd> 清單項目
我們在網站進程看到捲軸拉到最下面的時候會看到一個返回頂部的按鈕，這樣我們就可以返回到最頂端
我們在頭一個標籤加入
<div id="abc"></div>
然後再最底部加入一個標籤
<a href="#abc"> 返回頂部</a>
這樣我們點擊返回頂部，我們就回到最上方了
接下來要說的是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都好使.
<h1>註冊頁面</h1><form action="http://127.0.0.1:8080/register"><p>帳號：<input type="text" name="username"></p><p>密碼：<input type="password" name="pwd"></p><p>愛好: 音樂<input type="checkbox" name="hobby" value="music"> 電影<input type="checkbox" name="hobby" value="movie"></p><p>性別: 男<input type="radio" name="gender" value="male"> 女<input type="radio" name="gender" value="female"></p><p><input type="submit" value="提交註冊"></p><p><input type="button" value="button 按鈕"></p><!--上面我們通過submit 然後把上面的name屬性打包成一個索引值對的形式（類似字典形式）發送給服務端，例：{"username":"bigbao","pwd":"123","hobby":["music","movie"],"gender":"male"}這裡的submit 和 button 都是一個按鈕，但是submit 會把資料打包發送給服務端，但是button目前在html這裡看只是一個按鈕，後面要配合js使用才會有用處這裡的checkbox 是多選框radio 是單選框，這裡我們radio 要是不加上name 的話，他是可以多選的，同時這裡checkbox和radio必須要有value，不然的話沒法傳值給服務端這裡我們在通過form 表單指定路徑，傳給服務端--></form>
前端的學習
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
