HTML5 學(xué)習(xí)筆記20170210 am

注釋

格式 ``````

<!--下面一行代碼, 代表著告訴瀏覽器鄭伊健這三個字是標(biāo)題-->
                                    
<h1>鄭伊健</h1>

快捷鍵:ctrl + /

img 標(biāo)簽

img 是 Image 的縮寫

作用:告訴瀏覽器我們需要顯示一張圖片

img 標(biāo)簽的格式

<img src="">**

img 標(biāo)簽中的 src 是英文 source 的縮寫
所以 img 標(biāo)簽中的 src 就是用來告訴 img 標(biāo)簽,需要顯示的圖片名稱

注意點

  • img 不獨占一行
  • 如果我們手動指定了 img 標(biāo)簽顯示圖片的寬度和高度,有可能會導(dǎo)致圖片變形,那么如果又想指定寬高,又不想圖片變形,我們可以指定寬度和高度其中一個值
  • 只要指定了高度,系統(tǒng)會自動根據(jù)告訴計算出寬度,等比拉伸不會變形

img 中的其他屬性

  • width 寬度

  • height 高度
    <img src=""* width="211">*

  • 這兩個屬性用來告訴 Img 標(biāo)簽將來顯示的圖片有多寬有多高,如果 img 標(biāo)簽沒有指定需要顯示的圖片的寬高,那么系統(tǒng)會按照圖片默認(rèn)的寬高來顯示;如果 img 標(biāo)簽指定了寬高,那么系統(tǒng)會按照指定的寬高來顯示

  • title: 用于告訴瀏覽器,當(dāng)鼠標(biāo)懸停在圖片上時需要在彈出的描述框中顯示什么內(nèi)容
    <img src=""* title="這是什么圖片">*

  • alt 其實時英文 alternate 的縮寫,它的作用就是用于告訴瀏覽器,當(dāng)需要顯示的圖片找不到時顯示什么內(nèi)容
    <img alt="這沒有圖片">

br 標(biāo)簽

br 標(biāo)簽的作用: 換行
br 標(biāo)簽的格式: <br>
br 標(biāo)簽的注意點

  • 多個 br 標(biāo)簽可以連續(xù)使用,使用了多少個 br 標(biāo)簽就會換多少行
  • 由于 html 的作用就是用來給文本添加語義,而 br 標(biāo)簽的語義是不另起一個段落換行,而在企業(yè)開發(fā)中一般情況下需要換行都是因為需要另起段落,所以在企業(yè)開發(fā)中很少使用 br 標(biāo)簽

路徑問題

想給 src 賦值有兩種方式

  • 通過相對路徑賦值(掌握),相對路徑就是每次都從 .html 文件所在的文件夾開始查找,我們稱之為相對路徑
  • 同級
    同級就是“圖片”和“ .html 文件”存儲在同一個文件夾中
    格式
    src="QRCode.jpg"
    含義
    在 .html 文件所在的文件夾中查找名稱叫做 QRCode.jpg 的圖片
  • 下級
    下級就是“存儲圖片的文件夾”和“ . html 文件” 在同一個文件夾中
    格式:
    src="images/QRCode.jpg"
    含義
    在 .html 文件所在的文件夾中找到名稱叫做 images 的文件夾 然后再在 Images 文件夾中找到名稱叫做 QRCode.jpg 的圖片
  • 上級
    上級就是“存儲圖片的位置”和“存儲代碼的文件夾”在同一個文件夾中
    格式
    src="../QRCode.jpg"
    含義
    在 .html 文件所在的文件夾中找到這個文件夾的上一級文件夾,然后再在上一級文件夾中找到名稱叫做
    QRCode.jpg 其中 ../ 代表找到當(dāng)前文件夾的上一級文件夾
  • 通過絕對路徑賦值(了解)
    絕對路徑就是每次都從指定的盤符開始查找
    格式
    src="C:\Users\Jonathan_Lee\Desktop\HTML基礎(chǔ)\QRCode.jpg"
    含義:在 C 盤下找到 Users文件夾,然后在 Users 文件夾中找到 Jonathan_Lee 文件夾,然后在 Jonathan_Lee 文件夾中找到 Desktop 文件夾,然后在 Desktop 文件夾中找到 HTML 基礎(chǔ)文件夾,然后在 HTML基礎(chǔ)文件夾中找到名稱叫阻礙哦 QRCode.jpg 的圖片
    注意
  • 路徑中不要出現(xiàn)中文,否則可能出現(xiàn)為止問題
  • 如果是通過“相對路徑”來指定圖片,不能跨盤符

例如 .html 文件在 C 盤,那么不能去查找 D 盤圖片

img src="QRCode.jpg"

img src="images/QRCode.jpg"


img src="../QRCode.jpg"

img src="C:\Users\Jonathan_Lee\Desktop\HTML基礎(chǔ)\QRCode.jpg"

a 標(biāo)簽的基本使用

a 標(biāo)簽
作用
就是用于控制頁面與頁面之間跳轉(zhuǎn)的
a 標(biāo)簽的格式
<a href="指定需要跳轉(zhuǎn)的目標(biāo)界面">需要展現(xiàn)給用戶查看的內(nèi)容</a>
<a >糯米</a>

  • a 標(biāo)簽中有一個叫做 target 屬性,這個屬性的作用就是專門用于控制如何跳轉(zhuǎn)的,包含兩個值
  • _self
    用于在當(dāng)前選項卡中跳轉(zhuǎn),也就是不新建界面跳轉(zhuǎn),默認(rèn)值為 _self
    <a href="xxx" target="_self"></a>
  • _blank
    用于在新的選項卡中跳轉(zhuǎn),也就是新建界面跳轉(zhuǎn)
    <a href="xxx" target="_blank"></a>
  • a 標(biāo)簽中還有一個屬性,叫做 title ,a 標(biāo)簽中的 title 和 img 標(biāo)簽中的 title 一樣,都是用來控制鼠標(biāo)懸停時顯示的提示文本的
    <a target="_blank" title="江哥提示會轉(zhuǎn)到百度糯米首頁">糯米</a>

