HTML簡介

V-v. 2022-01-07 22:46:47 阅读数:29

html

1.HTML介紹

HTML是超文本標記語言(HyperText Markup Language)的縮寫,是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、錶格、鏈接等。

2.HTML文檔分析

HTML由一個個元素組成,而元素則一般由一對標簽構成。
其中元素主要有以下幾部分組成:
1.開始標簽(Opening tag):包含元素的名稱(本例為 p),被左、右角括號所包圍。錶示元素從這裏開始或者開始起作用 —— 在本例中即段落由此開始。
2.結束標簽(Closing tag):與開始標簽相似,只是其在元素名之前包含了一個斜杠。這錶示著元素的結尾 —— 在本例中即段落在此結束。初學者常常會犯忘記包含結束標簽的錯誤,這可能會產生一些奇怪的結果。
3. 內容(Content):元素的內容,本例中就是所輸入的文本本身。
4.元素(Element):開始標簽、結束標簽與內容相結合,便是一個完整的元素。

3.HTML文檔說明

注釋用法:同大部分的編程語言一樣,在 HTML 中有一種可用的機制來在代碼中書寫注釋 。注釋是被瀏覽器忽略的,而且是對用戶不可見的,它們的目的是允許你描述你的代碼是如何工作的和不同部分的代碼做了什麼等等。
使用注釋時要用特殊的記號<!--**-->包括起來。

<p>這一行在注釋外,是可以顯示的</p>
<!-- <p>注釋內!瀏覽器不可見</p> -->

code軟件的快捷注釋:Ctrl+/

空元素:一般元素都有開始,結束或內容標簽,但有些元素只有一個開始標簽,通常用此元素所在比特置插入一些內容:如<br>, <hr>, <input>, <img>, <a> 等等。

<!-- 換行 -->
<p><br></p>
<!-- 水平分割線 -->
<hr>
<!-- 輸入框 -->
<input>

結果顯示:
在這裏插入圖片描述
元素屬性:元素屬性含有元素的額外信息且不會在瀏覽器中顯示。
一個屬性必須包含如下內容:
1.一個空格,在屬性和元素名稱之間。(如果已經有一個或多個屬性,就與前一個屬性之間有一個空格。)
2.屬性名稱,後面跟著一個 = 號。
3.一個屬性值,由一對引號 “” 引起來。

標題

HTML 提供了從大到小6級標題 <h1>~<h6>
標題的作用:
1.搜索引擎用標題來索引頁面的內容。
2.用戶也習慣以標題進行主要內容瀏覽,以决定是否查看該頁面。

超鏈接

超鏈接語法:

<a href="https://www.baidu.com/" target="_blank">百度</a>

href即為要跳轉去的地址 URL 。

錨點:錨點,也稱為書簽,用於標記頁面的某個元素或比特置。通過錨點,我們可以輕易的在長頁面內實現跳轉。先使用id屬性生成某元素的錨點,然後再使用超鏈接指向該錨點即可。
`

第一節 HTML介紹

跳轉到第一節

`

注意
1.超鏈接中的地址需要有#符號。
2.元素的id值必須是唯一的。

圖片及文件路徑

絕對路徑

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="LOGO" width="200" height="200">

相對路徑:
1、如果html文件和圖片在同一文件目錄下

 <img src="holly.jpg" width="140" height="140"/>

2、如果圖片在images文件夾裏 而html文件與images在同一文件目錄下

 <img src="images/holly.jpg" width="140" height="140"/>

3、如果 圖片在images文件夾 html文件在count文件夾下 而images和count在同一目錄下

 <img src="../images/holly.jpg" width="140" height="140"/>

4、html文件跟圖片在不同目錄下

<img src="file:///C:/Users/ASUS/Pictures/1.png" width="260" height="260"/>

錶格及列錶

錶格:

年齡
20
19

在這裏插入圖片描述

列錶
無序列錶:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

在這裏插入圖片描述

有序列錶

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

在這裏插入圖片描述

錶單

錶單標記以<form>標記開頭,以</form>標記結尾。在錶單標記中可以定義處理錶單數據程序的URL地址等信息。
在這裏插入圖片描述

版权声明:本文为[V-v.]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201072246468742.html