整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
1.1頁面基礎(chǔ)元素：<html>
<html>是頁面的基礎(chǔ)元素，主要用來定義頁面的開始和結(jié)束部分。元素語法結(jié)構(gòu)如下<html>....</html>（開頭標(biāo)記為<>,結(jié)束標(biāo)記為</html>）先介紹一下完整的HTML文件的基本結(jié)構(gòu)
<html> 文件開始標(biāo)記
<head> 文件頭開始標(biāo)記
......... 文件頭部分的內(nèi)容
</head> 文件頭結(jié)束標(biāo)記
<body> 文件主體開始標(biāo)記
......... 文件主題部分的內(nèi)容
</head> 文件主題結(jié)束標(biāo)記
</html> 文件結(jié)束標(biāo)記
在<html>和</html>之間寫入想要編輯的頁面內(nèi)容就構(gòu)成了一個簡單的頁面
1.1.1 文本顯示方向?qū)傩裕篸ir
【作用與語法】dir屬性用來指定瀏覽器文本顯示的方向，同時也決定瀏覽器滾條的位置。dir屬性的語法結(jié)構(gòu)如下
<html dir="瀏覽器中文本的方向">......</html>(在元素名稱和屬性之間要加入空格)
dir屬性可以取兩個值，ltr（left title right）和rtl（right title left），分別表示從左向右顯示和從右向左顯示
1.1.2 指定語言屬性：lang
【作用與語法】lang屬性用來指定文檔中所使用的語言。lang屬性的語法結(jié)構(gòu)如下
<html lang="指定的語言">包含的內(nèi)容部分</html>
lang屬性的取值可以使用ISO標(biāo)準(zhǔn)中的語言代碼。在<html>元素中加入lang屬性，使瀏覽器更好的顯示界面，并不會更改頁面的文字編碼
ISO標(biāo)準(zhǔn)中語言代碼的取值及含義語言名稱寫法語言名稱寫法英語en法語fr漢語zh德語de日語ja意大利語it
1.2 頁面頭部元素：<head>
【作用與語法】HTML的頭部元素是以<head>為開始標(biāo)記，以</head>為結(jié)束標(biāo)記。它用于包含當(dāng)前文檔的相關(guān)信息，可包含<title>元素、<meta>元素等，分別用來定義頁面的標(biāo)題、編碼。使用<head>元素可以將基本信息部分和頁面主體內(nèi)容區(qū)分開來。<head>元素的語法結(jié)構(gòu)如下
<head>......</head>
1.3 頁面標(biāo)題元素：<title>
【作用與語法】HTML頁面的標(biāo)題一般是用來說明頁面用途的，它顯示在瀏覽器的標(biāo)題欄中。在HTML文檔中，標(biāo)題信息設(shè)置在頁面的頭部，也就是<head>和</head>之間。<title>元素的語法結(jié)構(gòu)如下。
<title>......</title> (說明：在標(biāo)記中間的“......”就是標(biāo)題的內(nèi)容，它位于HTML文檔的頭部，即<head>和</head>之間)
1.4 元信息元素：<meta>
【作用與語法】元信息元素<meta>用來定義頁面的附加信息，其中包括頁面的作者、版權(quán)、關(guān)鍵字等相關(guān)信息。<meta>元素的語法結(jié)構(gòu)如下。
<meta 屬性=“屬性值”/>
<meta>元素是一個自封閉的元素，通過其中的屬性來添加各種附加信息。<meta>元素在不適用任何屬性時，對頁面沒有影響。
1.4.1 元信息元素名稱屬性：name
【作用與語法】name屬性用來制定文檔中附加信息的名稱。例如，最常用的值“keywords”用來定義文檔中的關(guān)鍵字，方便搜索引擎的搜索。name屬性的語法結(jié)構(gòu)如下。
<meta name="信息名稱"/>
在<meta>元素中，名稱必須對應(yīng)有相關(guān)的值才能生效
1.4.2 元信息元素的值：content
【作用與語法】content屬性用來指定文檔中附加信息的值，它與name屬性成對出現(xiàn)。content屬性的語法結(jié)構(gòu)如下
<meta name="信息名稱" conten="附加信息的值"/>
<meta>元素中所定義的“keywords”信息是用來為搜索引擎定義關(guān)鍵字的，所以對頁面顯示效果并不產(chǎn)生影響，故頁面顯示效果并無太大變化
1.4.3 元信息元素的附加屬性：http-equiv
【作用與語法】http-equiv屬性和name屬性類似，用來指定附加信息的名稱。在瀏覽器加載頁面之前，服務(wù)器會把http-equiv屬性定義的相關(guān)信息發(fā)送給瀏覽器，便于在瀏覽器中正確顯示頁面。http-equiv屬性的語法結(jié)構(gòu)如下
【作用與語法】<meta http-equiv="信息名稱"，content="附加信息的值">
說明：和name屬性相似，http-equiv屬性一般要和conten屬性成對出現(xiàn)
1.4.4 定義頁面的跳轉(zhuǎn)
【作用與語法】在瀏覽器網(wǎng)頁的時候經(jīng)常會看到一些歡迎信息的頁面，并經(jīng)過一段時間后，這一頁面會自動轉(zhuǎn)到其他頁面，這就是網(wǎng)頁的跳轉(zhuǎn)。使用HTML中的HTTP代碼就可以很輕松的實現(xiàn)這一功能。頁面跳轉(zhuǎn)的語法結(jié)構(gòu)
<meta http-equiv="refresh" content="跳轉(zhuǎn)時間"；url="鏈接地址">
說明：在該語法中，refresh表示網(wǎng)頁的刷新，而在content中則設(shè)定刷新的時間和刷新后的地址，時間和鏈接地址之間用分號相隔。默認(rèn)情況下，跳轉(zhuǎn)時間是以秒為單位的
1.5 基本設(shè)置元素：<base>
在HTML中，基本設(shè)置元素<base>使用來定義相對路徑的根目錄。使用<base>元素，可以方便的定義頁面中的超級鏈接。語法結(jié)構(gòu)如下
<base 屬性="屬性值"/>
<base>元素在不使用任何屬性時，對頁面沒有影響。<base>元素中可以使用的屬性有鏈接路徑屬性href和鏈接窗口屬性target
1.5.1 鏈接路徑屬性：href
【作用與語法】href屬性用來指定文檔中相對鏈接的根目錄。文檔中的所有鏈接(包括圖片、音頻等內(nèi)容)都按照href屬性所指定的根目錄顯示。href屬性的語法結(jié)構(gòu)如下
<base href="指定路徑">包含的內(nèi)容部分</base>
href屬性的取值為url值。它可以使用絕對路徑，也可以指
向某個文件夾。
有四組必需的HTML標(biāo)記來構(gòu)成每個HTML文件的基本結(jié)構(gòu)：
標(biāo)記html定義一個網(wǎng)頁文檔。它標(biāo)識了HTML文檔的開始和結(jié)束。所有其他標(biāo)記必須位于html標(biāo)記之間。
標(biāo)記head包含關(guān)于文檔的信息，這些信息不會出現(xiàn)在實際頁面上，例如文檔的標(biāo)題、作者、使用的樣式表以及元標(biāo)記。
標(biāo)記title標(biāo)記定義網(wǎng)頁在web瀏覽器標(biāo)題欄中的標(biāo)題。標(biāo)題必須出現(xiàn)在head標(biāo)記之間。
標(biāo)記body包含頁面上的所有信息和其他可見內(nèi)容。所有圖像、鏈接和純文本必須位于<body>和</body>標(biāo)記之間。
這四個標(biāo)記很特別。每個只能有一組，并且它們必須按照下面示例中的正確順序排列。
下面是一個基本的html文檔。請注意，所有內(nèi)容都在html標(biāo)記之間，標(biāo)題出現(xiàn)在文檔的頭部，而正文位于頭部之后：
瀏覽器顯示內(nèi)容如下所示：
天開始小編將會給大家講解HTML的入門知識以及做項目會遇到的某些問題以及如何解決此類問題的方法。說道網(wǎng)頁設(shè)計，HTML是我們必不可少的一部分?；A(chǔ)網(wǎng)頁的構(gòu)成，無論怎么變幻，都是由原聲的HTML代碼組成構(gòu)成網(wǎng)頁。
下面我就根據(jù)工作中所用和看過的書籍一點一點總結(jié)下我們常用的HTML格式和代碼。
一、什么是HTML。
HTM不是一段編程語言，而是一款標(biāo)記語言，本身不能顯示在瀏覽器中。經(jīng)過瀏覽器的編釋和編譯，才能正確反映HTML標(biāo)記語言的內(nèi)容。HTML從1.0到5.0經(jīng)歷了巨大的變化，從單一的文本顯示功能到多功能互動，已經(jīng)成為了一款非常成熟的標(biāo)記語言。
二、HTML文件的基本結(jié)構(gòu)
<!doctype html>
<html>文件開始標(biāo)記
<head>文件頭開始的標(biāo)記
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<title>XX系統(tǒng)</title>
</head>文件頭結(jié)束
<body>文件主題的內(nèi)容
</body>文件主題的結(jié)束
</html>文件結(jié)束的標(biāo)記
這里主要說明title和meta(元信息)
<!--說明文件頭-->
<title>XX網(wǎng)站</title>
<!--添加作者信息-->
<meta name="author" content="_永不言棄" >
<!--設(shè)置網(wǎng)頁文字及語言 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<!--設(shè)置網(wǎng)頁定時(20秒后)跳轉(zhuǎn)-->
<meta http-equiv="refresh" content="20;url=index.html">
三、HTML主要常用標(biāo)簽
3.1標(biāo)題
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
3.2 標(biāo)題字對齊屬性align
默認(rèn)情況下，標(biāo)題文字是左對齊的。在網(wǎng)頁制作過程中，常常需要選擇對其他的方式，這時我們就需要用到align屬性。
3.3 段落標(biāo)記p
段落標(biāo)記是文檔中最常見的標(biāo)記，<p>用來起始的一個段落。
3.3 換行標(biāo)記
換行標(biāo)記<br>作用是在不另起一段的情況下將當(dāng)前文本強(qiáng)制換行。
3.4 不換行標(biāo)記nobr
<nobor>表示的是不換行的標(biāo)記</nobor>
3.5 水平線
<hr/>
四、建立超鏈接
與自身網(wǎng)站頁面有關(guān)的連接被稱為內(nèi)部連接
4.1絕對路徑
絕對路徑是包括服務(wù)器規(guī)范在內(nèi)的完全路徑。絕對路徑不管源文件在什么位置都可以非常精確地找到，除非是目標(biāo)文檔的位置發(fā)生變化，否則連接不會失效。
4.2相對路徑
為了避免絕對路徑的缺陷，對于在同一站點之中的連接來說，使用相對路徑是一個很好的方法。
4.3 內(nèi)部連接
<a href="# target="目標(biāo)窗口的打開方式 " >
屬性值
含義
-self在當(dāng)前頁面中打開連接
-blank在一個全新的空白窗口中打開連接
-top在頂層框架中打開連接，也可以理解為在根框架中打開連接
-parent在當(dāng)前框架的上一層里打開連接
4.4 錨點連接
錨點到本頁面中的位置
<a href="#1" >商品名稱</a>
<a href="#2" >產(chǎn)品特點</a>
<a href="#3" >產(chǎn)品規(guī)格</a>
<a neme="1">XX商品</a>
<a neme="2">XX產(chǎn)品特點</a>
<a neme="3">XX規(guī)格</a>
錨點到其他頁面的位置
<a href="index.html#1"></a>對應(yīng)連接到index.html中name=1的位置
4.5 連接到外部網(wǎng)站
在設(shè)置友情鏈接時，需要打開HTTP協(xié)議進(jìn)行外部連接訪問。
<a href="wwww.baidu.com" >百度</a>
4.6 連接到E-mail
<a href="mailto:郵件地址">。。。</a>
4.7 連接到FTP
FTP代表文件傳輸協(xié)議，一個FTP站點通常包含一些上傳和下載文件的文件目錄。
大部分FTP網(wǎng)站需要使用用戶名和密碼來登錄。
當(dāng)然還有其他的一些連接方式，例如文件下載，連接到Telnet等。這些都會可以用a標(biāo)簽實現(xiàn)。
HTML基礎(chǔ)就先講到這里，后面退出DIV設(shè)計網(wǎng)頁格式已經(jīng)網(wǎng)頁分框的實現(xiàn)。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
