前端開發核心知識之-html


html概述和結構

1. html概述

HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標簽,是一種用來制作網頁的語言,這種語言由一個個的標簽組成,用這種語言制作的文件保存的是一個文本文件,文件的擴展名為html或者htm,一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容將文件渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。

2. html基本結構

一個html的基本結構如下:

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
          網頁顯示內容
    </body>
</html>

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

html文檔類型

目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
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新增了標簽元素以及元素屬性

html注釋
html文檔代碼中可以插入注釋,注釋是對代碼的說明和解釋,注釋的內容不會顯示在頁面上,html代碼中插入注釋的方法如下,快捷鍵是ctrl + /

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

html常用標簽

1. html標題標簽

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

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

2. html段落標簽

<p>標簽定義一個文本段落,一個段落含有默認的上下間距,段落之間會用這種默認間距隔開,代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超
    文本指的是超鏈接,標記指的是標簽,是一種用來制作網頁的語言,這種語言由一個個的
    標簽組成,用這種語言制作的文件保存的是一個文本文件,文件的擴展名為html或者htm。
    </p>

    <p>一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方
    式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容將文件渲染成網頁,顯示的網
    頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
</body>
</html>

3. html換行標簽

代碼中成段的文字,直接在代碼中回車換行,在渲染成網頁時候不認這種換行,如果真想換行,可以在代碼的段落中插入<br />來強制換行,代碼如下

<p>
一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用<br />
文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容將文件<br />
渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
</p>

4. html字符實體

代碼中成段的文字,如果文字間想空多個空格,在代碼中空多個空格,在渲染成網頁時只會顯示一個空格,如果想顯示多個空格,可以使用空格的字符實體,代碼如下:

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

在網頁上顯示 “<” 和 “>” 會誤認為是標簽,想在網頁上顯示“<”和“>”可以使用它們的字符實體,比如:

<!-- “<” 和 “>” 的字符實體為 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

5. html塊標簽

  1. <div> 標簽 塊元素,表示一塊內容,沒有具體的語義。
  2. <span> 標簽 行內元素,表示一行中的一小段內容,沒有具體的語義。

6. html含樣式的標簽

  1. <em> 標簽 行內元素,表示語氣中的強調詞
  2. <i> 標簽 行內元素,表示專業詞匯
  3. <b> 標簽 行內元素,表示文檔中的關鍵字或者產品名
  4. <strong> 標簽 行內元素,表示非常重要的內容

7. html語義化的標簽

語義化的標簽,就是在布局的時候多使用有語義的標簽,搜索引擎在爬網的時候能認識這些標簽,理解文檔的結構,方便網站的收錄。比如:h1標簽是表示標題,p標簽是表示段落,ul、li標簽是表示列表,a標簽表示鏈接,dl、dt、dd表示定義列表等,語義化的標簽不多。

8. html圖像標簽

<img>標簽可以在網頁上插入一張圖片,它是獨立使用的標簽,它的常用屬性有:

  • src屬性 定義圖片的引用地址
  • alt屬性 定義圖片加載失敗時顯示的文字,搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片,所以此屬性非常重要。
<img src="images/pic.jpg" alt="產品圖片" />

8. html絕對路徑和相對路徑

像網頁上插入圖片這種外部文件,需要定義文件的引用地址,引用外部文件還包括引用外部樣式表,javascript等等,引用地址分為絕對地址和相對地址。

  • 絕對地址:相對於磁盤的位置去定位文件的地址
  • 相對地址:相對於引用文件本身去定位被引用的文件地址
    絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件,相對路徑就沒有這個問題。相對路徑的定義技巧:
  • “ ./ ” 表示當前文件所在目錄下,比如:“./pic.jpg” 表示當前目錄下的pic.jpg的圖片,這個使用時可以省略。
  • “ ../ ” 表示當前文件所在目錄下的上一級目錄,比如:“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

9. html鏈接標簽

