HTML，CSS入門

時間 2019-11-13

標籤 html css 入門欄目 HTML 简体版

原文原文鏈接

課程介紹

前端開發系統化學習教程，前端開發是後端程序員必修的課程，本課程開展注重兩點：
一、實際開發中要用到的知識
二、面試中要用到的知識javascript

1.1-html概述及html文檔基本結構

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm。css

html文檔基本結構

一個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文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁。java

html文檔快速建立

新建一個html文檔後，能夠用快捷鍵的方式快速建立html文檔。快捷鍵：!+tab鍵，或者 html:5+tab鍵程序員

1.2-html標籤入門

標籤語法：

學習html語言就是學習標籤的用法，html經常使用的標籤有20多個，學會這些標籤的使用，就基本上學會了HTML的使用。面試

標籤的的使用方法：

<!-- 一、成對出現的標籤：-->

<h1>h1標題</h1>
<div>這是一個div標籤</div>
<p>這個一個段落標籤</p>


<!-- 二、單個出現的標籤： -->
<br>
<img src="images/pic.jpg" alt="圖片">

<!-- 三、帶屬性的標籤，如src、alt 和 href等都是屬性 -->
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網</a>

<!-- 四、標籤的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="圖片">
    <a href="http://www.baidu.com">百度網</a>
</div>

塊元素標籤(行元素)和內聯元素標籤(行內元素)

標籤在頁面上會顯示成一個方塊。除了顯示成方塊，它們通常分爲下面兩類：
塊元素：在佈局中默認會獨佔一行，塊元素後的元素需換行排列，塊元素默認寬度等於父元素的寬度，即便設置了很小寬度，也佔用一行。
內聯元素：元素之間能夠排列在一行，設置寬高無效，它的寬高由內容撐開，內聯元素之間默認會有小間距。編程

經常使用塊元素標籤

一、標題標籤，表示文檔的標題，除了具備塊元素基本特性外，還含有默認的外邊距和字體大小

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

二、段落標籤，表示文檔中的一個文字段落，除了具備塊元素基本特性外，還含有默認的外邊距

<p>本人叫張山，畢業於某大學計算機科學與技術專業，今年23歲，本人性格開朗、
穩重、待人真誠、熱情。有較強的組織能力和團隊協做精神，良好的溝通能力和社
交能力，善於處理各類人際關係。能迅速適應環境，並融入其中。</p>
<p>本人熱愛研究技術，熱愛編程，但願能在努力爲企業服務的過程當中實現自身價值。</p>

三、通用塊容器標籤，表示文檔中一塊內容，具備塊元素基本特性，沒有其餘默認樣式

<div>這是一個div元素</div>
<div>這是第二個div元素</div>
<div>
    <h3>自我介紹</h3>
    <p>本人叫神祕，畢業於某大學計算機科學與技術專業，今年24歲，本人性格開朗、
穩重、待人真誠、熱情。有較強的組織能力和團隊協做精神，良好的溝通能力和社
交能力，善於處理各類人際關係。能迅速適應環境，並融入其中。</p>
</div>

經常使用內聯元素標籤

一、超連接標籤，連接到另一個網頁，具備內聯元素基本特性，默認文字藍色，有下劃線

<a href="02.html">第二個網頁</a>
<a href="http://www.baidu.com">百度網</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>

二、通用內聯容器標籤，具備內聯元素基本特性，沒有其餘默認樣式

<p>這是一個段落文字，段落文字中有<span>特殊標誌或樣式</span>的文字</p>

三、圖片標籤，在網頁中插入圖片，具備內聯元素基本特性，可是它支持寬高設置。

<img src="images/pic.jpg" alt="圖片" />

其餘經常使用功能標籤

一、換行標籤

<p>這是一行文字，<br>這是一行文字</p>

二、html註釋：

html文檔代碼中能夠插入註釋，註釋是對代碼的說明和解釋，註釋的內容不會顯示在頁面上，html代碼中插入註釋的方法是：後端

<!-- 這是一段註釋  -->

經常使用html字符實體

代碼中成段的文字，若是文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，若是想顯示多個空格，可使用空格的字符實體,代碼以下：瀏覽器

<!--  在段落前想縮進兩個文字的空格，使用空格的字符實體：&nbsp;   -->
<p>
&nbsp;&nbsp;一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用<br />
文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件<br />
渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。</p>

在網頁上顯示「<」和「>」會誤認爲是標籤，想在網頁上顯示「<」和「>」可使用它們的字符實體，好比：

<!-- 「<」 和 「>」 的字符實體爲 &lt; 和 &gt;  -->
<p>
    &lt;div&gt;是一個html的一個標籤<br>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

1.3-html佈局初步

網頁佈局原理

標籤在網頁中會顯示成一個個的方塊，先按照行的方式，把網頁劃分紅多個行，再到行裏面劃分列，也就是在表示行的標籤中再嵌套標籤來表示列，標籤的嵌套產生疊加效果。

佈局示例

根據網頁佈局的原理以及上面的實例，寫出網頁的html結構代碼。

標籤語義化

在佈局中須要儘可能使用帶語義的標籤，使用帶語義的標籤的目的首先是爲了讓搜索引擎能更好地理解網頁的結構，提升網站在搜索中的排名(也叫作SEO)，其次是方便代碼的閱讀和維護。
帶語義的標籤
一、h1~h6：表示標題
二、p：表示段落
三、img：表示圖片
四、a：表示連接

不帶語義的標籤
一、div：表示一塊內容
二、span：表示行內的一塊內容

因此咱們要根據網頁上顯示的內容，使用適合的標籤，能夠優化以前的代碼。

1. HTML+CSS入門
2. HTML CSS入門
3. html入門，css入門
4. 【HTML&CSS】基本的入門
5. HTML基礎——css入門
6. html與css簡單入門
7. HTML+CSS+JavaScript入門代碼
8. 前端-html+css+javascript入門
9. Html和CSS入門(筆記)—HTML
10. Html和CSS入門(筆記)—CSS
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。