少林足球最后比赛视频

書名： HTML5從入門到精通（第4版）
作者名：明日科技編著
本章字數： 3476字
更新時間： 2024-12-24 10:26:13

2.1　編寫第一個HTML文件

2.1.1　HTML文件的編寫方法

一個HTML文件是由一系列的元素和標簽組成的。HTML的標簽分為兩種類型：單獨出現的標簽和成對出現的標簽。大多數標簽都是成對出現的，由起始標簽和結束標簽組成。起始標簽的格式為<元素名稱>，結束標簽的格式為</元素名稱>。其完整語法如下。

     <元素名稱>要控制的元素</元素名稱>

成對標簽僅對包含在其中的文件部分發生作用，例如<title>標簽和</title>標簽就是成對標簽，用于界定標題元素的范圍，也就是說，<title>和</title>標簽之間的部分是此HTML文件的標題。

單獨標簽的格式為<元素名稱>，其作用是在相應的位置插入元素，例如<br>標簽便是在該標簽所在位置插入一個換行符。

說明

每個HTML標簽都可以用大寫、小寫或混合寫。例如，<HTML>、<html>和<Html>都是一樣的。

在每個HTML標簽中，還可以設置一些屬性來控制HTML標簽建立的元素。這些屬性將位于所建立元素的起始標簽中，因此起始標簽的基本語法如下。

     <元素名稱  屬性1="值1" 屬性2="值2"… >

結束標簽的建立方式如下。

     </元素名稱>

因此，在HTML文件中，某個元素的完整定義語法如下。

     <元素名稱  屬性1="值1" 屬性2="值2"…>元素資料</元素名稱>

說明

語法中，設置各屬性所使用的“"”可省略。

當用一組HTML標簽將一段文字包含在中間時，這段文字與包含文字的HTML標簽被稱為一個元素。元素是HTML文件的重要組成部分，例如title（文件標題）、img（圖像）及table（表格）等。元素名不區分大小寫。HTML用標簽來規定元素的屬性及其在文件中的位置。

由于在HTML語法中，每個由HTML標簽與文字所形成的元素內，還可以包含另一個元素。因此，整個HTML文件就像是一個大元素，包含了許多小元素。

在所有HTML文件，最外層的元素是由<html>標簽建立的。在<html>標簽建立的元素中，包含兩個主要的子元素，這兩個子元素是由<head>標簽與<body>標簽建立的。由<head>標簽建立的元素的內容為文件標題，而由<body>標簽建立的元素內容為文件主體。

編寫HTML文件主要有如下3種方法。

　手工直接編寫。由于HTML語言編寫的文件是標準的ASCII文本文件，所以我們可以使用任何的文本編輯器來打開并編寫HTML文件，如Windows系統中自帶的記事本。

　使用熱門的Web開發軟件，如Jetbrains公司的WebStorm、Microsoft公司的Visual Studio Code、SangilKim公司的EditPlus、Adobe公司的Dreamweaver。

　由Web服務器一方實時動態生成。這需要進行后端的網頁編程來實現，如ASP、PHP等，一般情況下都需要數據庫的配合。

2.1.2　手工編寫頁面

下面使用記事本編寫第一個HTML文件，步驟如下。

（1）選擇“開始→程序→附件→記事本”命令，打開Windows系統自帶的記事本，如圖2.1所示。

圖2.1　記事本

（2）在記事本中直接輸入下面的HTML代碼。

     <html>
     <head>
          <title>簡單的HTML文件</title>
     </head>
     <body text="blue">
          <h2 align="center">HTML初露端倪</h2>
          <hr>
          <p>讓我們一起體驗超炫的HTML旅程吧</p>
     </body>
     </html>

（3）輸入代碼后，記事本中顯示代碼的內容，如圖2.2所示。

（4）選擇記事本菜單中的“文件→保存”命令，彈出如圖2.3所示的“另存為”對話框。

圖2.2　顯示代碼的記事本

圖2.3　“另存為”對話框

（5）在對話框中選擇存盤的文件夾，然后在“保存類型”中選擇“所有文件”，在“編碼”中選擇UTF-8，這里將“文件名”設置為index.html，最后單擊“保存”按鈕。

（6）關閉記事本，回到存盤的文件夾，雙擊如圖2.4所示的index.html文件，我們可以在瀏覽器中看到最終頁面效果，如圖2.5所示。

圖2.4　雙擊html文件

圖2.5　頁面效果

注意

