html表格和表单基础

最新推荐文章于 2024-06-11 18:18:58 发布

最新推荐文章于 2024-06-11 18:18:58 发布 · 311 阅读

文章标签：

#html #表格 #表单 #meta #锚点

Html+CSS+HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括表格和表单的基本用法，并通过实例展示了如何使用HTML制作个人简历及注册页面。

第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的再看看自己什么都还不会,

html是一种标记语言,其实很简单都是固定的格式

_----------------------------------------表格和表单

表格是html的重要组成部分,表格用在body里面的

主要用法如下;

<table>

     <tr>

        <td>a</td>

     </tr>

</table>

th可以替换td,区别在于th会居中对齐并且字体变大

有序和无序

<ul>

<li></li>

<li></li>

</ul>

有序

<ol>

<li></li>

<li></li>

</ol>

使用表格做个人简历

<html>
<head>
  <title>个人简历主页</title>
  <meta  http-equiv="content-type" content="text/html"; charset="gbk"/>
</head>

<body>
<table bgcolor="ff0000" width="70%" border="1" align = "center" cellspacing="1px" cellpadding="1px">
<caption>个人简历</caption>

<tr height="40px"  bgcolor="ffffff">
    <td width="10%" >姓名</td>
    <td width="30%">王佳</td>
	<td width="10%">性别</td>
    <td width="30%">男</td>
	<td rowspan="4" width="180px"><img src="Image/grace.jpg" width="180px" alt="姐姐" title="姐姐"></img></td>
</tr>
<tr height="40px" bgcolor="ffffff">
    <td>籍贯</td>
    <td>湖南长沙</td>
	<td>现居地</td>
    <td>湖南长沙</td>
</tr>
<tr height="40px" bgcolor="ffffff">
    <td>学校</td>
    <td>牛耳教育</td>
	<td>专业</td>
    <td>Java+android</td>
</tr>
<tr height="40px" bgcolor="ffffff">
    <td>联系电话</td>
    <td>123455</td>
	<td>邮箱</td>
    <td>111@163.com</td>
</tr>

<tr bgcolor="ffffff">
 <th colspan="5" > 个人简介</th>
</tr>

<tr bgcolor="ffffff">
 <th colspan="5" >（一） 消息标题的作用和种类。标题是消息的眼睛，其作用是:吸引读者阅读；集中反映消息的精华，使读者对内容有概括了解。消息的标题往往有三种类型一是正题，
 或叫母题、主题、大标题。是标题的骨干和核心，高度概括消息的中心内容。
 消息标题的作用和种类。标题是消息的眼睛，其作用是:吸引读者阅读；集中反映消息的精华，使读者对内容有概括了解。消息的标题往往有三种类型一是正题，
 或叫母题、主题、大标题。是标题的骨干和核心，高度概括消息的中心内容。
 消息标题的作用和种类。标题是消息的眼睛，其作用是:吸引读者阅读；集中反映消息的精华，使读者对内容有概括了解。消息的标题往往有三种类型一是正题，
 或叫母题、主题、大标题。是标题的骨干和核心，高度概括消息的中心内容。
 消息标题的作用和种类。标题是消息的眼睛，其作用是:吸引读者阅读；集中反映消息的精华，使读者对内容有概括了解。消息的标题往往有三种类型一是正题，
 或叫母题、主题、大标题。是标题的骨干和核心，高度概括消息的中心内容。
 消息标题的作用和种类。标题是消息的眼睛，其作用是:吸引读者阅读；集中反映消息的精华，使读者对内容有概括了解。消息的标题往往有三种类型一是正题，
 或叫母题、主题、大标题。是标题的骨干和核心，高度概括消息的中心内容。
 消息标题的作用和种类。标题是消息的眼睛，其作用是:吸引读者阅读；集中反映消息的精华，使读者对内容有概括了解。消息的标题往往有三种类型一是正题，
 或叫母题、主题、大标题。是标题的骨干和核心，高度概括消息的中心内容。
 消息标题的作用和种类。标题是消息的眼睛，其作用是:吸引读者阅读；集中反映消息的精华，使读者对内容有概括了解。消息的标题往往有三种类型一是正题，
 或叫母题、主题、大标题。是标题的骨干和核心，高度概括消息的中心内容。
 消息标题的作用和种类。标题是消息的眼睛，其作用是:吸引读者阅读；集中反映消息的精华，使读者对内容有概括了解。消息的标题往往有三种类型一是正题，
 或叫母题、主题、大标题。是标题的骨干和核心，高度概括消息的中心内容。 </th>
