day3

day3

• 表格的使用

  在HTML网页中创建表格，并熟练使用tr，tb标签

  • tr 中只能 嵌套 td，td下可以有任意元素

  • 属性

    • 学习掌握了border、cellspacing、cellpadding、width、height、align的属性和用法

  • 标签

    表头一般位于表格的第一行或第一列，其文本加粗居中，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

  • 结构

    在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体 如下所示：

    （用于定义表格的头部）和（用于定义表格的主体）的用法

  • 标题

    <table>
        <caption>表格标题</caption>
    </table>
    

    且caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

  • 单元格

    可利用rowspan和colspan进行跨行合并与跨列合并

    公式： 删除的个数 = 合并的个数 - 1

• 表单

  在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

  • input控件

    属性	属性值	描述
    type	text	单行文本输入框
    	password	密码输入框
    	radio	单选按钮
    	checkbox	多选按钮
    	button	普通按钮
    	submit	提交按钮
    	reset	重置按钮
    	image	图像形式的提交按钮
    	file	文件域
    name	由用户自定义	控件的名称
    value	由用户自定义	input控件中的默认值
    size	正整数	控件在页面中显示的宽度
    checked	checked	定义选择控件中默认被选中的项
    maxlength	正整数	控件允许输入的最大字符数

  • lable标签

    点击label标签的时候, 被绑定的表单元素就会获得输入焦点，lable的for属性与表单ID绑定

  • textarea标签

    textarea控件可以轻松地创建多行文本输入框

    <textarea cols="每行的字符数" rows="显示行数">
    </textarea>
    

  • 下拉菜单

    select控件定义下拉菜单的基本语法格式

    <select>
        <option></option>
    </select>
    

  • <select></select>中至少应包含一对<option></option>。

  • 在option 中定义 =" selected "时，当前项即为默认选中项。

  • 表单域

    在HTML中，form标签被用于定义表单域，且每个表单都要由自己表单域

    <form action="url地址" method="提交方式get、post" name="表单的名称，区分同一界面的多个表单">
        
    </form>
    

• HTML5

  • 文档类型

    • document

      HTML: sublime 输入 html:4s

      XHTML: sublime 输入 html:xt

      HTML5 sublime 输入 html:5

  • 常用标签

    • header：定义文档的页眉 头部
    • nav：定义导航链接的部分
    • footer：定义文档或节的页脚 底部
    • article：定义文章。
    • section：定义文档中的节（section、区段）
    • aside：定义其所处内容之外的内容 侧边
    • datalist 标签定义选项列表。请与 input 元素配合使用该元素
    • fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

  • 新属性

    类型****	使用示例****	含义****
    email****		输入邮箱格式
    tel****		输入手机号码格式
    url****		输入url格式
    number****		输入数字格式
    search****		搜索框（体现语义化）
    range****		自由拖动滑块
    time****		小时分钟
    date****		年月日
    datetime****		时间
    month****		月年
    week****		星期 年

  • 多媒体标签

    • audio

      <autio src="音频地址" autoplay conttrols loop >
      </autio>
      

    • video

      <video src="视频地址" autoplay conttrols loop width="" hight="">
      </video>
      

      autoplay 自动播放

      controls 是否显示默认播放控件

      loop 循环播放(loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环)

      width 设置播放窗口宽度

      height 设置播放窗口的高度