HTML記錄匯總
- 一.什么是前端
- 二.超文本標記語言結構層：html5—XHTML HTML4.0版本 超文本標記語言
- 三.HTML與
- 四.正式匯總
- 4.1.HTML基本結構
- 4.2.網頁的基本標簽
- 4.3.網頁的影像標簽img
- 4.4.超鏈接標簽
- 4.4.1.錨點鏈接的用法與作用
- 4.4.2.功能性鏈接
- 4.5.塊元素和行內元素
- 4.6.串列
- 4.7.表格標簽
- 4.8.媒體元素：音頻~視頻
- 4.9.表單------>>重點
- 4.9.1.標單的基本標簽和作用
- 4.9.2.標單的應用
- 4.9.3.標單的初級應用
- 4.9.4.post和get請求方法
- `get post`**總結**：
- 五.作者頁
一.什么是前端
前端工程所需要掌握的內容：
技術堆疊HTML+CSS+JAVAScript 基礎
Bootstrap jquery vue rect angular.js Node.js
Echars protype ES5 ES6 ajax 等
Mysql oracle redis
Linux centos redhat Nignx
網路協議： Http UDP TCP 等
WebService Websocket
須要掌握一門應用級語言 Java Python 等
資料結構和演算法
二.超文本標記語言結構層：html5—XHTML HTML4.0版本 超文本標記語言
表現層：css3.0 -css2.0版本 層疊樣式表
行為層：javascript 腳本語言 用于定義整個網站的行為
W3C -----萬維網聯盟定義一系列的標準 ----Web標準
符合HTTP協議 面向連接 符合Web通信的標準
我們所有的web專案都要尊崇W3C所提供的標準和HTTP協議，
三.HTML與
英文：Hyper Text Markup Language
區分：
HTML ----超文本標記語言—展示資料
XML ---- 可擴展標記語言 ----存盤資料 組態檔 json
內容：
HTML ----固定標簽 h1 body
XML ---- 沒有固定標簽 任何標簽都可以， 標簽—Tag
關于HTML+CSS 部分的知識內容 大家可以到W3C的網站去學習
四.正式匯總
4.1.HTML基本結構
<!DOCTYPE html> --檔案型別 html MIME型別
<html lang="en"> language=“en” zh-cn 屬性節點
<head>
<meta charset="UTF-8"> 源 編碼字符集----utf-8
<title>Document</title> 標題
</head>
<body>
正文
</body>
</html>
4.2.網頁的基本標簽
網頁的基本標簽分為單標簽和多標簽，
常用基本標簽如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本框架</title>
</head>
<body>
<hn> 這是標題<hn> --標題標簽 n=1~6
<p>這是一個段</p> --段標簽
<br> --換行標簽
<hr> --水平線標簽
<-- 注釋字符--> --快捷鍵：CTRL+/
> < ©
--這是幾個常用特殊字符 還有很多
</body>
</html>
4.3.網頁的影像標簽img
img標簽用于插入image，常用height``width屬性控制臺圖片的size,單位為pxorn%，
<img src="圖片地址" alt="上影像替代文" width=“100%” height="100%"/>
---影像無法顯示時顯示alt屬性值替代
img標簽的usermap屬性：當用戶單擊其中某一個區域時，將被鏈接到不同的檔案，需要配合area標簽使用
<img src="1.png" alt="人像圖" usemap="#peoplemap" />
<map name="peoplemap">
---herf:映射地址 -----shape:定義映射區域的形狀
---coords:映射區域的范圍定義
<area href="eye.htm" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mouth.htm" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>
4.4.超鏈接標簽
超鏈接標簽a分為錨點鏈接和功能性鏈接
4.4.1.錨點鏈接的用法與作用
<a href="http://www.w3school.com.cn">W3School</a>
-- 用法一 跳轉到herf屬性的地址
<a href="1.html">W3School</a>
--跳向指定頁面
<a href="#point">W3School</a>
---比如中間有一大堆帶代碼
--用法二 用于跳轉至指定的錨點 常用于文章 回傳首部等
<h3 name="point">W3School<h3>
4.4.2.功能性鏈接
具有特定屬性的鏈接，如QQ和郵箱
--郵箱
<a href="mailt:2323232323@qq.com">herf中為郵箱屬性</a>
--點擊會打開郵箱編輯功能向該郵箱發送 判斷依據為@符號
網頁中常有和商家QQ聯系的功能性按鍵，
騰訊旗下的QQ推廣中的推廣工具可以自動生成相關代碼，
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="聯系我吧" title="聯系我吧"/></a>
4.5.塊元素和行內元素
行內元素：左右的元素能夠被放在一行內
輸入：<input type="text" >
輸入：<input type="text" >
塊 元 素：元素內不管有多少內容都被劃分為一行
4.6.串列
串列分為：有序串列，無序串列，自定義串列
無序串列：
<ul> --以下是無序串列 可以用tyep屬性替換標號形狀，建議用css取代
<li>Coffee</li> -- ·Coffee
<li>Tea</li> 顯示樣式：-- ·Tea
<li>Milk</li> -- ·Milk
</ul>
有序串列：
<ol> --以下是有序串列
--reversed屬性·規定串列順序為降序
<li>Coffee</li> -- 1.Coffee
<li>Tea</li> 顯示樣式：-- 2.Tea
<li>Milk</li> -- 3.Milk
</ol>
自定義串列：
<dl> --以下是自定義串列 顯示樣式
<dt>計算機</dt> -- 計算機
<dd>用來計算的儀器 ...</dd> -- 用來計算的儀器 ...
<dt>顯示幕</dt> -- 顯示幕
<dd>以視覺方式顯示 ...</dd> -- 以視覺方式顯示 ...
</dl>
4.7.表格標簽
表格有四個要點：行，列，跨行，跨列
--表格屬性：table width為寬
<!-- 表格屬性：table width為寬 border為邊框 -->
<table width='800px' border="1px">
<tr>
<!-- 表頭默認加粗 colspan橫跨N列合并單元格-->
<th colspan="2">跨行</th>
<!-- rowspan橫跨N行合并單元格 從命令列鄉下合并 -->
<th rowspan="2">跨列</th>
<th>表頭</th>
</tr>
<tr align="center">
<td>表行</td>
<td>表行</td>
<td>表行</td>
</tr>
</table>
4.8.媒體元素：音頻~視頻
視頻:video標簽， 音頻:audio標簽
屬性標簽：src為檔案路勁 ， controls顯示該控制元件， autoplay為自動播放，
<!-- src為檔案路勁 controls顯示該控制元件 autoplay為自動播放 -->
<audio src="audio/wanfeng.mp3" controls autoplay></audio>
<video src="video/qifengle.mp4" controls autoplay></video>
</body>
4.9.表單------>>重點
4.9.1.標單的基本標簽和作用
表單form常用于注冊，登錄，資訊提交，
而在表單中有兩個必要屬性：一個是method定義提交方式，另一個是at=ction定義向何處提交表單
<form align="center" action="1.html" method="post">
<!-- 用戶名：文本框 -->
<p>用戶名：<input type="text" value="請輸入你的用戶名" name="username"></p>
<!-- 密碼框：password -->
<p>密 碼:<input type="password" name="password"></p>
<p>請輸入你的性別：
<!-- 的那選框：radio 同一組的單選框中選項的name要一樣，否則不是一個整體 -->
<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女
</p>
<p>請選擇你的愛好：
<!-- 多選框：checkbox 同一組多選框的name也要須要相同 -->
<input type="checkbox" name="hobby" value="吃">吃
<input type="checkbox" name="hobby" value="喝">喝
<input type="checkbox" name="hobby" value="拉">拉
<input type="checkbox" name="hobby" value="撒">撒
</p>
<p>
小說：
<!-- 下拉框：select 其中的選項需要option定義，multiple屬性定義多選，不常用 -->
<select multiple="multiple">
<option>綜漫</option>
<option>綜漫</option>
<option>綜漫</option>
<option>綜漫</option>
</select>
</p>
<p>
小說：
<select>
<option>綜漫</option>
<option>綜漫</option>
<option>綜漫</option>
<option>綜漫</option>
</select>
</p>
</form>
還有許多標簽：提交按鈕：submit ，重置按鈕：reset,檔案上傳：file ，郵箱：email，數字number等等，可以根據需要在手冊查詢，像數字，郵箱此類屬性含有最簡單的判斷功能，
4.9.2.標單的應用
在標單的實際應用中，有許多的內容不允許用戶隨意修改，不必要的內容被隱藏，還有些功能禁止用戶使用，故在此描述三個方面的應用：1.隱藏域hidden，2.禁用：display，3:只讀：readonly，
<form align="center" action="1.html" method="post">
<!-- 隱藏域：hidden 是文本框隱藏起來 -->
<p>用戶名：<input type="text" value="請輸入你的用戶名" name="username" hidden></p>
<!-- 只讀readonly 只能讀取，無法更改文本內容-->
<p>用戶名：<input type="text" value="請輸入你的用戶名" name="username" readonly></p>
<!-- 禁用:disable 無法點擊文本框 -->
<p>用戶名：<input type="text" value="請輸入你的用戶名" name="username" disabled="1"></p>
</form>
以下為：隱藏域，只讀，禁用的結果
其中在表單中，必須點擊相應文本框才能輸入相應的內容，這個問題可以用<lable></lable>標簽解決：
<!-- 通過label與輸入框的id屬性相連接，達到點擊文字進入文本框的效果 -->
<p> <label for="mark">用戶名：</label>
<input type="text" id="mark" value="請輸入你的用戶名" name="username" ></p>
4.9.3.標單的初級應用
一般的網站含有標單的地方都有一些初級判斷，我將此歸為三種，1.提示資訊：palceholder，2.非空判斷：required，3.正則運算式：pattern
<form action="1.html" method="post">
<!-- 提示用戶輸入用戶名：placehoder -->
<p>用戶名：<input type="text" name="username" placeholder="請輸入用戶名"></p>
<!-- 對于有郵箱的非空判斷 -->
<p><input type="email" name="email" required></p>
<!-- 通過正則運算式賦予相應的邏輯判斷 -->
<p>自定義郵箱：
<input type="text" name="diyemail" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
</p>
<!-- 提交按鈕 -->
<p><input type="submit"></p>
</form>
正則運算式有很多，通常能夠在網上找得到，正則運算式的邏輯更加的嚴謹，
4.9.4.post和get請求方法
Method的提交方式來源于HTTP協議，HTTP協議的請求方式有9種，而常用的兩種方式非別為get和post，
當以get方式提交時獲取到的路徑:
file:///D:/Project/code/1.html?
https://www.baidu.com/?
file:///D:/Project/code/1.html
當以post方式提交時獲取到的路徑：
https://www.baidu.com/?username=zhangsanfeng&pwd=123123
file:///D:/Project/code/1.html?username=zhangsan&pwd=123&sex=on&hobby=on&hobby=on
file:///D:/Project/code/1.html?username=zhangsan&pwd=123&sex=%E7%94%B7&hobby=%E7%9D%A1%E8%A7%89&hobby=%E5%90%AC%E6%AD%8C
路徑的規則 ： ? 和 &
? 號表示的是 路徑的跳轉地址結束
& 號表示的是 屬性之間的間隔
get post總結：
- 由以上路徑可知：
get方式提交會在訪問路徑上攜帶表單屬性資訊訪問問,而post會將相關屬性隱藏，method的默認請求方式為get， - post請求提交時路徑上沒有屬性的資訊 相對安全
Get 請求提交路徑上存在屬性的資訊 不安全 - 因為get請求在路徑的地址上存在屬性值 url的地址是有限制的最大為64kb
- 如果資料的性質需要安全性比較高時 那么一定要使用post
在寫檔案上傳的功能時 請求必須是post的提交方式 - 不重要的資料，可以提供給用戶查看的資訊，可以使用get提交方式，
五.作者頁
接下來會對css進行總結，剛剛寫博客，語言還不夠嚴謹，比較口水話，可能寫漏了一些東西，或者一部分內容寫的不夠完善或有錯，如有建議可以盡管提，感謝大家的閱讀和建議，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/280712.html
標籤：其他