使用記事本編寫HTML頁面時，如果記事本中聲明了文檔的編碼格式，那么保存文件時，也要注意修改編碼格式（見圖2.3下方的“編碼”選項），否則瀏覽文件可能會出現亂碼。

2.1.3　實例演練——創建基本的HTML網頁

【例2.1】實現明日科技公司簡介。（實例位置：資源包\TM\sl\2\1）

本節中創建一個基本的HTML網頁，功能是簡單介紹明日科技公司，運行效果如圖2.6所示。

圖2.6　明日科技公司簡介

具體步驟如下。

（1）創建一個html文件，將其命名為slyindex.html。

（2）在<title>…</title>標簽中定義文件的標題為“明日科技公司簡介”。

（3）在頁面的主題標簽內，將頁面的背景圖片和文字的顏色設置為黑色，并將上邊距、左右邊距都設置為10像素。其實現的代碼如下。

（4）通過CSS樣式的<style>標簽，去除重復的背景圖。其實現的代碼如下。

     <style type="text/css">
          body{background-repeat:no-repeat}
     </style>

2.1.4　使用WebStorm制作頁面

WebStorm是Jetbrains公司旗下的一款JavaScript開發工具，被廣大開發者譽為“Web前端開發神器”，它具有十分優秀的代碼補全功能，并支持所有流行的庫。WebStorm不僅可以用于編輯JavaScript代碼，還可以用于編寫和修改HTML以及CSS代碼。正因如此，WebStorm受到廣大前端開發者的喜愛。下面介紹WebStorm的下載和使用。

1．下載與安裝

WebStorm的下載與安裝步驟如下。

（1）打開瀏覽器，輸入網址https://www.jetbrains.com/zh-cn/webstorm/download/#section=windows，進入WebStorm官方下載頁面，如圖2.7所示。在該頁面中，讀者可以選擇符合自己計算機系統的WebStorm，然后單擊“下載”按鈕即可開始下載。

圖2.7　WebStorm官方下載頁面

說明

WebStorm是一個收費軟件，官網下載的安裝文件默認提供30天的試用期，如果想一直使用WebStorm開發程序，需要在官網購買使用授權。

（2）下載完成以后，頁面會彈出對話框，詢問是否保留已下載的WebStorm，單擊“保留”按鈕即可將WebStorm安裝包保留至本地，如圖2.8所示。

圖2.8　將WebStorm安裝包保存至本地

（3）雙擊打開本地的WebStorm安裝包，開始安裝WebStorm，如圖2.9所示。單擊Next按鈕進入如圖2.10所示的頁面，在該頁面中單擊Browse按鈕選擇安裝路徑。設置完成以后，再次單擊Next按鈕進行下一步。

圖2.9　開始安裝WebStorm

圖2.10　選擇安裝路徑

（4）圖2.11顯示了安裝選項頁面。為了方便以后打開WebStorm，可以在計算機桌面上創建一個新的快捷方式。創建新的快捷方式時，讀者只需在第一項中選擇符合自己計算機系統類型的快捷方式，然后單擊Next按鈕進行下一步，選擇開始菜單文件夾，如圖2.12所示，選擇默認的JetBrains，單擊Install按鈕進行下一步。

圖2.11　添加快捷方式

圖2.12　選擇開始菜單文件夾

（5）選擇完開始菜單文件夾以后，進入WebStorm安裝頁面，如圖2.13所示。安裝完成以后，Next按鈕會處于可單擊的狀態，單擊該按鈕，進入如圖2.14所示的提示用戶安裝完成的頁面，單擊Finish按鈕即可。

圖2.13　安裝WebStorm

圖2.14　安裝完成

2．WebStorm的使用

WebStorm的使用步驟如下。

（1）雙擊打開WebStorm，打開中的頁面如圖2.15所示，打開后的頁面如圖2.16所示，單擊第一項New Project按鈕可以新建一個項目。

圖2.15　打開WebStorm

（2）圖2.17顯示了選擇新建項目文件的路徑的頁面。讀者也可以單擊右側文件夾的圖標選擇已有的文件夾，然后單擊Create按鈕即可成功創建一個項目，如圖2.18所示。接下來需要創建HTML文件，右擊項目名稱，然后在彈出的快捷菜單中選擇New→HTML File命令，進入為HTML文件的命名頁面。

圖2.16　創建新的項目文件

圖2.17　選擇新建項目文件路徑

圖2.18　創建HTML文件

