谈谈Html的基础认知

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

 

html文件的基本结构

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

<!DOCTYPE html>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-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.语法:<imgsrc="图片地址" 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="目标窗口位置"></a>    (target常用取值:_self(自身窗口)和_blank(新建窗口))

超链接的三类应用场合:   

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

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

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

 

<!-- 链接到同一个网页的特定位置 -->

<a name = "star"><imgsrc="images/adv.jpg" alt="明星专区"  title="明星专区">a>

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

<!--例:电子邮箱链接,mailto:创建电子邮箱链接-->

<ahref="mailto:[email protected]">站长信箱</a>

 

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

 

html中的特殊符号:

空格(&nbsp;)   大于号(&gt;)   小于号(&lt;)    引呈(&quot;)      版权符号(&copy;)

 

表单

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)

密码:<input type="password" name="pass" />

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。

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