HTML學習
- HTML簡介
- html文本的內部基本結構
- html的注釋
- 標題標簽 ，段落標簽，水平線，換行，加粗，斜體
- 串列標簽
- 影像標簽
- 絕對路徑和相對路徑
- 絕對路徑
- 相對路徑
- 鏈接標簽
HTML簡介
HTML稱為超文本標記語言，是一種標識性的語言，它包括一系列標簽．通過這些標簽可以將網路上的檔案格式統一，使分散的Internet資源連接為一個邏輯整體，HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、影片、聲音、表格、鏈接等，
html文本的內部基本結構
<!--
檔案宣告，是用來標識當前網頁的版本的
該宣告標識網頁是遵循html5語法規范的
撰寫網頁時，一定要撰寫的檔案宣告，
在某些瀏覽器中，如果不寫檔案宣告，會導致瀏覽器出現不可控的情況發生
-->
<!doctype html>
<!-- html網頁中根標簽，一個頁面中有且只有一個根標簽
網頁中的所有內容都應該寫在根標簽的內部
-->
<html>
<!--
網頁的頭部，head標簽中的內容，不會在頁面中直接顯示
瀏覽器根據head中的內容來決議網頁，搜索引擎也可以根據他們來檢索網頁
-->
<head>
<!-- 使用meta來設定頁面的字符集 -->
<meta charset="utf-8" />
<!--
網頁的標題，一般會在頁面的標簽頭部顯示
所屬引擎在檢索一個網頁時，會主要檢索title中的內容
并依據該內容，來判斷網頁的主要內容，
title中的內容會影響到網站在搜索引擎中的排名
-->
<title>這里是title</title>
</head>
<!-- 網頁的主體，網頁中所有的可見內容，都應該寫在body中 -->
<body>
<h1>這句話會顯示在網頁上</h1>
</body>
</html>
效果圖：
html的注釋
<html>
<head>
<title>這里寫網頁的標題</title>
</head>
<body>
<!--
注釋 HTML注釋中的內容，
不會在頁面中顯示，
但是可以在源代碼中查看
通過注釋可以對代碼進行解釋說明
一定要養成良好的撰寫注釋的習慣
撰寫注釋時，要求簡單明了
日期： 2020年10月26日
作者： Keafmd
功能： 講解
通過注釋可以將不希望在頁面中顯示代碼隱藏
HTML注釋不能嵌套（所有的多行注釋都不能嵌套）
-->
<!-- 這是頁面的1級標題 -->
<h1>這是一個新的網頁</h1>
</body>
</html>
效果圖：
標題標簽 ，段落標簽，水平線，換行，加粗，斜體
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>網頁標題</title>
</head>
<body>
<!-- 標題標簽
在HTML一共有h1 ~ h6 六級標題
6級標題中 h1最大 h6最小
從h1 到 h6 重要性依次降低
h1最重要，h2其次 依次遞減
搜索引擎檢索頁面時，h1僅次于title，也會影響到頁面在搜索引擎中的排名
一個頁面一般只有一個h1標簽
一般頁面中只會使用h1 ~ h3
-->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<!-- 段落標簽 使用p標簽來表示一個段落
段落標簽會獨占一行，并和其他內容會有一個距離
-->
<p>牛哄哄的柯南</p>
<p>Keafmd</p>
<hr />
<!--
在HTML中，默認將多個空格和換行認為是一個空格
使用br標簽來表示一個換行
-->
<p>
第一行<br />
第二行<br />
第三行<br />
第四行<br />
</p>
<!-- 水平線，可以在頁面的指定位置輸出一條水平線 -->
<hr />
<!--加粗：<strong>…</strong>-->
<!--斜體：<em>…</em>-->
<strong>是否是閏年</strong>
<p>
<em>2000</em>閏年<br/>
<em>2001</em>平年<br/>
</p>
</body>
</html>
效果圖：
串列標簽
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>串列講解</title>
</head>
<body>
<!--
串列類似于購物清單
HTML中一共有三種串列
1.無序串列
- 使用ul標簽來創建一個無序串列
- 使用li向無序串列中添加串列項
- 無序串列默認使用 圓點 來作為專案符號
2.有序串列
- 有序串列和無序串列類似，不同的是它使用ol來創建其他的都和無序串列一樣
- 有序串列使用有序的序號 作為專案符號
3.定義串列
- 定義串列用來對一些內容做解釋說明的
- 使用 dl 來創建一個定義串列
- 在dl中使用dt，來創建一個定義項
- 使用dd來創建一個對定義項的描述
- 串列之間可以互相嵌套，可以在有序串列中放無序串列，也可以在無序串列放有序串列
-->
<ul>
<li>西瓜</li>
<li>番茄</li>
<li>蘿卜</li>
</ul>
<ol>
<li>戴爾</li>
<li>聯想</li>
<li>蘋果</li>
<li>華為</li>
</ol>
<p>菜譜：</p>
<ul>
<li>
魚香肉絲
<ol>
<li>魚</li>
<li>香</li>
<li>肉絲</li>
</ol>
</li>
<li>鍋包肉</li>
<li>土豆絲</li>
</ul>
<dl>
<dt>小明</dt>
<dd>愛玩足球</dd>
<dd>愛玩乒乓球</dd>
<dt>小紅</dt>
<dd>愛跳舞</dd>
</dl>
</body>
</html>
效果圖：
影像標簽
常見的影像格式有： JPG GIF PNG BMP
絕對路徑和相對路徑
絕對路徑
絕對路徑是指檔案在硬碟上真正存在的路徑，例如“p1.jpg”這個圖片是存放在硬碟的“E:\workspace\HBuilderProjects\html\image”目錄下，那么 “p2.jpg”這個圖片的絕對路徑就是“E:\workspace\HBuilderProjects\html\image\p2.jpg"，那么如果要使用絕對路徑指定網頁的背景圖片就應該使用 以下陳述句：
<img src="E:\workspace\HBuilderProjects\html\image\p2.jpg" >
使用絕對路徑的缺點 在網頁編程時，很少會使用絕對路徑，如果使用“E:\workspace\HBuilderProjects\html\image\p2.jpg”來指定圖片的位置，在自己的計算機上 瀏覽可能會一切正常，但是上傳到Web服務器上瀏覽就很有可能不會顯示圖片了，因為上傳到Web服務器上時，可能整個網站并沒有放在Web服務器的E盤， 有可能是D盤或H盤，即使放在Web服務器的E盤里，Web服務器的E盤里也不一定會存在“E:\workspace\HBuilderProjects\html\image\p2.jpg”這個目錄，因此在瀏 覽網頁時是不會顯示圖片的，
相對路徑
第一種情況：
所謂相對路徑，就是相對于自己的目標檔案位置，例如上面的例子，“01.html” 檔案里參考了“p2.jpg”圖片，由于“p2.jpg”圖片相對于“01.html”來說，是在同一個目錄的，那么在“01.html”檔案里使用以下代碼后
<img src=“p2.jpg” />
只要這兩個檔案的相對位置沒有變(也就是說還是在同一個目錄內)，那么無論上傳到Web服務器的哪個位置，在瀏覽器里都能正確地顯示圖片，
第二種情況：
如上圖，如果我們需要在01.htm里面呼叫image檔案夾里的p1.jpg檔案，那么我們可以使用如下陳述句
<img src="image/p1.jpg" />
第三種情況：
如果在image檔案夾里的aa檔案夾里的pp.jpg，也可以一直羅列下去：
<img src="image/aa/pp.jpg" alt="小女孩" />
第四種情況：
如果html檔案在比aa.jpg圖片深一層的檔案夾里
也就是說圖片檔案在html檔案的上一級檔案里
…代表往上一級尋找
<img src="../aa.jpg" />
第五種情況：
如果html檔案在比aa.jpg圖片深兩層的檔案夾里，就在前面再羅列兩個點“…”，深幾層羅列幾次，
<img src=“../../aa.jpg” />
第六種情況：
圖片pp.jpg在html檔案上兩級image檔案夾中的aa檔案夾里
<img src=“../../image/aa/pp.jpg”/>
鏈接標簽
<a href="path" target="目標視窗位置">鏈接文本或影像</a>
常用值：_self、_blank
href: 鏈接路徑 target:鏈接在哪個視窗打開,常用值：_self、_blank
如果看完對你有幫助，感謝點贊支持！
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/195145.html
標籤：其他
上一篇：微信小程式自定義yPicker組件分析及省市區三級聯動實作
下一篇：我當 DevOps 的一年