HTML語言
代碼路徑：https://download.csdn.net/download/qq_38903404/12398242
-
HTML語言的組成
-
標籤
寫在尖叫號<>裏的第一個單詞，叫做標記,也叫作標籤,也叫 作元素 -
屬性
-
在標籤名稱後面用空格隔開的就是屬性名, 屬性值:屬性值和屬性之間通過等於號連接屬性值放在引號裏面,例:屬性="屬性值" 注:一個標記可以有多個屬性，屬性和屬性之間通過空格分開
-
-
HTML語法
標籤分爲“ 單標記【空標記】和雙標記【常規標記】”
雙標記【常規標記】
<標籤 屬性=“屬性值” 屬性=“屬性值”></標籤>
單標記【空標記
<標籤 屬性=“屬性值” 屬性=“屬性值”>
常用標籤
<!--文本標題標籤共有6個，h1~h6-->
<h1>一級標籤</h1><!--唯一性，放網頁Logo的-->
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>
特點:每個標題都有默認字體大小，並且文本加粗顯示
應用:h1標籤在一個頁面裏面只能出現一次(唯一性),放網頁Logo
<i></i>
<em></em>
特點:默認樣式 文本傾斜
注:em有着重音的作用(強調)
<b></b>
<strong></strong>
特點:默認樣式 文本加粗
注:strong有着重音的作用(強調)
<u></u>
特點:文本默認帶下劃線
<br>
特點:瀏覽器只要遇到br會把後面的內容放在下一行顯示
<hr>
<sup>上標</sup>
<sub>下標</sub>
<p>這裏可以放一個段落</p>
<span></span>
特點:某一個字符或一小段文本
不換行空格
> 右尖括號“>”
< 左尖括號“<”
© 備案中圖標版權©
<div></div>e
特點:div專門給網頁劃分佈局的:一個div就是一個版塊(就是一個盒子)
(1) 無序列表
<ul>
<li></li>
<li></li>
<li></li>
...
</ul>
特點:默認樣式 每隔列表都有一個實行圓點(列表符號),之後學
css要去掉，因爲自帶的圓點在每個瀏覽器中編譯的樣式會不一樣
應用:新聞列表、導航欄等
(2) 有序列表
<ol>
<li></li>
<li></li>
<li></li>
...
</ol>
特點:每個列表都會帶有默認的數字
擴展:
type:規定列表的項目的項目符號類型
<ol type="a"></ol>
type值可以是：
1 數字順序的有序列表(默認值)(1, 2, 3, 4)
a 小寫字母順序的有序列表(a, b, c, d)
A 大寫字母順序的有序列表(A, B, C, D)
i 小寫落寞數字的有序列表(i, ii, iii, iv)
I 大寫羅馬數字的有序列表(I, II, III, IV)
start屬性規定有序列表的開始點(start的屬性值必須是數字)
語法:<ol start="5"></ol> 序號從5開始
(3) 自定義列表
<dl>
<dt>放的是一個名詞</dt>
<dd>對名詞一個解釋</dd>
</dl>
<img>
img的html屬性:
src="導入圖片的路徑"
alt="文本替換圖片(當圖片加載不出來的時候，會顯示文本)"
title="文本提示"
width="" 圖片的寬度
height="" 圖片的高度
boder="" 圖片的邊框
img裏面alt屬性的作用:
a:當圖片加載不出來的時候會,顯示文本
b:搜索引擎無法識別到圖片上面的文本,alt的存存在方便對於圖片關鍵字的搜索
同級找同級:
./文件名.後綴
父級找子級:
./文件夾名稱/文件名.後綴
子級找父級:
../返回上一級
../文件名.後綴
注:
./ 代表當前路徑
../ 返回上一級
圖片的格式:jpg png gif等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- h1~h6標前練習 -->
<h1>一級標籤</h1>
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>
<!-- 字體傾斜 -->
<i></i>字體<i>傾斜</i>
<!-- br換漢符使用 -->
<br> <em></em>字體<em>傾斜</em>
<!-- 字體加粗 -->
<b></b><b>字體加粗</b>
<br> <strong></strong>
<strong>字體加粗</strong>
<br>
<!-- 下劃線 -->
<u>這個是下劃線</u>
<!-- 水平線 -->
<hr>
<hr>
<hr>
<!-- 文本標籤 -->
<p>這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字</p>
<!-- 字符標籤 -->
<span>這格式字符標籤</span>
<!-- 轉義字符 -->
有 空格<>©
<!-- div標籤 -->
<div>這個是div容器</div>
<!-- 列表 -->
<ul>
<li>新聞列表新聞列表新聞列表</li>
<li>新聞列表新聞列表新聞列表</li>
<li>新聞列表新聞列表新聞列表</li>
<li>新聞列表新聞列表新聞列表</li>
</ul>
<hr>
<ol type="a" start="3">
<li>新聞列表新聞列表新聞列表</li>
<li>新聞列表新聞列表新聞列表</li>
<li>新聞列表新聞列表新聞列表</li>
<li>新聞列表新聞列表新聞列表</li>
<li>新聞列表新聞列表新聞列表</li>
</ol>
<hr>
<dl>
<dt>哆啦A夢</dt>
<dd>是一隻藍色的狸貓</dd>
</dl>
<!-- 超鏈接 -->
<a href="http://www.baidu.com" target="_back">百度一下，你就知道</a>
<a href="#">這是一個空連接</a>
<a href="javascript:void(0)">這是一個按鈕，不產生超鏈接</a>
<br>
<!-- 圖片img -->
<!-- 同級找同級 -->
<img src="./2.jpg" alt="" width="300" height="250">
<!-- 父級找子級 -->
<img src="./image/1.jpg" alt="" width="300" height="250">
<!-- 子級找父級 -->
<img src="../index.jpg" alt="" width="300" height="250">
</body>
</html>