溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Web中HTML基礎是怎樣的，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
HTML文檔的基本結構
標記(標簽)類型、標記(標簽)語法
body標記的屬性的設置方法
給網頁添加注釋
meta元信息的作用
HTML文檔類型。<!doctype html>
html文件由頭部head和主體body兩部分組成：
在頭部<head>標記中，可以定義標題、樣式等，頭部里放的是網頁元信息，不顯示在網頁內，元信息是關于網頁的基本描述。
CSS代碼和JavaScript代碼可以放在頭部，另外JavaScript代碼也可以放在body部分。
在主體<body>標記中，可定義段落、標題字、超鏈接、腳本、表格、表單等元素，主體內容是網頁要顯示的信息。
<!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>
HTML文檔的頭部標記主要包含頁面標題標記、元信息標記、樣式(CSS)標記、腳本(JavaScript)標記、鏈接標記等。頭部標記所包含的信息是說明性信息或引入性信息，一般不會顯示在網頁上。
頁面標題<title> </title>
基本語法
<title>標題信息顯示在瀏覽器的標題欄上</title>
語法說明：title標記是雙標記，<title>是開始標記，</title>是結束標記，兩者之間的內容為顯示在瀏覽器的標題欄上的信息。
元信息<meta>
http-equiv屬性用于提供HTTP協議的響應頭報文，以鍵值對的形式，http-equiv屬性的值所描述的內容(值)通過content屬性表示，通常為網頁加載前提供給瀏覽器等設備使用。
其中最重要的是content-type charset提供編碼信息，refresh刷新與跳轉頁面，no-cache頁面緩存，expires網頁緩存過期時間。
name屬性用于描述網頁，以鍵值對的形式，便于搜索引擎查找、分類。
其中最重要的是description、keywords和robots
<meta name="keywords" content="信息參數"/>
<meta name="description" content="信息參數"/>
<meta name="robots" content="信息參數"/>
<meta name="generator" content="信息參數"/>
<meta name="author" content="信息參數"/>
<meta http-equiv="content-type" content="text/html;charset=信息參數"/>
<meta http-equiv="refresh" content="時間;url=網址參數">
META標記用來描述一個HTML網頁文檔的屬性，也稱為元信息(meta-information)，這些信息并不會顯示在瀏覽器的頁面中。例如：作者、日期和時間、網頁描述、關鍵詞、頁面刷新等。該標記位于文檔的頭部(其屬性形式是鍵值對)。
基本語法
<meta name=" " content=" ">
<meta http-equiv=" " content=" ">
屬性說明：meta屬性主要分為兩組。
meta標記是使用方法
meta標記鍵值對對應表
| 屬性 | 值 | 描述 |
|---|---|---|
| content | some_text | 定義與http-equiv或name屬性相關的元信息 |
| http-equiv | content-type | 內容類型 |
| expires | 網頁緩存過期時間 | |
| refresh | 刷新與跳轉(重定向)時間 | |
| set-cookie | 如果網頁過期，那么存盤的cookie將被刪除 | |
| name | author | 定義網頁作者 |
| description | 定義網頁簡短描述 | |
| keywords | 定義網頁關鍵字 | |
| generator | 定義用什么編輯器編寫的 | |
| scheme | some_text | 定義用于翻譯content屬性值的格式 |
name屬性與content屬性
http-equiv屬性與content屬性
主體body是一個Web頁面的主要部分，其設置內容是讀者實際看到的信息，所有WWW文檔的主體部分都是由body標記定義的。在主體body標記中可以放置的是頁面中所有的內容，如圖片、圖像、表格、文字、超鏈接等元素。
基本語法
<body> … </body>
語法說明
<body>是開始標記，</body>是結束標記。
兩者之間所有的內容為網頁上顯示的信息。
案例
<!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>簡易網頁設計</title> </head> <body text="green"> <h4 align="center">Web前端開發技術課程簡介</h4> <hr color="red"> <p> 《Web前端開發技術》課程是計算機科學與技術、信息管理與信息系統、軟件工程 等專業的一門基礎課程，也是其他計算機相關專業的公共基礎課程，通過對Web前端開 發三大主流技術學習和研究，讓學生理解和掌握HTML、JavaScript、CSS等相關知識， 通過實驗培養學生設計與開發Web站點的基本操作技能。 </p> </body> </html>
標記屬性
設置body標記屬性可以改變Web頁面顯示效果。body標記主要屬性有text、bgcolor、background、link(未點擊未激活)、alink(正在激活)、vlink(已經點擊過)、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 | 規定文檔中所有文本的顏色。不贊成使用。請使用樣式取代它。 |
| bgcolor | 同上 | 規定文檔的背景顏色 |
| alink | 同上 | 規定文檔中活動鏈接的顏色 |
| link | 同上 | 規定文檔中未訪問鏈接的默認顏色 |
| vlink | 同上 | 規定文檔中已被訪問鏈接的顏色 |
| background | URL | 規定文檔的背景圖像 |
| topmargin | .Pixel | 規定文檔中上邊距的大小 |
| leftmargin | .Pixel | 規定文檔中左邊距的大小 |
body標記屬性-顏色表示方法，在網頁設計中，HTML提供了4種顏色設置方法：
使用RGB(R,G,B)，其中R、G、B是0-255的整數；
使用RGB(R%,G%,B%)，其中R、G、B是0-100的整數；
使用3位或6位十六進制數#RGB或#RRGGBB，R、G、B為十六進制數，取值范圍：0-F，每種顏色使用2位十六進制數表示，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>歡迎訪問我們的站點，我們為您提供網站地圖。</p> 網站導航： <a href="https://www.baidu.com">百度</a> <a href="https://www.163.com">網易</a> <a href="https://www.sohu.com">搜狐</a> </div> </body> </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> √
雙標記由開始標記和結束標記兩部分組成，必須成對使用。
基本語法：<標記名稱>內容</標記名稱>
屬性語法
屬性應該在開始標記(首標記)內定義，并且與標記名之間有一個空格分隔。如上述案例中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">新 年 寄 語</h3>
<hr size="2" color="#6600ff" width="100%" />
<p align="left"> 輕輕送上我忠誠的祈求和祝愿，祈求分別的時光象流水瞬間逝去，祝愿再會時，緊握的手中滿溢友情和青春的力量。</p>
<p align="right"> 有一種跌倒叫站起，有一種失落叫收獲，有一種失敗叫成功——堅強些，朋友，明天將屬于你！</p>
</body>
</html>注釋
<!-- 注釋信息 -->
<comment>注釋信息</comment>
基本語法
<comment>顯示一個段落</comment>
語法說明：comment標記是成對標記，以<comment>開始，以</comment>結束。標記包圍的信息為注釋內容，但在高版本的瀏覽器中均顯示在頁面內，建議不使用此注釋標記。
HTML代碼中添加注釋的方法有2種：
所有標記均以“<”開始，以“>”結束。
根據標記類型，正確輸入標記，單標記最好在右尖括號前加一個斜杠“/”，如換行標記是單標記<br/>，成對標記最好同時輸入起始標記和結束標記，以免忘記。
標記可以嵌套使用，但不能交叉使用。
在HTML代碼中不區分大小寫，但為了代碼規范建議統一使用小寫。
標記中可以設置各種屬性，屬性值建議使用英文雙引號括起來。
書寫開始與結束標記時，在左尖括號和標記名或斜杠“/”之間不能有空格，否則瀏覽器不能識別，導致錯誤標記直接顯示在頁面上，影響頁面效果。
文檔的擴展名為html或htm，建議統一使用html作為文件名的后綴。
文檔名只可由英文字母、數字或下劃線組成，建議以字母或下劃線開始。
文檔名中不能含有特殊符號，如空格、$、&等。
文檔名區分大小寫，一般建議英文小寫。
Web服務器主頁一般是index.html或default.html。
HTML4.01規定了三種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"> 元旦(New Year's Day,New Year)，指一年開始的第一天， 也被稱為“新歷年”、“陽歷年”，在古代指陰歷的正月初一，1949年9月27日，中國人民政治協商會議第 一屆全體會議正式確立公歷1月1日為元旦。元旦是世界上很多國家或地區的法定假日。</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前端開發技術工作室 Copyright ©2017-2020</p> </body> </html>
網頁效果：
<html> </html>分別表示一個HTML文件的開始和結束。
<head> </head>分別表示一個文件頭部的開始和結束。
<body> </body>分別表示一個文件主體的開始和結束。
body標記常用屬性有：
text、bgcolor、background、link、vlink、alink、topmargin、leftmargin等。
看完上述內容，你們掌握Web中HTML基礎是怎樣的的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
