溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Web中HTML基礎是怎樣的

發(fā)布時間：2021-10-12 16:09:02 來源：億速云 閱讀：106 作者：柒染 欄目：互聯(lián)網(wǎng)科技

Web中HTML基礎是怎樣的，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

內(nèi)容提要：

  • HTML文檔的基本結構

  • 標記(標簽)類型、標記(標簽)語法

  • body標記的屬性的設置方法

  • 給網(wǎng)頁添加注釋

  • meta元信息的作用

  • HTML文檔類型。<!doctype html>

html文件由頭部head和主體body兩部分組成：

  • 在頭部<head>標記中，可以定義標題、樣式等，頭部里放的是網(wǎng)頁元信息，不顯示在網(wǎng)頁內(nèi)，元信息是關于網(wǎng)頁的基本描述。

    CSS代碼和JavaScript代碼可以放在頭部，另外JavaScript代碼也可以放在body部分。

  • 在主體<body>標記中，可定義段落、標題字、超鏈接、腳本、表格、表單等元素，主體內(nèi)容是網(wǎng)頁要顯示的信息。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>歡迎大家學習web前端技術</p>
</body>
</html>


頭部<head>

  • HTML文檔的頭部標記主要包含頁面標題標記、元信息標記、樣式(CSS)標記、腳本(JavaScript)標記、鏈接標記等。頭部標記所包含的信息是說明性信息或引入性信息，一般不會顯示在網(wǎng)頁上。

  • 頁面標題<title> </title>

    • 基本語法

      <title>標題信息顯示在瀏覽器的標題欄上</title>

    • 語法說明：title標記是雙標記，<title>是開始標記，</title>是結束標記，兩者之間的內(nèi)容為顯示在瀏覽器的標題欄上的信息。

  • 元信息<meta>

    • http-equiv屬性用于提供HTTP協(xié)議的響應頭報文，以鍵值對的形式，http-equiv屬性的值所描述的內(nèi)容(值)通過content屬性表示，通常為網(wǎng)頁加載前提供給瀏覽器等設備使用。

    • 其中最重要的是content-type charset提供編碼信息，refresh刷新與跳轉頁面，no-cache頁面緩存，expires網(wǎng)頁緩存過期時間。

    • name屬性用于描述網(wǎng)頁，以鍵值對的形式，便于搜索引擎查找、分類。

    • 其中最重要的是description、keywords和robots

    • <meta name="keywords" content="信息參數(shù)"/>

    • <meta name="description" content="信息參數(shù)"/>

    • <meta name="robots" content="信息參數(shù)"/>

    • <meta name="generator" content="信息參數(shù)"/>

    • <meta name="author" content="信息參數(shù)"/>

    • <meta http-equiv="content-type" content="text/html;charset=信息參數(shù)"/>

    • <meta http-equiv="refresh" content="時間;url=網(wǎng)址參數(shù)">

    • META標記用來描述一個HTML網(wǎng)頁文檔的屬性，也稱為元信息(meta-information)，這些信息并不會顯示在瀏覽器的頁面中。例如：作者、日期和時間、網(wǎng)頁描述、關鍵詞、頁面刷新等。該標記位于文檔的頭部(其屬性形式是鍵值對)。

    • 基本語法

      <meta name=" " content=" ">

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

    • 屬性說明：meta屬性主要分為兩組。

    • meta標記是使用方法

    • meta標記鍵值對對應表

      屬性值描述
      contentsome_text定義與http-equiv或name屬性相關的元信息
      http-equivcontent-type內(nèi)容類型

      		expires網(wǎng)頁緩存過期時間

      		refresh刷新與跳轉(重定向)時間

      		set-cookie如果網(wǎng)頁過期，那么存盤的cookie將被刪除
      nameauthor定義網(wǎng)頁作者

      		description定義網(wǎng)頁簡短描述

      		keywords定義網(wǎng)頁關鍵字

      		generator定義用什么編輯器編寫的
      schemesome_text定義用于翻譯content屬性值的格式

    • name屬性與content屬性

    • http-equiv屬性與content屬性

主體<body>

主體body是一個Web頁面的主要部分，其設置內(nèi)容是讀者實際看到的信息，所有WWW文檔的主體部分都是由body標記定義的。在主體body標記中可以放置的是頁面中所有的內(nèi)容，如圖片、圖像、表格、文字、超鏈接等元素。

  • 基本語法

    • <body> … </body>

  • 語法說明

    • <body>是開始標記，</body>是結束標記。

    • 兩者之間所有的內(nèi)容為網(wǎng)頁上顯示的信息。

  • 案例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>簡易網(wǎng)頁設計</title>
