HTML 學習分享~

時間 2019-11-16

標籤 html 學習分享欄目 HTML 简体版

原文原文鏈接

什麼是HTML？javascript

HTML 是指超文本標記語言: Hyper Text Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 文檔包含了HTML 標籤及文本內容
HTML 文檔也叫作 web頁面

五大主流瀏覽器介紹：php

既然html是在瀏覽器上面運行的。那咱們就得了解一下各各不一樣瀏覽器的支持程度了。若是瀏覽器不支持，css

那豈不是白寫了！接着往下來介紹瀏覽器以及他們的內核：html

1: IE瀏覽器；內核Trident；前端

IE是微軟公司旗下的瀏覽器。html5

2: Opera瀏覽器；內核Prestojava

Opera是挪威Opera Software ASA公司旗下的瀏覽器。web

3：Safari瀏覽器; 內核:KHTML編程

蘋果公司的Safari瀏覽器。瀏覽器

4：Firefox瀏覽器；內核： Geccko

Firefox瀏覽器使Mozilla公司旗下瀏覽器。

5：Chrome瀏覽器內核：webkit

google瀏覽器。

HTML 網頁結構：

<!DOCTYPE html>

<html<head><body>

<!DOCTYPE html> 用於告訴瀏覽器咱們是用的html

<html>是html的根元素 ;全部的標籤都是嵌套在<html>裏面的。

<head> 是寫頁面頭部的內容，是不可見的。常見的有一些外部連接 <link> 或內嵌樣式內嵌javascript腳本等。

<body> 是網頁中呈現給用戶看的內容例如：文字,連接,圖片,多媒體等。

HTML 標籤詳解：

html也叫超文本標記語言。既然是標記語言，那也必定是與標記\標籤有關的。

咱們先列舉一些常見的標籤 <h1></h1>~<h6></h6> <p></p> <a> <img> <div></div> 等。咱們列舉出一些常見的標籤。

一眼看過去是否是有些不一樣，雖然他們都是標籤爲何有的標籤後面會跟着一個帶/的相同標籤呢。

這是由於標籤也是有分類的：他們有分爲單標籤和雙標籤。單標籤就本身一個標籤雙標籤是有一個關閉標籤的。

若是雙標籤的沒有寫關閉標籤就會出錯，雖然如今的編輯器很強大並不會報錯。可是咱們仍是按照正規的要求來寫！

基本標籤的做用詳解：

<a> 標籤用於建立連接 |不換行

<img>標籤用於插入圖片 |不換行

<h1>~<h6>標籤用於寫標題自帶加粗字體變大效果 h1-h6遞減。 |獨佔一行

<p>標籤表示一個段落 |獨佔一行

<br>標籤表示換行

<hr>標籤表示水平線 |獨佔一行

html 樣式 css 詳解：

CSS（Cascading Style Sheet）可譯爲「層疊樣式表」或「級聯樣式表」，它定義如何顯示 HTML 元素，用於控制Web頁面的外觀。

經過使用CSS實現頁面的內容與表現形式分離，極大提升了工做效率。樣式存儲在樣式表中，一般放在<head>部分或存儲在

外部CSS文件中。做爲網頁標準化設計的趨勢，CSS取得了瀏覽器廠商的普遍支持，正愈來愈多的被應用到網頁設計中去。

經過css渲染：咱們能夠改變字體顏色、字體大小、背景顏色、對齊方式。等

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

內聯樣式- 在HTML元素中使用"style" 屬性:
寫法：<p style="color:blue;margin-left:20px;">This is a paragraph.</p>。
內部樣式表 -在HTML文檔頭部 <head> 區域使用<style> 元素來包含CSS
寫法：
<head>
<style></style>
</head>
外部引用 - 使用外部 CSS 文件
寫法：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

格式化標籤詳解：

<code>計算機代碼</code>

<i></i> 斜體文本

<kbd></kbd> 鍵盤輸入

<pre></pre> 預格式化文本

<small></small> 更小的文本

<strong></strong> 重要的文本

<abbr> 縮寫

<address> 聯繫信息

<bdo> 文字方向

<blockquote> 從另外一個源引用的部分

<cite> 工做的名稱

<del> 刪除的文本

<ins> 插入的文本

<sub> 下標文本

<sup> 上標文本

列表詳解:

無序列表：<ul>

　　　　</ul>

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表適合成員之間無級別順序關係的狀況。

無序列表使用 <ul> 標籤

有序列表：

<ol>

　　　　</ol>

一樣，有序列表也是一列項目，列表項目使用數字進行標記。有序列表始於 <ol> 標籤。每一個列表項始於 <li> 標籤。

有序列表適合各項目之間存在順序關係的狀況。列表項項使用數字來標記。

自定義列表：

<dl>

</dl>

