整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML學習教程5-頭元素 腳本 鏈接

          TML<head>元素

          <head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。

          可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

          HTML <title> 元素

          <title> 標簽定義了不同文檔的標題。

          <title> 在 HTML/XHTML 文檔中是必須的。

          <title> 元素:

          • 定義了瀏覽器工具欄的標題
          • 當網頁添加到收藏夾時,顯示在收藏夾中的標題
          • 顯示在搜索引擎結果頁面的標題

          一個簡單的 HTML 文檔:

          <!DOCTYPE html>
          <html>
          <head> 
          <meta charset="utf-8"> 
          <title>文檔標題</title>
          </head>
           
          <body>
          文檔內容......
          </body>
           
          </html>

          HTML <base> 元素

          <base> 標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

          <head>
          <link rel="stylesheet" type="text/css" href="mystyle.css">
          </head>

          HTML <style> 元素

          <style> 標簽定義了HTML文檔的樣式文件引用地址.

          在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:

          <head>
          <style type="text/css">
          body {background-color:yellow}
          p {color:blue}
          </style>
          </head>

          HTML <meta> 元素

          meta標簽描述了一些基本的元數據。

          <meta> 標簽提供了元數據.元數據也不顯示在頁面上,但會被瀏覽器解析。

          META 元素通常用于指定網頁的描述,關鍵詞,文件的最后修改時間,作者,和其他元數據。

          元數據可以使用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他Web服務。

          <meta> 一般放置于 <head> 區域

          <meta> 標簽- 使用實例

          為搜索引擎定義關鍵詞:

          <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

          為網頁定義描述內容:

          <meta name="description" content="免費 Web & 編程 教程">

          定義網頁作者:

          <meta name="author" content="tom">

          每30秒鐘刷新當前頁面:

          <meta http-equiv="refresh" content="30">

          HTML <script> 元素

          <script>標簽用于加載腳本文件或定義客戶端腳本,如: JavaScript。

          <script> 元素既可包含腳本語句,也可通過 src 屬性指向外部腳本文件。

          JavaScript 最常用于圖片操作、表單驗證以及內容動態更新。

          下面的腳本會向瀏覽器輸出"Hello World!":

          <!DOCTYPE html>
          <html>
          <head> 
          <meta charset="utf-8"> 
          <title>菜鳥教程(runoob.com)</title> 
          </head>
          <body>
          <script>
          document.write("Hello World!")
          </script> 
          </body>
          </html>

          HTML<noscript> 標簽

          <noscript> 標簽提供無法使用腳本時的替代內容,比方在瀏覽器禁用腳本時,或瀏覽器不支持客戶端腳本時。

          <noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。

          只有在瀏覽器不支持腳本或者禁用腳本時,才會顯示 <noscript> 元素中的內容:

          <!DOCTYPE html>
          <html>
          <head> 
          <meta charset="utf-8"> 
          <title>文檔標題</title> 
          </head> 
          <body>
          
          <script>
          document.write("Hello World!")
          document.write("<h1>這是一個標題</h1>");
          document.write("<p>這是一個段落。</p>");
          </script>
          <noscript>抱歉,你的瀏覽器不支持 JavaScript!</noscript>
          
          <p>不支持 JavaScript 的瀏覽器會使用 <noscript> 元素中定義的內容(文本)來替代。</p>
           
          </body>
          </html>

          JavaScript事件響應:

          <!DOCTYPE html>
          <html>
          <head> 
          <meta charset="utf-8"> 
          <title>文檔標題</title> 
          </head>
          <body>
          
          <h1>我的第一個 JavaScript </h1>
          
          <p id="demo">
          JavaScript 可以觸發事件,就像按鈕點擊。</p>
          
          <script>
          function myFunction()
          {
          	document.getElementById("demo").innerHTML="Hello JavaScript!";
          }
          </script>
          
          <button type="button" onclick="myFunction()">點我</button>
          
          </body>
          </html>

          HTML 腳本標簽

          標簽

          描述

          <script>

          定義了客戶端腳本

          <noscript>

          定義了不支持腳本瀏覽器輸出的文本

          HTML鏈接

          HTML使用標簽 <a>來設置超文本鏈接。

          超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

          當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。

          在標簽<a> 中使用了href屬性來描述鏈接的地址。

          默認情況下,鏈接將以以下形式出現在瀏覽器中:

          • 一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
          • 訪問過的鏈接顯示為紫色并帶有下劃線。
          • 點擊鏈接時,鏈接顯示為紅色并帶有下劃線。

          注意:如果為這些超鏈接設置了 CSS 樣式,展示樣式會根據 CSS 的設定而顯示。

          <!DOCTYPE html>
          <html>
          <head> 
          <meta charset="utf-8"> 
          <title>文檔標題</title> 
          </head>
          <body>
          <p><a href="//www.microsoft.com/">本文本</a> 是一個指向萬維網上的頁面的鏈接。</p>
          </body>
          </html>

          HTML head 元素

          標簽

          描述

          <head>

          定義了文檔的信息

          <title>

          定義了文檔的標題

          <base>

          定義了頁面鏈接標簽的默認鏈接地址

          <link>

          定義了一個文檔和外部資源之間的關系

          <meta>

          定義了HTML文檔中的元數據

          <script>

          定義了客戶端的腳本文件

          <style>

          定義了HTML文檔的樣式文件

          :HTML描述

          1、HTML:Hyper Text Markup Language :超文本標記語言

          超文本:

          功能比普通文本更加強大

          標記語言:

          一套標記標簽對內容進行描述的語言,它不是編程語言

          2、HTML 使用標記標簽來描述網頁

          二:XHTML描述

          1、XHTML (The Extensible Markup Language)可擴展標識語言

          2、XHTML所有標簽都必須小寫

          3、XHTML標簽必須成雙成對

          4、XHTML標簽順序必須正確

          三:語法和規范

          1、HTML 文件都是以.html 或者.htm 結尾的,建議使用.html 結尾!

          2、Html 文件分為頭部分<head></head>和體部分<body></body>

          3、標簽對中的第一個標簽是開始標簽,第二個標簽是結束標簽

          4、開始和結束標簽也被稱為開放標簽和閉合標簽

          5、Html 標簽都是由開始標簽和結束標簽組成(<hr />)

          6、Html 標簽忽略大小寫,建議使用小寫

          四:HTML 標簽

          1、標題標簽

          2、水平線標簽

          3、段落標簽

          4、字體標簽

          5、文本標簽

          6、定義文檔類型

          1、<!DOCTYPE> 聲明位于文檔中的最前面的位置,處于 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范

          2、注釋:<!DOCTYPE> 標簽沒有結束標簽!

          7、meta標簽

          ①:元素可提供有關頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關鍵詞

          ②: 標簽位于文檔的頭部,不包含任何內容

          8、title標簽

          1、元素可定義文檔的標題

          2、瀏覽器會以特殊的方式來使用標題,并且通常把它放置在瀏覽器窗口的標題欄或狀態欄上

          本篇文章開始成哥將帶大家一起學習一下前端的基礎知識,我們先講解前端的基礎HTML與CSS,這個講完我們將講解VUE前端框架,最后我們再講講Ant Design的VUE前端框架,從而形成前端一個系列的教程,下面就開始我們今天的內容吧!

          01 HTML簡介

          HTML的英文全稱是 Hyper Text Markup Language,即超文本標記語言。

          HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言,它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔,它能獨立于各種操作系統平臺(如UNIX, Windows等)。

          使用HTML語言,將所需要表達的信息按某種規則寫成HTML文件,通過專用的瀏覽器來識別,并將這些HTML文件"翻譯"成可以識別的信息,即現在所見到的網頁。HTML 不需要編譯,可以直接由瀏覽器執行,非常方便開發時調試。

          02 HTML實例

          我們現在創建一個典型的HTML結構具體如下:

          1. <!DOCTYPE html>  
          2. <html lang="ch">  
          3. <head>  
          4.     <meta charset="UTF-8">  
          5.     <title>HTML實例</title>  
          6. </head>  
          7. <body>  
          8.   <h1>我是標題</h1>  
          9.   <p>我是段落。</p>  
          10. </body>  
          11. </html> 

          如上頁面中各個標簽代表的意思如下:

          1)<!DOCTYPE html>是文檔聲明頭,它告訴游覽器當前處理的內容是HTML頁面

          2)html是 HTML 頁面的根元素,用于標識HTML內容的開始與結束

          3) head是HTML頁面的頭,包含了文檔的一些屬性。其中meta是元數據這邊charset="UTF-8"標識當前頁面編碼格式為UTF-8,title為文檔的標題

          4)body是HTML主體也是游覽器在顯示頁面時的內容。h1是body內容中定義的標題,p是body內容中定義的段落

          我們現在通過游覽器打開編寫的HTML內容,具體內容如下

          在HTML中的內容可以通過以下格式進行內容注釋具體如下:

          03 HTML標簽、元素、屬性、實體編碼與事件

          (1)HTML標簽

          HTML 標簽是 HTML 語言中最基本的單位,HTML 標簽是 HTML(標準通用標記語言下的一個應用)最重要的組成部分。HTML標簽具有如下特點:

          1)標簽一般是成對出現的 如:<div></div>;也有空標簽 如:<br />

          2)標簽由<>包括,分為開始標簽(開放標簽)和結束標簽(閉合標簽)

          3)標簽不區分大小寫,根據W3C(萬維網聯盟)推薦,統一使用小寫字母

          標簽的示列如下:

          標簽按照<>的對數可以分為如下兩類分別為雙標簽與單標簽,下面我們具體來了解一下這兩類標簽。

          1)雙標簽

          雙標簽指由開始和結束兩個標記符組成的標記。其基本語法格式如下:

          1. <標記名></標記名>

          常見的雙標簽有如下幾種:

          1. <html></html>  
          2. <head></head>  
          3. <title></title>  
          4. <body></body>  
          5. <h1></h1>  
          6. <p></p>  
          7.   
          8. <!-- 塊級元素 -->  
          9. <div></div>  
          10. <span></span>  
          11.   
          12. <!-- 超鏈接元素 -->  
          13. <a></a>  
          14.   
          15. <!-- 列表元素 -->  
          16. <ul></ul>  

          2)單標簽

          單標簽是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下:

          1. <標記名/>

          常見的單標簽有如下幾種:

          1. <!-- 換行標簽 -->  
          2. <br />  
          3.   
          4. <!-- 分隔線標簽 -->  
          5. <hr />  
          6.   
          7. <!-- 圖片標簽 -->  
          8. <img />  

          (2)HTML元素

          HTML 元素指的是從開始標簽(start tag)到結束標簽(end tag)的所有代碼,如<p>段落</p>。元素可以進行嵌套具體如下:

          1. <div>  
          2.   <h1>我是標題</h1>  
          3.     
          4.   <div>  
          5.     <p>元素嵌套示列</p>  
          6.   </div>  
          7.   
          8. </div>  

          (3)HTML屬性

          屬性為 HTML 元素提供附加信息,可分為全局屬性(即所有元素均可使用的屬性,如id,class等)和元素屬性(部分元素可使用的屬性,例如<a href="http://www.baidu.com">搜索</a>),屬性通常由屬性名="屬性值"構成,存在于開始標簽中,示列如下:

          (4)HTML實體編碼

          對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應的"實體編碼",如< <> >空格 。

          (5)HTML事件

          通過某個動作,執行某個操作/JS腳本的能力。如點擊按鈕,改變顏色,事件可以分為多類比多鼠標點擊、鼠標聚焦等,下面我看看看一個事件編寫示列:

          04 HTML常用標簽示列

          (1)h標簽

          h 標簽有六種分別為h1、h2、h3、h4、h5、h6,這六個分別對應六種樣式的標題,我們現在來編寫這六種h標簽,演示代碼如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   <h1>H1標題</h1>  
          9.   <h2>H2標題</h2>  
          10.   <h3>H3標題</h3>  
          11.   <h4>H4標題</h4>  
          12.   <h5>H5標題</h5>  
          13.   <h6>H6標題</h6>  
          14. </body>  
          15. </html>  

          我們來運行該HTML文件,來看看這六種h標簽有什么樣式差異,從示列中可以發現h1標簽字體最大然后依次減小。

          (2)p標簽

          p 標簽是文本標簽,現在我們來編寫一段含有p標簽的html文本,然后運行了看看p標簽的樣式具體操作如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <h4>標題一</h4>  
          10.   <p>我是段落1</p>  
          11.   
          12.   <h4>標題二</h4>  
          13.   <p>我是段落2</p>  
          14.   
          15. </body>  
          16. </html>  

          (3)a標簽

          a標簽是超鏈接標簽,點擊a標簽可以跳轉到其設置的網站,具體示列如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   <div>  
          9.     <a href="http://www.baidu.com">點我跳轉到百度頁面</a>  
          10.   </div>  
          11.   
          12.   <div>  
          13.     <a href="http://www.qq.com">點我跳轉到騰訊頁面</a>  
          14.   </div>  
          15.   
          16. </body>  
          17. </html>  

          (4)div標簽

          div標簽是一個塊級元素,它可用于組合其他 HTML 元素的容器??梢园裠iv看成一個盒子,我們可以為這個盒子設置各種各樣屬性(如高度、寬度、顏色等),下面我們編寫一個div標簽并設置其長為300px,寬度為200px,同時給其一個背景顏色,具體如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
          10.   
          11. </body>  
          12. </html>  

          (5)列表標簽

          列表作為網頁設計的重要內容之一,能夠用來制作導航欄和新聞列表等。HTML 列表分為:有序列表(ol),無序列表(ul)以及自定義列表(dl)

          1)有序列表ul

          有序列表的順序是有序的,默認情況下會以數字來排列,但也可以通過設置其type屬性以大寫字母、小寫字母、大寫羅馬數字、小寫羅馬數字來排列,我們現在來寫一個示列,具體如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <!--  有序列表,以默認方式數字排列 -->  
          10.   <p>有序列表默認方式數字排列</p>  
          11.   <ol>  
          12.     <li>列表1</li>  
          13.     <li>列表2</li>  
          14.     <li>列表3</li>  
          15.   </ol>  
          16.   
          17.   <!--  有序列表,以大寫字母排列 -->  
          18.   <p>有序列表大寫字母排列</p>  
          19.   <ol type="A">  
          20.     <li>列表1</li>  
          21.     <li>列表2</li>  
          22.     <li>列表3</li>  
          23.   </ol>  
          24.   
          25. </body>  
          26. </html>  

          2)無序列表ol

          無序列表的順序是無序的,不會按照某個值來排序,無序列表中每個列表前默認都有一個實心圓,也可以通過type屬性來設置成空心圓或者小方塊,無序列表示列如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <p>無序列表默認type樣式</p>  
          10.   <ul>  
          11.     <li>列表1</li>  
          12.     <li>列表2</li>  
          13.     <li>列表3</li>  
          14.   </ul>  
          15.   
          16.   <p>無序列表方塊樣式</p>  
          17.   <ul type="square">  
          18.     <li>列表1</li>  
          19.     <li>列表2</li>  
          20.     <li>列表3</li>  
          21.   </ul>  
          22.   
          23. </body>  
          24. </html>  

          3)自定義列表dl

          自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始,其列表內容是以<dd> 開始,自定義列表前面沒有任何標識,其具體示例如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <p>自定義列表</p>  
          10.   <dl>  
          11.     <dt>東岳</dt>  
          12.     <dd>泰山</dd>  
          13.   
          14.     <dt>南岳</dt>  
          15.     <dd>衡山</dd>  
          16.   
          17.     <dt>西岳</dt>  
          18.     <dd>華山</dd>  
          19.   
          20.     <dt>北岳</dt>  
          21.     <dd>恒山</dd>  
          22.   
          23.     <dt>中岳</dt>  
          24.     <dd>嵩山</dd>  
          25.   </dl>  
          26.   
          27. </body>  
          28. </html>  

          (6)其它標簽

          1)換行標簽<br/>

          在HTML中如果想給內容進行換行可以使用換行標簽,具體示列如下:

          2)分割線標簽<hr/>

          <hr/> 標簽用于在 HTML創建一條分割線,具體示列如下:

          1. <!DOCTYPE html>  
          2. <html>  
          3. <head>  
          4.   <title>HTML基礎教程</title>  
          5.   <meta charset="utf-8" />  
          6. </head>  
          7. <body>  
          8.   
          9.   <p>我是張三</p>  
          10.   <!-- 分割線標簽 -->  
          11.   <hr/>  
          12.   <p>我是李四</p>  
          13. </body>  
          14. </html>  

          05 總結

          至此我們《HTML基礎教程上篇》就講完了,下篇內容主要講解HTML樣式、HTML表單、Tabel等,敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦!

          -END-

          @IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇,和你一同成長。

          文章推薦:

          • 一文秒懂Web框架基礎之WSGI協議
          • IT工程師都需要掌握的容器技術之掃盲篇

          主站蜘蛛池模板: 亚洲国产成人久久综合一区| 亚洲一区二区三区无码中文字幕| 精品国产香蕉伊思人在线在线亚洲一区二区 | 精品国产a∨无码一区二区三区| 国产高清精品一区| 无码视频一区二区三区| 无码乱人伦一区二区亚洲| 伦理一区二区三区| 丰满岳乱妇一区二区三区| 国产一区在线视频观看| 日韩一区二区在线免费观看| 欲色aV无码一区二区人妻| 亚洲av无码一区二区三区天堂 | 麻豆一区二区三区蜜桃免费| 日本福利一区二区| 极品少妇一区二区三区四区| 日本一区频道在线视频| 亚洲一区二区三区91| 亚洲Av无码一区二区二三区| 中文字幕在线一区二区在线| 久久免费区一区二区三波多野| 久久久久久免费一区二区三区| 国产剧情国产精品一区| 久久一区不卡中文字幕| 精品一区二区三区四区在线播放 | 一区二区三区在线免费看| 无码人妻精品一区二区三区99仓本| 日韩精品人妻一区二区中文八零| 日韩精品人妻一区二区中文八零| 日本一区二区免费看| 精品无码一区二区三区爱欲九九 | 日韩一区二区在线播放| 91精品乱码一区二区三区| 无码人妻精品一区二区三区99性 | 国产成人久久精品麻豆一区| 国产一区二区在线看| 麻豆aⅴ精品无码一区二区| 亚洲高清一区二区三区电影 | 国产午夜精品片一区二区三区| 成人毛片一区二区| 精品国产AⅤ一区二区三区4区|