HTML學習筆記——心動不如行動
HTML學習筆記
涉及到的知識點有：
一、html簡介 1、html是什麽? 2、html能做什麽(html的作用)? 3、html書寫規範 二、html基本標簽
1、標簽的語法
2、標簽的分類
3、常用標簽：
1、文本標簽：
文本修飾
段落
2、圖片標簽
3、鏈接標簽
4、列表標簽
5、表格標簽
三、html表單標簽（重點）
1、form標簽
2、input標簽
3、select標簽
4、文本域標簽
四、html框架標簽及其他
1、框架標簽
2、其他標簽
3、特殊字符
----------------------------------------------------------------------
一、html簡介
1、html是什麽?
html是用來描述網頁的一種語言。
(1) HTML 指的是超文本標記語言(Hyper Text Markup Language)。
(2) HTML 不是一種編程語言，而是一種標記語言(markup language)，標記語言是一套標記標簽(markup tag)(包括:HTML XML XHTML)。
(3) HTML 使用標記標簽來描述網頁。
超文本 標記 語言
超文本：
(1) 普通文本不能實現的，超文本可以實現，能實現普通文本不能實現的功能，表達能力優於普通文本如聲音、圖形等。
(2) 包括超鏈接的文本。
標記：
就是標簽，不同的標簽能實現不同的功能。
語言：
人與計算機交互的工具。
-------------------------------------------------------------------------------
2、html能做什麽(html的作用)?
html通過標簽的形式將信息展示給用戶。
HTML文檔的後綴名? 答：.html/.htm 以上兩種後綴名沒有區別。
--------------------------------------------------------------------------------
3、html書寫規範
(1) html基本結構
<html>
<head>
包括資訊信息：即整個頁面的屬性、指導瀏覽器解析的標簽、引入外部文件的標簽(CSS和js)。
</head>
<body>
我們需要展示的信息(正文)。
</body>
</html>
(2) html標簽是以尖括號包裹關鍵字成對出現的，有開始標簽和結束標簽(又叫圍堵標簽)，支持正確的嵌套。
(3) 大部分標簽有屬性 格式：屬性="屬性值"（多個屬性之間用空格隔開）
(4) 空標簽：功能比較單一 。例如：<br></br> = <br/>(又叫自閉合標簽)
(5) html不區分大小寫，建議使用小寫。
註意：所有標記語言，標簽中的英文單詞沒有以數字開頭的。比如<1234>。
註意：HTML中不支持：空格、回車、制表符，他們都會被解析成一個空白字符
註意：空的html標簽解釋
沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。
<br> 就是沒有關閉標簽的空元素（<br> 標簽定義換行）。
在開始標簽中添加斜杠，比如 <br/>，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。
-----------------------------------------------------------------------------
二、html基本標簽
1、標簽的語法
可以在開始標簽名後面添加屬性，以此來設置文本樣式，屬性的語法
<標簽名 屬性名=”屬性值” 屬性名=”屬性值” ……> 文本 </font>
2、標簽的分類
- 單標簽：只有一個標簽，一般把結尾的斜杠放到標簽內的最後面；
- 雙標簽：有開始，有結尾，屬性設置在開始標簽內；
3、常用標簽
1、文本標簽：
1、文本修飾：
font、b、s、i、sub、sup、strong、u、span
2、段落
h(1-6)：標題標簽；
p：段落；
hr：分割線，屬性：size（高度）、width（寬度）、color、align；
center：內容居中
div: 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分。
br:標簽插入一個簡單的換行符。
--------------------------------------------------------------------------------------------------------------------------
font:修飾文字內容,屬性：face、size、color。標簽規定文本的字體、字體尺寸、字體顏色。(H5不支持)；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p><font size="3" color="red">這是一些文本！</font></p> <p><font size="2" color="blue">這是一些文本！</font></p> <p><font face="verdana" color="green">這是一些文本！</font></p> </body> </html>
b:字體加粗；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>這是一個普通的文本- <b>這是一個加粗文本</b>。</p> </body> </html>
s:刪除線；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p><s>My car is blue.</s></p> <p>My new car is silver.</p> </body> </html>
i:斜體；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>He named his car <i>The lightning</i>, because it was very fast.</p> </body> </html>
sub:標簽定義下標文本
sup:標簽定義上標文本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>這個文本包含 <sub>下標</sub>文本。</p> <p>這個文本包含 <sup>上標</sup> 文本。</p> </body> </html>
strong：定義重要的文本。（強調）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <em>強調文本</em><br> <strong>加粗文本</strong><br> <dfn>定義項目</dfn><br> <code>一段電腦代碼</code><br> <samp>計算機樣本</samp><br> <kbd>鍵盤輸入</kbd><br> <var>變量</var> </body> </html>
u:標簽定義與常規文本風格不同的文本，像拼寫錯誤的單詞或者漢語中的專有名詞。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>This is a <u>parragraph</u>.</p> </body> </html>
span:用於對文檔中的行內元素進行組合。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>我的母親有 <span style="color:blue;font-weight:bold">藍色</span> 的眼睛，我的父親有 <span style="color:darkolivegreen;font-weight:bold">碧綠色</span> 的眼睛。</p> </body> </html>
---------------------------------------------------------------------------------------------------------------------------
h1-h6:<h1> - <h6> 標簽被用來定義 HTML 標題。
<h1> 定義重要等級最高的標題。<h6> 定義重要等級最低的標題。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <h1>這是標題 1</h1> <h2>這是標題 2</h2> <h3>這是標題 3</h3> <h4>這是標題 4</h4> <h5>這是標題 5</h5> <h6>這是標題 6</h6> </body> </html>
p:標簽定義段落。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>這是一個段落。</p> <p>這是一個段落。</p> <p>這是一個段落。</p> </body> </html>
hr:
<hr> 標簽定義 HTML 頁面中的主題變化（比如話題的轉移），並顯示為一條水平線。
<hr> 元素被用來分隔 HTML 頁面中的內容（或者定義一個變化）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <h1>HTML</h1> <p>HTML 是用於描述 web 頁面的一種語言。</p> <hr> <h1>CSS</h1> <p>CSS 定義如何顯示 HTML 元素。</p> </body> </html>
center:內容居中
div:
<div> 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分。
<div>標簽常用於組合塊級元素，以便通過 CSS 來對這些元素進行格式化。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>這是一些文本。</p> <div style="color:#0000FF"> <h3>這是一個在 div 元素中的標題。</h3> <p>這是一個在 div 元素中的文本。</p> </div> <p>這是一些文本。</p> </body> </html>
br:
<br> 標簽插入一個簡單的換行符。
<br> 標簽是一個空標簽，意味著它沒有結束標簽。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p> 使用 br 元素<br>在文本中<br>換行。 </p> </body> </html>
-----------------------------------------------------------------------------------------------------------------------------
2、圖片標簽
img：圖片，屬性：
src(路徑)、width、height、border(邊框)、title(鼠標懸停提示)、alt(圖片描述)；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <img src="smiley-2.gif" alt="Smiley face" width="42" height="42"> </body> </html>
------------------------------------------------------------------------------------------------------------------------------------ 3、鏈接標簽
a：超鏈接標簽
屬性：href(網址)、target(打開方式)、title(鼠標懸停提示)、name(定位錨點)，功能：鏈接網絡資源、本地定位；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <a href="//www.runoob.com">訪問菜鳥教程!</a> </body> </html>
--------------------------------------------------------------------------------------------------------------------------------------
4、列表標簽
ul-li：無序列表，屬性：type（符號的樣式）；
ol-li：有序列表，屬性：type、start、value；
dl-dt-dd：自定義列表；
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
5、表格標簽
table：表格根標簽，屬性：border(邊框)、width、height、align；
tr：一行；
td：一列，屬性：rowspan(合並行)、colspan(合並列)；
th：標題；
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
三、html表單標簽（重點）
1、form標簽
form標簽
<form></form>
屬性：
name 表單名稱
action 提交的路徑地址
method 常用提交方式（get和post），默認是get提交
get和post的區別（重點）：
(1) get提交：將數據加在地址欄的後面，格式：
file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表單標簽/form.html
?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
即：?name=value&name=value...#
post提交：將數據封裝在請求體中(http中會學)，格式：
file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表單標簽/form.html#
即：#
(2) get提交相對不安全，post提交相對安全。
(3) get提交有大小限制，根據瀏覽器不同而不同，post提交不限制大小。
示例：
<form>
<table>
<!--form裏面嵌套table-->
</table>
</form>
-------------------------------------------------------------------------------------------------------------------------------------
2、input標簽
<input type=" "/>
type 根據type的值不同實現各種不同功能的表單項
text 普通的文本輸入框
name="username"
value="張三" <!--張三是文本輸入框的默認值-->
password 密碼輸入框；特點是顯示的是掩碼
name="password"
value="123456" <!--123456是密碼輸入框的默認值-->
radio 單選按鈕
name 如果想讓一組單選按鈕互斥，就用指定相同的name屬性值，再加value屬性值（提交的時候用）
checked 默認被選中
checkbox 復選框（多選）
name 組的概念，就用指定相同的name屬性值，再加value屬性值（提交的時候用）
checked 默認被選中
file 上傳文件的控件
button 普通按鈕，沒有任何內置的功能
value="註冊" <!--註冊是普通按鈕上的默認值(名字)-->
submit 內置功能，點擊會按照action地址提交
reset 重置，點擊會清空之前填寫的內容，恢復默認值
image 圖片按鈕，功能類似與submit
src 加載圖片
alt 圖片的提示文字
hidden 隱藏表單和內容，作用是在提交數據的時候，服務器需要這個數據，但是用戶看不到（開發中常用）
<input type="hidden" name="hide" value="xxxx"/>
<p hidden="hidden">這是一段隱藏的段落。</p> <!--這句話用戶看不到-->
<p>這是一段可見的段落。</p>
註意：開發中name屬性必須要寫。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 用戶名: <input type="text" name="usrname"><br> <input type="submit" value="提交"> </form> </body> </html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3、select標簽
<select></select> 用於下拉菜單
屬性：
name 表單項的名稱（提交的時候用）
<option></option> 可選項（下拉菜單之間的級聯）
屬性：
value 表單項的值
selected 默認被選中
示例：
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
<option value="gz">廣州</option>
<option value="sz">深圳</option>
</select>
<select>
<option>海澱</option>
<option>朝陽</option>
<option>昌平</option>
</select>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
4、文本域標簽
<textarea></textarea>
屬性：
rows 行數
cols 列數
註意：
默認的文本值在標簽體當中。
示例：
<textarea name="textarea" rows="20" cols="50">這是文本區域</textarea>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <textarea rows="10" cols="30"> 我是一個文本框。 </textarea> </body> </html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
四、html框架標簽及其他
1、框架標簽
<frameset></frameset>
屬性：
rows 按行劃分
cols 按列劃分
劃分格式： rows="120,*"
<frame/>
屬性：
name 名稱，方便target根據name值進行定位
src 加載的頁面地址
iframe：內聯框架
|
<iframe src=" " width="100%" height="50px" frameborder="0"> </iframe> |
frameset-frame：使用該框架結構時，要刪除body標簽；
|
<frameset rows="100,*"> <frame name="top" src="index.html" /> <frameset cols="50,*"> <frame name="left" src="lianjie.html" /> <frame name="right" src="gsjj.html" /> </frameset> </frameset> |
註意：
<frameset></frameset>與<body></body>會打架，二者不能共存。
-------------------------------------------------------------------------------------------------------------------------------------
2、其他標簽
<meta/>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="this is my page"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link/>
<link rel="stylesheet" type="text/css" href="./styles.css"/>
href 引入css文件的地址
<script></script>
<script type="text/javascript" src=""></script>
src 引入js的文件地址
pre：原文輸出；
code：在頁面中添加代碼；
video：添加視頻；
embed：添加音頻；
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3、特殊字符
一個英文空格
> 大於號
< 小於號
© 版權符號（圈C）
® 註冊符號（圈R）
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
本人原創，轉載請說明出處https://www.cnblogs.com/zyx110/
如若對你有用，記得推薦，如若有誤，歡迎改正!
HTML學習筆記——心動不如行動