（3）圖2.19顯示了新建的HTML5文件命名頁面。為文件命名時，可以省略其擴展名，輸入名稱以后，按Enter鍵，進入如圖2.20所示的頁面。在該頁面中，讀者可以在<title>標簽中修改網頁的標題，在<body>標簽中添加網頁的正文，例如本實例中，修改網頁的標題為“我的第一個HTML5頁面”，并且添加網頁正文內容為“明天你好”。代碼編寫完成以后，單擊右側Google Chrome瀏覽器的圖標，即可在Google Chrome瀏覽器中運行本實例。

圖2.19　為HTML文件命名

圖2.20　代碼編寫頁面

2.1.5　使用瀏覽器瀏覽HTML文件

運行HTML代碼離不開瀏覽器，現如今有三大主流瀏覽器，分別是Google Chrome瀏覽器、Microsoft Edge瀏覽器和Firefox瀏覽器，其中Google Chrome瀏覽器由于其性能高、兼容性好以及開發者工具多而深受開發者青睞。本書同樣主要使用Google Chrome瀏覽器運行HTML代碼。運行HTML實例時，主要有如下兩種情況。

（1）運行WebStorm中的HTML文件時，在WebStorm中打開HTML文件，例如圖2.20就相當于在WebStorm中打開HTML文件，然后單擊WebStorm右上角的Google Chrome瀏覽器的圖標即可使用Google Chrome瀏覽器運行HTML文件。

（2）直接使用Google Chrome瀏覽器運行HTML文件。首先選中HTML文件，然后右擊，在彈出的快捷菜單中依次選擇“打開方式→Google Chrome”，如圖2.21所示，即可在Google Chrome瀏覽器中看到HTML文件的運行效果。

圖2.21　選擇打開方式

2.1.6　如何查看網頁源代碼

下面以明日學院的前臺網頁為例講解如何查看網頁的源代碼，步驟如下。

（1）打開瀏覽器，在地址欄中輸入https://www.mingrisoft.com/，然后按Enter鍵。

（2）頁面顯示了明日學院的首頁面。

（3）在瀏覽器網頁的空白處右擊，在彈出的快捷菜單中選擇“查看網頁源代碼”命令，如圖2.22所示。

圖2.22　選擇“查看網頁源代碼”命令

（4）這樣，就會在瀏覽器中新建一個窗口來顯示網頁的源代碼，如圖2.23所示。

圖2.23　網頁的源代碼

2.1.7　編寫文件的注意事項

在編寫HTML5文件時，要注意以下事項。

　“<”和“>”是任何標簽的開始和結束。元素的標簽要用這對尖括號括起來，并且結束的標簽總是在開始的標簽前加一個斜杠。

　標簽與標簽之間可以嵌套，如：

     <H2><center>初識HTML文件</center></H2>

　在源代碼中不區分大小寫，如以下幾種寫法都是正確并且相同的標簽。

     <HEAD>
     <head>
     <Head>

　任何回車和空格在源代碼中不起作用。為了代碼清晰，建議不同的標簽之間換行編寫。

　可以在HTML標簽中放置各種屬性，如：

     <h2 align="center">HTML初露端倪</h2>

其中align為屬性，center為屬性值，元素屬性出現元素的< >內，并且和元素名之間有一個空格分隔，屬性值可以直接書寫，也可以使用""括起來。如下面的兩種寫法都是正確的。

     <h2 align="center">HTML初露端倪</h2>
     <h2 align=center>HTML初露端倪</h2>

如果希望在源代碼中添加注釋，便于閱讀，可以以“<!--”開始，以“--!>”結束。如下代碼。

     <!--------------------------------------------!>
     <!--     文件范例：1-2.html      --!>
     <!-- 文件說明：第一個HTML文件--!>
     <!--------------------------------------------!>

注釋語句只出現在源代碼中，而不會在瀏覽器中顯示。

編程訓練（答案位置：資源包\TM\sl\2\編程訓練）

【訓練1】實現一篇博客文章內容的顯示　在網頁中顯示一段關于HTML5學習的博客文章，并通過瀏覽器進行查看。

【訓練2】查看京東網站前端源代碼　打開京東網站首頁，查看它的源代碼。

官术网_书友最值得收藏!

HTML5從入門到精通（第4版）

2.1 編寫第一個HTML文件

2.1.1 HTML文件的編寫方法

2.1.2 手工編寫頁面

2.1.3 實例演練——創建基本的HTML網頁

2.1.4 使用WebStorm制作頁面