HTML+CSS+JavaScript(1)__牛腩學習

來源:互聯網
上載者:User

        學習web技術不可避免的要接觸HTML、CSS、JavaScript。這些東西是學習web編程設計的必要工具。這篇部落格為大家介紹下這三者是什麼和三者之間的關係。讓初學者對web技術有個宏觀的認識。       【HTML】

        HTML是網頁設計的主要語言。它的全稱為(hypertext markup language),是超文字標記語言 (HTML)的意思。它甚至可以在任何文字編輯器中編寫,只要儲存格式改為(.html)就行。例:使用文本編輯網頁如圖:

             

         使用瀏覽器開啟後,顯示為:<title>顯示為瀏覽器頁面的標題,<body>為頁面的主體內容。<html>為架構。

        

        HTML的主要架構由三對標籤組成:<html></html>、<head></head>、<body></body>所有的html的設計都遵循它的架構結構。如圖是html的樹形圖結構:


         其中html是整個架構的範圍,head標記是網頁標題。Body是主要內容。在body裡面可以插入各種標籤來形成段落、標題、表格等。(圖中所有標籤的釋義都在下面的標記屬性裡可查看)。

         Html 語言的東西是有限的,它所有的文法和用法就那麼多個。展示的網頁是最原始的主體內容,至於我們平時所看到的字型大小、圖片、動畫、表單等,都是通過html的屬性添加上去的。Html的元素時一個網頁中最基本的顯示內容。是製作人想呈現給我們的直觀內容。至於其他亂七八糟的一些動態效果和顏色渲染都是通過其他技術來豐富內容的。

        下面是html的全部的標記和屬性,一篇部落格不可能讓你成為web開發的高手,但是能讓你對web開發有個宏觀的認識的把控。下面是html所有的標記和屬性,我把它們按照實現的功能分類,這樣在你懂要怎樣實現一個功能時只要來這裡查看就可以了。


 HTML頭部標記

標記

描述

標記

描述

 

 

 

 

<base>

當前文檔的URL全稱,基底網址

<style>

設定CSS層疊樣式表的內容

<title>

設定瀏覽器上方標題

<link>

設定外部檔案的連結

<isindex>

表名該文檔是一個可用於檢索的閘道指令碼

<script>

設定頁面中程式指令碼的內容

<meta>

文檔本身原資訊,例如查詢關鍵詞,用於擷取該文檔的有效期間

 

 

 

元資訊標記 (meta 標記的屬性)

http-equiv

產生一個HTML標題域

Name

關鍵字

 

 

Content

關鍵字的取值

 

HTML主體標記(body屬性)

屬性

描述

屬性

描述

Text

 

Alink

 

Bgcolor

 

Vlink

 

Background

 

Topmargin

 

Bgproperties

 

Leftmargin

 

Link

 

 

 

 

標題標記

標籤

描述

標籤

描述

<h1>…</h1>

一級標題

 

 

     H2

二級標題

 

 

     H3

 

 

 

     H4

 

 

 

..

 

 

 

..

 

 

 

     H6

六級標題

 

 

 

文字修飾標記        

標記

描述

標記

描述

<b>

粗體

<a>

刪除線

<strong >

粗體

<strike>

刪除線

<i>

斜體

<address>

地址

<em>

斜體

<tt>

打字機文字

<cite>

斜體

<blink>

閃爍文字

<sup>

上標

<code>

等寬

<sub>

下標

<samp>

等寬

<big>

大字型大小

<kbd>

鍵盤輸入文字

<small>

小字型大小

<var>

聲明變數

<u>

底線

 

 

 

字型標記(font 標記屬性)

屬性

描述

屬性

描述

Face

字型

Color

顏色

Size

大小字型大小

 

 

 

列表標記

標籤

描述

標籤

描述

<ul>

無序列表

<menu>

菜單列表

<ol>

有序了表

<dt>/<dd>

定義列表的標籤

<dirl>

目錄列表

<li>

清單項目的標籤

<dl>

定義列表

 

 

 

超連結標記

屬性

描述

屬性

描述

Href

指定連結地址

Title

給連結提示文字

Name

給連結命名

Target

指定連結目標視窗

 

 

 

 

 

 

 

 

                                   連結的目標視窗的屬性

_parent

在上一級視窗中開啟

_self

同一視窗中開啟

_blank

在新視窗開啟

_top

在瀏覽器整個視窗中開啟,忽略任何架構

 

圖片標記

屬性

描述

屬性

描述

Src

圖片地址

Vspace

垂直間距

Alt

提示文字

Align

排序

Width /height

寬度、高度

Hspace

水平間距

border

邊框

 

 

 

 

 

 

                                  Align 屬性

屬性

描述

屬性

描述

Top

圖片上方

Absbottom

底部

Middle

中間

Absmiddle

中間

Bottom

 

Baseline

 

Left

Texttop

R

Right

 

 

 

表格標記

標籤

描述

標籤

描述

<table>

表格

<td>

儲存格

<tr>

<th>

行表頭

 

 

 

 

                              <tr > 標記屬性

Align

 

Bordercolor

 

Valign

 

Bordercolorlight

 

Bgcolor

 

bordercolordark

 

Background

 

 

 

 

表單標記

屬性

描述

屬性

描述

Name

 

Action

 

Method

Get、 post

 

 

 

 

 

 

<input>

表單輸入標記

<option>

菜單和清單項目標記

<select>

菜單和列表標記

<textarea>

文字域

 

 

 

 

 

輸入標記(input)

屬性

描述

屬性

描述

Name

域的名稱

Type

域的類型

 

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.