HTML，CSS入門
阿新 • • 發佈：2018-01-11
script 語義 div asc nbsp 嵌套 超文本 團隊 png
課程介紹
前端開發系統化學習教程，前端開發是後端程序員必修的課程，本課程開展註重兩點：
1、實際開發中要用到的知識
2、面試中要用到的知識
1.1-html概述及html文檔基本結構
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。
html文檔基本結構
一個html的基本結構如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body> </html>
第一行是文檔聲明，第二行“<html>”標簽和最後一行“</html>”定義html文檔的整體，“<head>”標簽和“<body>”標簽是它的第一層子元素，“<head>”標簽裏面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“<body>”內編寫網頁上顯示的內容。
一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁。
html文檔快速創建
新建一個html文檔後，可以用快捷鍵的方式快速創建html文檔。快捷鍵：!+tab鍵，或者 html:5+tab鍵
1.2-html標簽入門
標簽語法：
學習html語言就是學習標簽的用法，html常用的標簽有20多個，學會這些標簽的使用，就基本上學會了HTML的使用。
標簽的的使用方法：
<!-- 1、成對出現的標簽：--> <h1>h1標題</h1> <div>這是一個div標簽</div> <p>這個一個段落標簽</p> <!-- 2、單個出現的標簽： --> <br> <img src="images/pic.jpg" alt="圖片"> <!-- 3、帶屬性的標簽，如src、alt 和 href等都是屬性 --> <img src="images/pic.jpg" alt="圖片"> <a href="http://www.baidu.com">百度網</a> <!-- 4、標簽的嵌套 --> <div> <img src="images/pic.jpg" alt="圖片"> <a href="http://www.baidu.com">百度網</a> </div>