<a>標簽可以在網頁上定義一個鏈接地址,它的常用屬性有:

  • href屬性 定義跳轉的地址
  • title屬性 定義鼠標懸停時彈出的提示文字框
  • target屬性 定義鏈接窗口打開的位置
    • target="_self" 缺省值,新頁面替換原來的頁面,在原來位置打開
    • target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
<a href="#"></a> <!--  # 表示鏈接到頁面頂部   -->
<a href="http://www.baidu.com/" title="跳轉到百度首頁">百度</a>
<a href="2.html" target="_blank">測試頁面2</a>

10. html列表

有序列表

在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現,代碼如下:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在網頁上生成的列表,每條項目上會按1、2、3編號,有序列表在實際開發中較少使用。

無序列表

在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現,代碼如下:

<ul>
    <li><a href="#">新聞標題一</a></li>
    <li><a href="#">新聞標題二</a></li>
    <li><a href="#">新聞標題三</a></li>
</ul>

在網頁上生成的列表,每條項目上會有一個小圖標,這個小圖標在不同瀏覽器上顯示效果不同,所以一般會用樣式去掉默認的小圖標,如果需要圖標,可以用樣式自定義圖標,從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。

定義列表

定義列表通常用於術語的定義。<dl>標簽表示列表的整體。<dt>標簽定義術語的題目。<dd>標簽是術語的解釋。一個<dl>中可以有多個題目和解釋,代碼如下:

<dl>
    <dt>html</dt>
    <dd>負責頁面的結構</dd>

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

    <dt>javascript</dt>
    <dd>負責頁面的行為</dd>

</dl>

11.html表單

表單用於搜集不同類型的用戶輸入,表單由不同類型的標簽組成,相關標簽及屬性用法如下:

  1. <form>標簽 定義整體的表單區域
    • action屬性 定義表單數據提交地址
    • method屬性定義表單提交的方式,一般有“get”方式和“post”方式
  2. <label>標簽為表單元素定義文字標注
  3. <input>標簽定義通用的表單元素
    • type屬性
      • type="text" 定義單行文本輸入框
      • type="password" 定義密碼輸入框
      • type="radio" 定義單選框
      • type="checkbox" 定義復選框
      • type="file" 定義上傳文件
      • type="submit" 定義提交按鈕
      • type="reset" 定義重置按鈕
      • type="button" 定義一個普通按鈕
      • type="image" 定義圖片作為提交按鈕,用src屬性定義圖片地址
      • type="hidden" 定義一個隱藏的表單域,用來存儲值
    • value屬性 定義表單元素的值
    • name屬性 定義表單元素的名稱,此名稱是提交數據時的鍵名
  4. <textarea>標簽 定義多行文本輸入框
  5. <select>標簽 定義下拉表單元素
  6. <option>標簽 與<select>標簽配合,定義下拉表單元素中的選項

注冊表單實例:

<form action="http://www..." method="get">
<p>
<label>姓名:</label><input type="text" name="username" />
</p>
<p>
<label>密碼:</label><input type="password" name="password" />
</p>
<p>
<label>性別:</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>愛好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>
<p>
<label>個人描述:</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫:</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">廣州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input類型為submit定義提交按鈕  
     還可以用圖片控件代替submit按鈕提交,一般會導致提交兩次,不建議使用。如:
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>

12. html表格

  1. <table>標簽:聲明一個表格,它的常用屬性如下:

    • border屬性 定義表格的邊框,設置值是數值
    • cellpadding屬性 定義單元格內容與邊框的距離,設置值是數值
    • cellspacing屬性 定義單元格與單元格之間的距離,設置值是數值
    • align屬性 設置整體表格相對於瀏覽器窗口的水平對齊方式,設置值有:left | center | right
  2. <tr>標簽:定義表格中的一行

  3. <td>和<th>標簽:定義一行中的一個單元格,td代表普通單元格,th表示表頭單元格,它們的常用屬性如下:

    • align 設置單元格中內容的水平對齊方式,設置值有:left | center | right
    • valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
    • colspan 設置單元格水平合並,設置值是數值
    • rowspan 設置單元格垂直合並,設置值是數值


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM