Web設計——初識HTML

     【基本概念及個人理解】


HTMLHyperTextMark-upLanguage)即超文本標記語言,“超文本”指頁面內除了文字之外還可以包含圖片、鏈接,甚至音樂、程序等非文字元素。


在做新聞發佈系統的過程中遇到的包含鏈接的例子

           <div
                id="footer">
                版權所有  &copy;  <a href="http://qshzh1314.blog.163.com" target="_blank">提高班</a>  &<a href="http://www.tg029.com" target="_blank"> 衆志網 </a>
            </div>

        

包含圖片的例子:

驗證碼:<img src="../handler/WaterMark.ashx" id="vimg" alt="" οnclick="changeCode()" />

設計HTML語言的目的是爲了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯繫在一起,形成一個有機的整體,我們不用去考慮具體信息是存放在當前電腦上還是在網絡的其它電腦上。我們只需使用鼠標在某一文檔中點取一個圖標或一行文字,網絡就會馬上轉到與此圖標或文字相關的內容上去,而這些信息可能存放在網絡的另一臺電腦中。除此之外,HTML是網絡的通用語言。它允許網頁製作人建立文本與圖片相結合的複雜頁面,無論你使用的是DellLenovo或是MAC等電腦,還是用的FireFoxIEGoogle等瀏覽器,這些頁面都可以被網上其他人瀏覽到。這就是HTML,它距離我們並不遙遠,現在讀者你看到的就是用HTML語言寫的界面。


【結構】


HTML包括兩大部分:head(頭部)body(主體),其中頭部描述了瀏覽器所需要的信息,它本身不作爲內容來顯示,但影響網頁顯示的效果,而主體則包含所要說明的具體內容。頁面上顯示的任何信息都包含在這兩個標籤之中。


以下是HTML常用的標籤:


1.主要標籤:


標籤

說明

<html>

創建一個HTML文檔

<head>

設置文檔標題和其它在網頁中不顯示的信息

<title>

設置文檔的標題

<h1>

最大的標題


2.格式標誌標籤:


標籤

說明

<p>

創建一個段落

<p align="">

將段落按左、中、右對齊

<br>

換行 


3.鏈接標誌:


標籤

說明

<a href="URL">

創建超文本鏈接

<a name="name">

創建位於文檔內部的書籤

<a href="#name">

創建指向位於文檔內部書籤的鏈接

<link>

定義一個鏈接和源之間的相互關係


4.鏈接標記註解:


target="..."決定鏈接源在什麼地方顯示(用戶自定義的名字,_blank,_parent,_self,_top)


rel="..."發送鏈接的類型 


rev="..."保存鏈接的類型


以上是在做新聞發佈系統經常用到的標籤,當然還有很多標籤,有興趣的讀者可以去了解學習。需要注意的是所有的標籤都是成雙成對出現的,比如:HTML頁面以<html>標籤開始,必定以</html>結束。


在學習了之後會發現基礎的HTML語言簡直是容易到爆了,它只不過是由一系列標籤組合成文本文件的一種語言。其實,HTML文檔的標籤就像我們每本書的目錄一樣,有章、有節,節下有一級標題、二級標題,不管是什麼,這些都是設計的基本規則。


【實踐】


以下是以新聞發佈系統的登陸界面來看HTML是怎麼使用的,當然,這裏已經是加上css、div來設計樣式的結果。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="Web.admin.login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>後臺登錄-新聞發佈系統</title>
    <link href="../css/login.css" rel="stylesheet" />


    <script language="javascript" type="text/javascript">
        //js實現實時刷新驗證碼方法
        function changeCode() {
            var imgNode = document.getElementById("vimg");
            imgNode.src = "../handler/WaterMark.ashx?t=" + (new Date()).valueOf();//在這裏加個時間參數是爲了防止瀏覽器的緩存問題
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="loginfrm" class="round1">
            <h3>後臺登錄-新聞發佈系統</h3>
            <div id="login">
                <img src="../images/niunan.png" alt="LOGO" class="login_logo" />
                <p>
                    用戶名:<asp:TextBox ID="txtUserName" runat="server" CssClass="textbox">qshzh</asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="請輸入用戶名!" Text="*" ControlToValidate="txtUserName" ForeColor="Red"></asp:RequiredFieldValidator>
                </p>
                <p>
                    密 碼:<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="textbox">123456</asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="請輸入密碼!" Text="*" ControlToValidate="txtPassword" ForeColor="Red"></asp:RequiredFieldValidator>
                </p>
                <p>
                    驗證碼:<img src="../handler/WaterMark.ashx" id="vimg" alt="" οnclick="changeCode()" />
                    <asp:TextBox ID="txtCode" runat="server" CssClass="textcode"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="請輸入驗證碼!" Text="*" ControlToValidate="txtCode" ForeColor="Red"></asp:RequiredFieldValidator>
                </p>
                <p>
                    <asp:Button ID="btnLogin" runat="server" Text="登錄" Height="23px" OnClick="btnLogin_Click" Width="56px" />
                </p>
                <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="true" ShowSummary="false" />
            </div>
            <div
                id="footer">
                版權所有  &copy;  <a href="http://qshzh1314.blog.163.com" target="_blank">覃仕珍博客</a>  &<a href="http://www.tg029.com" target="_blank"> 網易</a>
            </div>
        </div>
    </form>
</body>
</html>
          

HTML很神奇,卻一直無處不在,只要我們一瀏覽網頁就會接觸到它,不信,現在就右擊鼠標→“查看源”試試,這就是HTML




 




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章