HTML 基礎元素

時間 2019-11-18

標籤 html 基礎元素欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
    
<h1>個人第一個頁面</h1>
<p>個人第一個段落。</p>
<script>
window.alert(5 + 6);
</script>
    
</body>
</html>

DOCTYPE 聲明瞭文檔類型
位於標籤 <html> 與 </html> 描述了文檔類型
位於標籤 <body> 與 </body> 爲可視化網頁內容
位於標籤 <h1> 與 </h1> 做爲一個標題使用
位於標籤 <p> 與 </p> 做爲一個段落顯示

能夠看出：javascript

HTML 是用來描述網頁的一種語言；
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
瀏覽器並非直接顯示的HTML標籤，但能夠使用標籤來決定如何展示HTML頁面的內容給用戶；

工具與環境：css

Nodepad++ 編寫 html 與 css。
chrome 瀏覽器直接運行 html。

基礎擴展：html

<a>：定義連接java

href：指定超連接地址chrome

示例： <a href = "http://www.gameres.com">遊資網</a>瀏覽器

<img>：定義圖像工具

示例：<img src="testImg.png" width="400" height="270"> 測試

若是不按圖標自身的長寬比來配置，圖標會按配置的長寬比進行拉伸/壓縮ui

HTML 屬性：spa

上述的 href 就是一種屬性，img 標籤的圖片源、長、寬都是由屬性提供的，能夠知道：

屬性都被標註在標籤的開頭；
屬性的值都要使用雙引號；

id 屬性示例：

<html>
<head>
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
</script>
</head>

<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="change_header()">Change text</button>
</body>

</html>

HTML 水平線與註釋：

<hr>    <!-- 註釋測試 -->
<hr>
<hr>

HTML 段落換行：

<p>這個<br>段落<br>演示了分行的效果</p>

HTML 文本格式化：

<b>顯示
加粗文本</b> <br>   <!-- 換行無效-->
<i>顯示斜體文本</i> <br>
<big>顯示  大號文本</big> <br>
<small>顯示  小號文本</small> <br>

<pre>                <!-- 換行有效-->
換行能夠不用標籤
就能夠實現
</pre>

<p>WWF's goal is to:     <!-- 換行有效-->            
<q>Build a future where people live in harmony with nature.</q>    <!-- <q> 輸出引號 -->
We hope they succeed.</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>        <!-- 刪除效果與下劃線效果 -->

留下教程來源方便查詢：http://www.runoob.com/html/html-formatting.html。

HTML 連接：

target 屬性：定義被連接的文檔在何處顯示。

<a href="http://www.gameres.com" target="_blank">遊資網</a>

將一張圖片做爲連接點：

<p>圖片連接
<a href="http://www.gameres.com">
<img src="testImg.png" width="730" height="270">
</a></p>

連接到當前頁面的指定位置：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>

<body>
<p>
<a href="#C2">查看章節2</a>
</p>
<h2>章節 1</h2>
<p>這邊顯示該章節的內容……</p>

<h2><a id="C2">章節 2</a></h2>
<p>這邊顯示該章節的內容……</p>

<h2>章節 3</h2>
<p>這邊顯示該章節的內容……</p>

</body>
</html>

HTML 頭部：

標籤	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標題
<base>	定義了頁面連接標籤的默認連接地址
<link>	定義了一個文檔和外部資源之間的關係
<meta>	定義了HTML文檔中的元數據
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。