當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端HTML介绍

發布時間：2023/12/2 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了前端HTML介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、HTML簡介

HTML定義：　

超級文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準，
它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果.

特點：

1.簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。

2.可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。

3.平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。

4.通用性：HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

簡單理解：正如我們寫的python代碼，解釋器是python，html的代碼解釋器就是瀏覽器，解釋器當然就有相應的解釋“規則”，而這些規則就是html語言。

HTML組成：

<!DOCTYPE html> #html文檔類型，這個是html5寫法 <html><head></head><body></body> </html>

二、HTML之標簽

所謂HTML標簽是指：諸如<head>、<body>、<table>等被尖括號“<”和“>”包起來的對象，絕大部分的標簽都是成對出現的，如<table></talbe>、<form></form>。當然還有少部分不是成對出現的，如<br>、<hr>等，標簽可以嵌套，比如在body標簽中嵌套form標簽，在form中又可以嵌套其他標簽。

標簽分類：

1.按語法分類：

閉合標簽：有開始表示和結束標簽，必須成對出現，比如上面的<html></html>
自閉合標簽：單個存在的標簽，自己封閉，如<br/>,這里不加/也不會出錯。

head標簽

head頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。頭部中最常用的標記符是標題標記符和meta標記符，其中標題標記符用于定義網頁的標題，它的內容顯示在網頁窗口的標題欄中，網頁標題可被瀏覽器用作書簽和收藏清單。
設置文檔標題和其它在網頁中不顯示的信息，比如direction方向、語言代碼Language Code（實體定義!ENTITY % i18n）、指定字典中的元信息、等等。

title：在head中是為數不多的能在網頁中顯示的標簽，效果是顯示網頁的名字

<title>hello wd</title>

效果：

mate：?定義了一個文檔和外部資源之間的關系,提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞、頁面編碼。

設置編碼

?自動刷新頁面

?跳轉

關鍵字信息

兼容IE：X-UA-Compatible

TIPS：

微軟的IE6是通過XP、Win2003等操作系統發布出來，作為占統治地位的桌面操作系統，也使得IE占據了通知地位，許多的網站開發的時候，就按照IE6的標準去開發，而IE6自身的標準也是微軟公司內部定義的。到了IE7出來的時候，采用了微軟公司內部標準以及部分W3C的標準，這個時候許多網站升級到IE7的時候，就比較痛苦，很多代碼必須調整后，才能夠正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部自己定義的標準拋棄了，而全面的支持W3C的標準，由于基于對標準徹底的變化了，使得原先在早期IE8版本上能夠訪問的網站，在IE8中無法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各種兼容性錯誤。

與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標準提供了更加緊密的支持。因此，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。為了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而允許您指定站點所支持的 Internet Explorer 版本。文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。如果您的站點在 Internet Explorer 8 中無法正確顯示，則可以更新該站點以支持最新的 Web 標準（首選方式），也可以強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。通過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，可以實現這一點。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用指令來確定如何顯示該網頁。如果該指令丟失或未指定基于標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。

Link

body標簽

分類：

塊級標簽：標簽獨占一行，如：a、div、select
行內標簽：標簽本身占多少頁面上就占多少，如：p、h、span

特殊符號（常見）：

&nbsp:空格

&gt：>（大于）

&lt：<（小于）

<br/>:換行

1.標題：H標簽

標題（heading）通過h1-h6,來定義，大小分別遞增。

效果：

2.段落：p標簽

p段落標簽是塊級標簽，段落與段落之間有間距，并可以嵌套<br/>換行標簽。

<p>段落1</p> <p>段落2</p> <p>段落3<br/>這里換行了</p>

效果：

3.div

div可理解為“白板”，本身不對內容做任何渲染，后續會提及使用style來渲染，屬于塊級標簽。

4.span

通div一樣，span也是空白，本身不對內容做渲染，但是屬于行內標簽。

?5.a標簽

a標簽是應用網站鏈接使用的標簽，并且a標簽可以是圖片或者其他html元素

效果：

target屬性：定義超鏈接是在當前窗口顯示還是新窗口顯示。

<a href="http://www.baidu.com" target="_blank">百度搜索</a> #超鏈接在新窗口打開

a標簽做錨點

href中通過設置#+標簽id關聯跳轉，實質也是跳轉。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>hell wd</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a>  <div id="i1" style="height: 300px;">第一章內容</div> <div id="i2" style="height: 300px;">第二章內容</div> <div id="i3" style="height: 300px;">第三章內容</div> <div id="i4" style="height: 300px;">第四章內容</div> </body> </html>

效果：

6.input系列?

input是我們我們用的最為多的標簽之一，并且其屬性有多種，不同的屬性對應著不同樣式。

type屬性：

1)text：文本

輸入的字符串為文本

2)password：密碼

輸入的字符串為密文

3)button:按鈕

默認并無實際作用，后續會在js中提及其作用。

4)submit:提交

提交form表單使用

5)value:屬性值

6)name：為傳輸的內容設置key，方便后臺取數據。

