HTML基礎(chǔ)知識

什么是 HTML?

HTML是用來描述網(wǎng)頁的一種語言。

  • HTML是超文本標(biāo)記
  • HTML不是編程語言,而是一種語言標(biāo)記
  • 標(biāo)記語言是一套標(biāo)記標(biāo)簽
  • HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

HTML標(biāo)簽

  • HTML標(biāo)簽是由尖括號包圍的關(guān)鍵詞,例如<html>
  • HTML標(biāo)簽通常是成對出現(xiàn),例如<b>和</b>
  • 標(biāo)簽對中第一個標(biāo)簽是開始標(biāo)簽,第二個標(biāo)簽是結(jié)束標(biāo)簽

HTML文檔 = 網(wǎng)頁

  • HTML文檔描述網(wǎng)頁
  • HTML文檔包含HTML標(biāo)簽和純文本
  • HTML文檔也被稱為網(wǎng)頁

HTML標(biāo)簽

-   HTML標(biāo)題標(biāo)簽:<h1>-<h6>
    -   例子:<h1>這是第一個主題</h1>
-   整個HTML文檔標(biāo)簽:<html>
    -   例子:<html>   </html>
-   HTML文檔的主體標(biāo)簽:<body>
    -   例子:<body>  </body>
-   HTML段落標(biāo)簽:<p>
    - 例子:<p>這是段落</p>
-   HTML鏈接標(biāo)簽:<a>
    - 例子:<a >這是一個鏈接</a>
-   HTML圖像標(biāo)簽:<img>
    - 例子:![](w3school.jpg)

HTML元素語法

  • HTML元素以開始標(biāo)簽起始
  • HTML元素以結(jié)束標(biāo)簽終止
  • 元素內(nèi)容是在開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容
  • 大多數(shù)HTML元素?fù)碛袑傩?/li>
  • 大多數(shù)HTML源于可以嵌套
          <html>
          <body>
          <p> 這是我的第一個HTML</p>
          </body>
          </html>

元素定位

  • 元素id屬性
  • 元素類屬性
  • 元素樹狀索引
  • 標(biāo)簽遍歷

HTML屬性

  • HTML標(biāo)簽可以擁有屬性,屬性可以提供HTML元素更多的信息
  • 屬性總是以名稱/值對的形式出現(xiàn),例如:name = "value"
  • 屬性總是在HTML元素的開始標(biāo)簽中規(guī)定。
  • 屬性值應(yīng)該始終被包括在引號內(nèi)。雙引號最常用,也可以用單引號
  • 適用于大多數(shù)HTML元素的屬性:
    屬性 ---------- 值 ------------------ 描述
    class classname 規(guī)定元素的類名
    id id 規(guī)定元素的唯一id
    style style_definition 規(guī)定元素的行內(nèi)樣式
    title text 規(guī)定元素的額外信息

HTML水平線


標(biāo)簽在HTML頁面中創(chuàng)建水平線,hr元素可用于分隔內(nèi)容

HTML 注釋

HTML段落

段落通過<p>標(biāo)簽定義。
在段落內(nèi)換行使用

HTM文本格式化

文本格式化標(biāo)簽
標(biāo)簽          描述
<b>          定義粗體文本
<big>       定義大號字
<em>       定義著重文字
<i>            定義斜體字
<small>   定義小號字
<strong> 定義加重語氣
<sub>      定義下標(biāo)字
<sup>      定義上標(biāo)字
<ins>       定義插入字
<del>       定義刪除字
計算機(jī)輸出標(biāo)簽
<code>      定義計算機(jī)代碼
<kbd>        定義鍵盤碼
<samp>     定義計算機(jī)代碼樣本
<tt>            定義打字機(jī)代碼
<var>         定義變量
<pre>         定義預(yù)格式化文本
引用和術(shù)語定義
<abbr>             定義縮寫
<acronym>      定義首字母縮寫
<address>       定義地址
<bdo>              定義文字方向
<blockquote>   定義長的引用
<q>                  定義短的引用
<cite>              定義引用、引證
<dfn>              定義一個定義項(xiàng)目

樣式

<style>           定義樣式定義
<link>             定義資源引用
<div>              定義文檔中的節(jié)或區(qū)域
<span>          定義文檔中的行內(nèi)的小塊或區(qū)域

實(shí)例

  • HTML中的樣式
<html>
<head>
<style type = "text/css">
h1 {color:red}
p {color:blue}
</style>
<body>
<h1> header 1</h1>
<p>A paragraph.</p>
</body>
</html>

HTML CCS

三種樣式表:

  • 外部樣式表:當(dāng)樣式被應(yīng)用到多個頁面時,使用外部樣式表,修改一個文件就可以改變整個站點(diǎn)。
  • 內(nèi)部樣式表:當(dāng)需要修改單個文件時,可以使用內(nèi)部樣式表
  • 內(nèi)聯(lián)樣式:當(dāng)特別的樣式需要應(yīng)用到個別元素時,可以使用內(nèi)聯(lián)樣式。

HTML鏈接

