HTML基础做出属于自己的完美网页
HTML
HTML解釋：
HTML是英文Hyper?Text Mark-up Language(超文本標記語言)的縮寫，他是一種制作萬維網頁面標準語言（標記）。相當于定義統一的規則（W3C），大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器負責將標簽翻譯成用戶“看得懂”的格式，呈現給用戶！
網頁的組成：
一個網頁一般由兩部分組成即：
- HTML（Hypertext Markup Language）
- 和CSS（Cascade Style Sheets）
HTML負責描述網頁的結構和內容（如標題，導航欄等）?CSS則負責網頁的表現（外觀）（如背景顏色，字體樣式等）。
<head>和</head>之間的內容，是元信息和網站的標題 元信息一般是不顯示出來的,但是記錄了你這個HTML文件的很多有用的信息
<body>和</body>之間的內容，是瀏覽器呈現出來的，用戶看到的頁面效果。也就是說這里是網頁的主體。也就是body的身體之意
<html></html>是說明這個是一個網頁。告訴瀏覽器這個網頁的開始和結束。他包含了之后的兩個元素。<head>和</head>|<body>和</body>
文檔結構如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body></body> </html>DOCTYPE部分
Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔
HTML語言需要一個標準，當我們在第一行指定了<!DOCTYPE html>的時候，當瀏覽器去訪問我們的代碼的時候就就按照HTML代碼里指定的標準去讀取和渲染給我們展現的頁面。
為什么要使用<!DOCTYPE html>這個去告訴瀏覽器呢？
DOCTYPE模式：
我們先了解一下DOCTYPE的模式
- BackCompat：標準兼容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式）
- CSS1Compat：標準兼容模式已開啟（或叫嚴格模式[Standards mode/Strict mode]）
問題產生：
當Netscape4（譯注：網景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現CSS機制時，并沒有遵循W3C提出的標準。Netscape4 提供了糟糕的支持，而IE4 雖然接近標準，但依舊未能完全正確的支持標準。盡管IE 5 修復了IE4 許多的問題（bugs），但是依然延續CSS實現中的其它故障（主要是盒模型（box model）問題）。
為了保證自己的網站在不同的瀏覽器中都能正確展現，網頁開發者不得不依據各個瀏覽器的自身的規范來使用CSS。因此大部分網站的CSS實現并未符合W3C的標準。
然而隨著標準一致性變得越來越重要，瀏覽器開發商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標準是前進的方向。但是改變現有CSS的實現，完整去遵循標準，會使許多網站或多或少受到破壞。如果瀏覽器突然以正確的方式解析現存的CSS，陳舊的網站顯示必然受到影響。
因此立即遵循標準會產生問題，然而忽略標準則又會維持瀏覽器大戰時（譯注：微軟和網景之間的一段競爭）所產生的混亂。
解決方案：
換句話說，所有的瀏覽器需要提供兩種模式：怪異模式（即兼容模式）服務于舊式規則，嚴格模式服務于標準規則。Mac平臺的IE瀏覽器最先實現這兩種模式，Mozilla， Safari、Opera和Windows平臺的IE6也相繼實現了這兩種模式。WIndows平臺的IE5和Netscape4則只提供了怪異模式。
選擇使用哪種模式需要一個觸發器，而 “DOCTYP切換” 則用于此目的。依照標準：任何一個(X)HTML文檔必須擁有一個DOCTYPE（譯注：DTD（文檔類型定義）是一組機器可讀的規則，它們指示 (X)HTML文檔中允許有什么，不允許有什么，DOCTYPE正是用來告訴瀏覽器使用哪種DTD,一般放在(X)HTML文檔開頭聲明）用以告訴其他人 這個文檔的類型風格
?
?
head部分
?
1、Meta(metadata information)
?提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <meta http-equiv="refresh" content="5"> <metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" /> <meta name="keywords" content="博客,張巖林,帥哥,"> <meta name="description" content="博客園是一個面向開發者的知識分享社區。自創建以來，博客園一直致力并專注于為開發者打造一個純凈的技術交流社區，推動并幫助開發者通過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。"><title>張巖林</title> <link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" type="image/x-icon"> </head> <body></body> </html>1>定義編碼格式
<meta charset="UTF-8"> #定義編碼為utf-82>刷新和跳轉頁面
<meta http-equiv="refresh" content="5"> # 5秒跳轉<metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" /> #跳轉至我的博客
3>關鍵字
關鍵字的作用：一般是讓爬蟲之類的收錄程序，當他們在爬你的網站的時候，如果你有關鍵字，那么他們會優先把關鍵字收錄到他們的記錄中，比如百度：如果他們收錄之后，他們搜索你的關鍵字的時候，就能找到咱們的網站。
<meta name="keywords" content="博客,張巖林,帥哥,">4>描述
例如博客園的描述如下：
<meta name="description" content="博客園是一個面向開發者的知識分享社區。自創建以來，博客園一直致力并專注于為開發者打造一個純凈的技術交流社區，推動并幫助開發者通過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。">5>title?
設置標簽為張巖林
<title>張巖林</title>6>標簽圖標Link
<link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" type="image/x-icon">7>導入CSS類似python中導入模塊類似
<link rel="stylesheet" href="css/css_model.css">8>、Style
1、在當前文件中寫Css樣式
2、在其他文件中寫Css樣式類似python的模塊導入的方式把Css樣式導入到當前文件中使用
9>、Script
1、在當前文件中寫JS
2、在其他文件中寫JS類似python的模塊導入的方式把JS導入到當前文件中使用
?
?
body部分
?
body里面分為兩類標簽：塊級標簽和內聯標簽。
1、塊級標簽：<p><h1><table><ol><ul><form><div>
2、內聯標簽：<a><input><img><sub><sup><textarea><span>
塊級標簽元素的特點
① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它可以容納內聯元素和其他塊元素
內聯標簽元素的特點
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其他內聯元素
對行內元素，需要注意如下?
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。
?1、基本標簽
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題.
<p>: 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白.
<b> <strong>: 加粗標簽.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
? <div><span>
?廢話不多說，直接擼碼分析
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>張巖林</title> </head> <body><br><hr><h1>張巖林</h1><h2>張巖林</h2><h3>張巖林</h3><h4>張巖林</h4><h5>張巖林</h5><h6>張巖林</h6><hr><p>段落標簽1</p><p>段落標簽2</p><hr><b>加粗文字方法一</b><br><strong>加粗文字方法二</strong><hr><p>原價：<strike>299 </strike> 現價：10 文字中間加橫線</p><p><em>斜體字</em></p><p> 2<sup>n</sup> 上角標</p><p>h<sub>2</sub>o 下角標</p><p>< 小于號</p><p>> 大于號</p><p>© </p><p>®</p></body> </html>效果如下：
2、圖形標簽<img>
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="111426147.jpg" alt="圖片加載失敗" title="美女">3、超鏈接標簽(錨標簽)<a>:
href:要連接的資源路徑 格式如下: href="http://www.baidu.com"?
target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內容.
name: 定義一個頁面的書簽.
用于跳轉 href : #書簽名稱.
<a href="http://www.cnblogs.com/aylin/p/5608175.html" target="_blank">猛戳這里</a>還有一種本頁標簽跳轉，通過定義ID來進行查找到內容
<a href="#a">李白</a> <div id="a" style="background-color: #197991">床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉。</div>4、列表標簽：
<ul>: 無序列表
<ol>:有序列表
? ? ? ? ?<li>:列表中的每一項.
<dl> 定義列表
? ? ? ? ?<dt> 列表標題
? ? ? ? ? <dd> 列表項
<body><ol><li>無序一</li><li>無序二</li><li>無序三</li><li>無序四</li></ol><ul><li>有序一</li><li>有序二</li><li>有序三</li><li>有序四</li></ol></ul><dl><dt>第一章</dt><dd>1.1</dd><dd>1.2</dd><dd>1.3</dd><dd>1.4</dd></dl>效果如下：
5、表格標簽: <table>:
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設置長寬）
<tr>: table row
? ? ? ? ?<th>: table head cell
? ? ? ? ? <td>: table data cell
rowspan: 單元格豎跨多少行
colspan: ?單元格橫跨多少列（即合并單元格）
<th>: table header <tbody>(不常用): 為表格進行分區.
<table border="" cellspacing="1" cellpadding="20" style="text-align: center;height: 100px"><tr><td>編號</td><td>姓名</td><td>班級</td><td>數學</td><td>語文</td><td>英文</td></tr><tr><td>001</td><td>張巖林</td><td>S1</td><td>120</td><td>109</td><td>120</td></tr><tr><td>001</td><td>張林</td><td>S1</td><td>100</td><td>19</td><td>100</td></tr><tr><td>001</td><td>小康</td><td>S1</td><td>89</td><td>100</td><td>10</td></tr><tr><td>001</td><td>小虎</td><td>S1</td><td>10</td><td>19</td><td>12</td></tr></table> code效果如下：
表格中還有合并單元格:
<table border="" cellspacing="1" cellpadding="1" style="width: 300px;height: 100px;color: #FC0D51;background-color: #9E9C9C;text-align: center"><tr><td>一</td><td>二</td><td>三</td></tr><tr><td colspan="3">1 2 3</td></tr><tr><td>4</td><td>5</td><td rowspan="2">6 9</td></tr><tr><td>7</td><td>8</td></tr></table>6、表單標簽（django）<form>:
? ? ? 表單用于向服務器傳輸數據。
? ? ? 表單能夠包含?input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
? ? ? 表單還可以包含textarea、select、fieldset和?label 元素。
?
1>.表單屬性
HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中.
action: 表單提交到哪. 一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get 默認取值 就是 get（信封）
get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
get/post是常見的兩種請求方式.
2>.表單元素
? ? ?<input> ? ? type: ? ? text 文本輸入框
? ? ?password 密碼輸入框
? ? ?radio 單選框
? ? ?checkbox 多選框 ?
? ? ?submit 提交按鈕 ? ? ? ? ? ?
? ? ?button 按鈕(需要配合js使用.) button和submit的區別？
? ? ?file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>知乎</title></head> <body><div style="background-color: aquamarine;height: 590px;width: 292px; margin: 0 auto;margin-top: 6%"><img src="QQ圖片20160624092733.png"><br><p style="text-align: center">與世界分享你的知識、經驗和見解</p><hr><form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data"><p> 用 戶 <input type="text" name="username"></p><p> 密 碼 <input type="password" name="passwd"></p><hr><p> 性 別 男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="woman"></p><hr><p> 愛 好籃球<input type="checkbox" name="lanqiu" value="籃球">足球<input type="checkbox" name="zuqiu" value="足球">排球<input type="checkbox" name="paiqiu" value="排球">臺球<input type="checkbox" name="taiqiu" value="臺球"></p><hr><br>城 市<select name="language" ><optgroup label="河北省"><option value="保定市">保定市</option><option value="邯鄲市">邯鄲市</option><option value="承德市">承德市</option></optgroup><optgroup label="河南省"><option value="洛陽市">洛陽市</option><option value="信陽市">信陽市</option><option value="鄭州市">鄭州市</option></optgroup><br></select><hr><p style="text-align: center">備 注<textarea name="qq" style="height: 60px;width: 220px"></textarea></p><p><input type="file" name="file_name" ></p><hr><p style="text-align: center"><input type="button" value="提交"> <input type="button" value="猛戳這里"></p></form></div> <table ><tr><td>1</td><td>2</td></tr><tr><td>1</td><td>2</td></tr> </table></body> </html> from表單效果有點low，講究看吧
?
?下面咱就來分析一下每個代碼的意義：
?
轉載于:https://www.cnblogs.com/aylin/p/5617438.html
總結
以上是生活随笔為你收集整理的HTML基础做出属于自己的完美网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阶段性思考
- 下一篇： 【HTML5】Server-Sent服务