初學者指南：構建HTML5 / CSS3網頁

時間 2021-01-08 標籤 html python 人工智能 css java

本文是我們的「 HTML5 / CSS3教程系列」的一部分 -致力於幫助您成爲更好的設計師和/或開發人員。 單擊此處查看同一系列的更多文章。

HTML5和CSS3在短短兩年內席捲了整個網絡。在他們出現之前，Web設計人員創建網頁的方式已經發生了許多改變，隨着它們的出現，出現了一系列令人敬畏的支持，例如替代媒體，XML樣式標籤和漸進式輸入屬性，這些使Web設計人員能夠實現夢想動畫等功能。

儘管大多數開發人員似乎展示了潛在而又複雜的演示，但是HTML5 / CSS3並不是真正的火箭科學，我將引導您完成輕鬆的過程，以構建標準HTML5 / CSS3網頁，其中包含全面而深入的解釋和建議。諸如學習資源和免費HTML5模板之類的獎金可供您使用，因此趁此機會開始您HTML5之旅！

HTML4和HTML5之間的變化

您可能想知道爲什麼切換到HTML5甚至更重要。有很多原因，但是主要是因爲您將像其他設計師一樣使用全球Internet標準 。這樣，您將在網上找到更多支持，並且您的網站將在不斷改進的現代瀏覽器中正確呈現 。

（圖片來源： W3C ）

在表面上很難發現HTML4和HTML5之間的比較。通過查看新HTML5草案，您可以看到特色元素和更正的錯誤處理過程。瀏覽器開發人員特別喜歡用於呈現默認網頁的新規範。

HTML5的更多功能是我們現代網絡瀏覽器的轉換。有了這些新的規範，整個Web現已被視爲可用於HTML（尤其是HTML5），CSS和JavaScript的應用程序平臺 。此外，該系統通過設置所有瀏覽器都應遵循的通用標準，優雅地在Web設計師和開發人員之間建立和諧的關係 。

另外，已經創建了許多元素來代表新時代的數字媒體 。其中包括<video>和<audio> ，它們對於多媒體支持非常有用。在某些瀏覽器中，您可以直接使用HTML完成表單驗證。當然，由於許多軟件開發人員尚未認識到這些功能，因此仍然非常需要jQuery。如果您想要標籤列表，請查看此W3Schools表以瞭解有關它們的更多信息。

裸HTML5骨架

我發現瞭解任何主題的最簡單方法就是直接研究它 。因此，我將爲網頁構建一個非常基本HTML5框架模板。我包括了一些較新的元素，希望稍後再進行歸類。

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Our First HTML5 Page</title>
  <meta name="description" content="Welcome to my basic template.">
  <link rel="stylesheet" href="css/style.css?v=1">
</head>

<body>
    <div id="wrapper">
    	<header>
            <h1>Welcome, one and all!</h1>
            
            <nav>
            	<ul>
                    <li><a rel="external" href="#">Home</a></li>
                    <li><a rel="external" href="#">About us</a></li>
                    <li><a rel="external" href="#">Contacts</a></li>
                </ul>
            </nav>
        </header>
        
        <div id="core" class="clearfix">
            <section id="left">
            	<p>some content here.</p>
            </section>
            
            <section id="right">
                <p>but some here as well!</p>
            </section>
        </div>
        
        <footer>
            <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>
        </footer>
    </div>

</body>
</html>

立即，這與標準HTML4網頁並沒有太大區別。您可能會注意到，我們不需要再包含任何自動關閉標籤 。這確實是個好消息，因爲它將節省大量開發項目時間。

對於那些不知道的人，在XHTML草案中有許多標記爲self-closes的元素。這些將在「大於」運算符之前以正斜槓結尾，以表示您不需要在其他位置包含另一個結束標記。例如，要創建元關鍵字標籤，您可以使用<meta name="keywords" content="HTML5,CSS3,JavaScript" />而無需在其他地方結束</meta> 。

此規則仍適用於HTML5。但是現在您甚至不需要多餘的正斜槓 ！儘管允許您繼續使用XHTML / XML標準，但<meta name="keywords" content="HTML5,CSS3,JavaScript">完全有效。對於所有符合標準的瀏覽器，這兩個元素將呈現相同的方式。

定義我們的頁面區域

我們的大多數新代碼都不會太令人震驚。我們的文檔類型比以往任何時候都簡單有趣 ， 不需要過多的身體屬性 ，並且標題中的信息已明確標記。繼續，我想將您的注意力集中在我們的<body>標記內的內容上。這包括所有主頁的結構。我故意使用了一些不錯HTML5標籤來表示如何將它們包含在自己的作品中。

首先，您會看到整個頁面都封裝在div標籤中 。我已經用wrapper的ID進行了標記，這意味着它會包裹我們整個網站的內容。這對於在屏幕上設置最大寬度或位置內容很有用 。接下來，我將頁面分爲3個核心元素-一個<header> ，一個核心<div>和一個簡短的<footer> 。在我的自定義標題區域內，我添加了頁面標題的簡化顯示，並使用<nav>標記作爲包裝的導航項。

現在，對於ID爲core的<div> ，我應用了一個輔助clearfix 。此功能使我們可以在其中自由浮動2列，並且不會遇到任何內容掉落或奇怪的現象。沒錯，在內部放置了兩個<section>標籤，分別包含我們的主要內容區域和側邊欄。我們將使用CSS樣式使它們分開。

同樣，安靜的頁腳標記可很好地在頁面之間區分此內容。我在裏面放了一個莊嚴的段落，其中可能包含一些版權和所有權信息。但是您很可能希望包含更多內容，例如頁面的輔助鏈接。

創意CSS3嚮導

爲了完成這個基本的模板佈局，我們可以使用一些CSS樣式。在基本HTML5模板中，我添加了一個外部CSS樣式表，以便我們可以將代碼區域分開。從長遠來看，當您的頁面和樣式開始在不同頁面上運行時，這將消除很多混亂 。

（圖片來源： W3C ）

因此，我並沒有花很多時間在CSS上，但足以展示出一些簡潔的效果。首先，我使用了一些border-radius設置來構建非常酷的導航鏈接懸停效果。您可以在模板代碼中針對相同的效果，只需將以下行添加到CSS文檔中即可。

nav {
	display: block;
	margin-bottom: 10px;
}
nav ul {
	list-style: none;
	font-size: 14px;
}
nav ul li {
	display: inline;
}
nav ul li a {
	display: block;
	float: left;
	padding: 3px 6px;
	color: #575c7d;
	text-decoration: none;
	font-weight: bold;
}
nav ul li a:hover {
	background: #deff90;
	color: #485e0f;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 3px 6px;
	margin: 0;
	text-decoration: none;
}

另一個簡潔的效果是clearfix樣式 。這不是CSS3的全新概念，但對於構建符合標準的網頁很重要。通常，當您希望將內容彼此浮動時，會遇到錯誤的定位故障。這是由於偏移量邊距和浮動內容的絕對寬度設置錯誤引起的。

這個概念似乎有些混亂，我在下面添加了一些代碼來提供幫助。基本上，我們以兩個<section>元素爲目標， #left和#right對應於頁面的一側。我已將每個像素設置爲一定的寬度並向左浮動，因此它們將彼此緊挨着堆疊。由於我們的容器div#core包含clearfix類，因此這意味着所有內部內容都可以自由移動，然後自動清除多餘的空間。

/* page core */
div#core {
	display: block;
	clear: both;
	margin-bottom: 20px;
}
section#left {
	width: 550px;
	float: left;
	margin: 0 15px;
}
section#right {
	float: left;
	width: 300px;
}

 
/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}

這些代碼很容易上手。它們也與我們之前構建HTML5模板代碼有關，因此這是簡單的做法。但是，當涉及到真正的Web迷時，您將研究更多CSS3功能。

