HTML筆記（基礎知識學習）
- web標準
主要包括結構( Structure )、表現 ( Presentation )和行為( Behavior )三個方面，
結構：用于對網頁元素進行整理和分類，現階段主要學的是HTML，
表現：用于設定網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS
行為：是指網頁模型的定義及互動的撰寫，現階段主要學的是Javascript - Web標準提出的最佳體驗方案:結構、樣式、行為相分離，
簡單理解︰結構寫到HTML檔案中，表現寫到CSS檔案中，行為寫到JavaScript檔案中， - 標簽關系
1.包含關系
2.并列關系
HTML頁面（檔案）的基本結構
<html> //根標簽，開始和結束的位置，
<head> //提供檔案的描述資訊
<title> Title here </title> //頁面的標題，顯示在瀏覽器標題欄中
</head>
<body>
Web page content here //檔案的主體，顯示的內容
</body>
</html>
- VScode生成骨架標簽
<！DOCTYPE>檔案型別宣告標簽，告訴瀏覽器使用哪種HTML版本來顯示標簽
lang 語言種類en定義語言為英語 zh-CN定于語言為中文
字符集通過標簽的charset屬性來規定HTML應該使用哪種字符來編碼，charset字符集常用的值有：GB 2312,BLG 5,GBK和UTF-8，其中UTF-8也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符， - 標題標簽《h1》~《h6》
標簽語意：作為標題使用，并且根據重要性遞減，
特點：
1.增加了標題陳述句的文字會變的加粗，字號也會依次變大，
2.一個標題獨占一行，
在HTML標簽中，<p>標簽用于定義段落，它可以將整個網頁分為若干個段落，
<p>我是一個段落標簽</p>
單詞 paragraph [paerograef]的縮寫，意為段落，
<br /> break 打斷，換行 //單標簽
文本格式化標簽
<strong>或者<b>加粗
<em>或者<i> 傾斜
<del>或者<s> 洗掉
<ins>或者<u> 下劃線
容器標簽<div>塊級元素 <span>行內元素
- 《img》影像標記標簽
| 屬性 | 屬性值 | 說明 |
|---|---|---|
| src | 圖片路徑 | 必須屬性 |
| alt | 文本 | 替換文本，影像不能顯示的文字 |
| title | 文本 | 圖示放到圖片上顯示的文字 |
| width | 像素 | 顯示圖片的寬度 |
| height | 像素 | 顯示圖片的高度 |
| border | 像素 | 顯示圖片的邊框粗細 |
屬性采用鍵值對的方式 key=“value”，屬性=“屬性值”，
目錄檔案夾∶就是普通檔案夾，里面只不過存放了我們做頁面所需要的相關素材，比如html檔案、圖片等，
根目錄:打開目錄檔案夾的第一層就是根目錄
相對路徑：圖片相對于HTML的位置，
同一級路徑： <img src= “圖片名稱” />·
下一級路徑：/ <img src =”檔案名+圖片名稱” / >
上一級路徑：../ <img src =”../圖片名稱” />
絕對路徑∶是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑.，
例如“D:\web\img\logo.gif”或完整的網路地址“http://www.itcast.cn/images/logo.gif”
鏈接的語法格式
1. 外部鏈接:例如< a href="http:// www.baidu.com ">百度</a>.
<a href="跳轉目標" target="目標視窗的彈出方式">文本或影像</a>
Href
用于指定鏈接目標的url地址，(必須屬性)當為標簽應用href屬性時，它就具有了超鏈接的功能
target
用于指定鏈接頁面的打開方式，其中_self為默認值，_blank為在新視窗中打開方式，
2．內部鏈接:網站內部頁面之間的相互鏈接.直接鏈接內部頁面名稱即可，例如
<a href="index.html">首頁</a>，
3. 空連接 #
4.下載鏈接:如果href里面地址是一個檔案或者壓縮包,會下載這個檔案，
5.網頁元素鏈接:在網頁中的各種網頁元素,如文本、影像、表格、音頻、視頻等都可以添加超鏈接.
6.錨點鏈接:點我們點擊鏈接,可以快速定位到頁面中的某個位置.
●在鏈接文本的href屬性中.設定屬性值為#銘字的形式
.如<a href= "#two">第2集</a>
●找到目標位置標簽,里面添加一-個id屬性=剛才的名字
. 如: <h3 id="two" >第2集介紹</h3>
注釋
如果需要在HTML檔案中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字,就需要使用注釋標簽，
HTML中的注釋以"<1--" 開頭,以"-->”結束. <!--注釋陳述句--> 快捷鍵: ctrl + /
5.2特殊字符
在HTML頁面中,一些特殊的符號很難或者不方便直接使用 ,此時我們就可以使用下面的字符來替代，
| 特殊字符 | 描述 | 字符的代碼 |
|---|---|---|
| 空格符 |   | |
| < | 小于號 | &It |
| > | 大于號 | > |
- 表格標簽
表格的主要作用：表格主要用于顯示、展示資料,因為它可以人讓資料顯示的非常的規整,可讀性非常好，特別是后臺展示資料的時候,能夠熟練運用表格就顯得很重要，一個清爽簡約的表格能夠把繁雜的資料表現得很有條理，
總結：表格不是用來布局界面的，是用來展示資料的，
<table> //定義表格的標簽
<tr> //定義表格中的行，必須再<table>中使用
<td>單元格內的文字</td> //定義表中的單元格，必須在<table>中使用
</tr>
</table>
- 表格結構標簽
使用場景:因為表格可能很長為了更好的表示表格的語意，可以將表格分割成表格頭部和表格主體兩大部分，
在表格標簽中,分別用:《thead》標簽表格的頭部區域《tbody》標簽表格的主體區域這樣可以更好的分清表格結構，
合并單元格方式:
●跨行合并: rowspan= "合并單元格的個數”
●跨列合并: colspan=“合并單元格的個數”
目標單元格: (寫合并代碼)
●跨行:最上側單元格為目標單元格,寫合并代碼
●跨列:最左側單元格為目標單元格,寫合并代碼
無序串列（重點)
<ul>標簽表示HTML頁面中專案的無序串列，一般會以專案符號呈現串列項，而串列項使用<li>標簽定義，
無序串列的基本語法格式如下:
<ul>
<li>串列項1</li>
<li>串列項2</li>
</ul>
<ul>中只能放<li>標簽， <li>相當于一個容器，可以隨便放，
有序串列（理解)
有序串列即為有排列順序的串列，其各個串列項會按照一定的順序排列定義，
在HTML標簽中，<ol>標簽用于定義有序串列，串列排序以數字來顯示，并且使用<li>標簽來定義串列項，
自定義串列（重點)
自定義串列的使用場景:
自定義串列常用于對術語或名詞進行解釋和描述，定義串列的串列項前沒有任何專案符號，
在HTML標簽中，<dl>標簽用于定義描述串列(或定義串列），該標簽會與<dt>(定義專案/名字)和<dd>(描述每一個專案/名字)一起使用，
- 表單的組成
在HTML中，一個完整的表單通常由表單域、表單控制元件（也稱為表單元素)和提示資訊3個部分構成，
表單域
表單域是一個包含表單元素的區域，
在HTML標簽中，<form>標簽用于定義表單域，以實作用戶資訊的收集和傳遞，
<form>會把它范圍內的表單元素資訊提交給服務器
<form action="ur1地址” method="提交方式” name="表單域名稱">各種表單元素控制元件
</form>
常用屬性:
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| Action | url地址 | 用于指定接收并處理表單資料的服務器程式的url地址， |
| Method | get/post | 用于設定表單資料的提交方式，其取值為get或post. |
| Name | 名稱 | 用于指定表單的名稱，以區分同一個頁面中的多個表單域， |
- 《input》表單元素
在英文單詞中，input是輸入的意思，而在表單元素中標簽用于收集用戶資訊，
在標簽中，包含一個type屬性，根據不同的type屬性值，輸入欄位擁有很多種形式(可以是文本欄位、復選框、掩碼后的文本控制元件、單選按鈕、按鈕等)，
<input type=”屬性值”/>
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| Name | 由用戶自定義 | 定義input元素的名稱， |
| Value | 由用戶自定義 | 規定input元素的值， |
| Checked | checked | 規定此input元素首次加載時應當被選中， |
| Maxlength | 正整數 | 規定輸入欄位中的字符的最大長度， |
name 和value是每個表單元素都有的屬性值主要給后臺人員使用
name 表單元素的名字要求單選按鈕和復選框要有相同的name值
type.屬性的屬性值及其描述如下:
| 屬性值 | 描述 |
|---|---|
| Button | 定義可點擊按鈕(多數情況下，用于通過JavaScript啟動腳本) . |
| Checkbox | 定義復選框， |
| File | 定義輸入欄位和“瀏覽"按鈕，供檔案.上傳， |
| Hidden | 定義隱藏的輸入欄位， |
| Image | 定義影像形式的提交按鈕， |
| Password | 定義密碼欄位，該欄位中的字符被掩碼， |
| Radio | 定義單選按鈕， |
| Reset | 定義重置按鈕，重置按鈕會清除表單中的所有資料， |
| Submit | 定義提交按鈕，提交按鈕會把表單資料發送到服務器， |
| Text | 定義單行的輸入欄位，用戶可在其中輸入文本，默認寬度為20個字符， |
<label>標簽為input元素定義標注(標簽).
<label>標簽用于系結一個表單元素 當點擊<label>標簽內的文本時,瀏覽器就會自動將焦點(游標轉到或者選摔對應的表單元素上用來增加用戶體驗.
<label for="sex">男</label>
<input type "radio" name a "sex" id-"sex" />
核心: <label>標簽的for屬性應當與相關元素的id屬性相同，
<select> 表單元素
在頁面中,如果有多個選項讓用戶選擇,并且想要節約頁面空間時,我們可以使用<select>標簽控制元件定義下拉串列.
1. <select>中至少包含- -對<option> .
2.在<option>中定義selected= " selected"時,當前項即為默認選中項，
<textarea>表單元素（文本域）
使用場景:當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用<textarea>標簽，在表單元素中，<textarea>標簽是用于定義多行文本輸入的控制元件，
使用多行文本輸入控制元件，可以輸入更多的文字，該控制元件常見于留言板，評論，
cols=“每行中的字符數”，rows=“顯示的行數”，我們在實際開發中不會使用，都是用CSS來改變大小
有三個名字非常相似的標簽
(1)表單域form使用場景: 提交區域內表單元素給后臺服務器
(2)檔案域file 是input type屬性值使用場景:上傳檔案
(3)文本域textarea 使用場景: 可以輸入多行文字，比如留言板網站介紹等…
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292191.html
標籤：其他
上一篇：idea中設定支持es6語法