HTML超鏈接:可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的內(nèi)容??梢允褂?lt;a>標(biāo)簽在HTML中創(chuàng)建鏈接。(a=anchor)
兩種使用<a>標(biāo)簽的方式

  1. 通過使用href屬性——創(chuàng)建指向另一個文檔的鏈接。
  2. 通過使用name屬性——創(chuàng)建文檔內(nèi)的書簽。

HTML鏈接語法

<a href = "url">Link test</a>
href屬性規(guī)定鏈接的目標(biāo),開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級鏈接顯示。

HTML鏈接——target屬性
使用target屬性可以定義被鏈接的文檔在何處顯示。

<a  target="_blank"> Visit W3School</a>

HTML鏈接——name屬性

  • name屬性規(guī)定anchor的名稱。
  • 使用name屬性創(chuàng)建HTML頁面中的書簽,書簽不會以任何特殊方式顯示,它對讀者是不可見的。
  • 當(dāng)使用命名錨(name anchors)時,我們可以創(chuàng)建直接跳至該命名錨的鏈接,這樣使用者就不用不停的滾動鼠標(biāo)尋找他們需要的信息。
  • 使用id屬性代替name屬性,命名錨同樣有效。
  • 命名錨的語法
<a name="lable">錨(顯示在頁面上的文本)</a>

首先進(jìn)行錨命名(創(chuàng)建一個書簽):
> <a name="tips">基本的注意事項(xiàng)</a>
然后在同一個文檔中創(chuàng)建指向該錨的鏈接:
> <a href="#tips">有用的提示</a>
也可以在其他頁面中創(chuàng)建指向該錨的鏈接:
> <a >有用的提示</a>

HTML圖像

**圖像標(biāo)簽(<img>)和源屬性(src)**:
- 在HTML中,圖像由<img>標(biāo)簽定義
- <img>是空標(biāo)簽,只包含屬性,沒有閉合標(biāo)簽
- 要在頁面中顯示圖像,需要使用源屬性(src)。src指"source“。源屬性的值是圖像的URL地址
- 定義圖像的語法:
> "![](url)"

- 替換屬性(Alt):<img src="" alt="Big Boat">

HTML表格

  • 表格由<table>標(biāo)簽定義。
  • 每個表格均有若干行(由<tr>標(biāo)簽定義),每行被分割為若干單元格(由<td>標(biāo)簽定義)
  • 字母td指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格包含文本、圖片、列表、段落、表單、水平線、表格等等。
  • 表格的表頭使用<th>標(biāo)簽定義
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 1</td>
</tr>
<tr>
<td>row 2, cell 2</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML 列表

  • HTML列表分為無序列表和有序列表
- 無序列表使用標(biāo)簽<ul>和<li>
> <ul>
> <li> Coffee</li>
> <li>Milk</li>
> </ul>
- 有序列表使用標(biāo)簽<ol>和<li>
> <ol>
> <li> Coffee</li>
> <li>Milk</li>
> </ol>

HTML <div>和<span>

- 大多數(shù)HTML元素被定義為塊級元素和內(nèi)聯(lián)元素。
- 塊級元素通常以新行開始:<h1>, <p>, <ul>, <table>
- 內(nèi)聯(lián)元素通常不會以新行開始:<b>, <td>, <a>, <img>
- <div>元素是塊級元素,它能夠用作其他HTML元素的容器,設(shè)置<div>元素的類,使我們能夠?yàn)橄嗤?lt;div>元素設(shè)置相同的類。
- <span>元素時內(nèi)聯(lián)元素。

HTML框架

  • 通過使用框架,可以在同一個瀏覽器窗口中顯示不止一個頁面。
  • 使用框架的壞處:
    • 開發(fā)人員必須同時跟蹤更多的HTML文檔
    • 很難打印整張頁面
  • 框架標(biāo)簽<frameset>,rows/columns規(guī)定每行或每列占據(jù)屏幕的面積

chrome開發(fā)者工具

  • Element

    • 頁面加載的文章文檔信息
    • 所有的內(nèi)容元素:樣式、腳本、圖像、音樂、文檔內(nèi)容等
    • 選擇標(biāo)簽元素會顯示完成的元素標(biāo)簽路徑
  • console

    • 查看頁面加載過程中的消息,包括告警、錯誤及輸出等
    • 執(zhí)行自定義的js操作
    • 開發(fā)調(diào)試
  • source

    • 頁面文檔所引用的資源
  • network

    • 頁面加載過程中所有涉及到的資源
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,786評論 1 92
  • 公司最近人手極度空缺,領(lǐng)導(dǎo)一聲令下,讓我和另一個 Android 小伙去支援 Java 組開發(fā)。秉承著“一塊磚”的...
    GinkWang閱讀 766評論 0 15
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,301評論 1 41
  • HTML、XML、XHTML 有什么區(qū)別? 因?yàn)橄嗤帍淖置婵梢钥闯觯麄兌际荕L,都是標(biāo)記語言(Markup ...
    DCbryant閱讀 290評論 0 2
  • 自從你離開 我一直在徘徊 沖著鞋子耷拉著腦袋 憂傷地度過 沒有你的每一個夜晚 我不用走得很遠(yuǎn) 去知道你在哪里 陌生...
    小蔣蔣閱讀 522評論 0 5