對於新手來說，這篇算是比較詳細的內容了，就算沒有基礎，應該也能從頭看懂 ...
作為一個新手，要從頭學習Html編程語言，需要從最基礎的開始。我所使用的編程軟體是Hbuilder。
1.Html文檔結構
包括head和body兩部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
註意開頭必須有文檔類型強調！
2.Html標簽 標簽是Html最基本的單位和最重要的組成。 使用<>括起來。 所有的Html標簽必須是閉合標簽。可以是成對的，比如<title> </title>；也可以是自閉合標簽，比如：<img />; 也就是說/表示這一個或者一對標簽的閉合。標簽必須正確嵌套，不能交叉。 3.Html標簽屬性 是標簽的一部分，用於包含額外的信息 可以有多個屬性。 以下為head中常用的標簽及作用。<!-- -->中內容為註釋。
<!DOCTYPE html> <!-- 文檔聲明：必須有，而且必須在文檔頁面的第一行。 Html5已經簡化為以上樣式 --> <html> <head> <!--Head標簽內的信息用於描述網頁的基本信息，即元數據--> <title>我的世界</title> <!--網頁的標題，即網頁選項卡上的文字--> <link rel="icon"href="img/111.png" /> <!--使用link標簽連接網頁圖標 rel:聲明連接文件的類型 type屬性可省略 href屬性：表示圖片的路徑地址 --> <meta charset="UTF-8"> <meta name="keywords"content="你好,H5,高大上" /> <!--網頁關鍵字，用半形逗號隔開--> <meta name="description"content="--helloword哈哈哈哈" /> <!--meta標簽常用屬性 1.charset 設置文檔字元集編碼格式》》》常見字元集編碼格式：utf-8萬國碼Unicode，GB-2312國標碼,gbk擴展的國標碼 2.http-equiv將我們的信息寫給瀏覽器看,可選屬性值Content-Type refresh set-cokie，配合content屬性.(http-equiv屬性只是表明需要設置那一部分，具體內容放到content屬性中) 3.name屬性：使用方法與http-equiv相同，常用屬性值keywords author description 將信息寫給搜索引擎看 --> </head> <body> </body> </html>
4.標簽分類 塊級標簽：顯示為塊狀，前後隔一行（自動換行） 行級標簽：按行從左往右逐一顯示。 5.常見的塊級標簽 <h1>標題標簽</h1> <h2></h2> ....<h6></h6> h1最大，h6最小，自動加粗 <p></p>段落標簽 <hr />水平線標簽 <br/>換行標簽 <blockquote cite="http://www.cnblogs.com">橫眉冷對千夫指</blockquote>引用標簽 cite屬性表明引用來源，一般表明引用網址。瀏覽器顯示預設首行縮進。 <pre></pre>預格式標簽，瀏覽器顯示樣式 1.為等寬字體 2.代碼中的換行，空格等元素在瀏覽器直接顯示 6.基於佈局的塊級標簽 有序列表（order list）：<ol> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> 無序列表（unorder list）： <ul> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> 定義描述列表： <dl> <dt>定義列表標題</dt>........標題頂格顯示 <dd>描述項第一項</dd>......描述項相對標題進行縮進顯示 <dd>描述項第二項</dd> </dl> 組合標簽：用於顯示圖片及圖片標題 有兩個子標簽：<img/>圖片 <figcaption></figcaption>圖片的標題 <figure> <img src="img/000.jpg" /> <figcaption>圖片標題</figcaption> </figure> 分區標簽： <div></div> 7.常見的行級標簽 span（文本） <span></span> 無實際意義，用於包裹某部分文字，修改特定樣式 em（強調） <em></em> 表示強調，強調的樣式為傾斜 strong（強調) <strong></strong>強調樣式加粗，強調程度比em高（Html5要求標簽儘可能實現語義化） q（短引用） <q></q> 顯示內容加引號 i（傾斜） <i></i> b（加粗） <b></b>i標簽表示傾斜，沒有強調效果 small（縮小字體)<small></small> 使顯示的字體小一號，可多重嵌套直到字型大小達到下限 big(放大字體) <big></big> 與small相反 img（圖片） <img /> 1.src:表示引用圖片的地址 （路徑地址寫法：1.相對路徑：以當前文件為準去尋找圖片地址 a.與文件同一層直接寫圖片名 b.圖片在文件下一層：文件夾名/圖片名 c.圖片在文件上一層：../圖片名 2.絕對路徑：file:///E:/00.jpg 禁止使用 3.網路地址：網路上的圖片鏈接 一般不用 ） 2.圖片的寬度高度。可用CSS代替 3.title：圖片標題，當滑鼠指上去顯示的文字。 alt:圖片無法顯示時候顯示的文字 a（超鏈接） <a href="" target=""></a> 1，target=“_blank”超鏈接在新頁面打開 _self在自身頁面打開 2.rel:指定當前文檔與與被鏈接文檔的關係.(rel="prev"被鏈接文檔前一篇文檔，rel="next"後一篇文檔 rel="prefetch"預載入，當前文檔載入完成後利用空餘時間預載入即將連接的文檔 rel="icon"被鏈接圖片是當前文檔的圖標。rel="stylesheet"被鏈接文檔是當前文檔的樣式表 3.錨鏈接： 本頁面錨鏈接 ①設置錨點<a name="top"></a> ②在連接上使用#name跳到對應錨點，<a href"=#top" target="_self">超鏈接</a> 頁面間錨鏈接 ①在即將跳轉頁面的指定位置設定錨點 ②在超鏈接的href屬性中使用"頁面地址.html#name" 功能性連接 ①mailto:// 用於給指定郵箱發送郵件 <a href="mailto:[email protected]"target="_self">郵件</a> ②"tencent://message/?uin= 給指定QQ發送郵件 <a href="tencent://message/?uin=805216490"target="_self">扣扣</a> <s>表示有誤文本刪除線</s> <cite>cite表示引用，瀏覽器表示為傾斜</cite> <code>僅僅表示為代碼，瀏覽器等寬顯示,但是不會保留代碼格式，須配合pre標簽使用</code> sup上標文本 sub下標文本X<sup>2</sup> 版權符號© ©..........這些不常用 示例見下方程式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a name="top"></a> <h1>這是標題標簽h1</h1> <h2>比h1小點</h2> <h6>標題標簽有6種h1最大，h6最小</h6> <hr /> <!--hr 水平線--> <p>這是P標簽 →空格）©→版權 代表一個段落，<br/>兩個P標簽，中間隔一行。br（自閉和標簽）換行標簽</p><br /> <p>這個也是一 個段落，用P標簽包裹的</p> <blockquote cite="http://www.jredu100.com"> 這是引用標簽 </blockquote> <pre>這是pre標簽。預格式 我被換行了。標簽內內容格式原封不動</pre> helloworld <!--body 網頁主題內容 註釋快捷鍵 ctrl+/--> <!--有序列表OL--> <ol> <li>有序列表第一項</li> <li>有序列表第二項</li> <li>有序列表第三項</li> </ol> <!--無序列表UL --> <ul> <li style="list-style: none;">無序列表第一項</li> <li>無序列表第二項</li> <li>無序列表第三項</li> </ul> <!--定義描述列表--> <dl> <dt>這是DL的標題DT，一個DL一般只有一個</dt> <dd>這是DL的描述項dd</dd> <dd>這是DL的描述項dd2</dd> </dl> <a name="t"></a> <!--<img src="img/tour.png" alt--> *********分割線**************<br /> <span style="color: red;font: '微軟雅黑';font-size: 24px;font-weight: bold;">我真帥</span> <em>em表示強調，強調的樣式為傾斜</em> <strong>強調樣式加粗</strong> <i>i標簽表示傾斜，沒有強調效果</i> <b>b標簽表示加粗，沒強調效果</b> <q>表示短引用，自帶雙引號</q> <s>表示有誤文本刪除線</s> <cite>cite表示引用，瀏覽器表示為傾斜</cite> <code>僅僅表示為代碼，瀏覽器等寬顯示</code> <small>small比正常的標簽字體小一號，可以多層嵌套，一直小到最小字體</small> <big>big標簽大一號</big> <img src="img/111.png"title="和尚"alt="這是一張圖"/> <!--img表示圖片 src 圖片的地址，可以是網路圖片，相對路徑 title 圖片標題 alt 圖片不顯示時顯示的文字 align 設置圖片文字對齊方式 --> <a href="liebiao.html"target="_blank"> <!-- 【a標簽】 href表示跳轉的地址。1 跳轉的地址可以是網路連接 2 可以通過相對路徑站內其它HTML文件， 相對路徑的確定 a,如果在同意文件夾，直接寫文件名 b 如果目標文件在當前文件夾下一層，直接寫“文件夾名/文件名” c 如果目標文件在當前文件上一層“../文件名” target表示頁面打開的位置： 1 _self代表自身頁面打開 2 _blank新頁面打開 title 超鏈接標題，滑鼠指上去顯示的提示 --> </body> </html>
8.表格 table
表格的行：tr 每行中的列： td 表格的標題：th 預設加粗，單元格居中。 寫法： <table> <tr> <th></th> <th></th> </tr> <tr> <td></td> <td></td> </tr> </table> 這是個兩行兩列的表格 常用屬性： 1.boder：給表格添加邊框，當boder屬性增大時，只有外圍框線增加，單元格邊框始終為1px 2.cellspacing：單元格與單元格之間的距離。當cellspacing=0時，只會使單元格間距為0，不會合併邊框線 （表格樣式合併，樣式：boder-collapse:collapse；） 3.cellpadding：表示單元格裡邊內容與邊框線的距離 4.width、height 表格的寬高 5.Align：表格在屏幕的左中右顯示》》給表格加上align相當於給表格加上浮動 6.bgcolor:背景色 等同於style=”background-color：“ 7.background:背景圖片 等同於style=”background-image“ 8.bodercolor:邊框顏色。