鮮爲人知CSS3語法

要構建完整HTML5 / CSS3網頁，您將開始使用一些更復雜的樣式表。許多設計人員都知道速記代碼（例如font: property ），因爲這些甚至在CSS2之前都是標準。

但是CSS3中有一些新屬性，許多設計人員並未考慮。其中許多不僅是爲了美觀，還包括動畫效果。以下是簡短列表，解釋了您可能考慮使用的一些屬性。如果您感到迷茫，請嘗試使用Google搜尋語法示例。

box-shadow ：爲頁面元素添加整潔的陰影效果。您將獲得4個參數，用於設置左/右，上/下，陰影模糊和顏色的位置。請注意，框陰影不視爲原始寬度/高度的額外空間。
text-shadow ：在頁面文本後面創建漂亮的陰影。有了正確的效果，您的信件可能會在頁面上彈出。
border-radius ：圓角花了很長時間才成爲公認的標準。幾年前，許多Web 2.0設計師都在製作背景圖像，以適應CSS的圓角。但是，使用CSS3 border-radius可以操縱任何元素上每個邊界的曲線。
opacity ：看起來像一個簡單的屬性，很多設計師都沒有考慮。不透明度要求單個數字輸入範圍爲0到1.0（0％– 100％）。此效果作爲懸停動畫效果很好。
@font-face ：一些複雜CSS樣式和排版的另一個漂亮示例。現在，Web設計人員可以通過將其定義爲CSS文檔中的變量來使用自己的自定義字體。
box-sizing ：默認情況下，box-sizing將所有元素設置爲content-box 。這意味着寬度，填充和邊框都包含在最大寬度中。但是將其設置爲border-box您可以定義最大寬度（例如20px），並且添加的填充/邊框將自身包括在內，從而消除了對象內部的空間。一旦掌握了它的機智，這是一個了不起的財產。

這些屬性都有其優點和缺點。我不建議嘗試將它們全部塞入您的網頁。但是實踐會給您清晰的思路 ，使您輕鬆進入更多的網站。

屬性選擇器是值得一提的又一核心語法。使用CSS3，您現在可以基於HTML屬性 （例如type，href，title） 定義樣式 ，甚至可以提供特定的值。因此，例如，我們可以使用具有定義的title屬性的鏈接作爲目標，併爲其提供一組背景圖標。

ul li[title^="ico"] {
	background: url('my-icon.gif');
}

如果您注意到我在等號之前加入了插入符號 。這是一個運算符， 用於定義所有帶有前綴ico的列表項 。或者，您可以將加號（^）替換爲美元符號（$），以定位標題的後綴區域。這樣，CSS3知道要添加背景圖像，您可以在其中將標題設置爲「 first ico」或「 book ico」。如果您有興趣，請閱讀更多有關屬性選擇器的信息。

放在一起

簡單性是HTML5和CSS3網頁的核心。 Web開發人員正試圖在更少的時間和更少的壓力下構建具有高度創意的網站。 HTML5中的新功能爲此提供了很大的迴旋餘地。從長遠來看，使用一些新CSS3選擇器和屬性將爲您帶來優勢。

（圖片來源： W3C ）

但是，您也應該考慮最終用戶 。在啓動網站公開之後，構建網頁的過程最終結束。您的目標是通過易於訪問的信息來吸引觀衆 ，不僅是人類讀者，而且是搜索引擎搜尋器和索引機器人 。語義已經有了很大的發展，包括了新HTML5佈局元素，從而一致地拆分了頁面佈局。與所有現代Web瀏覽器一致，構造一個小的導航和頁腳部分從未如此簡單。

一旦您習慣了構建HTML5網頁，就可能會開始研究頁面動畫。即使使用JavaScript和AJAX產生很小的影響，也可以大大改善用戶體驗和網站性能 。儘管這不是本文討論範圍的一部分，但如果有時間，我還是建議您使用jQuery 。開源庫令人震驚，並允許在HTML5頁面元素之上進行快速原型製作。