1、meta标签

1
2
3
<metacharset="UTF-8"/>
<metaname="Keywords" content=" "/>
<meta name='Description' content=" "/>

Charset:指定当前文档编码格式

Keywords:表示关键字，对搜索引擎友好，实现网站推广

Description:表示网站描述，网站优化

2、表格

1
2
3
4
5
<table width='30px' height='60px' border='1' cellpadding='0'> 定义一个表格
        <tr>            定义行
            <td></td>定义列
        </tr>
</table>

width:  设置宽度

height: 设置高度

border: 设置边框

cellpadding:    设置文字与列(td)之间的距离

cellspacing:    设置列与列之间的距离（默认为2）

align='center'  给表格设置，让表格居中，给列设置，让文字居中

<th></th>   设置表格内容标题，用法和td用法是一样的

bgcolor     设置表格背景颜色

<caption></caption>     给表格加标题

table结构:

1
2
3
4
5
<table>
      <thead></thead>
      <tbody></tbody>
      <tfoot></tfoot>
</table>

如果按照结构去写表格，就一定要按照顺序去写

3、表单

作用：搜索用户信息

属性：action/method

action 指定处理表单信息的程序

method get或者post  指的是表单的提交方式

get:讲我们的表单信息暴漏在地址栏中（安全性差）

post:通过后台方式提交给处理程序（安全性比较高）

表单结构：

1
2
3
<form>
     表单控件
</form>

表单控件:

 a、文本框<inputtype="text">

1
2
3
4
5
6
7
<form action="1.php"method="post">
       <input type="text" name="username"maxlength="3" readonly="readonly" >
               maxlength:设置最大长度
               readonly="readonly":只读（此时表单不能输入信息）
       <input type="text" name="username"maxlength="6" disabled="disabled">
               disabled="disabled" 控件未激活（此时表单不能输入信息）
</form>

b、密码框  <inputtype="password">

<input type="password">

c、单选框<input type="radio">

1
2
3
4
<form action="1.php"method="post">
       <inputtype="radio" name="xingbie">男
       <inputtype="radio" name="xingbie" checked="checked">女 ​   # checked="checked"设置默认选中
</form>

d、多选框 <inputtype="checkbox">

1
2
3
4
<inputtype="checkbox" checked="checked">看书
<inputtype="checkbox">上网
<input type="checkbox">旅游
<inputtype="checkbox" checked="checked">学习

e、下拉列表框

<select></select>这是下拉列表框

1
2
3
4
5
<select>
     <option>北京</option>
     <option>上海</option>
     <option>河南</option>
</select>

下拉列表分组显示

1
2
3
4
5
6
7
<select>
     <optgrouplabel="上海">
          <option>松江区</option>
          <option>闵行区</option>
          <option>徐汇区</option>
     </optgroup>
</select>

属性：multiple="multiple"  实现多选效果

属性：selected="selected" 设置下拉列表框实现默认选中

1
2
3
4
5
<selectmultiple="multiple">
       <option>北京</option>
       <option>安徽</option>
       <optionselected="selected">上海</option>
</select>

f、多行文本框  <textarea></textarea>

属性:  cols="30"   用法效果和width一样

rows="10"   用法效果和height一样

介绍自己：

1
2
3
<textareacols="30" rows="60">
        介绍内容
</textarea>

g、上传控件

<inputtype="file">

三种按钮：

h、普通按钮

<input type="button" value="确定">

注意：此按钮和js配合使用

i、重置按钮（将表单中的数据恢复到默认值）

<inputtype="reset">

j、提交按钮

         <input type="submit">

<input type="image"src="Hydrangeas.jpg"> 此按钮和submit按钮都可以提交表单

k、表单分组控件：<fieldset></fieldset>

1
2
3
4
5
<fieldset>
    <legend>人员注册信息</legend>
    <label>姓名：</label>
    <label>年龄：</label>
</fieldset>

最新文章

  1. ACM: FZU 2110 Star - 数学几何 - 水题
  2. [BZOJ 3682]Phorni
  3. react 属性与状态 学习笔记
  4. 文件上传和下载（可批量上传）——Spring（二）
  5. javascript实例——时间日期篇(包含5个实例)
  6. VC++中复制对话框资源 之较好方法之一
  7. BI中PowerDesigner建模
  8. MYSQL里的索引类型介绍
  9. 使用Spring框架的12个开源项目
  10. Day56
  11. 201521123072《java程序设计》第九周总结
  12. Redux 介绍
  13. java数组：去重，增加，删除元素
  14. React Native自动化测试
  15. 如何利用HTTP缓存来加快你的网站应用
  16. FATAL ERROR: please install the following Perl modules before executing
  17. 基于jmeter的性能测试平台（一）分布式jmeter搭建
  18. &lt;&lt;attention is all you need&gt;&gt;速读笔记
  19. Linux常用基本命令( tree, pwd, cd )
  20. IntelliJ IDEA神器使用技巧笔记

热门文章

  1. 用javascript判断一个html元素是否存在的五种方法：
  2. 关于java 中文乱码问题 自己的一点解决方案
  3. Ant——ant的使用
  4. bootstrap表格内容垂直居中
  5. C#创建datatable
  6. node版本管理器nvm(服务器项目相关)
  7. Struts2实现简单的在线人数统计
  8. CDN的实现原理
  9. (C# Binary Tree) 基本概念和算法
  10. [转载]iOS&#160;归档操作&#160;NSCoding