天天看點
傳回

html getelementbyid 修改圖檔_HTML 入門筆記 ??

html getelementbyid 修改圖檔_HTML 入門筆記 ??

HTML (HyperText Markup Language) 不是一門程式設計語言，而是一種用來告知浏覽器如何組織頁面的

标記語言

。

HTML 可複雜、可簡單，一切取決于開發者。

它由一系列的

元素

（elements）組成，這些元素可以用來包圍不同部分的内容，使其以某種方式呈現或者工作。 一對标簽（ tags）可以為一段文字或者一張圖檔添加超連結，将文字設定為斜體，改變字号，等等。

HTML 是誰發明的

HTML 之父

1990年左右誕生

  • Tim Berners-Lee，稱之為 李爵士
  • 2004年，英女皇他頒發大英帝國爵級司令勳章
  • 2017年，被頒發圖靈獎

李爵士做了啥？

  • 自己寫了第一個浏覽器
  • 自己寫了第一個伺服器
  • 用自己寫的浏覽器通路了自己寫的伺服器
  • 發明了WWW，同時發明了HTML、HTTP和URL

HTML 起手式怎麼寫

快捷鍵：感歎号 ! + tab 
<!DOCTYPE html>   ← 文檔類型              
 <html >  ← 頁面根标簽
 ​
 <head>
   <meta charset="UTF-8">    ← 檔案的字元編碼
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> ← 防止頁面縮放
   <meta http-equiv"X-UA-Compatible" content="ie=edge"> ← 如果在IE打開，告訴IE使用最新核心（IE11）
   <title>Document</title>
 </head>
 ​
 <body>
 ​
 </body>
 </html>
  • DOCTYPE：文檔類型
    • 浏覽器支援很多種文檔類型（HTML、XHTML…）。

    • <!DOCTYPE html>

       表示告訴浏覽器開始寫HTML了。
  • html 标簽是根标簽
    • 必須要寫（如果沒寫也會自動加上）
    • 可以把 lang 的屬性值改為 zh-CN
  • head 和 body 标簽，雖然是 html 的子元素，但一般格式上不縮進
  • head 标簽裡面存放看不見的元素
  • viewport 視口、視窗

章節标簽

章節标簽，通常用于表示文章、書的層級（就是内容架構）
  • 标題 h1~h6
  • 章節 section
  • 文章 article
  • 段落 p
  • 頭部 header
  • 腳部 footer
  • 主要内容 main
  • 旁支内容 aside
  • 劃分 div 
<body>
   <header>頂部廣告</header>
   <div>
     <main>
       <h1>文章标題</h1>
       <section>
         <h2>第一章</h2>
         <p>
           一段話一段話一段話一段話一段話一段話一段話一段話一段話一段話一段話
         </p>
         <section>
           <h3>1.1 節</h3>
           <p>一段話</p>
         </section>
         <section>
           <h3>1.2 節</h3>
           <p>一段話</p>
         </section>
       </section>
     </main>
     <aside>
       參考資料 1 2 3
     </aside>
   </div>
   <footer>&copy; xxx版權所有</footer>
 </body>

全局屬性

任何标簽都可以有的屬性

class ： 類名 

<style>   ← style标簽也有contenteditable 屬性，可以被編輯
   [class=middle]{  /* 早期寫法--缺點：當一個标簽存在多個類名，就無法通過比對單個類名來找到這個标簽 */
     background: black;
     color: white;
   }
   .middle{  /* 簡寫 */
     background: black;
     color: white;
   }
 </style>

contenteditable ：讓标簽可以被編輯

  • style标簽，也有 contenteditable 屬性，可以被編輯
    • 可以将 style 标簽放到 body裡面，然後添加

      style { display : block; }

             ，style 标簽中的樣式内容就會顯示在浏覽器中，然後給style标簽添加contenteditable 屬性，就可以在浏覽器總直接修改樣式，并實時重新整理 
<body>
   <style contenteditable>
     style{
       display: block;
     }
     .xxx{
       border: 10px solid orange;
     }
   </style>
   <p class="xxx" contenteditable>這段話可以直接在浏覽器中編輯修改内容</p>
 </body>
html getelementbyid 修改圖檔_HTML 入門筆記 ??

hidden ：讓标簽隐藏 

<h1 class="title" hidden></h1>
 .title{
   display: block   /* 直接添加屬性hidden而隐藏的元素，可以通過設定樣式 display: block，再顯示回來 */
 }

id ：全局唯一

  • id 用來表示【全局唯一的标簽】
  • id 的全局唯一性沒有保障，就算有兩個重複的 id，HTML 也不會提示我寫錯了
    • class足夠了，不到萬不得已不要用 id ，因為 id 重複使用也不會報錯，可能誤導開發者

