Python HTML和CSS 1：html文件結構和常用標籤

weixin_34214500發表於2019-02-07
PythonHTMLCSS

總體內容
1、前端概述
2、html 文件結構
3、html 標題標籤、段落標籤、換行標籤 與 字元實體
4、html 塊標籤、含樣式的標籤、語義化的標籤
5、html影像標籤、絕對路徑和相對路徑
6、html連結標籤
7、html列表

一、前端概述

  • 1.1、什麼是前端開發？
    答：前端開發也叫做web前端開發，它指的是基於web的網際網路產品的頁面(也可叫介面)開發及功能開發。
  • 1.2、什麼網際網路產品？
    答：網際網路產品就是指網站為滿足使用者需求而建立的用於運營的功能及服務，百度搜尋、淘寶、微博、網易郵箱等都是網際網路產品。
  • 1.3、前端開發需要哪些技術？
    答：前端工程師參照產品的效果圖來開發頁面(也可叫介面)，效果圖是由UI設計師用Photoshop(少量設計師用firework)來設計的，為了方便與UI設計師對接工作，前端需要掌握一些Photoshop的技能，Photoshop還可以輔助頁面開發。把效果圖佈局成頁面，需要用到HTML語言和CSS語言，頁面功能的開發需要用到javascript,為了快速開發和系統開發，還需要學習一些前端的javascript庫和框架。

二、html 概述和基本結構

  • 2.1、html 概述：HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文字標記語言，超文字指的是超連結，標記指的是標籤，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的檔案儲存的是一個文字檔案，檔案的副檔名為html或者htm，一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文字，可以用文字的方式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。

  • 2.2、html基本結構

    • 一個html的基本結構如下：

      <!DOCTYPE html>
<!-- 定義網頁的語言 -->
<html lang="en">
<head>    
     <!-- 編碼格式 -->        
     <meta charset="UTF-8">
     <!-- 標題 -->
     <title>網頁的標題</title>
</head>
<body>
       這是網頁顯示內容
</body>
</html>

      第一行是文件宣告，第二行“<html>”標籤和最後一行“</html>”定義html文件的整體，“<html>”標籤中的‘lang=“en”’定義網頁的語言為英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它一般作為分析統計用。“<head>”標籤和“<body>”標籤是它的第一層子元素，“<head>”標籤裡面負責對網頁進行一些設定以及定義標題，設定包括定義網頁的編碼格式，外鏈css樣式檔案和javascript檔案等，設定的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“<body>”內編寫網頁上顯示的內容。

  • 2.3、HTML文件型別
    目前常用的兩種文件型別是xhtml 1.0和html5

    • xhtml 1.0：是html5之前的一個常用的版本，目前許多網站仍然使用此版本。此版本文件用sublime text建立方法： html:xt + tab,文件示例：

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> xhtml 1.0 文件型別 </title>
</head>
<body>

</body>
</html>

    • html5：pc端可以使用xhtml 1.0，也可以使用html5，html5是向下相容的,此版本文件用sublime text建立方法： html:5 + tab 或者 ! + tab,文件示例：

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> html5文件型別 </title>
</head>
<body>

</body>
</html>

    • 兩種文件的區別：1、文件宣告和編碼宣告；2、html5新增了標籤元素以及元素屬性

  • 2.4、html註釋：
    html文件程式碼中可以插入註釋，註釋是對程式碼的說明和解釋，註釋的內容不會顯示在頁面上，html程式碼中插入註釋的方法是：

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

三、html 標題標籤、段落標籤、換行標籤 與 字元實體

  • 3.1、html標題標籤
    通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤可以在網頁上定義6種級別的標題。6種級別的標題表示文件的6級目錄層級關係，比如說： <h1>用作主標題，其後是 <h2>，再其次是 <h3>，以此類推。搜尋引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。如下：

    <h1>這是一級標題</h1>    
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

  • 3.2、html 段落標籤：<p>段落內容</p>
    <p>標籤定義一個文字段落，一個段落含有預設的上下間距，段落之間會用這種預設間距隔開，不純淨，帶樣式，多個<p>標籤之間有空行，程式碼如下：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html段落標籤</title>