demo:

效果：

?form表單：用于提交數據。

上面的input的標簽提交數據是需要配合form標簽才能進行提交。

1)atcion

設置提交數據的url

2)method

提交數據的方法，分為post和get，區別，get提交數據顯示在url中，post提交數據在body中

demo:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>hello wd</title> </head> <body> <form action="http://www.baidu.com" method="get"><div>用戶名：<input type="text" name="username"/><input type="button" value="登錄" ></div><div>密碼：<input type="password" name="password"><input type="submit" value="登錄1"></div> </form> </body> </html>

效果：

?選擇標簽：raido

name屬性不同，代表多選，name屬性相同表示互斥(也就是單選)，value代表為選擇設置key,checked設置默認值。

demo：

<div><p>請選擇性別：</p><span>男：<input type="radio" name="sex" value="man">女：<input type="radio" name="sex" value="woman"></span><p><input type="submit" value="提交"></p></div>

效果：

復選框：checkbox

使用的時候通常將name設置為相同，name此時的作用相當于區別是復選框的種類，因為可能有多種復選框，用value設置key，checked，設置默認值。

demo:

<div><p>請選擇性別：</p><span>男：<input type="radio" name="sex" value="man" checked="checked">女：<input type="radio" name="sex" value="woman"></span><p>愛好：</p>上網<input type="checkbox" name="favor" value="1" checked="checked">音樂<input type="checkbox" name="favor" value="2">打球<input type="checkbox" name="favor" value="3">p>技能：</p>python<input type="checkbox" name="skill" value="1">shell<input type="checkbox" name="skill" value="2">nginx<input type="checkbox" name="skill" value="3"><div><input type="submit" value="提交"></div></div>

效果：

上傳文件：file

name屬性設置文件名字，特別注意上傳文件依賴form表單中的屬性(enctype="multipart/form-data"),該屬性表示將文件一點點發給服務器。

demo：

效果：

重置：reset

將輸入的數據重新清空

7.textarea

多行文本輸入，name表示為提交內容設置key，默認值被包裹在標簽中。

demo：

效果：

8.select標簽

下拉框

option：設置選項

optgroup：設置分組

name：設置select的key

value：設置值option的值，提交數據時候使用

multiple="multiple"：設置多選

selected="selected"：設置默認選項，

size：設置顯示多少個，默認顯示一個。

demo:

?9.img標簽

圖片標簽

src：標識圖片來源

title：設置圖片標題，鼠標放在圖片上可看見

alt：設置圖片背后顯示內容（當圖片不存在時候顯示）

demo：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>hello wd</title> </head> <body> <a href="http://www.baidu.com"><img src="timg.jpeg" style="height: 200px ;width: 200px" alt="小清新" title="圖片小清新"> </a> </body> </html>

?10.列表

有序列表ol
無需列表ul
自定義列表dl

有序列表：

<ol><li>python</li><li>linux</li><li>go</li> </ol>

無序列表：

<ul><li>linux</li><li>pyhton</li> </ul>

自定義列表：dt設置標題，dd設置條目：

<dl><dt>技能</dt><dd>go</dd><dd>python</dd><dd>linux</dd><dt>愛好</dt><dd>電影</dd><dd>音樂</dd> </dl>

各類效果：

11.table標簽

表格

thead：設置表頭

th：設置表頭中的列

tbody：設置表內容

border：設置表格邊框

tr：設置表格行

td：設置每行中的數據(列數據)

colspan：設置行單元格所占大小

rowspan：設置列單元格所占大小

demo：

<table border="1"><thead><th>ip</th><th>主機名</th><th>端口</th></thead><tbody><tr><td>10.0.0.11</td><td>mysql</td><td>3306</td></tr><tr><td>10.0.0.21</td><td>nginx</td><td>80</td></tr></tbody> </table>

效果：

合并單元格：

思路：取消一個單元格，通過colspan、rowspan設置其他單元格所占大小。

demo：合并同行

demo：合并同一列

</table><table border="1"><thead><th>表頭一</th><th>表頭二</th><th>表頭三</th><th>表頭四</th></thead><tbody><tr><td rowspan="2">1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody> </table>

?12.label標簽

label一般和input配合使用，用于關聯標簽，通過使用id關聯的標簽，使得點擊label標簽也能在input中中獲取光標進行內容輸入。

for：設置關聯名字(關聯標簽使用id)

demo：

<label for="username">用戶名</label> #點擊用戶名也能就能進行輸入<input id="username" type="text" name="user"><label for="1">密碼</label><input id="1" type="password" name="1" >

?13.fieldset

設置帶字段的邊框

legend：設置邊框包裹的內容

demo：

效果：

14.cursor屬性

用來顯示一些不同的光標

常用值pointer：鼠標放上變成小手。

轉載于:https://www.cnblogs.com/wdliu/p/7119260.html

總結

以上是生活随笔為你收集整理的前端HTML介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html

上一篇：汇编学习笔记(3)-80x86指令集
下一篇： HTML个人笔记