三分鐘教你玩轉HTML

：HTML 基本結構
<html> 標記放在 HTML 文件的開頭，是一個形式上的標記；
<body> 標記稱為主體標記，網頁所要顯示的內容都放在這個標記內，它是 HTML 文件的重要所在；
<head> 標記稱為頭標記，起的作用是放置關于此 HTML 文件的信息，如提供索引、定義 CSS 樣式等；
<title> 標記稱為標題標記，起的作用是設定網頁標題；

2:開發中常用的標簽
<b>文字以粗體方式顯示</b>
<i>文字以斜體方式顯示</i>
<u>文字以加下劃線方式顯示</u>
<s>文字以加下刪除方式顯示</s>
<big>文字以放大方式顯示</big>
<small>文字以縮小方式顯示</small>
<strong>文字以加強強調方式顯示</strong>
<em>文字以強調方式顯示</em>
<address>地址標簽：xxxxxx@一只快樂的小碼農.com</address>
<code>代碼塊</code>
align 屬性控制段落的水平位置
bgcolor 屬性設置背景顏色
無序列表 ul
有序列表 ol
2.1 段落標簽<p>
2.2 換行標簽<br>
2.3 標題標簽<h1>~<h6>
2.4 文字居中標簽<center>
2.5 文字段落縮進標簽<blockquote>
<img src="">網頁中嵌入圖片（height+weigth屬性調整圖片大小）
<form action="" method="">表單提交
<align="">對齊方式-left+right+center...
<div></div>-設置塊級元素
type="radio"-單選框
type="checkbox"-復選框
<select><option></option><select>-下拉菜單

基本符號代碼轉化

3：用 HTML 建立超鏈接
3-1框架之間的鏈接
3-1-1：//frameset框架標簽中用rows屬性將窗口分為上中下三部分
<frameset rows="30%,10%,*">
<frame>
<frame>
<frame>
</frameset>
3-1-2：//用src屬性在框架中插入網頁
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frameset rows="50%,*">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
</html>
3-1-3//框架之間建立鏈接
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frame name="main">
</frameset>
</html>
4：下一節我們講css和js

一章. 頁面基本元素

1.1頁面基礎元素：<html>

<html>是頁面的基礎元素，主要用來定義頁面的開始和結束部分。元素語法結構如下<html>....</html>（開頭標記為<>,結束標記為</html>）先介紹一下完整的HTML文件的基本結構

<html> 文件開始標記

<head> 文件頭開始標記

......... 文件頭部分的內容

</head> 文件頭結束標記

<body> 文件主體開始標記

......... 文件主題部分的內容

</head> 文件主題結束標記

</html> 文件結束標記

在<html>和</html>之間寫入想要編輯的頁面內容就構成了一個簡單的頁面

1.1.1 文本顯示方向屬性：dir

【作用與語法】dir屬性用來指定瀏覽器文本顯示的方向，同時也決定瀏覽器滾條的位置。dir屬性的語法結構如下

<html dir="瀏覽器中文本的方向">......</html>(在元素名稱和屬性之間要加入空格)

dir屬性可以取兩個值，ltr（left title right）和rtl（right title left），分別表示從左向右顯示和從右向左顯示

1.1.2 指定語言屬性：lang

【作用與語法】lang屬性用來指定文檔中所使用的語言。lang屬性的語法結構如下

<html lang="指定的語言">包含的內容部分</html>

lang屬性的取值可以使用ISO標準中的語言代碼。在<html>元素中加入lang屬性，使瀏覽器更好的顯示界面，并不會更改頁面的文字編碼

ISO標準中語言代碼的取值及含義語言名稱寫法語言名稱寫法英語en法語fr漢語zh德語de日語ja意大利語it

1.2 頁面頭部元素：<head>

【作用與語法】HTML的頭部元素是以<head>為開始標記，以</head>為結束標記。它用于包含當前文檔的相關信息，可包含<title>元素、<meta>元素等，分別用來定義頁面的標題、編碼。使用<head>元素可以將基本信息部分和頁面主體內容區分開來。<head>元素的語法結構如下

<head>......</head>

1.3 頁面標題元素：<title>

【作用與語法】HTML頁面的標題一般是用來說明頁面用途的，它顯示在瀏覽器的標題欄中。在HTML文檔中，標題信息設置在頁面的頭部，也就是<head>和</head>之間。<title>元素的語法結構如下。

<title>......</title> (說明：在標記中間的“......”就是標題的內容，它位于HTML文檔的頭部，即<head>和</head>之間)

1.4 元信息元素：<meta>

【作用與語法】元信息元素<meta>用來定義頁面的附加信息，其中包括頁面的作者、版權、關鍵字等相關信息。<meta>元素的語法結構如下。

<meta 屬性=“屬性值”/>

1.4.1 元信息元素名稱屬性：name

【作用與語法】name屬性用來制定文檔中附加信息的名稱。例如，最常用的值“keywords”用來定義文檔中的關鍵字，方便搜索引擎的搜索。name屬性的語法結構如下。

<meta name="信息名稱"/>

在<meta>元素中，名稱必須對應有相關的值才能生效

1.4.2 元信息元素的值：content

【作用與語法】content屬性用來指定文檔中附加信息的值，它與name屬性成對出現。content屬性的語法結構如下

<meta name="信息名稱" conten="附加信息的值"/>

1.4.3 元信息元素的附加屬性：http-equiv

【作用與語法】http-equiv屬性和name屬性類似，用來指定附加信息的名稱。在瀏覽器加載頁面之前，服務器會把http-equiv屬性定義的相關信息發送給瀏覽器，便于在瀏覽器中正確顯示頁面。http-equiv屬性的語法結構如下

【作用與語法】<meta http-equiv="信息名稱"，content="附加信息的值">

說明：和name屬性相似，http-equiv屬性一般要和conten屬性成對出現

1.4.4 定義頁面的跳轉

【作用與語法】在瀏覽器網頁的時候經常會看到一些歡迎信息的頁面，并經過一段時間后，這一頁面會自動轉到其他頁面，這就是網頁的跳轉。使用HTML中的HTTP代碼就可以很輕松的實現這一功能。頁面跳轉的語法結構

<meta http-equiv="refresh" content="跳轉時間"；url="鏈接地址">

說明：在該語法中，refresh表示網頁的刷新，而在content中則設定刷新的時間和刷新后的地址，時間和鏈接地址之間用分號相隔。默認情況下，跳轉時間是以秒為單位的

1.5 基本設置元素：<base>

在HTML中，基本設置元素<base>使用來定義相對路徑的根目錄。使用<base>元素，可以方便的定義頁面中的超級鏈接。語法結構如下

<base 屬性="屬性值"/>

<base>元素在不使用任何屬性時，對頁面沒有影響。<base>元素中可以使用的屬性有鏈接路徑屬性href和鏈接窗口屬性target

1.5.1 鏈接路徑屬性：href

【作用與語法】href屬性用來指定文檔中相對鏈接的根目錄。文檔中的所有鏈接(包括圖片、音頻等內容)都按照href屬性所指定的根目錄顯示。href屬性的語法結構如下

<base href="指定路徑">包含的內容部分</base>

href屬性的取值為url值。它可以使用絕對路徑，也可以指

向某個文件夾。

在線咨詢

上一篇：用HTML和CSS實現酷炫的文字特效
下一篇：HTML5基礎學習筆記— 超文本標記語言編程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

三分鐘教你玩轉HTML

一章. 頁面基本元素

您的項目需求