久久五月天网站,青青黄色视频

HTML 是誰(shuí)發(fā)明的

HTML 是李爵士發(fā)明的

HTML 起手應(yīng)該寫什么

VSCode內(nèi)新建 HTML 文件，輸入英文!號(hào)，等出現(xiàn)提示后按 Tab 鍵

章節(jié)標(biāo)簽

<!DOCTYPE html>
<!-- DOCTYPE 是文檔類型的意思 -->
<html lang="en">
  <!-- en 可以改為 zh-CN -->
  <head>
    <meta charset="UTF-8" />
    <!-- UTF-8 文件的字符編碼 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 禁止縮放兼容手機(jī) -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- 如果使用 IE 瀏覽器，使用最新內(nèi)核 -->
    <title>Document</title>
    <!-- 瀏覽器打開(kāi)標(biāo)簽的標(biāo)題 -->
  </head>
  <body>
    <header>頂部廣告</header>
    <div>
      <main>
        <h1>文章標(biāo)題</h1>

        <section>
          <h2>第一章</h2>
          <p>
            這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話
            這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話這是一段話
            這是一段話這是一段話這是一段話
          </p>

          <section>
            <h3>1.1 節(jié)</h3>
            <p>一段話</p>
          </section>
          <section>
            <h3>1.2 節(jié)</h3>
            <p>一段話</p>
          </section>
        </section>
      </main>
      <aside>
        參考資料 1 2 3
      </aside>
    </div>
    <footer>&copy; xxx版權(quán)所有</footer>
  </body>
</html>

表示文章/書(shū)的層級(jí)

標(biāo)題 h1 ~ h6
章節(jié) section
文章 article
段落 p
頭部 header
腳部 footer
主要內(nèi)容 main
旁支內(nèi)容 aside
劃分 div

全局屬性

所有標(biāo)簽都有的屬性

class

<style>
  [class="middle"] {
    background: black;
    color: white;
  }
  [class="bordered"] {
    border: 1px solid red;
  }
</style>
<div class="middle bordered"></div>

上面的選擇器沒(méi)有選中，正確寫法如下：

<style>
  [class="middle bordered"] {
    background: black;
    color: white;
  }
</style>
<div class="middle bordered"></div>

因?yàn)槿绻?[] 的方法做選擇器， "middle bordered" 是一個(gè)整體屬性，所有這種寫法非常不方便

新的寫法如下：

<style>
  .middle {
    background: black;
    color: white;
  }
  .bordered {
    border: 1px solid red;
  }
</style>
<div class="middle bordered"></div>

這種寫法，寫一部分就匹配到對(duì)應(yīng)的標(biāo)簽

contenteditable

<div class="middle bordered" contenteditable></div>

div 嵌套的文字內(nèi)容在網(wǎng)頁(yè)顯示時(shí)候，是可以編輯

<body>
  <style contenteditable>
    style {
      display: block;
      border: 1px solid red;
    }
    .middle {
      background: black;
      color: white;
    }
    .bordered {
      border: 10px solid red;
    }
  </style>
</body>

將 style 標(biāo)簽放到 body 標(biāo)簽內(nèi)，加上 contenteditable 和
style { display: block; border: 1px solid red; }
這部分代碼，可以讓 sytle 標(biāo)簽顯示出來(lái)，
實(shí)時(shí)修改 CSS 看到效果，一個(gè)簡(jiǎn)單的編輯器

hidden

讓標(biāo)簽隱藏

<header hidden>頂部廣告</header>

但可以通過(guò) CSS 重新顯示出來(lái)

id

<header id="xxx">頂部廣告</header>

如果是全頁(yè)面唯一的，可以用 id, 不是就用 class
其實(shí)不到萬(wàn)不得已，不要用 id,因?yàn)榭赡軙?huì)不報(bào)錯(cuò)

<head>
  <style>
    #xxx {
      border: 10px solid yellow;
    }
  </style>
</head>

<body>
  <header id="xxx">頂部廣告</header>
  <div></div>
  <footer id="xxx">&copy; xxx版權(quán)所有</footer>
</body>

上面的 header 和 footer 都是相同的 CSS 效果。所以不到萬(wàn)不得已，不要用 id

<header id="xxx">頂部廣告</header>

xxx.style.border = "1px solid green";

如果是唯一的 id，可以直接像上面一樣修改 CSS
等價(jià)于：

<header id="xxx" style="border: 1px solid green">頂部廣告</header>

但不到萬(wàn)不得已，不要這樣寫
因?yàn)槿绻?id 用 JavaScript 的保留字段，這個(gè)方法不生效，如下：

<header id="self">頂部廣告</header>

self.style.border = "1px solid green";

上面這樣寫就不生效了

<header id="top">頂部廣告</header>

document.getElementById("top");

xxx.style 直接獲取對(duì)應(yīng)屬性，只有老司機(jī)敢用，一般上面方法穩(wěn)點(diǎn)

style

<head>
  <style>
    #xxx {
      border: 10px solid yellow;
    }
  </style>
</head>

<header id="xxx" style="border: 1px solid green">頂部廣告</header>

