HTML基础

浏览数：19 / 时间：2015年06月09日

html ;超文本标记语言。

html语言有标签组成。

html中的数据都会封装在标签中，因为可以通过标签中的属性值的改变对封装内的数据进行操作。

确定html代码范围<html></html>

在该范围中可以定义两部分内容，一部分书头，一部分是体。

<html>

<html>

head:网页的一些属性信息，比如：标题

body:网页显示的数据。

标签特点：对数据进行封装，那么就又开始和结束标签。

但是也有一些标签只体现单一功能，所以不需要结束标签，规范中要求标签必须要结束，所以这样的标签在内部结束。

如：<.br /> <hr/>分割 <img /> <input />

标签格式：<标签名属性名=”属性值”>数据</标签名>

<标签名属性名=”属性值” />

常用标签：

字体：<font>

特殊的部分：如果要在页面显示一些特殊符号，需要进行转义。

<: < >: > &: & 空格：

标题：<h1><h2><h3><>.......<h6>

2 列表标签：<dl></dl>

上层项目：<.dt>

下层项目：<.dd>（有缩进）

项目符号标签：

<ul> 无顺序

<ol> 有顺序

这两个标签的列表项都有<li>标签来封装。

<body>

<ol>

<ul>

</ul>

</ol>

</body>

1 游戏名称

a 星际

b 红警

2 游戏内容

a 攻略

b 秘籍

3 图像标签 <img>

4 表格标签

表格由行所组成，行由单元格组成

表格中默认都有一个tbody标签

标题标签：<caption>

<tr>

<th></th>//居中加粗

</tr>

<tr>

</tr>

</table>

表格是最常用的标签，用于对数据进行格式化。

5 超链接;<a>

当被点击后，会启动引擎所对应的解析程序，去查找指定的主机。

1 先找本地主机的hosts文件，如果没有找到该主机对应的ip地址

2 去公网NDS服务器上找对应的ip地址

当点击链接时，就会出现邮件相关联的解析程序，本机默认的是outlook

超链接的另一作用：

定位标记：

<a name=”top”> 一个位置 </a> //不能点

<a href=”#top”> 获取那个位置</a>

6 表单标签：

该标签是可以和服务器进行交互的。

<from>

表单标签中的元素：

<input>:该标签因为type属性的值的不同，所对应的组件也不一样。

type属性：

1， text: 文本框，输入文本可见

2， password : 密码框输入的文本不可见

3， radio：单选框，注意要被选中，必须要给单选框定义一个name属性

当有多个单选框时，只能有一个被选中，这些单选框的name必须相同

4， checkbox：复选框，党对多个数据进行同时选中时。

5， file：可以进行选择的组件，通常用于附件，或者文件上传。

6， hidden：隐藏组件，该组件不会在页面上显示，但是其定义的name和value可以提交到服务端。

7， button：按钮组件，自定义一个按钮默认是没有任何效果的，可以通过注册时间并加入自定义效果。

8， reset：重置按钮，将组建被操作的效果还原到初始状态吧。

9， submit：提交按钮，将组建中添加的数据提交到指定的目的地。

10， image：（比submit好看点）图像组件，为了避免提交按钮的难看，可以通过image的src属性连接一个好看的提交按钮效果。

下拉菜单:<select>

每一个下拉菜单项都有option进行封装。

</select>

文本区域：<textarea>

表单组件通常都需要定义name和value属性，因为要将数据发送给服务端。

服务端只有知道了该name的值才可以对提交的数据进行分别获取。

form标签中的常见属性：

action：指定数据提交的目的地。method：提交方式，两种常用值get和post，get为默认。

get和post的区别：

get：会将提交的数据像是地址栏上。

post：不会将提交的数据像是地址栏上。

get：提交数据的体积受地址栏的限制。

post：可以提交大体积数据。

get：对于敏感信息不安全。

post：对于敏感信息安全。

get：会将提交信息封装在请求行，也就是http消息头之前。

post：会将提交信息封装在数据体中，也就是http消息头之后的空行后。

对于服务端而言：

表单提交尽量使用post，因为涉及到编码问题。

对于post提交的中文，在服务端可以直接使用setCharacterEncoding(“gbk”)就可以解决

对于get提交的中文，在服务端可以只能通过IOS8859-1将数据编码一次，在通过指定的码表，如GBK解码，因为tomcat服务端默认的解码是IOS8859-1

使用表单的组件不一定要用form标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<legend >注册区域</legend>
<form>
    <table border="1" bordercolor="#FFCC33" width="70%" cellpadding="10" cellspacing="0">
    <tr>
       <th colspan="2">注册页面</th>
       
    </tr>
    <tr>
       <td>用户名：</td>
       <td><input type="text" name="user"/></td>
    </tr>
    <tr>
       <td>密码：</td>
       <td><input type="password" name="psw"/></td>
    </tr>
    <tr>
       <td>确认密码：</td>
       <td><input type="password" name="repsw"/></td>
    </tr>
    <tr>
       <td>性别：</td>
       <td>
            <input type="radio" name="sex" value="nan"/>男
            <input type="radio" name="sex" value="nv"/>女
       </td>
    </tr>
    <tr>
       <td>技术：</td>
       <td>
          <input type="checkbox" name="tech" value="java"/>java
           <input type="checkbox" name="tech" value="jsp"/>Jsp
            <input type="checkbox" name="tech" value="html"/>HTML
       </td>
    </tr>
    <tr>
       <td>国家：</td>
       <td>
           <select name="country">
              <option value="none">--选择国家--</option>
              <option value="china">中国</option>
              <option value="usa">美国</option>
              <option value="en">英国</option>
           </select>
       </td>
    </tr>
    <tr>
       <th colspan="2">
       <input type="submit" value="提交数据"/>
       <input type="reset" value="清除数据"/>
       </th>
       
    </tr>
    </table>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
       
<body>

<img src="11.gif" alt="图片署名文字" height="71" width="164" />
<hr  color="#00CC66" size="4"/>
<ol type="i" start="3">
     <li>hdvufjbv</li>
      <li>hdvufjbv</li>
      <li>hdvufjbv</li>
</ol>
<ul  >
     <li>hdvufjbv</li>
      <li>hdvufjbv</li>
      <li>hdvufjbv</li>
</ul>
<dl>
<ol  type="1" >

         <li> <dt>玩具</dt></li>
         <ol  type="a" >
          <li>毛绒熊</li>
          <li>卡通狗</li>
          <li>泰迪熊</li>
          </ol>
        <li><dt>游戏名称</dt></li>
         <ol type="I" >
          <li>红星大战</li>
          <li>开心泡泡猪</li>
          <li>连连看</li>
          </ol>
</ol>          
</dl>

       <font color="#FF9900" size="7">这是我的文字</font>
       <!--注释文字-->
</body>
</html>

HTML基础,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML基础