2019/9/10实训day3

表格以及表格标签

table标签

table标签是一种创建table的标签基本的格式为

在创建table中 可以使用的表格属性如下

border	边框 默认值为0	像素值(px)
cellspacing	设置单元格和单元格之间的间距	像素
cellpadding	设置单元格内容和单元格的间距	像素
width	表格的宽度	像素值
height	表格的高度	像素
align	设置表格的水平对齐方式	left，center，right

使用的基本格式为<table 标签属性="标签值px">

例:

tr标签

tr标签为表格中的行标签。其中一组tr代表一行。例如:

注:tr必须嵌套在table中。table中有几组tr就有几行表格 tr也依旧可以使用table的属性 例如： ## td标签 td标签为表格中的单元格。必须嵌套在tr中。tr有组就表示有几个单元格 例: 注：Td下可以有任何元素 td也可以使用table的表格属性 ## 表头标签 表头标签格式为 th的各项属性与td基本相同。td含有的特性th都有。但是th一般位于表格的第一行或者第一列 ## 表格标题 表格的标题：caption caption元素定义表格标题 例如：

American caption

## 合并单元格 合并单元格 跨行合并:rowspan 跨列合并：colspan 表格上下具有一致性。所以要使表格上下td数量一致。就需要把多余的表格删除。就需要用到合并功能。例如把3个td跨列合并成一个 # 表单标签 表单是类似我们要填的单子。目的是为了收集我们需要的信息。 ## 表单控件： 类似表格的table。是包含表单最基本的标签, input控件：  ## label标签 用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点 for属性规定label与哪个表单元素绑定 ## textarea控件（文本域） textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

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

下拉菜单

select可以创建下拉菜单
类似表格。select中包含option。并且至少包含一组option

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

action:  url地址
method:  提交方式
name :  表单的名称，区分同一界面的多个表单

每个表单都要由自己表单域

html5新标签设定

文档类型设定

• document
  • HTML: sublime 输入 html:4s
  • XHTML: sublime 输入 html:xt
  • HTML5 sublime 输入 html:5

字符设定

• ：HTML与XHTML中建议这样去写
• ：HTML5的标签中建议这样去写

常用新标签

w3c 手册中文官网 : http://w3school.com.cn/

• header：定义文档的页眉 头部

• nav：定义导航链接的部分

• footer：定义文档或节的页脚 底部

• article：定义文章。

• section：定义文档中的节（section、区段）

• aside：定义其所处内容之外的内容 侧边

• datalist 标签定义选项列表。请与 input 元素配合使用该元素

• fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

  legend:标题

新增的input type属性值：

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

常用新属性

属性****	用法****	含义****
placeholder****		占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus****		规定当页面加载时 input 元素应该自动获得焦点
multiple****		多文件上传
autocomplete****		规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required****		必填项 内容不能为空
accesskey****		规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式

综合案例

多媒体标签

• audio：播放音频

• video：播放视频

多媒体 audio

HTML5通过标签来解决音频播放的问题。

使用相当简单，如下图所示

并且可以通过附加属性可以更友好控制音频的播放，如：

autoplay 动播放

controls 是否显不默认播放控件

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

多媒体 video

HTML5通过标签来解决音频播放的问题。

同音频播放一样，使用也相当简单，如下图

同样，通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度