xxx.style.border = "10px solid black";

樣式優(yōu)先級(jí)，javascript > 內(nèi)聯(lián)樣式 > head 的 style 標(biāo)簽樣式

tabindex

<header id="xxx" tabindex="1">頂部廣告</header>
<div class="middle bordered" tabindex="2"></div>
<footer tabindex="3">&copy; xxx版權(quán)所有</footer>

按 Tab 鍵按順序切換到對(duì)應(yīng)位置
但 0 是最后，-1 表示永遠(yuǎn)不要到這個(gè)位置

title

<head>
  <style>
    #xxx {
      border: 10px solid yellow;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>

<header
  id="xxx"
  title="完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容完整的內(nèi)容"
>
  頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告
</header>

CSS 省略號(hào)的寫法如上
title 的作用是鼠標(biāo)浮到對(duì)應(yīng)位置可以顯示完整的內(nèi)容

默認(rèn)樣式

為什么有默認(rèn)樣式

因?yàn)?HTML 被發(fā)明的時(shí)候，CSS 還沒(méi)有出生

怎么看默認(rèn)樣式

Chrome 開(kāi)發(fā)者工具
Elements -> Styles -> user agent stylesheet

User Agent

就是瀏覽器

CSS reset

默認(rèn)樣式已經(jīng)不符合我們的需求

常見(jiàn) CSS reset

個(gè)人常用的代碼

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

可以抄大廠的代碼

進(jìn)入大廠首頁(yè)
Chrome 開(kāi)發(fā)者工具，找到類似代碼
復(fù)制到自己的項(xiàng)目
命名為 reset.css

內(nèi)容標(biāo)簽

ol + li
有序列表
ul + li
無(wú)序列表
dl + dt + dd
描述列表
pre
保留空格、回車、Tab 就用 pre
code
用來(lái)放代碼，字體等寬的
hr
分割線
br
換行
a
鏈接, targer="_blank" 新標(biāo)簽打開(kāi)
em
強(qiáng)調(diào)，語(yǔ)氣方面,字體是斜體
strong
重要，本身，字體加粗
quote
引用，行內(nèi)的
blockquote
引用，換行的

<!DOCTYPE html>
<html lang="en">

<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" />
  <title>Document</title>
</head>

<body>
  <div>
    <main>
      這是分割線
      <hr>
      <h1>前端是什么</h1>

      <section>
        <h2>
          第一章:<br>
          工作內(nèi)容
        </h2>
        <p>前端每天要做的事情有</p>

        <ul>
          <li>發(fā)郵件</li>
          <li>跟產(chǎn)品經(jīng)理撕逼</li>
          <li>寫頁(yè)面</li>
          <li>吃飯</li>
          <li>休息</li>
          <li>學(xué)習(xí)</li>
        </ul>

        我的同事有
        <dl>
          <dt>Ben</dt>
          <dd>技術(shù)愛(ài)好者</dd>
        </dl>

        我會(huì)寫 JavaScript,下面演示：
        <pre>
            <code>
var a = 1
console.log(a)
            </code>
        </pre>
        <p>
          訪問(wèn)網(wǎng)站 <a  target="_blank">QQ</a>
        </p>

        <p>
          我們 <em>期末考試</em> 重點(diǎn)是<strong>JavaScript</strong>
        </p>

        李白的詩(shī)：<quote>床前明月光</quote>
        <br>
        歐陽(yáng)修說(shuō)過(guò)<blockquote>馬上 枕上 廁上</blockquote>

        <section>
          <h3>1.1 節(jié)</h3>
          <p>一段話</p>
        </section>
        <section>
          <h3>1.2 節(jié)</h3>
          <p>一段話</p>
        </section>
      </section>
    </main>
    <aside>
      參考資料 1 2 3
    </aside>
  </div>
  <footer>&copy; xxx版權(quán)所有</footer>
</body>

</html>

版權(quán)：歸饑人谷所有

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

HTML入門筆記1

HTML入門筆記1

HTML 是誰(shuí)發(fā)明的

HTML 起手應(yīng)該寫什么

章節(jié)標(biāo)簽

表示文章/書(shū)的層級(jí)

全局屬性

所有標(biāo)簽都有的屬性

class

contenteditable

hidden

id

style

tabindex

title

默認(rèn)樣式

為什么有默認(rèn)樣式

怎么看默認(rèn)樣式

User Agent

CSS reset

常見(jiàn) CSS reset

個(gè)人常用的代碼

可以抄大廠的代碼

內(nèi)容標(biāo)簽

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

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

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

HTML入門筆記1

HTML 是誰(shuí)發(fā)明的

HTML 起手應(yīng)該寫什么

章節(jié)標(biāo)簽

表示文章/書(shū)的層級(jí)

全局屬性

所有標(biāo)簽都有的屬性

class

contenteditable

hidden

id

style

tabindex

title

默認(rèn)樣式

為什么有默認(rèn)樣式

怎么看默認(rèn)樣式

User Agent

CSS reset

常見(jiàn) CSS reset

個(gè)人常用的代碼

可以抄大廠的代碼

內(nèi)容標(biāo)簽

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

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

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