自定義列表不只僅是一列項目，而是項目及其註釋的組合。自定義列表以 <dl> 標籤開始。每一個自定義列表項以 <dt> 開始。

每一個自定義列表項的定義以 <dd> 開始

<dd>有縮進效果。

表格詳解：

表格由<table>標籤來定義。每一個表格均有若干行（由<tr> 標籤訂義），每行被分割爲若干單元格（由<td>標籤訂義）。

字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。

HTML 表格的基本結構：

<table>…</table>：定義表格

<th>…</th>：定義表格的標題欄（文字加粗）

<tr>…</tr>：定義表格的行

<td>…</td>：定義表格的列

基本佈局：

基本的佈局能夠分爲兩種：1.div佈局 2.table佈局。

使用div佈局: 咱們能夠建立多個div，把內容分紅多個塊的。用CSS 對元素進行定位，或者爲頁面建立背景以及色彩豐富的外觀。

使用table佈局：經過合併單元格來達到咱們想要的區塊效果。

Tip:推薦使用 CSS 最大的好處是，若是把 CSS 代碼存放到外部樣式表中，那麼站點會更易於維護。經過編輯單一的文件，就能夠改變全部頁面的佈局

HTML表單詳解：

表單是一個包含表單元素的區域。

表單元素是容許用戶在表單中輸入內容，好比：文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。

表單使用表單標籤 <form> 來設置:

HTML表單-輸入元素：

多數狀況下被用到的表單標籤是輸入標籤（<input>）。<input> 元素是最重要的表單元素。

輸入類型是由類型屬性（type）定義的。大多數常常被用到的輸入類型以下：

1.文本域經過<input type="text"> 標籤來設定 /當用戶須要再表單中鍵入內容時就會用到，文本域。

2.密碼字段經過標籤<input type="password"> 來定義 /經過password 設定的文本框輸入的內容時不可見的。

3.<input type="radio"> 標籤訂義了表單單選框選項。 /使其能夠選中其中的一個選項

4.<input type="checkbox"> 定義了複選框. /使其能夠選中給於的多個選項

5.<input type="submit"> 定義了提交按鈕. /當用戶單擊確認按鈕的時候，表單的內容會被傳送到另外一個文件。

HTML 框架:

iframe能夠顯示一個目標連接的頁面

目標連接的屬性必須使用iframe的屬性，以下實例:

HTML 顏色顏色名顏色值理解：

　html 顏色可使用 RGB、十六進制、英文單詞。

CSS一些經常使用顏色分享：

　　紅色red：ff0000

　　黑色black：000000

　　紫色violet： ee82ee

　　粉色pink：ffc0cb

　　藍色blue：0000ff

　　綠色green：008000

　　橙色orange：ffa500

在此分享一個前端用的高級顏色調試器：http://bj.91join.com/color.html ;

HTML腳本：

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 使 HTML 頁面具備更強的動態和交互性。

JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。

如何插入腳本經過<script>標籤插入腳本；腳本可放置在<head>或<body>裏面。

想知道如何操做的話！能夠經過學習javascript 。

HTML 轉義字符部分解析：

字符	實體編號	實體名稱	描述
"	`"`	`"`	quotation
'	`'`	`'`	apostrophe
&	`&`	`&`	ampersand
<	`<`	`<`	less-than
>	`>`	`>`	greater-than

字符	實體編號	實體名稱	描述
	` `	` `	non-breaking space
¡	`¡`	`¡`	inverted exclamation mark
¢	`¢`	`¢`	cent
£	`£`	`£`	pound
¤	`¤`	`¤`	currency
¥	`¥`	`¥`	yen
¦	`¦`	`¦`	broken vertical bar
§	`§`	`§`	section
¨	`¨`	`¨`	spacing diaeresis
©	`©`	`©`	copyright
ª	`ª`	`ª`	feminine ordinal indicator
«	`«`	`«`	angle quotation mark (left)
¬	`¬`	`¬`	negation
	``	``	soft hyphen
®	`®`	`®`	registered trademark
¯	`¯`	`¯`	spacing macron
°	`°`	`°`	degree
±	`±`	`±`	plus-or-minus
²	`²`	`²`	superscript 2
³	`³`	`³`	superscript 3
´	`´`	`´`	spacing acute
µ	`µ`	`µ`	micro
¶	`¶`	`¶`	paragraph
·	`·`	`·`	middle dot
¸	`¸`	`¸`	spacing cedilla
¹	`¹`	`¹`	superscript 1
º	`º`	`º`	masculine ordinal indicato
»	`»`	`»`	angle quotation mark (righ
¼	`¼`	`¼`	fraction 1/4
½	`½`	`½`	fraction 1/2
¾	`¾`	`¾`	fraction 3/4
¿	`¿`	`¿`	inverted question mark
×	`×`	`×`	multiplication
÷	`÷`	`÷`	division