zhuhuiwen Front-end Dev Engineer

HTML TAG(二)

2016-08-29

meta标签

1.设置字符集<meta charset="UTF-8"> 作用: 防止页面乱码(编码、解码)

2.设置网页关键字<meta name="keywords" content="关键字,用逗号隔开"> 作用: 给搜索引擎

3.设置网页描述 <meta name="description" content="网页描述"> 搜索时显示的值

4.设置网页重定向 <meta http-equiv="refresh" content="2,url=02link.html"> 2s后跳转设置的网页

  1. 用来引用外部样式表 <link rel="stylesheet" href="">
  2. 设置网页图标 <link rel="icon" href="favicon.ico">

    注意:

    1.网页图标最好是icon格式 2.网页图标最好放到网站根目录下

表格

  • 表格

    作用: 1.用来表示数据、2.使用表格布局(div+css)

-组成

行tr 列(单元格)td 范围table
  • 属性1

border : 0 默认没有边框

width: 设置宽度

height: 设置高度

cellspacing=2 默认值为2,设置td与td之间的距离

cellpadding=0 设置内容与边框之间的距离

注意: cellpadding 值可以影响表格大小

  • 属性2
align: left center right 设置对齐方式

注意:

  1. 如果给table设置align,只能改变table的位置,不能改变table中内容的位置
  2. 要改变内容对齐方式,给tr或td设置align

bgcolor: 设置背景颜色

  • 组成

    表头标签 <th></th>用法和td一样 ` <tr> <th></th> <th></th>

    </tr>`

标题标签 <caption>个人信息表</caption>

  • 表格结构 `<table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> </tr> </tfoot>

</table>`

  • 合并单元格

colspan 横向合并

rowspan 纵向合并

注意: 被合并的要去掉 ` <body> <tr> <td colspan="4"></td> </tr> <tr> <td rowspan="2"></td> </tr> </body>`

8/29/2016 2:19:47 PM

8/29/2016 3:40:49 PM

form

  • 作用 用户收集用户信息
  • 组成 表单域、表单控件(重点)、提示信息
  • 表单域 <form action=""></form>

    action属性: 设置一个处理表单数据的应用程序 method属性 设置提交表单数据的方式,get post

  • 表单提交方式
  • get 提交的表单数据会暴露在地址栏中,不安全 post 通过后台的方式进行数据提交安全。

  • 表单控件

    1. 输入框 <input type="text"> size input控件在页面中显示的宽度
    2. name属性 设置表单控件的名称
    3. maxlength属性 设置空间中最多输入多个字符
    4. readonly=“readonly” 设置控制为只读
    5. disable=“disable” 当前控件未激活(只能看不可编辑)
    6. value 设置默认值
    7. 密码输入框 <input type="password">
    8. 单选控件 <input type="radio" name="gender">nan<input type="radio" name="gender">nv注意:要实现单选效果,设置相同的name
    9. 下拉列表 <select><option>aaa</option><option selected="selected">bbb</option></select> 注意:selected=”selected”默认选中 ———-
  • 注意: size指定下拉菜单的可见选项数 <select size="3"> .... </select>

  1. 下拉列表2 多选 <select multiple="multiple"><option>aaa</option><option>bbb</option></select>
  2. 下拉列表3 包含提示信息 <select><optgroup label="上海"><option>普陀</option><option>徐汇</option></optgroup></select>
  3. 多选 <input type="checkbox">逛街1<input type="checkbox" checked="checked">逛街2<input type="checkbox">逛街3
  4. 多行文本域 <textarea cols="30" rows="10"></textarea> cols="30"相当于宽度,rows="10"相当于列数
  5. 上传 <input type="file">
  6. 隐藏 页面中无法看到,但是后台程序可以获取到里面的值 <input type="hidden" value="123">
  • 按钮
  1. 提交按钮 (提交表单) <input type="submit">
  2. 普通按钮(要给js使用) <input type="button" value="按钮" onclick="">
  3. 重置按钮(将表单恢复到默认值) <input type="reset">
  4. 图片提交按钮(提交表单) <input type="image" src="">
  • 表单整体分组控件(补充控件)
  1. 包含的边框 <form action=""><fieldset> <legend>丰趣</legend></fieldset></form>

上一篇 快捷键总结

下一篇 css选择器总结

Comments