HTML常見的元素二

a元素

錨點跳轉(zhuǎn)鏈接

<!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="#theme1">主題一</a>
    <a href="#theme2">主題二</a>
    <a href="#theme3">主題三</a>
    <h2 id="theme1">主題一</h2>
    <p>
      <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="theme2">主題二</h2>
    <p>
      <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="theme3">主題三</h2>
    <p>
      <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>

圖片鏈接

<!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  target="_blank">
      <img src="./0ab8e5096ac6f08bd632e4d5a15d1792.jpg" alt="" />
    </a>
  </body>
</html>

其他URL地址

<!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 
      >下載zip包</a
    >
  </body>
</html>

iframe元素

利用iframe元素可以實現(xiàn)，在一個HTML文檔中嵌入其他HTML文檔
frameborder屬性
- 用于規(guī)定是否顯示邊框
  - 1 顯示
  - 0 不顯示

<!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>哈哈哈</h1>
    <p>呵呵呵呵呵</p>
    <iframe
      src="http://www.taobao.com"
      width="800"
      height="600"
      frameborder="0"
    ></iframe>
    <iframe
      src="http://www.mi.com"
      width="800"
      height="600"
      frameborder="0"
    ></iframe>
    <iframe
      src="http://www.baidu.com"
      width="800"
      height="600"
      frameborder="0"
    ></iframe>
    <iframe
      src="http://www.jd.com"
      width="800"
      height="600"
      frameborder="0"
    ></iframe>
  </body>
</html>

_parent和top的區(qū)別了解

<!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>
    <iframe src="./other/iframe元素所在的頁面.html" frameborder="1"></iframe>
  </body>
</html>

<!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>
  <iframe src="./a元素所在的網(wǎng)頁.html" frameborder="1"></iframe>
</body>
</html>

<!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  target="_top">打開淘寶</a>
  </body>
</html>

div元素 span元素的歷史

div division 分開分配的意思
span 跨域、涵蓋的意思
無所用，無所不用

