文章目錄
第1章 網頁的構造塊
1.3 標籤：元素、屬性、值及其他
- 標籤的組成
- 元素
- 屬性
- 值
1.元素
- 元素：描述網頁不同部分的小標籤一樣，如
<html></html>、<p></p>等等- 元素的組成：一般有開始標籤(如
<em>、內容(如這是文本)、結束標籤(如<\em>),另外是有一些元素是空元素，即不包含文本也不包含其他元素(如<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax" />)
- 元素的組成：一般有開始標籤(如
2.屬性和值
- 屬性：描述元素進一步的信息,如下列代碼中
label元素的for屬性
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
- 特殊的屬性——布爾屬性：表示其值爲真的可選屬性
<!-- 這裏的required就是一個布爾屬性，表示用戶必須填寫該輸入框
布爾屬性不需要值，如果非要的話，就是required="requird"
另外布爾屬性是預先定義好的，沒辦法自創
-->
<input type="email" name="emaladdr" required>
編程規範：
1.元素、屬性儘量用小寫字母
2.屬性值要加雙引號
3.父元素和子元素
- 父元素：包含另外一個元素的外層元素
- 子元素：被包含的元素
1.4 網頁的文本內容
- 瀏覽器呈現HTML時，會把文本中的多個空格和製表符壓縮成單個空格，把回車符和換行符轉換成單個空格，或者將它們一起忽略
1.6 文件名和文件夾名
- 正確命名網頁的文件名和文件夾名的好處：
- 訪問者容易找到網頁
- 符合SEO規則(Search Engine Optimization，搜索引擎優化)
- 命名規則：
- 文件名和文件夾名全部用小寫字母，混合大小寫對訪問者輸入難度和正確性不利
<!-- 文件名全部用小寫 -->
buckminster-fuller.html
<!-- 文件夾名全部用小寫 -->
http://www.yoursite.com/notable-architects/20th-century/buckminster-fuller.html
2.使用正確的擴展名：雖然可以用htm做擴展名，但用html會更好
3.短橫線分割單詞：短橫線更符合SEO規則
1.7 URL
URL的組成：模式+主機名+路徑
graph TB
A(http://www.site.com/tofu/index.html)--http-->B(模式)
A--www.site.com-->C(主機名)
A--tofu/index.html-->D(路徑)
D--tofu/-->E(目錄)
D--index.html-->F(文件名)
有時候
URL以一個目錄結尾，比如http://www.site.com/tofu/,這種情況下，URL指的是路徑中最後一個目錄中的默認文件（通常情況下，所有Web服務器的配置都會自動將index.html作爲默認文件名)
當然，也有其他模式，比如
ftp(File Transfer Protocol,文本傳輸協議),mailto(發電子郵件)
ftp:ftp.site.com/pub/proposal.pdf
mailto:[email protected]
1.絕對URL(absolute URL)
- 絕對
URL：包含指向目錄或文件的完整信息的URL
對於FTP站點以及幾乎所有不使用HTTP協議的URL都應該使用絕對
URL
2.相對URL
- 相對
URL：以包含URL本身的文件的位置爲參考的URL，可以表述爲“指向本頁面同一目錄下的xyz頁面”
<a href="index-brother.html">引用同一目錄下的文件</a><br>
<a href="second-layer-1/index-son.html">引用子目錄下的文件</a><br>
<a href="../index-father.html">引用上層目錄的文件</a><br>
<a href="../../test.html">引用上上層目錄的文件</a>
<!-- ../../會向上走兩級，../../../會向上走三級，不過這種方法比較笨拙 -->
- 根相對
URL：最開始使用一個斜槓，可以跳到根目錄
<!-- grandfather電腦路徑爲：E:/Codes/《HTML5與CSS基礎教程》/grandfather.html
<a href="/Codes/《HTML5與CSS基礎教程》/grandfather.html">從根相對URL開始引用</a>