</head>
<body text="green">
    <h4 align="center">Web前端開發(fā)技術課程簡介</h4>
    <hr color="red">


    <p>&nbsp;&nbsp;&nbsp;&nbsp;《Web前端開發(fā)技術》課程是計算機科學與技術、信息管理與信息系統(tǒng)、軟件工程
        等專業(yè)的一門基礎課程，也是其他計算機相關專業(yè)的公共基礎課程，通過對Web前端開
        發(fā)三大主流技術學習和研究，讓學生理解和掌握HTML、JavaScript、CSS等相關知識，
        通過實驗培養(yǎng)學生設計與開發(fā)Web站點的基本操作技能。
    </p>
</body>
</html>


Web中HTML基礎是怎樣的

  • 標記屬性

    • 設置body標記屬性可以改變Web頁面顯示效果。body標記主要屬性有text、bgcolor、background、link(未點擊未激活)、alink(正在激活)、vlink(已經(jīng)點擊過)、topmargin、leftmargin。

    • 基本語法

      <body leftmargin="50px" topmargin="50px"
text="#000000"  bgcolor="#339999"
link="blue" alink="white" vlink="red"
background="body_image.jpg">


    • 屬性說明

屬性值描述
text.rgb(R,G,B)，.grb(R%,G%,B%)，.#RRGGBB|#RGB，.Colorname規(guī)定文檔中所有文本的顏色。不贊成使用。請使用樣式取代它。
bgcolor同上規(guī)定文檔的背景顏色
alink同上規(guī)定文檔中活動鏈接的顏色
link同上規(guī)定文檔中未訪問鏈接的默認顏色
vlink同上規(guī)定文檔中已被訪問鏈接的顏色
backgroundURL規(guī)定文檔的背景圖像
topmargin.Pixel規(guī)定文檔中上邊距的大小
leftmargin.Pixel規(guī)定文檔中左邊距的大小

  • body標記屬性-顏色表示方法，在網(wǎng)頁設計中，HTML提供了4種顏色設置方法：

    • 使用RGB(R,G,B)，其中R、G、B是0-255的整數(shù)；

    • 使用RGB(R%,G%,B%)，其中R、G、B是0-100的整數(shù)；

    • 使用3位或6位十六進制數(shù)#RGB或#RRGGBB，R、G、B為十六進制數(shù)，取值范圍：0-F，每種顏色使用2位十六進制數(shù)表示，RR：紅色部分、GG：綠色部分、BB：藍色部分。紅色為#FF0000；#RGB可以轉換為#RRGGBB，例如紅色分別表示為#F00、#FF0000.

    • 使用顏色英文名稱，如red表示紅色、green表示綠色，blue表示藍色等。

  • body標記屬性-案例(edu_2_3_2.html)

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>body屬性應用</title>
    <meta name="Generator" content="VS Code">
    <meta name="Author" content="Windf17">
</head>

<body text="rgb(00,00,00)" bgcolor="#f0f0f0" background="" link="rgb(0%,100%,0%)" leftmargin="60px" alink="white"
    vlink="red" topmargin="60px">
    <div id="" class="">
        <p>歡迎訪問我們的站點，我們?yōu)槟峁┚W(wǎng)站地圖。</p>
        網(wǎng)站導航：
        <a href="https://www.baidu.com">百度</a>
        <a href="https://www.163.com">網(wǎng)易</a>
        <a href="https://www.sohu.com">搜狐</a>
    </div>
</body>
</html>


HTML標簽

  • 標記通常分為單標記和雙標記兩種類型，大部分是雙標記。

  • <a> <b> <br> <button> <dl> <dt> <dd> <h2>~<h7> <head> <hr> <html> <i> <iframe> <img> <input> <label> <link> <ol> <li> <p> <s> <script> <select> <option> <span> <style> <table> <thead> <th> <tr> <tbody> <td> <textarea> <title> <u> <ul> <li>

  • 單標記

    • <br>：<br>、<br/>表示換行。

    • <hr>：<hr>、<hr/>表示水平分隔線，還可以定義顏色、寬度(單位是像素)。

      <hr color="black" size="2" />


    • 單標記僅單獨使用就可以表達完整的意思。

    • 基本語法：<標記名稱>或<標記名稱/>

    • 最常用的單標記有：

  • 雙標記

    • <h4><i>這是錯誤的交叉嵌套的代碼</h4></i> ×

    • <h4><i>這是正確的交叉嵌套的代碼</i></h4> √

    • 雙標記由開始標記和結束標記兩部分組成，必須成對使用。

    • 基本語法：<標記名稱>內(nèi)容</標記名稱>

  • 屬性語法

    • 屬性應該在開始標記(首標記)內(nèi)定義，并且與標記名之間有一個空格分隔。如上述案例中hr標記名字和size屬性之間有一個空格。

    • 屬性值一般用英文雙引號" "括起來。如上述案例中size屬性值"3"和color屬性值"red"。

    • <標記名稱 屬性1="屬性值" 屬性2="屬性值" … 屬性n="屬性值n">

    • <hr size="3" color="red" align="center">

    • 基本語法

    • 語法約束

  • 屬性語法-案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>標記語法及屬性語法應用</title>
    <style type="text/css">
        h3 {
            text-align: center;
            background: #6699ff;
            padding: 20px;
        }
    </style>
