HTML标记是由“<”和“>”所括住的指令标记,用于向浏览器发送标记指令。主要分为:单标记指令、双标记指令(由“<起始标记>”+内容+“”构成)。 HTML语言使用标志对的方法编写文件,既简单又方便。它通常使用“<标志名>内容< /标志名>”来表示标志的开始和结束,因此在HTML文档中这样的标志都必须是成对使用的。为了便于理解,将HTML标记语言大致分为基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。

HTML文件的基本结构

a. HTML : Hypertext Markup Language 超文本标记语言

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>网页标题</title>
</head>
<body>
    主体
</body>
</html>

b. 基本结构:头部(head) 主体(body)

c. 所有内容都在< html>< /html>标签之内

<head></head>内放的是头部信息,是对页面的描述,不会直接显示在页面中
<head></head>内的<title></title>中设置的是页面的标题,<title></title>只能放在<head></head>中
<body></body>是页面的主体,大部分显示内容都定义在这里

d. 编辑工具:记事本、UltraEdit等,开发人员用VisualStudio写html就够了

块级标签

a. 标题标签< h1>~< h6> 段落标签< p> 水平线标签< hr />

b. 常用于页面布局的块级标签:有序列表< ol> 无序列表< ul> 定义列表< dl> 表格标签< table> 表单标签< form> 分区标签< div>

行级标签

a. 图像标签< img /> 超链接标签< a> 范围标签< span> 换行标签< br /> 输入框标签< input /> 文本域标签< textarea>

b. 常见的图片格式: JPG GIF BMP PNG

c. 语法:< img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字"/>

常使用如下四种块状结构:

a. Div-ul(ol)-li:用于分类导航或菜单等场合

b. Div-dl-dt-dd:用于图文混编场合

c. Table-tr-td:用于规整数据的显示

d. Form-table-tr-td:用于表单布局的场合

XHTML1.0的基本规范

a. 标签名和属性名称必须小写

b. HTML标签必须关闭

c. 属性值必须用引号括起来

d. 标签必须正确嵌套

e. 必须添加文档类型声明:
①该声明必须位于HTML文档的第一行
②有三种级别声明:Strict(严格类型) Transitional(过度类型) Frameset(框架类型)

HTML的基本标签(二)和表单

超链接: < a href="链接地址的路径" target="目标窗口位置"> (target常用取值:_self(自身窗口)和_blank(新建窗口))

超链接的三类应用场合:

a. 页面间链接 : A页到B页,用于网站导航

b. 锚链接 : A页的甲位置到A页(本页)的乙位置或A页甲位置到B页的乙位置

< a href = "#star">[明星专区]</a>

<!-- 链接到同一个网页的特定位置 -->
<a name = "star"><img src="images/adv.jpg" alt="明星专区"  title="明星专区">a>

c. 功能性链接:在页面中调用其他程序功能

<!--例:电子邮箱链接,mailto:创建电子邮箱链接-->
<a href="mailto:guimeiWebMater@gmgw.com">站长信箱</a>

HTML注释:< !-- 内容 -->

HTML中的特殊符号:
空格( ) 大于号(>) 小于号(<) 引呈(") 版权符号(©)

表单

a. 语法格式:

<!--
    1.get  是指将用户填写的信息作为一个字符串连接到地址栏一起提交,连接符用"?"隔开
    2.post 是指将用户填写的信息作为一个数据包提交,数据包是经过编码的
    -->
<form action="表单提交地址" method="提交方法(1.get  2.post)">
       <!--文本框.按钮等表单元素-->
</form>

b. 表单元素的基本格式:

<!--type可用的选项有:text\password\checkbox\radio\submit\reset\file\hidden\image\button-->
<input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中(单选或复选才用)" /> 

表单元素介绍

文本框(text)

<form action="" method="post">
    <p> 用户名:
        <input type="text" value="张三" size="20" name="userName" />
    </p>
</form>

密码框(password)

密码:

c. 重置\提交与普通按钮

    <input type="submit" value="提交按钮" name="submit" />
    <input type="reset" value="重置按钮" name="reset" />
    <input type="button" value="普通按钮" name="button" />
    <!--图形提交按钮-->
    <input type="image" src=" " />

d. 单选按钮(radio)

    <input type="radio" name="gen" class="input" value="男"/>男
    <input type="radio" name="gen" class="input" value="女"/>女

e. 复选框(checkbox)

<input type="checkbox" name="hobby1" value="1" />运动
<input type="checkbox" name="hobby2" value="2" />聊天
<input type="checkbox" name="hobby3" value="3" />玩游戏

f. 文件域(file)

<input type="file" name="file" />

g.下拉列表框(select)

<!--name:指定列表  value:可选择的值-->
向往月份:
<select name="c"> 
    <option value="0" selected="selected">请选择</option>
    <option value="1" >1月</option>
    <option value="2">2月</option>
</select>

h.多行文本域(textarea)

<!--cols:指定多行文本域的列数   rows:指定多行文本域的行数-->
<textarea name="textarea" cols="40" rows="6">初始文本内容</textarea>

i. 隐藏域(hidden)

<!--隐藏用户ID信息333-->
<input type="hidden" name="userid" value="333">

j. 只读和禁用属性

只读:readonly="readonly" 禁用:disabled="disabled"

本文为Anyforweb技术分享博客,需要了解网站建设及更多web应用相关信息,请访问anyforweb.com。