<!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>
    <style>
      .area {
        border: 1px solid red;
      }

      .keyword {
        font-size: 30px;
        color: blue;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <h1>學(xué)習前端</h1>
    <div class="area">
      <h2>1.學(xué)習HTML+CSS</h2>
      <p>先學(xué)習HTML，在學(xué)習CSS，了解一些歷史/本質(zhì)等等</p>
    </div>
    <div class="area">
      <h2>2.學(xué)習JavaScript</h2>
      <p>
        學(xué)習<span class="keyword">JavaScript</span>的基本語法，<span
          class="keyword"
          >BOM/DOM</span
        >，學(xué)<span class="keyword">網(wǎng)絡(luò)請求</span>，學(xué)習<span class="keyword"
          >es6~12</span
        >，學(xué)習一些<span class="keyword">高級語法</span>，<span class="keyword"
          >原理</span
        >
      </p>
    </div>
    <div class="area">
      <h2>3.學(xué)習工具</h2>
      <p>npm/node/webpack/git</p>
    </div>
  </body>
</html>

strong元素

內(nèi)容加粗、強調(diào)

i元素

內(nèi)容傾斜

code元素

用于顯示代碼

br元素

換行

<!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>好好<strong>學(xué)習</strong>，天天<i>向上</i></p>
  </body>
</html>

HTML全局屬性

某些屬性只能在特定的元素中
- img元素的 src
- a元素的 href
全局屬性
- id
- class
- data-
- style
- title

<!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 title="coderwhy" style="color: red" id="why" class="kobe">
      我是coderwhy
    </p>
  </body>
</html>

額外補充

字符實體

HTML實體是一段以連字符(&)開頭，以分好(;)結(jié)束的文本(字符串)
實體常常用于顯示保留字符(這些字符會被解析為HTML代碼)和不可見的字符(如“不換行空格”)

<!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>
    <span>hehehehe</span>
    <p>我是段落， <span>哈哈&lt;哈哈&gt;</span>， 呵呵呵呵</p>
    <p>&lt;hehehehehe&gt;</p>
  </body>
</html>

URL

統(tǒng)一資源定位符
URL無非就是一個給定的獨特資源在web上的地址
- 理論上說，每個有效的URL都指向一個唯一的資源
- 這個資源可以是一個HTML頁面，一個CSS文檔，一幅圖像等等

URL的標準格式

[協(xié)議類型]://[服務(wù)器地址]:[端口號]/[文件路徑]:[文件名]?[查詢]#[片段ID]
http: // 123.207.32.32:8000 /

URI

統(tǒng)一資源標志符/標識符
用于表示web技術(shù)使用的邏輯或物理資源

URL和URI的區(qū)別

URI
- 統(tǒng)一資源標識符，用于標識web技術(shù)使用的邏輯或物理資源
URL
- 統(tǒng)一資源定位符，俗稱網(wǎng)絡(luò)地址，相當于網(wǎng)絡(luò)中的門牌號

URL作為一個網(wǎng)絡(luò)web資源的地址，可以唯一將一個資源標識出來，所以URL是一個URI
所以URL是一個URI
但是URI不是一個URL

復(fù)習回顧

一、HTML結(jié)構(gòu)

1.1.文檔聲明

1.2.HTML元素

lang

1.3.head

元數(shù)據(jù)
- meta -> charset -> UTF-8
- title -> 標題

二、body元素

2.1.h1~h6

演練
區(qū)別

2.2.p元素

元素
區(qū)分

2.3.案例

2.4.img元素

兩個屬性
- src
- alt
地址
- 網(wǎng)絡(luò)地址
- 本地地址
  - 絕對路徑
  - 相對路徑

2.5.a元素

兩個元素
- href
- target
  - _self
  - blank
  - _parent
  - _top
本頁面的錨點鏈接
a元素和img元素

2.6.iframe元素

嵌套網(wǎng)頁
某些網(wǎng)頁禁止嵌套(原理)
和a元素結(jié)合(target另外兩個值)

2.6.div/span

歷史
案例

2.7.不常用元素

strong
i
code
br
...

2.8.全局屬性

id
class
style
title

三、額外知識

為什么需要字符實體
三個

&nbsp;
&lt;
&gt;

3.2.URL

URL的格式
- 協(xié)議://主機:端口號/路徑/文件名?查詢#片段id
和URI的區(qū)別
- URL 定位符(網(wǎng)絡(luò)地址)
- URI 標識符

課后作業(yè)

一. 完成課堂所有的代碼練習（必須全部自己實現(xiàn)）

二. 尋找h元素和p元素的案例，并且實現(xiàn)

三. 尋找a元素結(jié)合img元素的案例（3個）

四. 說出div元素和span元素的作用和區(qū)別

作用

快速搭建頁面，不用在意過多的元素使用和布局

區(qū)別

功能區(qū)別
- div元素是一個塊級元素，它包含的元素會自動換行
- span元素是一個行內(nèi)元素，它包含的元素前后不會自動換行
- span沒有結(jié)構(gòu)上的意義，只是單純的應(yīng)用樣式，其他元素不適合時，就可以使用span元素
- span元素可以作為div元素的子元素
- div元素不能是span元素的子元素
使用區(qū)別
- span元素寬度是被包含的內(nèi)容寬度決定
- span元素可以通過CSS聲明轉(zhuǎn)換為塊元素

五. HTML全局屬性有哪些？分別是什么作用。

id
- 元素id
- 具有唯一性
class
- 類
- 多個類有空格分開，可以寫多個
style
- 樣式
- 行內(nèi)樣式，權(quán)重很高
title
- 標題
- 懸停某個元素，有相關(guān)的提示信息
data-
- 自定義屬性
- 在小程序尤為重要，使用概率極高

六.預(yù)習CSS（按照MDN文檔）

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

01-HTML+CSS/02-2-HTML常見的元素二

HTML常見的元素二

a元素

錨點跳轉(zhuǎn)鏈接

圖片鏈接

其他URL地址

iframe元素

_parent和top的區(qū)別 了解

div元素 span元素的歷史

strong元素

i元素

code元素

br元素

HTML全局屬性

額外補充

字符實體

URL

URL的標準格式

URI

URL和URI的區(qū)別

復(fù)習回顧

一、HTML結(jié)構(gòu)

1.1.文檔聲明

1.2.HTML元素

1.3.head

二、body元素

2.1.h1~h6

2.2.p元素

2.3.案例

2.4.img元素

2.5.a元素

2.6.iframe元素

2.6.div/span

2.7.不常用元素

2.8.全局屬性

三、額外知識

3.2.URL

課后作業(yè)

一. 完成課堂所有的代碼練習（必須全部自己實現(xiàn)）

二. 尋找h元素和p元素的案例，并且實現(xiàn)

三. 尋找a元素結(jié)合img元素的案例（3個）

四. 說出div元素和span元素的作用和區(qū)別

五. HTML全局屬性有哪些？分別是什么作用。

六.預(yù)習CSS（按照MDN文檔）

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

_parent和top的區(qū)別了解

一、HTML結(jié)構(gòu)

二、body元素

三、額外知識

五. HTML全局屬性有哪些？分別是什么作用。