您的位置：首页 > Web前端 > HTML

Web设计——初识HTML

2015-09-05 23:41 501 查看

【基本概念及个人理解】

HTML（HyperTextMark-upLanguage）即超文本标记语言，“超文本”指页面内除了文字之外还可以包含图片、链接，甚至音乐、程序等非文字元素。

在做新闻发布系统的过程中遇到的包含链接的例子：

<div
                id="footer">
                版权所有  ©  <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="" onclick="changeCode()" />

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成一个有机的整体，我们不用去考虑具体信息是存放在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标或一行文字，网络就会马上转到与此图标或文字相关的内容上去，而这些信息可能存放在网络的另一台电脑中。除此之外，HTML是网络的通用语言。它允许网页***人建立文本与图片相结合的复杂页面，无论你使用的是Dell、Lenovo或是MAC等电脑，还是用的FireFox、IE、Google等浏览器，这些页面都可以被网上其他人浏览到。这就是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="" onclick="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">
                版权所有  ©  <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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航