</head>

<body background="" text="red">
    <h3 align="center">新&nbsp;年&nbsp;寄&nbsp;語</h3>
    <hr size="2" color="#6600ff" width="100%" />
    <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;輕輕送上我忠誠的祈求和祝愿，祈求分別的時光象流水瞬間逝去，祝愿再會時，緊握的手中滿溢友情和青春的力量。</p>
    <p align="right">&nbsp;&nbsp;&nbsp;&nbsp;有一種跌倒叫站起，有一種失落叫收獲，有一種失敗叫成功——堅強些，朋友，明天將屬于你！</p>
</body>
</html>


  • 注釋

    • <!-- 注釋信息 -->

    • <comment>注釋信息</comment>

    • 基本語法

      <comment>顯示一個段落</comment>

    • 語法說明：comment標記是成對標記，以<comment>開始，以</comment>結束。標記包圍的信息為注釋內(nèi)容，但在高版本的瀏覽器中均顯示在頁面內(nèi)，建議不使用此注釋標記。

    • HTML代碼中添加注釋的方法有2種：

HTML文檔編寫規(guī)范

  • 所有標記均以“<”開始，以“>”結束。

  • 根據(jù)標記類型，正確輸入標記，單標記最好在右尖括號前加一個斜杠“/”，如換行標記是單標記<br/>，成對標記最好同時輸入起始標記和結束標記，以免忘記。

  • 標記可以嵌套使用，但不能交叉使用。

  • 在HTML代碼中不區(qū)分大小寫，但為了代碼規(guī)范建議統(tǒng)一使用小寫。

  • 標記中可以設置各種屬性，屬性值建議使用英文雙引號括起來。

  • 書寫開始與結束標記時，在左尖括號和標記名或斜杠“/”之間不能有空格，否則瀏覽器不能識別，導致錯誤標記直接顯示在頁面上，影響頁面效果。

  • 文檔的擴展名為html或htm，建議統(tǒng)一使用html作為文件名的后綴。

  • 文檔名只可由英文字母、數(shù)字或下劃線組成，建議以字母或下劃線開始。

  • 文檔名中不能含有特殊符號，如空格、$、&等。

  • 文檔名區(qū)分大小寫，一般建議英文小寫。

  • Web服務器主頁一般是index.html或default.html。

HTML文檔類型<!DOCTYPE>標記

HTML4.01規(guī)定了三種DTD類型：

嚴格Strict、過渡Transitional以及框架Frameset。

<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5的DTD定義：<!doctype html>

綜合實例

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>標記語法及屬性語法應用</title>
</head>

<body bgcolor="#cdebe6">
    <h4 align="center">歡度新年元旦</h4>
    <hr size="2" color="red" width="100%" />
    <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;元旦(New Year's Day,New Year)，指一年開始的第一天，
        也被稱為“新歷年”、“陽歷年”，在古代指陰歷的正月初一，1949年9月27日，中國人民政治協(xié)商會議第
        一屆全體會議正式確立公歷1月1日為元旦。元旦是世界上很多國家或地區(qū)的法定假日。</p>
    <div id="" class="=" align="center">
        <img src="timg.jfif" width="300" height="165">
        <img src="timg2.jfif" width="300" height="165">
    </div>
    <hr size="2" color="red" width="100%" />
    <p align="center">Web前端開發(fā)技術工作室 Copyright &copy;2017-2020</p>

</body>

</html>

網(wǎng)頁效果：

Web中HTML基礎是怎樣的

主要介紹了HTML文件的基本結構。HTML文檔包含3個主要標記，其中：

  • <html> </html>分別表示一個HTML文件的開始和結束。

  • <head> </head>分別表示一個文件頭部的開始和結束。

  • <body> </body>分別表示一個文件主體的開始和結束。

body標記常用屬性有：

text、bgcolor、background、link、vlink、alink、topmargin、leftmargin等。

看完上述內(nèi)容，你們掌握Web中HTML基礎是怎樣的的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手