</tr>

<tr bgcolor="ffffff">
 <td colspan="5">自我评价</td>
</tr>

<tr bgcolor="ffffff"> 
 <td colspan="5">
  活波可爱
 </td>
</tr>


</table>
</body>


</html>

++++++++++++++++++++++++++++表单

表单主要使用在注册等页面,个人感觉对java里面的swing好用多了

表单的格式:

<form action="www.taobao.com" Mothed="get">

<input  type="" />

</form>

action表示提交的时候会自动的提交到淘宝

Mothed有两种获取的方式:get和post,get获取可以看到内容,post不能

input 表示输入标签

type 表示什么类型

<html>
<head>
</head>
 <body>
   <form action="www.baidu.con">   提交到百度
   姓名:<input type="text"><br/>创建文本输入框
   密码:<input type="password"><br/>创建密码输入框
  创建单选框
   性别:<input type="radio" name="sex" checked/>男  <input type="radio" name="sex" />女 <br/>
  创建多选框 
  爱好;<input type="checkbox" checked>篮球
     <input type="checkbox">旅游<br/>
	 <select>
	   <option>java</option>
	 </select><br/>
创建重置按钮
<input type="reset">
<input type="submit">创建提交按钮
<input type="button" value="提交" disabled/>创建普通按钮

   </form>
</body>
</html>

使用form表单创建注册页面

<html>
<head>
<meta http-equiv="Contnet-type" content="text/html" charset="gbk"/>
</head>
<body>
  <p><h1><img src="image/Login.png" width="50px" height="50px" ></img>  个人用户注册</h1></p><br/>
  
  <table bgcolor="ff00000" border="1" cellpadding="1px" cellspacing="1px">
  <tr bgcolor="ffffff">
  <td>
  <form action="www.iteye.com" method="get">
  用户名:&nbsp;&nbsp;&nbsp;<input type="text" name="txt" ><br/>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20个字符，允许中文，英文字母、数字和符号.-_。为了避免被垃圾邮件抓取，请勿使用邮件地址作为用户名</p><br/>
  邮箱地址:<input type="text" name="email"><br/>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请不要使用Yahoo邮箱注册，Yahoo邮件服务器会拒绝ITeye发送的邮件</p><br />
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果您没有收到ITeye发送的邮件，请注意查看您邮箱中的垃圾邮件。</p><br />
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;并且把来自ITeye的邮件设置成不是垃圾邮件，方便接受站内邮件。</p><br />
  密码:&nbsp;&nbsp;&nbsp;<input type="password" name="password"><br/>
   <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请选用安全的密码，不允许使用只包含纯数字，纯大写或者小写字母的密码</p><br/>
  确认密码:<input type="password" name="password"><br/>
  <hr/><br/>
   <p>来自:&nbsp;&nbsp;&nbsp; <select>
   <option>湖南长沙 </option>
   <option>湖南长江</option>
   </select>如果列表中没有您的城市，可直接输入
   </p><br/>
   
    <p>性别:&nbsp;&nbsp;&nbsp; <select>
   <option>男 </option>
   <option>女</option>
   </select>
   </p><br/>
  </form>
  </td>
  </tr>
  </table>
  
</body>
</html>

使用<br/>来换行会出现行间距过大,现在还不知道怎么解决,百度上面没有找到解决的办法

++++++++++++++++++++++++++++<meta />标签

声明字符集为

gbk<meta http-equiv="Contnet-type" content="text/html" charset="gbk"/>

声明跳转到淘宝

<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

++++++++++++++++++++++++++++++锚点的定义

跳转到指定的页面地方

定义锚点;<a name="name">sal</a>

调用锚点 <a href ="#name"> 欢迎来到我的页面！！！</a>