教你創建一個簡單的靜態網頁

天我親手創建了一個網頁。首先，打開一個文本文檔并將其重命名為“myweb”。然后，在文件中添加以下內容：<html> <head> <title>My First Webpage</title> </head> <body> <h1>My First Webpage</h1> </body> </html>

這樣，你就成功地創建了一個靜態網頁，地址為本地。右鍵點擊文件，選擇“打開方式”，選擇“記事本”，然后在文件中添加以下代碼：<h1>Dog typehtml</h1>

這是一個HTML5的標簽，它包含了HTML聲明和標簽的功能。網頁的主體部分只有一個標簽，即HTML標簽，它是一個雙標簽，包含一個開始標簽和一個結束標簽，內部包含一個標題和網頁內容。在網頁的主體部分中，可以設置樣式、參數、標題等。

網頁的主體部分是由HTML標簽包裹的，這是一個雙標簽，包括開始標簽和結束標簽。大美麗的網頁，保存并刷新。大美麗網頁的開頭部分已經添加完成，網頁的主體部分位于標題下方，即文章下方的部分，都是網頁的主體部分。我的第一個網頁就這樣完成了，非常有趣。保存并刷新網頁。我的第一個網頁只是一個簡單的靜態網頁，如果需要添加更多功能，可以使用網頁開發工具進行操作。

在網頁中添加一個生日祝福的內容。在王翰的文章中添加一個標題，標題為“生日祝福”。這也是一個雙標簽，包括開始標簽和結束標簽。保存并刷新網頁。

在大美麗網頁中添加一個圖片。這是一個單標簽，只有一個標簽，沒有結束標簽。在百度中搜索一張圖片，并將其地址復制下來。使用快捷鍵Ctrl + C，然后使用快捷鍵Ctrl + V將圖片添加到網頁中。保存并刷新網頁，你會看到圖片已經顯示在網頁中。

在網頁中添加一段文字和圖片，使它們位于同一行。使用行內標簽“span”，使文字不會換行。保存并刷新網頁。

這就是我今天做的第一個網頁，非常簡單。通過創建一個文本文檔并添加一些簡單的內容，就可以創建一個簡單的靜態網頁。使用記事本打開文件會自動顯示代碼提示，按一個Tap縮進一行，就可以添加更多的標簽和內容。行內標簽可以嵌套在塊標簽中，但塊標簽不能嵌套在行內標簽中。

使用color屬性將其設置為藍色，保存并刷新頁面，即可獲得相應的代碼提示。只需輸入color，即可獲得相應的提示，而無需輸入c。這樣的代碼更加易讀。今天的任務已經完成，可以回顧一下今天的重點。了解了h天貓無網頁的特性，只能包含一個h天命標簽，且只能包含一個焊的body。

還學習了雙標簽和單標簽的概念。雙標簽是指有頭有尾的標簽，如html hand。單標簽則只有一個標簽，例如一妹子。此外，還了解了行內標簽和塊標簽的區別。請自行查看相關內容。為標簽定義樣式時，可以使用style屬性。然后在其中添加顏色、字體等樣式信息即可。對于圖片標簽，請注意使用其 src 屬性來指定圖片路徑。今天的學習就到這里了，再見。

語言網站為了讓谷歌收錄，更好的服務某語言本地客戶搜索，可以有幾種方法讓谷歌收錄。這集中方法包括HTML、HTTP 標頭和站點地圖。

本文主要介紹用html標記的方式將網站內容加入谷歌搜索收錄。下面是谷歌的官方方法介紹。

HTML 標記

您可以通過在網頁標頭中添加 <link rel="alternate" hreflang="lang_code"... > 元素，將網頁的所有語言和區域變體告知 Google。如果您沒有站點地圖或無法為您的網站指定 HTTP 響應標頭，此方法非常有用。

對于網頁的每個變體，您都應在 <head> 元素中添加一組 <link> 元素，并使每個網頁變體（包括網頁自身）分別對應一個鏈接。網頁的每個版本中，這組鏈接都應是相同的。查看其他準則。

以下是每個 link 元素的語法：

語法

lang_code 此網頁版本所針對的受支持的語言/區域代碼，或 x-default（以與該網頁上的 hreflang 標記未明確列出的任何語言匹配）。

url_of_page 此網頁的特定語言/區域版本對應的完全限定網址。

請將 <link> 標記放在 <head> 元素頂部附近。最起碼，<link> 標記必須位于格式正確的 <head> 部分內，或位于可能會導致 <head> 過早結束的任何項目（例如 <p> 或跟蹤像素）前面。如果不確定，請將所呈現的網頁中的代碼粘貼到 HTML 驗證工具中，確保相關鏈接位于 <head> 元素內。

示例

例如，Widgets, Inc 有一個面向美國、英國和德國境內用戶的網站。以下網址包含的內容大致相同，但具有區域性差異：

具有區域性差異的網址

http://en.example.com/page.html 通用英語版首頁，包含與從美國運至全球各地的運費相關的信息。

http://en-gb.example.com/page.html 英式英語版首頁，顯示以英鎊為單位的價格。

http://en-us.example.com/page.html 美式英語版首頁，顯示以美元為單位的價格。

http://de.example.com/page.html 德語首頁。

Example Domain 不針對任何語言或語言區域的默認頁；它具有選擇器，供用戶選擇自己的語言和區域。

請注意，Google 不會根據這些網址中針對特定語言的子網域（en、en-gb、en-us、de）確定網頁的目標受眾群體；您必須將網頁明確地關聯到對應的目標受眾群體。

