HTML是什麼？怎麼學習HTML？
學習計算機語言很久了，最近看到自己曾經做的筆記，感慨良多，期間記錄了我的點滴學習。希望對大家有點幫助。
這個是HTML的筆記。
1.1、HTML的用途：HTML是用來製作網站的
HTML是Internet上用於設計網頁的主要語言,網頁可以由文字,圖片,動畫等內容組成,基礎架構都是HTML. 從事網頁製作或者相關工作,就要學習HTML 。
HTML是“HyperText Mark-up Language（超文字標記語言）”的縮寫。
1.2、開發HTML
需要使用HTML編輯工具開發HTML頁面：
一:基本文字編輯軟體： 如記事本、Editplus等。
二:所見即所得軟體：如dreamweaver 等。
2.1、標記（標籤）
HTML用於描述功能的符號稱為“標記”。如“HTML”、“BODY”、“TABLE”等。
標記是由W3C組織定義好的並具有特定的含義的符號.
格式：
標記在使用時必須用尖括號“<>”括起來，而且是成對出現，無斜槓的標記表示該標記的作用開始，有斜槓的標記表示該標記的作用結束。
所以應當遵循：<開始標籤> 標籤體 </結束標籤>
特點
標籤的特點：不區分大小寫，標籤名是固定的。
例如<TABLE>表示一個表格的開始，</TABLE>表標一個表格的結束。如<TABLE>和<table>都是表示一個表格的開始。不區分大小寫。
2.2、標籤屬性
寫在開始標籤上的，格式是： 名=“值”對代表該標籤的屬性 <font color=“yellow”></font>。
一個標籤可以有多個屬性，多個屬性之間使用空格隔開。（長寬高之類的）
注意：屬性值最好使用單引號或者雙引號引起來。
<font color="red">你好</font>
注意事項：
1:所有標記都要用<> 尖括號括起來；
2:成對出現的標記；
3:HTML中不區分大小寫；
4: 標記中不要有空格；
2.3、HTML的正文和註釋
<html> 與 </html> 之間的文字描述網頁
<head> 與 </head> 之間的用於定義文件的頭部
<title> 與 </title> 定義文件的標題
<body> 與 </body> 之間的文字是可見的頁面內容（body裡邊的background屬性可以有：背景色，背景圖之類的）
<p> 與 </p> 之間的文字被顯示為段落
<!-- 註釋 -->
2.4、標題、段落、上下標、換行，原樣輸出、線條、文字列表、轉義字元（teshuzifu）
<h1> - <h6> 標籤可定義標題<h1> 定義最大的標題。<h6> 定義最小的標題。
<p> 標籤定義段落。p 元素會自動在其前後建立一些空白。
使用 blockquote 元素的話，瀏覽器會插入換行(兩個br)和外邊距( )，而 q 元素不會有任何特殊的呈現。
Superscript 上標 2<sup>3</sup>=8——>表示的是2的三次方等於八。
Subscript 下標 x<sub>1</sub>=1——>表示x等於1。
<br> 回車換行<br> 可插入一個簡單的換行符。br標記沒有任何內容,作用就是換行,所以是空的.由於沒有內容所以只寫一個<br>即可。
pre 元素可定義預格式化的文字，原樣輸出
水平分隔線（horizontal rule）可以在視覺上將文件分隔成各個部分，可以通過屬性設定線條的顏色,粗細,寬度,對齊方式.color="#FF0000" size="5" width="400" align="left"
列表標籤：<dl>
<dt>：上層專案
<dd>：下層專案
列表中專案符號對應的標籤
<ul>：符號標籤（○●■）
<ol>：數字標籤（a A 1 i I）
<li>：具體專案內容標籤。此標籤只在<ol> <ul>中有效。
<ul> 預設的是●
通過type屬性更改專案符號可以更改專案符號，分別顯示○●■
2.5、表格
<table>標記表示表格,以<table>開始以</table>結束
<caption>標題標籤,給表格提供標題。
<th> 表頭標籤 一般對錶格的第一行或者第一列進行格式化，就是粗體顯示。
<tr> 行標籤
<td> 單元格標籤, 載入行標籤的裡面。可以簡單理解為，先有行，在行中在加入單元格。
常用的屬性
border 表格的邊框
width 寬度
height 高度
align 對齊方式 left左對齊 right右對
齊 center 居中
th 用作表頭標籤
rowspan 合併行，上邊合併下邊
colspan 合併列，一般是右邊合併
2.6、表單
作用：用於採集使用者輸入的資料，提交給後臺程式處理。
<form> 表示一個表單。
常用的屬性：
Action：表單提交到的地址
method：提交方式
get:提交的資料會放到地址啦上
get提交的資料不能超過1kb（只適合於一些簡單的資料）
post：提交的資料不會放到位址列上
post提交的資料沒有限制（檔案上傳用post比較好）
<input type="text"> 單行輸入域
<textaera><textaera/>
value屬性 該輸入域的預設值，一般是4-10位的字元
name 這個是必須填，該name的屬性值是用於給後臺程式獲取該標籤的內容
<input type="password"> 密碼輸入域，使用一個非明文的效果獲取使用者輸入的資料
value 同上
name 同上
<input type="radio"> 單選按鈕
注意：如果是同一組的按鈕的單選選項，就是用相同的name屬性值
<input type="checkbox"/> 多選按鈕
<input type="hidden"/> 隱藏域 特點：不會顯示到HTML頁面上
屬性：name屬性就是後臺程式獲取的標記
這個value值就是傳送給後臺程式的內容。
<select name="籍貫"/> 下拉選項
name屬性就是後臺程式獲取的標記
下拉選項的option標籤中的value屬性值一定要填，這個value值就是傳送給後臺程式的內容。
<option value="廣東">廣東<option/>
<input type="file"/> 檔案選擇器
<input type="submit"/> 提交按鈕
屬性：name
提交按鈕，點選這個按鈕，form中的全部資料就會發送到後臺。
value：表示按鈕的顯示文字。
<input type="button"/> 普通按鈕
<input type="reset"/> 重置按鈕
點選這個按鈕，form中的資料返回到初始狀態。
2.7、超連結
格式：超連結格式： <a href="e:/itcast/a.html"></a>
連結到其他文件：href 屬性的值是連線目的頁面的地址.<a href="http://www.baidu.com">百度一下</a>
<a>標籤的屬性title
title 屬性的值能夠描述連線的目的頁面.<a href="http://www.baidu.com" title="使用百度搜索引擎">百度一下</a>
該屬性指定連線指定的頁面應當以和彙總方式在哪一個視窗中開啟,如果想要再新視窗中開啟,需要經target屬性的值設定為_blank。target="_self"預設。在相同的框架中開啟被連結文件。
錨鏈接：<a name=“標記名”></a> 和 <a href="#標記名"></a>
普通的連線,連線會從一個頁面到達另外一個頁面.如果頁面很長,希望連線頁面的特定部分.就可以使用錨鏈接。
2.8、影象標籤
使用<img> 標籤將影象新增到網頁中,該標籤要使用src屬性指定圖片的來源,並且需要附帶alt屬性. alt屬性是用於,當用戶載入圖片失敗時顯示的文字資訊.
影象標籤格式： <img src="" alt="“ title=“” width=“”/>
1.src屬性
a)src=”url”;
可以是相對路徑也可以是絕對路徑.
2.alt屬性
圖片說明,由於瀏覽器無法下載圖片,找不到圖片,就會顯示該資訊.
3.align屬性
影象的對其方式,
left right top 等
4.border屬性
指定影象的邊框的寬度,以畫素為單位
例如 border=”2”;
5.height和width屬性
指定影象的高度和寬度,以畫素為單位
height=”100”
width=”50”;
1. 影象地圖：<map>
應用：當要在影象中選取某一部分作為連結的時候。如：中國地圖每個省所對應的區域。
map標籤要和img標籤聯合使用。Href是超連線
<img src="Sunset.jpg" alt="圖片說明文字" usemap="#Map" />
<map name=”Map”>
<area shape="rect" coords="50,59,116,104" href="1.html" />
<area shape="circle" coords="118,203,40" href="2.html" />
</map>
2.9、框架
屬性：cols：按照列的方向劃分
rows:按照行的方頁面例和長度
*表示其他框架分配完剩下的比例
表示的是一個框架，框架中包含一個html
有2個或2個以上的frame頁面，框架的位置放在body外面（注意：否則無法顯示）
超連結target屬性還可以指定一個frame的名稱，如果指定的是一個frame的name，那麼在指定的這個frame就會顯示。（target是一個開啟方式）
src表示的是框架內包含的頁面
1）一個頁面包含在一個frame標籤中
2）有兩個或者兩個以上的frame就需要放在frameset中
方向一般是兩個；從上往下，從左往右
例如：
<frameset>
<frame src="頭部頁面.html"/>
<frameset>
<frame src="左邊頁面.html"/>
<frame src="中間頁面.html"/>
<frameset/>
<frame src="底部頁面.html"/>
<frameset/>
畫中畫標籤：<iframe>
<iframe src=”1.html” >
很遺憾，畫中畫你沒有看到，因為你的瀏覽器不支援iframe標籤。
</iframe>
屬性: src="../success.html" frameborder="1" height="300" width="400" scrolling="no"
框架標籤現在不是很常用，佈局都用div+css+table。框架很少使用了。
HTML 和XHTML的區別和聯絡
HTML語法要求比較鬆散，這樣對網頁編寫者來說，比較方便，但對於機器來說，語言的語法越鬆散，處理起來就越困難，對於傳統的計算機來說，還有能力相容鬆散語法，但對於許多其他裝置，比如手機，難度就比較大。因此產生語法要求更加嚴格的XHTML。
XHTML擴充套件超文字標籤語言（The Extensible HyperText Markup Language ）XHTML 的目標是取代 HTML。但是Internet上用HTML寫的網頁太多，無法替代。XHTML 與 HTML 4.01 幾乎是相同的。XHTML 是更嚴格更純淨的 HTML 版本。同時XHTML 是一個 W3C 標準。
XHTML和HMTL最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。
XHTML 元素必須被巢狀於 <html> 根元素中
---------------------
作者：datangjinglei
來源：CSDN
原文：https://blog.csdn.net/datangjinglei/article/details/79254329
版權宣告：本文為博主原創文章，轉載請附上博文連結！