HTML學(xué)習(xí)筆記（1）

、HTML5設(shè)計(jì)哲學(xué)，它并不是規(guī)范優(yōu)先的設(shè)計(jì)，它是“妥協(xié)式”的規(guī)范。

2、HTML5對元素大小寫不再嚴(yán)格區(qū)分，開發(fā)者可以隨意使用大小寫字符來定義HTML元素。

3、對于一份基本的HTML5文檔而言，它總有如下結(jié)構(gòu)：

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

頁面內(nèi)容部分

</body>

</html>

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

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

:定義HTML注釋，里面的內(nèi)容會被當(dāng)成注釋處理。

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

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

<title>:用于定義HTML5文檔的頁面標(biāo)題。

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

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

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

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

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

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

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

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

13、可以省略全部標(biāo)簽的元素： html head body tbody。

TML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)記語言。它由一系列的標(biāo)簽組成，這些標(biāo)簽用于描述網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。HTML標(biāo)簽通常由尖括號包圍，例如<tag>。

HTML標(biāo)簽可以分為兩類：塊級元素和內(nèi)聯(lián)元素。塊級元素用于組織網(wǎng)頁的結(jié)構(gòu)，例如段落、標(biāo)題、列表等。內(nèi)聯(lián)元素用于標(biāo)記文本中的特定部分，例如鏈接、強(qiáng)調(diào)文本等。

HTML標(biāo)簽可以包含屬性，屬性提供了有關(guān)標(biāo)簽的額外信息。例如，<a>標(biāo)簽用于創(chuàng)建鏈接，可以使用href屬性指定鏈接的目標(biāo)URL。

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

HTML可以與CSS（層疊樣式表）和JavaScript一起使用，以增強(qiáng)網(wǎng)頁的外觀和功能。CSS用于控制網(wǎng)頁的樣式，例如顏色、字體、布局等。JavaScript用于實(shí)現(xiàn)交互性和動態(tài)效果，例如表單驗(yàn)證、動畫等。

通過使用HTML，開發(fā)人員可以創(chuàng)建具有結(jié)構(gòu)良好、易于理解和導(dǎo)航的網(wǎng)頁。它是構(gòu)建互聯(lián)網(wǎng)的基礎(chǔ)之一，被廣泛應(yīng)用于網(wǎng)站開發(fā)和內(nèi)容管理系統(tǒng)。

HTML的語法由標(biāo)簽、屬性和內(nèi)容組成。下面是HTML的基本語法規(guī)則：

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

下面是一個(gè)簡單的HTML示例：

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

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

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

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

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

內(nèi)聯(lián)方式：將JavaScript代碼直接寫入HTML文件中的<script></script>標(biāo)簽中。這種方式簡單快速，適合小型項(xiàng)目或簡單功能的實(shí)現(xiàn)。

<!DOCTYPE html>
<html>
  <head>
    <title>內(nèi)聯(lián)方式</title>
  </head>
  <body>
    <h1>你好，謐夜星球！</h1>

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

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

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

外部文件方式：將JavaScript代碼保存為獨(dú)立的外部文件，通過HTML文件的<script>標(biāo)簽的src屬性引入。這種方式適合于大型項(xiàng)目，利于代碼的模塊化管理和團(tuán)隊(duì)協(xié)作。

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

注釋：注解代碼，提升開發(fā)效率

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

單行注釋：使用//符號進(jìn)行注釋，注釋內(nèi)容從//后開始，直到該行結(jié)束。

// 這是一個(gè)單行注釋

多行注釋：使用/* */符號進(jìn)行注釋，注釋內(nèi)容位于/*和*/之間。

/* 
  這是一個(gè)多行注釋，
  可以跨越多行
*/

通過合理注釋，你不僅能提高自己的代碼理解和維護(hù)效率，還能方便團(tuán)隊(duì)協(xié)作，使代碼更加易于管理。

輸入輸出：與用戶進(jìn)行互動

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

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

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

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

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

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

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

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

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

通過合理運(yùn)用輸入輸出的方式，你可以實(shí)現(xiàn)與用戶的互動，接收用戶的輸入并輸出相應(yīng)的結(jié)果，增加頁面的交互性和用戶體驗(yàn)。

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

在線咨詢

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

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML學(xué)習(xí)筆記（1）

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

注釋：注解代碼，提升開發(fā)效率

輸入輸出：與用戶進(jìn)行互動

您的項(xiàng)目需求