表格,表单,HTML5新增标签和属性

1.表格:不是用来布局的而是用来处理数据的

             标签 table

  1.                      text   标题
  2.                      tr th         表头
  3.                       tr td         表格

             属性 

  1.                        border               边框
  2.                        cellspacing        边框间距
  3.                        cellpadding      数据与边框间距
  4.                        width                table的宽度
  5.                        hight                 table的高度
  6.                        align                 行位置 center left right

              合并单元格  

  1.                        rowspan           跨行合并,合并列
  2.                         colspan           跨列合并,合并行

      实战代码:




    
    
    
    表格


    

2.表单(重点)

表单控件

  • input 单控件 

可以通过type 属性来控制包括:text,passworld,radio,checkbox,button,submit,image,file

value:默认赋初始值,其中只有image初始值用src

name:通过name来指明表单视为同一组

checked:可以为一组默认勾选结果

maxlength:最多输入位数

  • lable标签

只需将input给包裹,就可以增强用户体验,当点击到当行就会自动锁定到当行文本框

如果有多个文本框,可以通过for = “”配合id来进行锁定当行指定的文本框

  • textarea双控件

与input不同,他可以换行,比如留言板就用textarea

  • select下拉菜单

option :选项

selected = ”selected”:默认选中项

  • form 表单域

action:传送到的地址

method:方法,post(常用),get

name:哪个表单

实战代码




    
    
    
    表单


       

教学综合信息服务平台

用户注册


性别

爱好足球排球网球

籍贯





 

3.HTML5新增标签和属性

新增标签

  • header 定义页面的头部
  • nav      定义导航栏,链接的部分
  • footer   定义页面的底部标签
  • artical   定义文章
  • section 定义文章的小区域
  • aside    定义侧边栏

datalist元素

  内部使用option。与select的option相似。比select更加友好,有提示功能。

 与inputlist = “id” 与datalist的id结合使用

fieldset标签

有分组打包,与legend标题配合一起使用

新增input 表单

  • email
  • tel
  • number
  • url
  • search
  • range 滑块
  • time
  • date
  • month
  • week
  • color

属性

placeholder   占位符

autofocus      自动获得焦点

multiple          实现多文件上传

altocomplete  自动记录完成      要求有提交按钮,要有name值

                       可以= “on” 开,可以 = “off” 关

required   不能为空

acceskey 光标定位键设置 =“s”。alt + s 则可以定位光标

实战代码:




    
    
    
    HTML5新增标签和属性


    
学生档案













表格,表单,HTML5新增标签和属性_第1张图片

 

视频和音频播放

  1. 在网络上分享时复制html网址
  2. 表格,表单,HTML5新增标签和属性_第2张图片

实战代码:




    
    
    
    视频和音频


    
    
    



 

你可能感兴趣的:(HTML5)

姓名 电话 年龄
小明 18832837838 23
小华 13382773773 12