注意點

  • a 標(biāo)簽不僅可以讓文字可以點擊,還可以讓圖片也能夠被點擊
    <a href="images/QRCode.jpg" width="150"></a>
  • 一個 a 標(biāo)簽必須有一個 href 屬性,否則 a 標(biāo)簽不知道要跳轉(zhuǎn)到什么地方
  • 如果通過 a 標(biāo)簽的 href 屬性指定一個 URL 地址,那么 必須在地址前面加上 http:// 或者 https://
  • a 標(biāo)簽的 href 屬性除了可以指定一個網(wǎng)絡(luò)地址以外,還可以指定一個本地地址
    <a href="08-br標(biāo)簽.html">08-br標(biāo)簽</a>
    <a href="text/demo/10-路徑練習(xí).html">10-路徑練習(xí).html</a>

base 標(biāo)簽

因為目前網(wǎng)頁多為超鏈接所以在給所有超鏈接設(shè)置是新窗口打開還是在本窗口打開會造成繁雜的工作
base標(biāo)簽就是專門用來統(tǒng)一的指定當(dāng)前網(wǎng)頁中所有的超鏈接 (a 標(biāo)簽)需要如何打開
注意點

  • base 標(biāo)簽必須寫在 head 標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間
  • 如果即在 base 中制訂了 target 又在 a標(biāo)簽中指定了 target ,那么瀏覽器會按照 a 標(biāo)簽中指定的來執(zhí)行
<head>
        <meta charset="UTF-8" />
        <title>11-base 標(biāo)簽</title>
        <base target="_blank">
</head>

假鏈接

  • 點擊之后不會跳轉(zhuǎn)的鏈接我們稱之為假鏈接
  • 假鏈接的意義
    在企業(yè)開發(fā)前期,其它界面都沒有寫出來,那么我們就不知道應(yīng)該跳轉(zhuǎn)到什么地方,所以就只能使用假鏈接來代替,當(dāng)項目后期其它界面都已經(jīng)完成時,再將假鏈接替換為真鏈接
  • 假鏈接的格式
  • <a herf="#">xx</a>
  • <a herf="javascript:">xx</a>
  • 兩者之間的區(qū)別:# 的假鏈接會自動回到網(wǎng)頁的頂端,而 Javascript: 的假鏈接不會自動會到網(wǎng)頁頂端

錨點

  • 要想通過 a 標(biāo)簽跳轉(zhuǎn)到指定的位置,那么必須告訴 a 標(biāo)簽一個獨一無二的身份證號碼,這樣 a 標(biāo)簽才能在當(dāng)前界面中找到需要跳轉(zhuǎn)的目標(biāo)搶位置
  • 在 html 中,每一個標(biāo)簽都有一個名稱叫做 id 的屬性,這個屬性就是用來給標(biāo)簽指定一個獨一無二的身份證號碼的
  • 所以要想實現(xiàn)通過 a 標(biāo)簽跳轉(zhuǎn)到指定的位置分為兩步
  • 給目標(biāo)位置的標(biāo)簽添加一個 id 屬性
    然后制定一個獨一無二的值
  • 告訴 a 標(biāo)簽?zāi)阈枰D(zhuǎn)到的飆標(biāo)簽對應(yīng)的獨一無二的身份證號碼是多少
    格式
<a href="#center">跳轉(zhuǎn)到中部</a>
<h2 id="center">我是中部</h2>

注意點

  • 通過我們的 a 標(biāo)簽跳轉(zhuǎn)到指定的位置是沒有過度動畫的,是直接一下子就跳轉(zhuǎn)到了指定位置
  • a 標(biāo)簽除了可以跳轉(zhuǎn)到當(dāng)前界面的指定位置外,還可以跳轉(zhuǎn)到其他界面的時候直接跳轉(zhuǎn)到其他界面的指定位置
    格式
<a href="13-錨點測試界面.html#bottm" target="_blank">跳轉(zhuǎn)到錨點測試界面</a>
<h2 id="bottom">我是錨點測試界面3333</h2>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 內(nèi)容LongLongLong是一種情懷 本文是針對剛學(xué)編程的小白,都是一些基礎(chǔ)知識,如果想了解更多深層一點的東西,...
    西巴擼閱讀 1,116評論 0 0
  • 什么是瀏覽器 常見主流瀏覽器有5種: IE、谷歌、火狐、Safarri、歐朋; 瀏覽器主要有2個功能 1:將網(wǎng)頁渲...
    Sky_Boss閱讀 696評論 0 0
  • HTML需要掌握標(biāo)簽 標(biāo)簽(空格分隔): H5+CSS [TOC] 常用標(biāo)簽 img 注意點 和H系列標(biāo)簽/p標(biāo)簽...
    袁俊亮技術(shù)博客閱讀 2,135評論 1 8
  • img標(biāo)簽 功能:告訴瀏覽器需要顯示一張圖片; 參數(shù):width、height、src、title、alt;wid...
    Latte_Bear閱讀 682評論 0 0
  • 筆尖勾勒出的 不是圖畫,是童心
    俞壹閱讀 284評論 1 5

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