HTML學習筆記

時間 2019-11-08

標籤 html 學習筆記欄目 HTML 简体版

原文原文鏈接

一、HTML簡介

HTML不是一種編程語言，而是一種標記語言，標記語言是一套標籤，使用標籤來描述網頁，又稱HTML標籤。HTML文檔包含了標籤及文本內容。
標籤是由尖括號包圍的關鍵詞，好比 <html>或<p>，標籤一般是成對出現的，<html>……</html>或<p>……</p>，標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤。
從開始標籤到結束標籤的全部代碼稱爲HTML元素。HTML元素能夠相互嵌套，HTML文檔由嵌套的HTML元素構成。
HTML DOM 是 HTML Document Object Model(文檔對象模型)的縮寫，定義了訪問和操做 HTML 文檔的標準方法，或者說是關於如何獲取、修改、添加或刪除 HTML 元素的標準。html

二、HTML結構

簡單的HTML文檔來講明HTML結構：web

<!--這裏是註釋，下面是一個HTML基本結構-->
<!DOCTYPE html>  
<html>  
	<head>  
		<title>Title of the document</title>  
	</head>

	<body>       
		The content of the document......        
	</body>                
</html>

<html>標籤用於建立一個HTML文檔，告訴瀏覽器這是一個HTML文檔，是HTML文檔中最外層的元素。編程
<body> 標籤表示 HTML 網頁的主體部分，該標籤內的內容使用戶能夠看到的。瀏覽器
<head>元素是全部頭部元素的容器。如下列出的元素能被用在 <head> 元素內部：編程語言
- <title> （在頭部中，這個元素是必需的） ide
- <base> 佈局
- <style> （設置樣式）網站
- <link> （能夠鏈接到外部樣式） url
- <meta> spa
- <script> （js腳本）
- <noscript>

三、元素屬性

大多數HTML元素能夠設置屬性，屬性通常在開始標籤中描述，屬性老是以名稱/值對的形式出現，好比：name="value"。適用於大多數HTML元素的屬性有： class,id,style,title。

屬性在開始標籤中描述，不一樣屬性用空格分隔：

<p id="i" class="c" style="background:red">這是一個段落標籤，用來演示屬性的書寫格式。</p>

屬性值用引號引發，屬性值內具備子屬性的話用分號隔開，書寫規則以下：（此處能夠與CSS語法規則比較）

<h1 style="color:blue; text-align:center;">This is a header</h1>

四、經常使用的HTML標籤及屬性介紹：

一、標題標籤 <h1> - <h6>
<h1>這是一級標題。</h1>
二、段落標籤<p> <p>這個段落<br>演示了分行的效果</p>
其中，<br>爲分行標籤，無須成對使用。
三、水平線標籤<hr> <p>這是一個段落。</p>
<hr> <p>這是另外一個段落。</p>
四、格式化標籤 <b> 定義粗體文本
<em> 定義着重文字
<i> 定義斜體字
<small> 定義小號字
<strong> 定義加劇語氣
<sub> 定義下標字
<sup> 定義上標字
<ins> 定義插入字
<del> 定義刪除字
五、超連接標籤<a>

<a href="[//www.w3cschool.cn/](//www.w3cschool.cn/)" target="\_blank">W3C</a>

其中，href表示鏈接的目標，target="_blank"表示鏈接在新的頁面打開。

六、圖像標籤<image>

<img src="url" alt="some_text">

src是源屬性，是圖像的url，是必須輸入的屬性；alt是若是找不到圖像的話，用來代替圖像的文本。

七、表格標籤<table border="1">
- <table>…</table>：定義表格
- <th>…</th>：定義表格的標題欄（文字加粗）table head
- <tr>…</tr>：定義表格的行 table row
- <td>…</td>：定義表格行內的數據單元 table data cell border爲邊框屬性。
八、列表標籤：無序列表<ul>,有序列表<ol>

<ul> 
	<li>咖啡</li> 
	<li>茶</li> 
	<li>牛奶</li> 
</ul>

每個列表項使用<li>標籤。

九、區塊標籤
HTML能夠經過 <div> 和 <span> 將元素組合起來。<div>標籤能夠用來進行頁面佈局
十、HTML表單
表單使用表單標籤<form>來設置，<input>是設置表單元素最重要的標籤。

<form> 
	用戶名（文本框）：<input type="text" name="firstname"><br>
	密碼（密碼）：<input type="password" name="pwd"></form><br>
	性別（單選按鈕）：<input type="radio" name="sex" value="male">Male<input type="radio" name="sex" value="female">Female <br>
	愛好（複選框）：<input type="checkbox" name="vehicle" value="Bike">BIKE<input type="checkbox" name="vehicle" value="Car">CAR<br>
	提交按鈕:<input type="submit" value="Submit">
</form>

十一、音頻
在HTML中播放視頻和視頻的方法有不少種。可使用 <embed> 標籤、<object> 標籤以及 <audio> 標籤。

<embed height="50" width="100" src="horse.mp3">  
<object height="50" width="100" data="horse.mp3"></object>
兩者有什麼差別，還不肯定。

<audio>標籤是HTML新增的，用法以下。

<audio controls>
	<source src="/statics/demosource/horse.mp3" type="audio/mpeg">
</audio>

十二、視頻在HTML中播放視頻和視頻的方法有不少種。可使用 <embed> 標籤、<object> 標籤以及 <video> 標籤。 W3C中介紹，如下是最好的HTML解決方法。

<video width="320" height="240" controls> 
	<source src="movie.mp4" type="video/mp4"> 
	<source src="movie.ogg" type="video/ogg"> 
	<source src="movie.webm" type="video/webm"> 
	<object data="movie.mp4" width="320" height="240"> 
		<embed src="movie.swf" width="320" height="240"> 
	</object> 
</video>

五、HTML樣式-CSS

CSS能夠經過如下方式添加到HTML中:

內聯樣式：在HTML元素中使用"style" 屬性
內部樣式表：在HTML文檔頭部 <head> 區域使用<style>標籤來包含CSS
外部引用：使用外部CSS文件
以上三種方式中，最好的方式是經過外部引用CSS文件。

六、HTML中表示顏色的方法

直接用顏色的英文 :red
用16進制 :#FF0000
簡寫的16進制 :#F00
rgb表示法 :rgb(255,0,0)

<p style="background-color:red">經過顏色名設置背景顏色</p>

查看顏色值的網站 https://www.w3cschool.cn/html/html-colornames.html

相關標籤/搜索

每日一句

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