`
百合不是茶
  • 浏览: 355927 次
社区版块
存档分类
最新评论

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 />标签

<meta>标签使用在head里面,一般是做声明和搜索优化用的

声明字符集为

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>

  • 大小: 107 KB
  • 大小: 18.5 KB
0
0
分享到:
评论

相关推荐

    实验三-HTML表格与HTML表单.doc

    在实验报告中,我们还可以看到,HTML 表格和 HTML 表单的结合使用,用于显示和收集数据。这种结合使用可以实现复杂的交互式应用程序。 知识点总结: 1. HTML 表格的基本结构和应用 2. HTML 表格的样式控制,例如...

    HTML表格与表单(适合初学者的教材)

    HTML 表格与表单教程 HTML 表格是 HTML 文档中的一种重要结构元素,它可以用来排版布局、组织数据、美化页面等。...通过学习本节课,你将掌握 HTML 表格和表单的基础知识,提高自己的 HTML 编程能力。

    HTML基本标签+表格基础+表单和框架

    在“HTML基本标签+表格基础+表单和框架”这个主题中,我们将探讨这三个关键概念。 1. HTML基本标签:HTML标签是HTML语言的核心元素,它们告诉浏览器如何解析和展示页面内容。例如,`&lt;html&gt;`标签定义了整个文档的...

    html基础教程 表格与表单 图像和声音 框架 CSS.ppt

    HTML(超文本标记语言)是创建网页的基本语言,它是一种标记语言,不需要编译,而是直接由浏览器解析执行。...学习这些基础后,可以创建静态的网页,为进一步学习JavaScript和其他前端技术打下坚实基础。

    HTML02表格和表单.ppt

    HTML 表格和表单 HTML 表格和表单是 HTML 文档中两个重要的组成部分。表格用于组织和展示数据,而表单用于收集...HTML 表格和表单是 Web 开发中两个重要的组件,掌握它们的使用方法是构建复杂 Web 应用程序的基础。

    按钮 表格 表单验证

    在网页设计和开发中,按钮、表格和表单验证是三个关键元素,它们共同构建了用户与网站交互的基础。下面将详细阐述这三个方面的知识。 首先,我们来看“按钮”。按钮在网页中扮演着触发动作的角色,它允许用户执行...

    表格、表单提示显示-HTML-代码

    首先,HTML表格(`&lt;table&gt;`元素)是展示数据的常用方式。它由`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头)等元素组成。在创建表格时,我们需要注意语义化,使表格内容易于理解,同时考虑响应式设计,确保在不同...

    html静态网页(导航条、表格、表单、音视频插入、照片框等)

    HTML静态网页设计是Web开发的基础,它涉及到一系列的网页元素和功能,如导航条、表格、表单、音视频插入以及照片框等。这些元素在创建一个完整的、交互性强的网站时都起着至关重要的作用。 首先,让我们来讨论HTML5...

    网站开发之HTML基础表格Table和表单Form(三)1

    总的来说,HTML表格和表单是网页开发的基础,掌握它们的使用能够帮助开发者构建功能丰富的交互式网页。然而,为了保持代码的简洁和网页的性能,应谨慎使用复杂的表格布局,并考虑利用CSS来实现更灵活的布局方案。

    js+html写的实现表格的动态增删改查和表单验证

    综上所述,使用JavaScript和HTML结合可以实现丰富的用户交互,创建动态表格并进行数据操作,同时配合表单验证保证数据质量。通过学习和掌握这些技能,开发者能够构建出高效、友好的前端应用。在实际项目中,还可能...

    html学习【(案例)用文本编辑器打开能看到知识点】包括表格表单等

    以上就是关于HTML表格、表单、锚点、`input`和`button`等基础知识的详细解释。学习并熟练掌握这些内容,将有助于构建功能丰富的静态网页。随着对CSS和其他Web技术的理解加深,可以创建出更具交互性和动态效果的网页...

    html概述 表格 表单 框架 层叠样式

    表单提交通常通过`&lt;input type="submit"&gt;`完成,并且可以设置`action`和`method`属性来指定处理表单数据的服务器端脚本和提交方式。 四、HTML框架 HTML框架(Frames)使用`&lt;frameset&gt;`和`&lt;frame&gt;`元素将一个浏览器...

    heml文档html语言基础、表格与表单、样式表、样式表应用、html特效代码、heml常用代码、网络学习、css样式

    html初级教程 :html语言基础、表格与表单、样式表、样式表应用、html特效代码、heml常用代码、网络学习、css样式

    可编辑表格(表单)简易实现

    首先,我们需要构建基本的HTML表格结构。表格由`&lt;table&gt;`元素定义,内部包含`&lt;tr&gt;`(行)和`&lt;td&gt;`(单元格)。对于可编辑的表格,我们将`&lt;td&gt;`替换为`&lt;input&gt;`或`&lt;textarea&gt;`元素,这样用户就可以直接在表格内输入...

    漂亮的表格css+html

    首先,HTML表格基础。在HTML中,我们使用`&lt;table&gt;`标签来定义一个表格,而`&lt;tr&gt;`标签用于创建表格行,`&lt;th&gt;`用于定义表头单元格,`&lt;td&gt;`则用于定义常规数据单元格。例如: ```html 表头1 表头2 数据1 ...

    html文件的基本结构 _html版本 _主要的浏览器 _链接a href _表格 _表单 _列表

    HTML是超文本标记语言(Hypertext Markup Language)的缩写,它是一种用于创建网页的标准...综上所述,HTML的结构、标签及其使用方法是网页设计和开发的基础,熟练掌握这些知识点对创建美观、功能完善的网页至关重要。

    Angularjs2表单和表格

    `FormControl`是表单的基础,它管理单个输入控件的值和验证状态。`FormGroup`用于组合多个`FormControl`,形成一个分组的表单。`FormArray`则允许动态添加或删除`FormControl`,适用于数组数据的处理。 3. 数据...

    HTML表格的美化修饰

    在网页设计中,HTML表格是展示数据和组织信息的重要元素。然而,仅使用基本的HTML表格标记可能无法满足我们对视觉吸引力和用户体验的需求。为了创建一个布局协调、色调统一、美观且大方的表格,我们需要掌握一些HTML...

    HTML标签大全(标签,表格,表单)

    - `&lt;isindex&gt;`:在早期HTML中用于创建简单的单行输入搜索表单,现在已被更复杂的`&lt;form&gt;`和`&lt;input&gt;`元素替代。 **基础路径设置**: - `&lt;base&gt;`:定义页面中所有相对URL的基础路径。 **文本格式化**: - `&lt;h1&gt;`到`...

Global site tag (gtag.js) - Google Analytics