02-HTML知識點

村里唯一的运维發表於2024-06-11
HTML

01 元素的介紹

02 元素的屬性

03 元素的巢狀關係

04 HTML結構分析

4.1 文件宣告[這個不叫元素]

4.2 html元素

4.3 head元素

主要用來寫文件的配置資訊

05-HTML常見元素

5.1 h元素

點選檢視程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h1>1級標題</h1>
 <h2>2級標題</h2>
 <h3>3級標題</h3>
 <h4>4級標題</h4>
 <h5>5級標題</h5>
 <h6>6級標題</h6>
</body>
</html>

效果如下

5.2 p元素

點選檢視程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <p>相較於生活在看似更便宜的城市(如底特律或亞特蘭大)，生活在高人均城市(紐約、舊金山)的富人(年收入超過10萬美元的人)
  在食物方面的花費要少20%。在城市做美甲更便宜：紐約人花不到3美元就能做美甲，比排名前十的其他大城市都要便宜。
  城市提供的奢侈消費開始顯得相當不平衡：城市居民不僅擁有更多消費選擇，而且為此支付的費用也更少。很多城市女性需要做美甲，
  於是就有美甲沙龍來滿足這種需求，而美甲沙龍之間的競爭則起到了自動調節價格的作用.
 </p>
  <p>大城市雖然都有很相似的購物中心和超市，但在消費習慣上可能非常不同，“在一些基礎食物方面，我們可以看到一些城市比另一些更健康，
  而且資料顯示，洛杉磯、紐約、邁阿密和舊金山擁有最龐大的水果和蔬菜消費人群。與舊金山以外的其他城市相比，
  洛杉磯人在新鮮蔬菜上的總支出一直比其他城市多30%至40%，在水果上的總支出則多10%至40%。部分是因為這些城市是那些極度關心健康和外表的人的大本營。
 </p>
</body>
</html>

效果如下

5.3 img元素

5.4 可替換元素解釋

5.5 img常見2個屬性

5.5.1 src

表示嵌入圖片的檔案路進(可以是圖片的網路路徑)

5.5.2 alt

作用1: 圖片載入不成功,會顯示這段文字
作用2: 螢幕閱讀器會將這些描述給使用閱讀者的使用者聽

5.5.3 程式碼示例

點選檢視程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <img src="https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=0BDF3A3289356D51A820116655965BB18DA73F04" alt="這是一張圖片">
</body>
</html>

效果如下

5.6 a元素

5.6.1 在當前頁面開啟

點選檢視程式碼 
<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 </head>
 <body>
   <a href="http://www.baidu.com">百度一下</a>
 </body>
</html>

5.6.2 重新開一個網頁開啟頁面

點選檢視程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 </head>
 <body>
   <a href="http://www.baidu.com" target="_blank">百度一下</a>
 </body>
</html>

5.6.3 錨點連結

跳轉到頁面中的具體位置

點選檢視程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#theme01">跳轉到主題1</a>
  <a href="#theme02">跳轉到主題2</a>
  <a href="#theme03">跳轉到主題3</a>
  <h2 id="theme01">主題1</h2>
    <p>
      這是主題1 <br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
  </p>
  <h2 id="theme02">主題2</h2>
    <p>
      這是主題2 <br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
  </p>
  <h2 id="theme03">主題3</h2>
    <p>
      這是主題3 <br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
  </p>
</body>
</html>

5.6.4 a元素和img元素結合

點選檢視程式碼 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://miaosha.jd.com/#100037432256" target="_blank"></a>
</body>
</html>

相關文章