WEB簡介及瀏覽器內核
網頁主要由文字、影像和超鏈接等元素構成，當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等，
-
瀏覽器的內核
負責讀取網頁內容, 整理訊息, 計算網頁的顯示方式并顯示頁面，
瀏覽器 內核 備注 IE Trident IE、獵豹安全、360極速瀏覽器、百度瀏覽器 firefox Gecko 可惜這幾年已經沒落了，打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome， Safari webkit 現在很多人錯誤地把 webkit 叫做 chrome內核（即使 chrome內核已經是 blink 了），蘋果感覺像被別人搶了媳婦，都哭暈再廁所里面了， chrome Chromium/Blink 在 Chromium 專案中研發 Blink 渲染引擎（即瀏覽器核心），內置于 Chrome 瀏覽器之中，Blink 其實是 WebKit 的分支，大部分國產瀏覽器最新版都采用Blink內核，二次開發 Opera Presto Presto（已經廢棄） 是挪威產瀏覽器 opera 的 "前任" 內核，為何說是 "前任"，因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了， 現在用blink內核， 注意
移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核， Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發， iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的 -
Web標準
由W3C組織和其他標準化組織制定的一系列標準的集合，-
Web標準的好處:
1、讓Web的發展前景更廣闊
2、內容能被更廣泛的設備訪問
3、更容易被搜尋引擎搜索
4、降低網站流量費用
5、使網站更易于維護
6、提高頁面瀏覽速度
-
-
Web標準構成
- 結構標準: 結構用于對網頁元素進行整理和分類, HTML，對于網頁來說最重要的一部分
- 表現標準: 表現用于設定網頁元素的版式、顏色、大小等外觀樣式, 主要指的是CSS
- 行為標準: 行為是指網頁模板的定義及互動的撰寫, Javascript
- 表現標準: 表現用于設定網頁元素的版式、顏色、大小等外觀樣式, 主要指的是CSS
- 結構標準: 結構用于對網頁元素進行整理和分類, HTML，對于網頁來說最重要的一部分
HTML
HTML指的是超文本標記語言(Hyper Text Markup Lanugage)是用來描述網頁的一種語言，
html的骨架
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
骨架標簽定義及說明
| 標簽名 | 定義 | 說明 |
|---|---|---|
<html></html> |
HTML標簽 | 頁面中最大的標簽，根標簽 |
<head></head> |
檔案的頭部 | 注意在head標簽中我們必須要設定的標簽是title |
<titile></title> |
檔案的標題 | 網頁標題 |
<body></body> |
檔案的主體 | 元素包含檔案的所有內容，頁面內容 基本都是放到body里面的 |
HTML元素標簽分類
-
常規元素(雙標簽)
<標簽名> 內容 </標簽名>- 該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”，
- 和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”，
-
空元素(單標簽)
<標簽名/>- 空元素 用單標簽來表示， 簡單點說，就是里面不需要包含內容， 只有一個開始標簽不需要關閉，
檔案型別<!DOCTYPE>
<!DOCTYPE> 宣告位于檔案中的最前面的位置，處于 <html> 標簽之前，此標簽可告知瀏覽器檔案使用哪種 HTML 或 XHTML 規范，
HTML 常用標簽
-
標題標簽 h
標題標簽語意: 作為標題使用, 并且依據重要性遞減
基本語法
<h1> 標題文本 </h1> <h2> 標題文本 </h2> <h3> 標題文本 </h3> <h4> 標題文本 </h4> <h5> 標題文本 </h5> <h6> 標題文本 </h6> -
段落標簽 p
? 作用語意: 把檔案分割為若干段落
<p> 文本內容 </p> -
水平線標簽 hr
作用語意: 默認樣式的水平線
<hr />
HTML 表格
-
table 標簽
table 表格基本語法*
<table> <tr> <th>表頭內容</th> </tr> <tr> <td>單元格內的文字</td> </tr> </table><tr>代表一行 內只能嵌套<td><td>代表單元格標簽可以容納所有的元素<th>表頭元素
-
表格屬性
屬性名 含義 常用屬性值 border 設定表格的邊框 像素值 cellspacing 設定單元格與單元格邊框之間的空白間距 像素值(默認為2px) cellpadding 設定單元格內容與單元格邊框之間的空白間距 像素值(默認為1px) width 設定表格的寬度 像素值 height 設定表格的高度 像素值 alian 設定表格再網頁鐘的水平對齊方式 left, center,right -
表格標題 caption
定義和用法
<table> <caption>表格標題</caption> </table> -
合并單元格
-
跨行合并: rowspan="合并單元格的個數"
-
跨列合并: colspan="合并單元格的個數"
合并的順序按照 先上 后下 先左 后右 的順序
例如:
<td colspan = "3"> </td>
-
-
總結表格
標簽名 定義 說明 <table></table>表格標簽 就是一個四方的盒子 <tr></tr>表格行標簽 行標簽要再table標簽內部才有意義 <td></td>單元格標簽 單元格標簽是個容器級元素，可以放任何東西 <th></th>表頭單元格標簽 它還是一個單元格，但是里面的文字會居中且加粗 <caption></caption>表格標題標簽 表格的標題，跟著表格一起走，和表格居中對齊 clospan和rowspan合并屬性 用來合并單元格的 - 表格提供了HTML 中定義表格式資料的方法，
- 表格中由行中的單元格組成，
- 表格中沒有列元素，列的個數取決于行的單元格個數，
- 表格不要糾結于外觀，那是CSS 的作用，
- 表格的學習要求： 能手寫表格結構，并且能簡單合并單元格，
串列標簽
容器里面裝載著結構, 樣式一致的文字或圖示的一種形式, 叫串列
-
無序串列
<ul>無序串列的各個串列項之間沒有順序級別之分, 是并列的，其基本語法格式:
<ul> <li>串列項1</li> <li>串列項2</li> <li>串列項3</li> ······ </ul>注意：
<ul></ul>中只能嵌套<li></li>, 直接再<ul></ul>標簽中輸入其他標簽或者文字得做法是不被允許.<li>與</li>之間相當于一個容器,可以容納所有元素，
-
有序串列
<ol>有序串列即為有排列順序的串列，其各個串列項按照一定的順序排列定義，有序串列的基本語法格式如下：
<ol> <li>串列項1</li> <li>串列項2</li> <li>串列項3</li> ······ </ol> -
自定義串列
<dl>定義串列常用于對術語或名詞進行解釋和描述，定義串列的串列項前沒有任何專案符號，其基本語法如下：
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> ... </dl>例如:
頁面底下的幫助頁面
-
串列總結
標簽名 定義 說明 <ul></ul>無序標簽 里面只能包含li 沒有順序，布局中最常用的串列 <ol></ol>有序標簽 里面只能包含li 有順序， 使用情況較少 <dl></dl>自定義串列 dt 和 dd, 創建網頁下幫助資訊
表單標簽
跟用戶進行互動，收集用戶資料，此時也需要表單，包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等，
-
input 控制元件
屬性 屬性值 描述 type text 單行文本輸入框 password 密碼輸入框 radio 單選按鈕 checkbox 復選框 button 普通按鈕 submit 提交按鈕 reset 重置按鈕 image 影像形式的提交按鈕 file 檔案域 name 由用戶自定義 控制元件向后臺提交的名稱 value 由用戶自定義 input空間中的默認文本值 size 正整數 input空間在頁面中的顯示寬度 checked checked 定義在選擇空間默認被選中的項 maxlength 正整數 空間允許輸入的最多字符數 -
type屬性
- 屬性通過改變值可以決定了屬于哪種input表單
用戶名:<input type="text" /> 密 碼:<input type="password" /> -
value屬性
-
value 默認的文本值, 默認寫入的文字，
用戶名:<input type="text" name="username" value="https://www.cnblogs.com/Hac-Zhang/archive/2020/09/30/請輸入用戶名">
-
-
name屬性
name表單的名字， 這樣，后臺可以通過這個name屬性找到這個表單， 頁面中的表單很多，name主要作用就是用于區別不同的表單，
- ajax和后臺互動時用到
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女 -
checked屬性
-
表示默認選中狀態， 較常見于 單選按鈕和復選按鈕，
下面表示男被默認選中
性 別: <input type="radio" name="sex" value="https://www.cnblogs.com/Hac-Zhang/archive/2020/09/30/男" checked="checked" />男 <input type="radio" name="sex" value="https://www.cnblogs.com/Hac-Zhang/archive/2020/09/30/女" />女
-
-
-
label標簽
label標簽主要目的是為了提高用戶體驗， 用于系結一個表單元素, 當點擊label標簽的時候, 被系結的表單元素就會獲得輸入焦點，
- 第一種用法就是用label直接包括input表單，
<label> 用戶名： <input type="radio" name="usename" value="https://www.cnblogs.com/Hac-Zhang/archive/2020/09/30/請輸入用戶名"> </label>適合單個表單選擇
- 第二種用法 for 屬性規定 label 與哪個表單元素系結，
<label for="sex">男</label> <input type="radio" name="sex" id="sex"> -
textarea空間(文本域)
-
通過textarea控制元件可以輕松地創建多行文本輸入框.
cols="每行中的字符數" rows="顯示的行數"
<textarea > 文本內容 </textarea> -
文本框和文本域區別
表單 名稱 區別 默認值顯示 用于場景 input type="text" 文本框 只能顯示一行文本 單標簽，通過value顯示默認值 用戶名、昵稱、密碼等 textarea 文本域 可以顯示多行文本 雙標簽，默認值寫到標簽中間 留言板
-
-
select 下拉串列
有多個選項讓用戶選擇, 為了節約空間,我們可以使用select空間定義下拉串列
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select><select>中至少包含一對 option- 在option 中定義selected =" selected "時，當前項即為默認選中項，
-
form表單域
在HTML中，form標簽被用于定義表單域，以實作用戶資訊的收集和傳遞，form中的所有內容都會被提交給服務器，
<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控制元件 </form>常用屬性：
屬性 屬性值 作用 action url地址 用于指定接收并處理表單資料的服務器程式的url地址， method get/post 用于設定表單資料的提交方式，其取值為get或post， name 名稱 用于指定表單的名稱，以區分同一個頁面中的多個表單，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143272.html
標籤：其他
上一篇：Vue3.x 從零開始（二）—— 重新認識 Vue 組件
下一篇：用原生JS寫冒泡排序及影片演示