<header id="xxx"></header>

<div id="xxx"></div>

#xxx{

}

  • id 中有很多不能使用的詞：parent、self、top … 控制台輸入

    window.

    彈出屬性清單中所有的詞都不能用，因為這些詞是 window 已經有的全局屬性

    <header id="top"></header>

    <script>

    top.style. // 直接調用不能擷取到top元素，與window對象中的全局屬性重名

    var ele = document.getElementById("top") // 通過這種方式可以擷取到 top 元素，但單詞略複雜

    </script>

style ：行内樣式 

<div style="border: 10px solid red" id="a"></div>
  • js 中寫

    a.style.border = "100px solid green"

     會覆寫 div元素中的行内樣式

tabindex ：順序

  • 在浏覽頁面時，網頁中按鈕都隻通過鍵盤 tab 控制切換選中。而這裡的 tabindex 屬性就是控制，切換的順序
    • 被選中的會有一圈不明顯的藍色邊框

<a tabindex=1>首頁</a>

<p tabindex=3>一段話</p>

<footer tabindex=2>&copy;版權所有</footer>

  • tabindex 可以是正數，不必是連續的
  • tabindex 可以是 0，表示最後才被 tab 通路
  • tabindex 可以是 -1，表示不可被 tab 通路

title ：滑鼠指向時顯示的内容

  • 單行文字溢出，使用省略号
    • 将滑鼠移動到這段文字上時，應該能展示出全部文字内容，包括溢出隐藏的部分 
<p class="xxx" title="顯示一段超長的話">一段超長的話</p>
 <style>
  .xxx {
  text-overflow: ellipsis;   /* 超出部分用省略号 */
  overflow: hidden;     /* 超出隐藏 */
  white-space: nowrap;   /* 不換行 */
   }
 </style>

内容标簽

ol+li

ordered list + list item
  • ol ：有序清單

  • ol 不能含有 li 之外的任何元素、字元

    {{<figure src="https://i.loli.net/2020/07/17/sbHl2ftTAOdVcZn.png" >}}

ul+li

unordered list + list item

  • ul ：無序清單

    {{<figure src="https://i.loli.net/2020/07/17/7PwEHXYce3y5vFL.png" >}}

dl+dt+dd

description list + term + data
  • dl ：description list —— 描述清單
  • dt ：description term —— 描述項

  • dd ：猜測是 description data —— 描述資訊

    {{<figure src="https://i.loli.net/2020/07/17/ZngFrGO1fwaBW8M.png" >}}

pre

preview 的縮寫
  • 用的較少
  • html 特點：HTML 代碼裡的多處空格、回車、tab 等内容，預設會被轉化為一個空格

  • pre 的作用是，可以保留開發者鍵入的空白位置（pre 有預設樣式，很醜，如下）

    {{<image src="https://i.loli.net/2020/07/17/wymCdUX19EaAojn.png" caption="pre">}}

code

等寬字型
  • 用 code 标簽包裹的内容，字元是等寬的。但預設内容在同行展示，無法換行

  • 使用 pre 可以讓 code 的内容換行

    {{<image src="https://i.loli.net/2020/07/17/NwKaXSdYMHJgqs8.png" caption="code & pre+code">}}

hr

水準分割線

  • horizontal

    {{<figure src="https://i.loli.net/2020/07/17/u6BMqOD92pSowFI.png">}}

br

break 的縮寫
  • 換行

a

anchor 的縮寫
  • 超連結
    • href
    • target
      • 國内開發習慣使用 _blank 在新标簽打開連結。
      • 國外開發通常不寫 target，他們覺得會讓浏覽器網頁越開越多（他們習慣：通過滑鼠中間點選打開新标簽頁，預設左鍵點選同屏跳轉）

em

emphasis 的縮寫
  • emphasis 意為強調，效果字型斜體

strong

  • 字型加粗
  • 表示重要

q

quote 的縮寫
  • quote 意為引用
  • quote标簽：内聯，行内，不換行

blockquote

  • 引用

  • 塊級，換行

    {{<image src="https://i.loli.net/2020/07/17/wYSfjvtP7DTgmzC.png" caption="quote & blockquote">}}

html getelementbyid 修改圖檔 html p 不換行 html tab标簽 html 元素換行 html 隐藏 html回車換行轉義字元
上一篇: php domdocument getelementbyid,在PHP中,使用DomDocument getElementByID不起作用？我究竟做錯了什麼？...
下一篇: ie8 ie10 document.getElementById()文法錯誤

繼續閱讀