在這里插入圖片描述

《BOWD：HAC》第2章筆記：HTML基礎

因為第1章是概述所以就不做筆記了，直接從第2章開始，

HTML語言呈現一種類似回文的結構，通過嵌入代碼或格式來表明文本格式，
大部分標記都成對出現，開始標記和結束標記匹配，形成閉包，
元素=開始標記+內容+結束標記
元素的相互“嵌套”：完全嵌套，避免標記不匹配
注意選擇編碼方式為UTF-8

2.1 標題元素

標題(heading)元素包括六級，放置到body區域而非head區域，

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Heading Example</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Heading Level 1</h1>
		<h2>Heading Level 2</h2>
		<h3>Heading Level 3</h3>
		<h4>Heading Level 4</h4>
		<h5>Heading Level 5</h5>
		<h6>Heading Level 6</h6>
	</body>
</html>

結構標記	具體描述
<html>…</html>	標記HTML檔案的開始和結束
<head>…</head>	標記檔案頭的開始和結束，HTML檔案的頭部中可以包含腳本、CSS樣式表和網頁標題等資訊，這里指的腳本通常是JavaScript腳本
<title>…</title>	標記檔案頭中的檔案標題
<body>…</body>	標記檔案體部分的開始和結束
<!–…-->	標記檔案中的注釋部分

2.2 段落元素

段落元素組織句子或文本<p>和</p>之間的文本將顯示成段落，上下各顯示空行，p是paragraph的縮寫，

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Paragraph Example</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Heading Level 1</h1>
		<p>
			This is a sample paragraph.Heading tags can help to make your pages more accessible and unable.
			It is good coding practice to use heading tags to outline the structure of your web page content.
		</p>
		<hr>
		<h2>Heading Level 2</h2>
		<h3>Heading Level 3</h3>
		<h4>Heading Level 4</h4>
		<h5>Heading Level 5</h5>
		<h6>Heading Level 6</h6>
	</body>
</html>

2.3換行和水平標尺

2.3.1 換行元素

換行元素<br>使瀏覽器跳到下一行顯示下一個元素或文本，沒有開始和結束標志，稱為獨立或自包容標記，在源代碼中換行并不會使瀏覽器顯示換行，要達到這一效果必須在相應位置添加換行標記，br是break的縮寫，

2.3.2 水平標尺

水平標尺元素<hr>獨立使用，在網頁上配置一條水平線，代表內容主題分隔或變化，hr是horizontal rule的縮寫，

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Paragraph Example</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Heading Level 1</h1>
		<p>
			This is a sample paragraph.<br>
			Heading tags can help to make your pages more accessible and unable.
			It is good coding practice to use heading tags to outline the structure of your web page content.
		</p>
		<hr>
		<h2>Heading Level 2</h2>
		<h3>Heading Level 3</h3>
		<h4>Heading Level 4</h4>
		<h5>Heading Level 5</h5>
		<h6>Heading Level 6</h6>
	</body>
</html>

2.4 塊參考元素

<blockquote>標記以特殊方式顯示的引文塊，即左右兩邊都縮進，引文塊包含在<blockquote>和</blockquote>之間，

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Blockquote Example</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>The Power of the Web</h1>
		<p>
			According to Tim Berners-Lee, the inventor of the World Wide Web, at
			http://www.w3.org/WAI/:
		</p>
		<blockquote>
			The power or the web is in its universality. Access by everyone regardless od disability is an essential aspert.
		</blockquote>
	</body>
</html>

2.5 短語元素

短語元素嵌入其周圍的文本中（稱為行內顯示）指定容器標記之間文本的背景關系和含義，

元素	用法
<abbr>	標識文本是縮寫，配置title屬性（abbreviate）
<b>	文本沒有額外的重要性，但樣式采用加粗字體（bold）
<cite>	標識文本是引文或者參考，通常傾斜顯示（cite）
<code>	標識文本是程式代碼，通常使用等寬字體（code）
<dfn>	標識文本是詞匯或者術語定義，通常傾斜顯示（define）
<em>	使文本強調或突出于周邊的普通文本，通常傾斜顯示（emphasize）
<i>	文本沒有額外重要性，但樣式采用傾斜字體（incline）
<kbd>	標識用戶要輸入的文本，通常用等寬字體顯示（keyboard）
<mark>	文本高亮顯示以供參考（mark）
<samp>	表示是程式的示例輸出，通常使用等寬字體（sample）
<small>	使文本用小字號顯示（small）
<strong>	使文本強調或突出于周邊的普通文本，通常加粗顯示（strong）
<sub>	在基線以下用小文本顯示的上標（subscript）
<sup>	在基線以下用小文本顯示的下標（superscript）
<var>	標識并顯示變數或程式輸出，通常傾斜顯示（variable）

2.6 有序串列

有序串列通過數字或字母編號來組織串列中包含的資訊，以<ol>標記開始，以</ol>標記結束；每個串列項以<li>標記開始，</li>標記結束，ol是ordered list的縮寫，li是list item的縮寫，

type屬性改變串列序號的型別，start屬性指定序號的起始值，reversed屬性指定降序排序，

值	序號
1	數字（默認）
A	大寫字母
a	小寫字母
Ⅰ	羅馬數字
i	小寫羅馬數字

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Heading and List</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>My Favorite Colors</h1>
		<ol type="I">
			<li>Blue</li>
			<li>Teal</li>
			<li>Red</li>
		</ol>
	</body>
</html>

2.7 無序串列

無序串列在串列的每個專案前都加上串列符號，以<ul>開始，</ul>結束，除了沒有順序外，和有序串列沒有什么不同，ul是unordered list的縮寫，

2.8描述串列

描述串列用于組織術語及其定義，術語頂格獨占一行，描述另起一行并縮進，

描述串列以<dl>標記開始，</dl>標記結束；每個要描述的術語以<dt>標記開始，</dt>標記結束；每項描述內容以<dd>標記開始，</dd>標記結束，

dl是definition list的縮寫，dt是definition term的縮寫，dd是definition description的縮寫，

2.9 特殊字符

特殊字符不能直接用原本的形式表示，而要通過特定的代碼表示，這類字符也被稱為物體字符（entity characters）

字符	物體名稱	代碼
"	引號	&quot；
?	著作權符	&copy；
&	&符號	&amp；
空格	不間斷空格	&nbsp；
’	撇號	&rsquo；
—	長破折號	&mdash；
\|	豎線	&#124；

注：以上代碼末尾應是英文分號，因為在markdown里面使用英文分號也會變為對應字符，故此處使用的是中文分號，注意在實際使用中要使用英文分號，

2.10 HTML語法校驗

W3C提供免費的標記語言語法校驗服務，網址是http://validator.w3.org/，

2.11 結構元素

闡述結構區域的用途，對網頁檔案進行更好的結構化，

2.11.1 div元素

div元素在網頁中創建一個常規結構區域作為塊顯示元素，以<div>標記開始，</div>標記結束，div是division的縮寫，

2.11.2 header元素

header元素的作用是包含網頁檔案或檔案區域的標題，通常包含一個或多個標題元素，header元素以<header>標記開始，</header>標記結束，

2.11.3 nav元素

nav元素的作用是建立一個導航鏈接區域，nav元素以<nav>標記開始，</nav>標記結束，nav是navigation的縮寫，

2.11.4 main元素

main元素的作用是包含網頁的主要內容，每個網頁只應有一個main元素，main元素以<main>標記開始，</main>標記結束，

2.11.5 footer元素

footer元素的作用為網頁或網頁區域創建頁腳，footer元素以<footer>標記開始，</footer>標記結束，

2.12 練習使用結構元素

Casita Sedona網頁：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Casita Sedona</title>
		<meta charset="utf-8">
	</head>
	<body>
		<header>
			<h1>Casita Sedona Bed &amp; Breakfast</h1>
		</header>
		<nav>
			<b>
   	 			Home &nbsp; 
   	 			Rooms &nbsp; 
    			Events &nbsp; 
    			Contact
    		</b>
		</nav>
		<main>
			<h2>Stay in the Heart of Sedona</h2>
			<p>At Casita Sedona Bed &amp; Breakfast you&rsquo;ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
			<h3>Luxurious Rooms </h3>
			<p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, and balcony overlooking the red rocks.</p>
			<div>
 				<strong>Casita Sedona Bed &amp; Breakfast</strong><br>
   				612 Tortuga Lane<br>
   				Sedona, AZ 86336<br>
   				928-555-5555<br><br>
			</div>
		</main>
		<footer>
			<small><i>Copyright &copy; 2016 Your Name Here</i></small>
		</footer>
	</body>
</html>

2.13 錨元素

錨元素（anchor element）的作用是定義超鏈接，指向想要顯示的網頁或檔案，錨元素以標記開始，標記結束，用href屬性配置鏈接參考，即要訪問到的檔案的名稱和位置，

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Anchor Example</title>
		<meta charset="utf-8">
	</head>
	<body>
		<a href="http://webdevbasics.net">Basics of Web Design Textbook Companion</a>
	</body>
</html>

2.13.1絕對鏈接

絕對鏈接指定資源在Web上的絕對位置，這種鏈接的href值包含協議名稱http://和域名，

2.13.2 相對鏈接

需要鏈接到自己網站內部的網頁時，可以使用相對鏈接，這種鏈接的href值不以http://開頭，也不包含域名，只包含想要顯示的網頁檔案名（或者檔案夾和檔案名的組合），

2.13.3 block anchor

block anchor能將一個或多個元素（包括作為塊顯示的元素）配置成鏈接，

2.14 練習使用鏈接

站點地圖（部分）：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Trillium Media Design</title>
		<meta charset="utf-8">
	</head>
	<body>
		<header>
  			<h1>Trillium Media Design</h1>
		</header>
		<nav>
  			<b>
     			<a href="index.html">Home</a> &nbsp; 
     			<a href="services.html">Services</a> &nbsp; 
	 			<a href="contact.html">Contact</a>
  			</b>
		</nav>
		<main>
			<h2>New Media and Web Design</h2>
 			<p>Trillium Media Design will bring your company&rsquo;s Web presence to the next level. We offer a comprehensive range of services.</p>
 			<h2>Meeting Your Business Needs</h2>
 			<p>Our expert designers are creative and eager to work with you.</p>
		</main>
		<footer>
  			<small><i>Copyright &copy; 2016 Your Name Here</i></small>
		</footer>
	</body>
</html>

2.15 電子郵件鏈接

錨標記也可用于創建電子郵件鏈接，電子郵件鏈接會自動打開瀏覽器設定的默認郵件程式，它與外部超鏈接相似但有兩點不同：

它使用mailto:,而不是http://
它打開瀏覽器配置的默認郵件程式，將E-mail地址作為收件人

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Trillium Media Design - Contact</title>
		<meta charset="utf-8">
	</head>
	<body>
		<header>
  			<h1>Trillium Media Design</h1>
		</header>
		<nav>
  			<b>
     			<a href="index.html">Home</a> &nbsp; 
     			<a href="services.html">Services</a> &nbsp; 
	 			<a href="contact.html">Contact</a>
  			</b>
		</nav>
		<main>
 			<h2>Contact Trillium Media Design Today</h2>
 			<ul>
   				<li>E-mail: <a href="mailto:contact@trilliummediadesign.com">contact@trilliummediadesign.com</a></li>
   				<li>Phone: 555-555-5555</li>
 			</ul>
		</main>
		<footer>
  			<small><i>Copyright &copy; 2016 Your Name Here</i></small>
		</footer>
	</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/259494.html

標籤：其他

上一篇：（易混淆點）帶你理清陣列和指標之間的關聯

下一篇：了解防抖debounce函式與節流throttle函式