您應將下面的 HTML 粘貼到上方列出的所有網頁的 <head> 部分中。這會將美式英語、英式英語、通用英語和德語用戶引導至對應的本地化網頁，并將所有其他用戶引導至通用首頁。Google 搜索會根據用戶的瀏覽器設置為他們返回適當的結果。

<head>

<title>Widgets, Inc</title>

href="http://en-gb.example.com/page.html" />

href="http://en-us.example.com/page.html" />

href="http://en.example.com/page.html" />

href="http://de.example.com/page.html" />

href="Example Domain" />

</head>

信推出小程序后，html5越來越火熱了，未來H5方向的專業人才必定水漲船高。

我整理了一些關于html的書籍

響應式Web設計:HTML5和CSS3實戰

BenFrain (作者), 王永強 (譯者)

推薦指數：★★★★

簡介：全書主要是帶領讀者做一個小網頁來寫的，其實響應式的東西講得比較少，大半內容是介紹H5和css3的基礎知識。如果同時想了解H5和css3和響應式設計入門，這本書不錯。

HTML5移動Web開發實戰詳解

林瓏 (作者)

推薦指數：★★★★☆

簡介：本書由淺入深，全面、系統、詳盡地介紹了HTML5相關技術和其在移動開發領域的應用。書中提供了大量的代碼示例，讀者可以通過這些例子理解知識點，也可以直接在開發實戰中稍加修改應用這些代碼。《HTML5移動Web開發實戰詳解》涉及面廣，從基本原理到實戰，再到項目工作流，幾乎涉及一個合格的前端開發工程師需要具備的所有重要知識。

瘋狂HTML 5/CSS3/JavaScript講義

李剛 (作者)

推薦指數：★★★★

簡介：這是一本全面介紹HTML 5、CSS 3和JavaScript前端開發技術的圖書，系統地介紹了HTML 5常用的元素和屬性、HTML5的表單元素和屬性、HTML 5的繪圖支持、HTML5的多媒體支持、CSS 3的功能和用法、最前沿的變形與動畫功能等。除此之外，《瘋狂HTML 5/CSS 3/JavaScript講義》還系統地介紹了JavaScript編程知識，包括JavaScript基本語法、DOM編程，以及HTML 5新增的本地存儲、離線應用、JavaScript多線程、客戶端通信支持、WebSocket編程等。

HTML5觸摸界面設計與開發

伍茲 (StephenWoods) (作者), 覃介右谷岳 (譯者)

推薦指數：★★★★☆

簡介：《HTML5觸摸界面設計與開發》專注于觸摸界面的開發，內容的結構和優化網站的思路大概一致。上半部分涵蓋了能使各類網站，特別是移動網站變快的基本概念。書的后半部分是專門講觸摸界面的，特別是盡可能地讓它們更平穩和快速。本書適合具有一定經驗的Web開發者閱讀參考。

HTML5與CSS3權威指南(上下冊)(第3版)

陸凌牛(作者)

推薦指數：★★★★☆

簡介：本書分為上下兩冊。上冊全面系統地講解了HTML5相關的技術，以HTML5對現有Web應用產生的變革開篇;下冊全面系統地講解了CSS3相關的技術，以CSS3的功能和模塊結構開篇，順序講解了各種選擇器及其使用、文字與字體的相關樣式、盒相關樣式、背景與邊框相關樣式、布局相關樣式、變形處理、動畫、顏色相關樣式等內容。

HTML5+CSS3+jQuery Mobile輕松構造APP與移動網站

陳婉凌著

推薦指數：★★★★☆

簡介：這是目前唯一一本真正的HTML5 App開發教材，目前已在復旦、北大、西安交大、北京理工等五十多所高校投入教學使用。它的特點是由淺入深、由易到難，將開發技巧、和開發工具結合在一起闡述，同時選取了多個商業項目APP的實戰案例進行要點講解，通俗易懂。

和上面推薦的幾本書不同之處在于，本書是面向應用型本科和高等職業院校設計的標準化教材，并經過官方權威認證，且該教材能與國家及國際權威認證考試無縫對接。

html和css都是web前端的基礎，在這里，就給大家推薦幾個新手小白必去的網站！

1、w3school

http://www.w3school.com.cn

用來查找一些標簽的屬性,每一個剛學習前端的伙伴,都會用到這個網站.

2.csdn

CSDN上可以獲得一些不錯的資訊,也可以找到很多需要的資料,也是一個交流的平臺,有些不懂得問題也可以找到人去解答.

3.開源中國

獲取到許多項目案例的源碼,獲得最新web前端發展的一些動向,資訊.

多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

為你強力推薦經典css書籍

1.精通CSS：高級Web標準解決方案（第2版）(Amazon第一CSS暢銷書全新改版)

本書將最有用的css書籍技術匯總在一起，還總結了css設計中的最佳實踐，討論了解決各種實際問題的技術，填補了一直以來css圖書的空白。

2.精通CSS+DIV 網頁樣式與布局

本書系統地講解了css層疊樣式表的基礎理論和實際運用技術，通過大量實例對css進行深入淺出的分析，主要包括css的基本語法和概念，設置文字、圖片、背景、表格、表單和菜單等網頁元素的方法，以及css濾鏡的使用。

3. CSS權威指南(第三版)

最新版《css權威指南》css書籍經過全面更新，涵蓋了internet explorer 7，詳細介紹了各個css屬性以及屬性之間的相互作用，并指導你如何避免一些常見的錯誤。

希望對你有幫助，下一個優秀的前端工程師就是你！

在線咨詢

上一篇：在laravel中使用simple_html_dom爬取顯示整本小說
下一篇：CSS3+JS打造帶按鈕的3D圖片切換特效

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

教你創建一個簡單的靜態網頁

您的項目需求