</head>
<body>
<p>夜，結束了一天的喧囂後安靜下來，伴隨著遠處路燈那微弱的光。風，毫無預兆地席捲整片曠野，撩動人的思緒萬千。
  星，遙遙地掛在天空之中，閃爍著它那微微星光，不如陽光般燦爛卻如花兒般如痴如醉。
</p>
<p>欲將沉醉換悲涼，清歌莫斷腸。這混亂的塵世，究竟充斥了多少絕望和悲傷。你想去做一個勇敢的男子，為愛，為信仰，轟轟烈烈的奮鬥一場。
  你周身充斥著無人可比的靈氣和光芒。你有著與偉人比肩的才氣和名聲，你是那樣高傲孤潔的男子。你的一寸狂心未說，已經幾度黃昏雨。
</p>
</body>
</html>

  • 3.3、html換行標籤: <br/>
    程式碼中成段的文字，直接在程式碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在程式碼的段落中插入 <br /> 來強制換行，程式碼如下：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html段落標籤</title>
</head>
<body>
<p>夜，結束了一天的喧囂後安靜下來，伴隨著遠處路燈那微弱的光。<br/>風，毫無預兆地席捲整片曠野，撩動人的思緒萬千。<br/>
  星，遙遙地掛在天空之中，閃爍著它那微微星光，不如陽光般燦爛卻如花兒般如痴如醉。
</p>
<p>欲將沉醉換悲涼，清歌莫斷腸。這混亂的塵世，究竟充斥了多少絕望和悲傷。<br/>你想去做一個勇敢的男子，為愛，為信仰，轟轟烈烈的奮鬥一場。<br/>
  你周身充斥著無人可比的靈氣和光芒。你有著與偉人比肩的才氣和名聲，你是那樣高傲孤潔的男子。你的一寸狂心未說，已經幾度黃昏雨。
</p>
</body>
</html>

  • 3.4、html字元實體：&nbsp;
    程式碼中成段的文字，如果文字間想空多個空格，在程式碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字元實體,程式碼如下：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html段落標籤</title>
</head>
<body>
<p>夜，結束了一天的喧囂後安靜下來，伴隨著遠處路燈那微弱的光。<br/>風，毫無預兆地席捲整片曠野，撩動人的思緒萬千。<br/>&nbsp;&nbsp;
 星，遙遙地掛在天空之中，閃爍著它那微微星光，不如陽光般燦爛卻如花兒般如痴如醉。
</p>
</body>
</html>

    在網頁上顯示 “<” 和 “>” 會誤認為是標籤，想在網頁上顯示“<”和“>”可以使用它們的字元實體，比如：“<” 和 “>” 的字元實體為 &lt; 和 &gt;

    <!-- “<” 和 “>” 的字元實體為 &lt; 和 &gt;  -->
<p>
   9 &lt; 8 <br>
   2 &gt; 7
</p>

四、html 塊標籤、含樣式的標籤、語義化的標籤

  • 4.1、html 塊標籤

    • <div></div> 標籤 塊元素，表示一塊內容，沒有具體的語義。純淨的，不帶樣式，可以巢狀自己，也可以巢狀其他的標籤，如：<p> 標籤

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塊標籤、含樣式的標籤</title>
</head>
<body>
<div>
<div>我是div</div>
<p>欲將沉醉換悲涼，清歌莫斷腸。這混亂的塵世，究竟充斥了多少絕望和悲傷。</p>
</div>

</body>
</html>

    • <span></span> 標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。

  • 4.2、含樣式和語義的標籤

    • <em> 標籤 行內元素，表示語氣中的強調詞

      <p>欲將沉醉換悲涼，<em>清歌莫斷腸</em>。</p>

    • <i> 標籤 行內元素，表示專業詞彙

      <p>欲將沉醉換悲涼，<i>清歌莫斷腸</i>。</p>

    <em> 標籤與<i> 標籤的區別是一個是強調詞，一個是專業詞彙，都會使字型傾斜

    • <b> 標籤 行內元素，表示文件中的關鍵字或者產品名,字型加粗

      <p>欲將沉醉換悲涼，<b>清歌莫斷腸</b>。</p>

    • <strong> 標籤 行內元素，表示非常重要的內容

      <strong>欲將沉醉換悲涼，清歌莫斷腸。</strong>

  • 4.3、語義化的標籤
    語義化的標籤，就是在佈局的時候多使用有語義的標籤，搜尋引擎在爬網的時候能認識這些標籤，理解文件的結構，方便網站的收錄。比如：h1 標籤是表示標題，p 標籤是表示段落，ul、li 標籤是表示列表，a標籤表示連結，dl、dt、dd 表示定義列表等，語義化的標籤不多。

五、html 影像標籤、絕對路徑和相對路徑

  • 5.1、html 影像標籤
    <img> 標籤可以在網頁上插入一張圖片，它是獨立使用的標籤，它的常用屬性有：

    • src 屬性 定義圖片的引用地址

    • alt 屬性 定義圖片載入失敗時顯示的文字，搜尋引擎會使用這個文字收錄圖片、盲人讀屏軟體會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。

      <img src="圖片的名字.jpg" alt="圖片">
      1728484-c0cdf81373ebf640.jpg
      `alt` 屬性 定義圖片載入失敗時顯示的文字
  • 5.2、絕對路徑 和 相對路徑
    像網頁上插入圖片這種外部檔案，需要定義檔案的引用地址，引用外部檔案還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。
    • 絕對地址：相對於磁碟的位置去定位檔案的地址
    • 相對地址：相對於引用檔案本身去定位被引用的檔案地址

    提示：絕對地址在整體檔案遷移時會因為磁碟和頂層目錄的改變而找不到檔案，相對路徑就沒有這個問題。相對路徑的定義技巧：

    • “ ./ ” 表示當前檔案所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
    • “ ../ ” 表示當前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images資料夾中的 pic.jpg 的圖片。

六、html 連結標籤

  • <a> 標籤可以在網頁上定義一個連結地址，它的常用屬性有：

    • href 屬性 定義跳轉的地址

      <a href="https://www.baidu.com">百度</a>

      表示連結到百度頁面，把當前的頁面替換掉

    • title 屬性 定義滑鼠懸停時彈出的提示文字框

      <a href="https://www.baidu.com" title="跳轉到百度">百度</a>
      1728484-9630727381a1d5eb.png
      `title` 屬性 定義滑鼠懸停時彈出的提示文字框

    • target 屬性 定義連結視窗開啟的位置

      • target="_self" 預設值，新頁面替換原來的頁面，在原來位置開啟

        <a href="https://www.baidu.com" title="跳轉到百度" target="_self">百度</a>

      • target="_blank" 新頁面會在新開的一個瀏覽器視窗開啟

        <a href="https://www.baidu.com" title="跳轉到百度" target="_blank">百度</a>

提示：<a href="#"></a>: # 表示連結到頁面頂部,當一個頁面內容很多的時候，你可以使用 # 回到頂部

七、html 列表

  • 7.1、有序列表
    在網頁上定義一個有編號的內容列表可以用<ol>、<li> 配合使用來實現，程式碼如下：在網頁上生成的列表，每條專案上會按1、2、3編號，有序列表在實際開發中較少使用。

    <ol>
    <li>列表內容一</li>
    <li>列表內容二</li>
    <li>列表內容三</li>
</ol>
    1728484-96126b6366163115.jpg
    有序列表

  • 7.2、無序列表
    在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，程式碼如下：

    <ul>
    <li><a href="#">娛樂標題一</a></li>
    <li><a href="#">娛樂標題二</a></li>
    <li><a href="#">娛樂標題三</a></li>
</ul>
    1728484-cabae8a0650ed9b4.jpg
    無序列表

    在網頁上生成的列表，每條專案上會有一個小圖示，這個小圖示在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉預設的小圖示，如果需要圖示，可以用樣式自定義圖示，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。可以把娛樂標題換成 <img src="圖片的名字.jpg" alt="圖片">,從而點選圖片進行跳轉

  • 7.3、定義列表
    定義列表通常用於術語的定義。<dl> 標籤表示列表的整體。<dt> 標籤定義術語的題目。<dd> 標籤是術語的解釋。一個 <dl> 中可以有多個題目和解釋，程式碼如下：

    <h3>前端三大塊</h3>
<dl>
   <dt>html</dt>
   <dd>負責頁面的結構</dd>

   <dt>css</dt>
   <dd>負責頁面的表現</dd>

   <dt>javascript</dt>
   <dd>負責頁面的行為</dd>
</dl>
    1728484-e2212d416cb67592.jpg
    定義列表

提示：<dt>標籤 與 <dd>標籤 一個等級

相關文章