一HTML基礎知識
2017-07-12 11:27 黑高 閱讀(194) 評論(0) 收藏 舉報
網站（前段項目）的目錄結構及命名
網站的結構：網站是存放在服務器上的一個文件夾（根目錄），是網站所有文件的集合。網站中所有文件按照文件類型或功能分門別類的整理存放。
網站命名規則：網站中的所有文件命名全部都由英文字母、數字、下劃線、連字符(中劃線)的組合，其中不得包含漢字、空格和特殊字符。如果文件夾命名不規范，會導致讀取錯誤。
舉例：
WebAPP----項目名稱。下面是存放不同類型或功能的文件夾
css --存放css樣式表文件的文件夾
fonts ---存放網頁中運用到的字體文件的文件夾
images ---存放圖片文件的文件夾
js ----存放JavaScript腳本文件的文件夾
plugins --存放插件的文件夾
views---存放HTML網頁文件的文件夾
還有一些.ico結尾的圖標文件。
常見命名：
| 文件/文件夾 | 常見命名 |
| 靜態首頁文件 | index(檢索)/default（默認） |
| 圖片文件夾 | img/images |
| 樣式表文件夾 | css/styles |
| 腳本文件夾 | js/script |
| 字體文件夾 | fonts |
| 模板文件夾 | templets |
| 媒體文件夾 | medias |
1Html和CSS的關系
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什么的：
1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單?；蚴髽嘶^表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。
下面給大家布置一個任務，在完成任務我也來試試:為Hello World添加樣式
1.在右邊編輯器的第8行，輸入font-size:12px;（注意結果窗口的文字大小的變化）。
2.在右邊編輯器的第9行，輸入color:#930;（注意結果窗口的文字顏色的變化）。
3.在右邊編輯器的第10行，輸入text-align:center;（注意結果窗口的文字居中的變化）。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Html和CSS的關系</title>
<style type="text/css">
h1{
font-size:12px;
color:#930;
text-align:center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2認識html標簽
讓我們通過一個網頁的學習，來對html標簽有一個初步理解。平常大家說的上網就是瀏覽各種各式各樣的網頁，這些網頁都是由html標簽組成的。下面就是一個簡單的網頁。效果圖如下：
我們來分析一下，這個網頁由哪些html標簽組成：
“勇氣”是網頁內容文章的標題，<h1></h1>就是標題標簽，它在網頁上的代碼寫成<h1>勇氣</h1>。
“三年級時...我也沒勇氣參加?！?是網頁中文章的段落，<p></p>是段落標簽。它在網頁上的代碼寫成 <p>三年級時...我也沒勇氣參加。</p>
網頁上那張小女生的圖片，由img標簽來完成的，它在網頁上的代碼寫成<img src="1.jpg">
網頁的完整代碼如下圖：
總結一下，可以這么說，網頁中每一個內容在瀏覽器中的顯示，都要存放到各種標簽中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標簽</title>
</head>
<body>
<h1>勇氣</h1>
<p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>
3標簽的語法
1. 標簽由英文尖括號<和>括起來，如<html>就是一個標簽。
2. html中的標簽一般都是成對出現的，分開始標簽和結束標簽。結束標簽比開始標簽多了一個/。
如：
（1） <p></p>
（2） <div></div>
（3） <span></span>
3. 標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套<p>，那么</p>必須放在</div>的前面。如下圖所示。
4. HTML標簽不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為準。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>標簽的語法</title>
</head>
<body>
<h1>在本教程中，你將學習如何使用 HTML 來創建站點</h1>
<p>當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 </p>
</body>
</html>
4認識html文件基本結構
這一節中我們來學習html文件的結構：一個HTML文件是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
1. <html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。
2. <head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽，頭部標簽在下一小節中會有詳細介紹。
3. 在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html文件基本結構</title>
</head>
<body>
<h1>在本小節中，你將學會認識html文件基本結構</h1>
</body>
</html>
5認識head標簽
做得好，下面我們來了解一下<head>標簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
下面這些標簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標簽：在<title>和</title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
例如：
<head>
<title>hello world</title>
</head>
<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示：
<head>標簽中的其它標簽內容的講解，會在以后的章節中為大家一一講解。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識head標簽</title>
</head>
<body>
<h1>歡迎來到慕課網</h1>
</body>
</html>
了解HTML的代碼注釋
什么是代碼注釋？代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發網頁代碼。
語法：
<!--注釋文字 -->
如：右邊編輯器的代碼的第 8、12 行都是，但是你會發現注釋代碼是不會在結果窗口中顯示出來的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML的代碼注釋</title>
</head>
<body>
<!--在線咨詢 begin-->
<div>
<p>一站式報名咨詢、助學答疑服務，無論是報名、選課、學習、做作業、考試、寫論文，畢業，這里都有專業老師為你答疑解惑！<a href="#">向報名顧問咨詢</a></p>
</div>
<!--在線咨詢 end-->
</body>
</html>
浙公網安備 33010602011771號