HTML學習筆記（1）

、HTML5設計哲學，它并不是規范優先的設計，它是“妥協式”的規范。

2、HTML5對元素大小寫不再嚴格區分，開發者可以隨意使用大小寫字符來定義HTML元素。

3、對于一份基本的HTML5文檔而言，它總有如下結構：

<!DOCTYPE html>

<html>

<head>

<!—此處還可插入其他meta、樣式單等信息à

</head>

<body>

頁面內容部分

</body>

</html>

4、不要在<html>和<head>之前插入任何內容！不要在</head>和<body>之間插入任何內容！不要在</body>和</html>之前插入任何內容。

5、HTML5保留的基本元素有如下幾個：

:定義HTML注釋，里面的內容會被當成注釋處理。

<html>:它是HTML5文檔的根元素。但HTML5允許完全省略這個元素。

<head>:它用于定義HTML5文檔的頁面頭部分。但HTML5允許完全省略這個元素。

<title>:用于定義HTML5文檔的頁面標題。

<body>:用于定義HTML5文檔的頁面主體部分，該標簽可以指定id、class、style等核心屬性，還可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件屬性，這些屬性用于指定JavaScript腳本。

6、幾乎所有的HTML元素都可指定id、style和class屬性。其中ID屬性用于為HTML元素指定一個唯一標識，該標識是通過DOM訪問HTML元素的重要途徑。Class 和style屬性是CSS樣式相關屬性。

7、<span>and <div>這兩個標簽很相像，只是前者默認是不會自動換行。使用的屬性值基本一樣。

8、<span/>、<div/>和<p/>三個元素都可以作為其他內容的“容器”，在默認情況下，<span/>不會導致換行，<div/>會導致換行，<p/>會產生出段落，段落之間會有更大的間距。更要注意的是<span/>和<p/>只能包含文本、圖像、超鏈接、文本格式化元素和表單控件等內容，<p/>可以<span/>，但<span/>不能包含<p/>;<div/>元素除了可以包含上面的這些內容外，還可以包含更多的元素。

9、<b>定義粗體，<i>定義斜體,<em>定義強調文本,<strong>定義粗體文本，在HTML5中，使用<strong.../>包起來的文本代表首重要的文本。<small>定義小號字體文本，在HMTL5中專門用于標識所謂的“小字印刷體”，通常用來標注諸如免責聲明、注意事項、法律規定和版權相關的聲明性文字。

10、<sup>定義上標文本，<sub>定義下標文本;<bdo>定義文本顯示的方向，該標簽也可以指定dir屬性，該屬性值只能是ltr或者rtl。

11、在HTML5中，空元素標簽不允許將開始標簽和結束標簽分開定義。空標簽有如下：area base br col command embed hr img input keygen link mata param source wbr。如果這些標簽開始和結束標簽分開寫是錯誤的。

12、可以省略結束標簽的元素：colgroup dt dd li optgroup option p rt rp thead tbody tfoot tr td th <p>

13、可以省略全部標簽的元素： html head body tbody。

TML（HyperText Markup Language）是一種用于創建網頁的標記語言。它由一系列的標簽組成，這些標簽用于描述網頁的結構和內容。HTML標簽通常由尖括號包圍，例如<tag>。

HTML標簽可以分為兩類：塊級元素和內聯元素。塊級元素用于組織網頁的結構，例如段落、標題、列表等。內聯元素用于標記文本中的特定部分，例如鏈接、強調文本等。

HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。例如，<a>標簽用于創建鏈接，可以使用href屬性指定鏈接的目標URL。

除了標簽和屬性，HTML還支持一些特殊字符實體，用于表示特殊字符，例如小于號（<）、大于號（>）等。

HTML可以與CSS（層疊樣式表）和JavaScript一起使用，以增強網頁的外觀和功能。CSS用于控制網頁的樣式，例如顏色、字體、布局等。JavaScript用于實現交互性和動態效果，例如表單驗證、動畫等。

通過使用HTML，開發人員可以創建具有結構良好、易于理解和導航的網頁。它是構建互聯網的基礎之一，被廣泛應用于網站開發和內容管理系統。

HTML的語法由標簽、屬性和內容組成。下面是HTML的基本語法規則：

標簽：HTML標簽用于定義網頁的結構和內容。標簽通常由尖括號包圍，例如<tag>。標簽可以是成對出現的，其中包含一個開標簽和一個閉標簽，例如<tag>content</tag>。也可以是自閉合標簽，即只有一個標簽，沒有內容，例如<tag />。
屬性：HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。屬性通常以鍵值對的形式出現，例如<tag attribute="value">。屬性的值可以是字符串或布爾值。常見的屬性包括class、id、src、href等。
內容：HTML標簽可以包含文本內容或其他標簽。文本內容直接放置在標簽的開閉標簽之間，例如<p>這是一個段落。</p>。標簽可以嵌套在其他標簽中，形成標簽的層次結構。
注釋：HTML注釋用于在代碼中添加注釋，不會在網頁中顯示。注釋以結尾，例如。

