HTML基礎——基礎標籤
1、HTML概述
- htyper text markup language 即超文本標記語言。
- 超文本: 就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。
- 標記語言: 標記（標籤）構成的語言。
一、網頁的組成
一個網頁通常由兩部分組成即：javascript
- HTML（Hypertext Markup Language）
- 和CSS（Cascade Style Sheets）
HTML負責描述網頁的結構和內容（如標題，導航欄等） CSS則負責網頁的表現（外觀）（如背景顏色，字體樣式等）。css
二、HTML文檔的基本格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5的基本格式</title> </head> <body> </body> </html>
（1）.<!doctype>標記
位於文檔最前面，用於向瀏覽器說明當前文檔使用的HTML標準。html
（2）.<html>標記
也稱爲根標記，用於告知瀏覽器其自身是一個HTML文檔，<html>標記標誌着HTML文檔的開始，</html>標記着HTML文檔的結束。java
（3）.<head>標記
用於定義HTML文檔的頭部信息，稱爲頭部標記。主要用來封裝其餘位於文檔頭部的標記。編程
①.<title>：設置頁面標題標記瀏覽器
用於定義HTML頁面的標題，即給網頁取一個名字。服務器
<title>我的簡介網</title>
②.<meta/>：定義頁面元信息標記佈局
用於定義頁面的元信息,可重複出如今<head>頭部標記中，是一個單標記。學習
常見的幾種設置，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞字體
#1.<meta charset="UTF-8"/>
定義編碼格式爲utf-8
#2.<meta name="名稱" content="值"/>
能夠爲搜索引擎提供信息。
- name="keywords":設置網頁關鍵字，如我的簡介網頁關鍵字的設置。
<meta name="keywords" content="我的簡介，日記，秀出自我"/>
- name="description":設置網頁描述，如我的簡介網頁描述信息的設置。
<meta name="description" content="這是一個我的簡介網站，你能夠經過本網站來秀出真正的本身。"/>
- name="author":設置網頁做者。
<meat name="author" content="劉瑛奇"/>
#3.<meta http-equiv="名稱" content="值"/>
設置服務器發送給瀏覽器的http頭部信息，爲劉安琪顯示頁面提供相關的參數。
- 設置字符集。
<meta http-equiv="Content-Type" content-"text/html"; charset="utf-8"/>
- 設置頁面自動刷新與跳轉。
<meta http-equaiv="refresh" content="10;url=http://www.baidu.com"/>
③.<link>：引用外部文件標記
經常使用屬性：
| 屬性名 | 經常使用屬性值 | 描述 |
| href | URL | 指定引用外部文檔的地址 |
| rel | stylesheet | 指定當前文檔與引用外部文檔的關係，該屬性值一般爲stylesheet，表示定義一個外部樣式表 |
| type | text/css | 引用外部文檔的類型爲CSS樣式表 |
| text/javascript | 引用外部文檔的類型爲JavaScript腳本 |
例如：使用<link>標記引用外部CSS樣式表：
<link rel="stylesheet" type="text/css" href="style.css"/>
④.<style>:內嵌樣式標記
用於爲HTML文檔定義樣式信息，在HTML中使用style標記時，經常定義其屬性爲type,相應屬性值爲text/css。
例如：
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>style標記的使用</title> <style type="text/css"> h2{color:blue;} p{color:yellow;} </style> </head> <body> <h2>個人我的簡介</h2> <p>我是一名來自河南洛陽的男孩，今年20歲！</p> </body> </html>
（4）.<body>標記
用於定義HTML文檔索要顯示的內容,也稱爲主體標記。<body>標記中的信息纔是最終要顯示在網頁上的。
body裏面分爲兩類標籤：塊級標籤和內聯標籤。
塊級標籤：<p><h1><table><ol><ul><form><div>
內聯標籤：<a><input><img><sub><sup><textarea><span>
塊級標籤元素的特色
① 老是在新行上開始；
② 高度，行高以及外邊距和內邊距均可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它能夠容納內聯元素和其餘塊元素
內聯標籤元素的特色
① 和其餘元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其餘內聯元素
對行內元素，須要注意以下
① 設置寬度width 無效。
② 設置高度height 無效，能夠經過line-height來設置。
③ 設置margin 只有左右margin有效，上下無效。
④ 設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。
#1.基本標記：
①.標題標記：<h1>~<h6>
一般用來設置標題,從<h1>~<h6>重要性遞減。
基本語法格式爲：
<hn align="對齊方式">標題文本</hn>
align爲可選屬性，用於指定標題的對齊方式。
屬性值有：
left:設置標題文字左對齊(默認值)
center:設置標題文字居中對齊
right:設置標題文字右對齊
注：一個頁面中只能使用一個<h1>標記，一般用於LOGO部分。
代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標題標記的使用</title> </head> <body> <h1 align="center">一級標題 居中對齊</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> </body> </html>
②.段落標記：<p>
用於定義一個獨立的段落，每一個段落獨佔一行，而且段落之間回有必定的間隙。
語法格式爲：
<p align="對齊方式">段落文本</p>
代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>段落標記的用法</title> </head> <body> <p align="center">這是個人我的簡介</p> <p>我叫劉瑛奇，是一個大二學生，學的是計算機專業，是一個開朗熱愛學習的男孩。</p> <p align="right">劉瑛奇 2019.12.1</p> </body> </html>
③.功能標記
<b> <strong>: 加粗標籤.
<strike>: 爲文字加上一條中線.
<i> <em>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
代碼示例：
<html> <head> <meta charset="UTF-8"> <title>功能標記的使用</title> </head> <body> <b>使用p標記前加粗文字</b> <br> <strong>使用strong標記加粗文字</strong> <hr> <p>原價：<strike>299 </strike> 現價：9.9</p> <p><em>這是一段斜體字</em></p> <p> 2<sup>n</sup> 2的n次方</p> <p>h<sub>2</sub>o 水的分子表達式</p>
<p>< 小於號</p> <p>> 大於號</p> <p>© </p> <p>®</p> </body> </html>
#2.圖像標記：
目前網頁上經常使用的圖像格式主要有GIF、JPG和PNG三種，具體區別以下。
●GIF格式
特色：
支持動畫，是一種無損的圖像格式。
支持透明，只能處理256中顏色。
經常使用於LOGO、小圖標及其它色彩相對單一的圖像。
●PNG格式
特色：
體積更小，支持alpha透明。
不支持動畫。
●JPG格式
特色：
能夠保存超過256種顏色的圖像。
是一種有損壓縮的圖像格式。
經常使用於較大的圖片的保存。
一、圖像標記<img />
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
vspace：圖像頂部和底部的空白(垂直邊距)
border:圖像邊框的寬度
hspace:圖像左側和右側的空白(水平邊距)
align:設置對齊方式
left:將圖像對齊到左邊
right:將圖像對齊到右邊
top:將圖像的頂端和文本的第一行文本對齊，其餘文字居圖像下方
middle:將圖像的水平中線和文本的第一行文字對齊，其餘文字居圖像下方
bottom:將圖像的底部和文本的第一行文字對齊，其餘文字居圖像下方
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圖像標記的使用</title> </head> <body> <img src="my.gif" alt="一張個人自拍照" border="2" /> <img src="my.gif" alt="一張個人自拍照" width="100" height="100" /> <img src="my.gif" alt="一張個人自拍照" hspace="50" vspace="20" align="left" /> </body> </html>
注意：
(1)、HTML不同意圖像標記使用border、vspace、hspace及align屬性。
(2)、網頁製做中、裝飾性的圖像都不要直接插入<img/>標記，而是經過CSS設置背景圖像來實現。
相對路徑和絕對路徑
①.絕對路徑
就是網頁上的文件或目錄咋硬盤上的真正路徑。如："D:\HTML5+CSS3\images\logo.gif"。
注：網頁中不推薦使用絕對路徑。
②.相對路徑
就是相對於當前文件的路徑。
分爲三種：
●圖像文件和html文件位於同一文件夾:只需輸入圖像文件的名稱便可，如"<img src="logo.gif" />"
●圖像文件位於html文件的下一級文件夾:輸入文件夾名和文件名，之間用"/"間隔，如<img src="images/logo.gif" />
●圖像文件位於html文件的上一級文件夾:在文件名以前加入"./",若是是上兩級使用"../../"以此類推。如<img src="../logo.gif" />
#3.超連接標籤(錨標籤)<a>:
href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com"
target:用於指定連接頁面的打開方式。
_self:默認值，在原窗口中打開。
_blank:在新窗口中打開。
name: 定義一個頁面的書籤.
用於跳轉 href : #書籤名稱.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超連接標記的使用</title> </head> <body> <a href="http://www.itcast.cn/" target="_slef">傳智播客</a> target="_self"原窗口中打開<br/> <a href="http://www.baidu.com/" target="_blank">百度</a> taget="_blank"新窗口打開 </body> </html>
錨點連接：
經過建立錨點連接，用戶可以快速定位到目標的內容。
建立步驟：
①.使用"<a href="#id名">連接文本</a>"建立連接文本。
②.使用相應的id名稱注跳轉目標的位置。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>錨點連接的使用</title> </head> <body> 課程介紹： <ul> <li><a href="#one">平面廣告設計</a></li> <li><a href="#two">網頁設計與製做</a></li> <li><a href="#three">Flash互動廣告動畫設計</a></li> <li><a href="#four">用戶界面設計</a></li> <ul> <h3 id="one">平面廣告設計</h3> <p>課程涵蓋Photoshop圖像處理、I1lustrator圖形設計、平面廣告創意設計、字體設計與標誌設計。</p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <h3 id="two">網頁世界與製做</h3> <p>課程涵蓋DIV+CSS實現Web標準佈局、Dreamweaver快速網站建設、網頁版式構圖與設計技巧、網頁配色理論與技巧。</p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <h3 id="three">Flash互動廣告動畫設計</h3> <p>課程涵蓋Flash動畫基礎。Flash高級動畫、Flash互動廣告設計、Flash商業網站設計。</p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <h3 id="four">用戶界面設計</h3> <p>課程涵蓋JavaScript編程基礎、JavaScript網頁特效製做、JQuery編程基礎、JQuery網頁特效製做。</p> </body> </html>
- 1. HTML——基礎標籤
- 2. HTML基礎—標籤
- 3. HTML基礎標籤
- 4. html 基礎標籤
- 5. HTML基礎之HTML標籤
- 6. HTML基礎-------HTML標籤(3)
- 7. 前端基礎--html基礎標籤
- 8. HTML基礎之標籤
- 9. html標籤基礎1
- 10. 前端基礎--HTML標籤
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML——基礎標籤
- 2. HTML基礎—標籤
- 3. HTML基礎標籤
- 4. html 基礎標籤
- 5. HTML基礎之HTML標籤
- 6. HTML基礎-------HTML標籤(3)
- 7. 前端基礎--html基礎標籤
- 8. HTML基礎之標籤
- 9. html標籤基礎1
- 10. 前端基礎--HTML標籤