下面是一個簡單的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的網頁</title>
</head>
<body>
  <h1>歡迎來到我的網頁</h1>
  <p>這是一個段落。</p>
  <a href="https://www.example.com">點擊這里</a>訪問示例網站。
</body>
</html>

在這個示例中，<!DOCTYPE html>聲明了文檔類型為HTML5。<html>標簽是HTML文檔的根元素。<head>標簽用于定義文檔的頭部信息，例如標題和樣式表。<title>標簽定義了網頁的標題，將顯示在瀏覽器的標題欄中。<body>標簽用于定義文檔的主體內容。<h1>標簽定義了一個一級標題，<p>標簽定義了一個段落，<a>標簽定義了一個鏈接。

為前端開發的基石，JavaScript編程語言不僅易學易用，還具有強大的跨平臺特性。本文將為你詳細介紹JavaScript的引入方式、注釋以及輸入輸出，幫助你輕松掌握JavaScript編程的精髓，成為一名炙手可熱的前端開發高手！

引入方式：輕松踏入JavaScript的大門

作為JavaScript編程語言的初學者，了解如何引入JavaScript代碼是你進入這個神奇世界的第一步。有三種常見的引入方式：

內聯方式：將JavaScript代碼直接寫入HTML文件中的<script></script>標簽中。這種方式簡單快速，適合小型項目或簡單功能的實現。

<!DOCTYPE html>
<html>
  <head>
    <title>內聯方式</title>
  </head>
  <body>
    <h1>你好，謐夜星球！</h1>

    <script>
      // 在這里編寫你的JavaScript代碼
    </script>
  </body>
</html>

內部文件方式：將JavaScript代碼保存為外部文件，通過<script>標簽的src屬性引入。這種方式適用于多個HTML文件共享同一段JavaScript代碼，提高了代碼的復用性和維護性。

<!DOCTYPE html>
<html>
  <head>
    <title>內部文件引入方式</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>你好，謐夜星球！</h1>
  </body>
</html>

外部文件方式：將JavaScript代碼保存為獨立的外部文件，通過HTML文件的<script>標簽的src屬性引入。這種方式適合于大型項目，利于代碼的模塊化管理和團隊協作。

<!DOCTYPE html>
<html>
  <head>
    <title>外部文件引入方式</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>你好，謐夜星球！</h1>
  </body>
</html>

注釋：注解代碼，提升開發效率

在編程過程中，合理使用注釋可以方便自己和他人理解代碼的邏輯和用途，是良好編程風格的重要一環。在JavaScript中，有兩種注釋方式：

單行注釋：使用//符號進行注釋，注釋內容從//后開始，直到該行結束。

// 這是一個單行注釋

多行注釋：使用/* */符號進行注釋，注釋內容位于/*和*/之間。

/* 
  這是一個多行注釋，
  可以跨越多行
*/

通過合理注釋，你不僅能提高自己的代碼理解和維護效率，還能方便團隊協作，使代碼更加易于管理。

輸入輸出：與用戶進行互動

在前端開發中，與用戶進行互動是至關重要的。JavaScript提供了多種輸入輸出的方式，使得與用戶的交互變得簡單而靈活。

彈窗輸出：使用alert()函數可以在頁面上彈出一個警告框，向用戶顯示一條消息。

alert("你好，謐夜星球！");

彈窗輸入：使用prompt()函數可以在頁面上彈出一個對話框，允許用戶輸入文本。

var name=prompt("請輸入用戶名：");
alert("你好, " + name + "!");

控制臺輸出：使用console.log()函數可以將信息輸出到瀏覽器的控制臺，方便開發過程中的調試和日志記錄。

console.log("你好，謐夜星球！");

頁面輸出：通過操作HTML元素，可以將信息直接顯示在頁面上。

document.getElementById("output").innerHTML="你好，謐夜星球！";

通過合理運用輸入輸出的方式，你可以實現與用戶的互動，接收用戶的輸入并輸出相應的結果，增加頁面的交互性和用戶體驗。

總結：通過本文的介紹，我們已經了解了JavaScript編程語言的引入方式、注釋以及輸入輸出。作為前端開發的基石，JavaScript在網頁開發中扮演著重要的角色。希望通過學習JavaScript，能夠輕松掌握前端開發的精髓，成為一名炙手可熱的前端開發高手！加油！

在線咨詢

上一篇：JavaAPI開發（2）JavaMail-如何用Ja
下一篇：10個前端開發人員必須知道的CSS框架，新手一定要掌

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML學習筆記（1）

引入方式：輕松踏入JavaScript的大門

注釋：注解代碼，提升開發效率

輸入輸出：與用戶進行互動

您的項目需求