表格和input的学习
合并单元格:
跨⾏合并:rowspan 跨列合并:colspan
举例:
<table cellspacing="0px" cellpadding="0px" align="center">
<thead>这是⼀个我不知道的⼈</thead>
<tr>
<th colspan="2"><a href="路径">名字/关系</a></th>
<!-- <td><a href="#fu">⽗亲(名不详,已殁</a>)</td> -->
<td rowspan="2">母亲(名不详,已殁)</td>
<td>妹妹:拉⽶</td>
<td>恩⼈:唐吉诃(柯拉松)</td>
<td>敌⼈:唐吉诃德·多弗朗明哥</td>
<td>同盟:蒙奇·D·路飞</td>
</tr>
<tr>
<th>职业/⾝份</th>
<td>医⽣</td>
<td>医⽣</td>
<td>不详</td>
<td>唐吉诃德海贼团时任花⾊⼲部 第⼆代"红⼼"兼海军中校</td>
<td>天龙⼈,王下七武海之⼀</td>
input标签placeholder属性
<td>草帽海贼团船长</td>
合并单元格的思想:
将多个内容合并的时候, 就会有多余的东西, 把它删除 例如 把3个 td 合并成⼀个 那就多余了2个 需要删除 公式 : 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
input控件:
在上⾯的语法中, <input /> 标签为单标签 type 属性为其最基本的属性 其取值有多重 ⽤于指定不同控件类型
除了 type 属性之外 <input /> 标签还可以定义很多其他属性
单选框(radio) 如果是⼀组 我们通过相同的 name 值 来实现
复选框(checkbox) 可以同时选择多个
默认选中项(checked) 只需要在属性中添加 checked="checked" 默认选中
input的属性值:
type:
text:单⾏⽂本输⼊框
password:密码输⼊
radio:单选框
checkbox:多选框
button:普通按钮
submit:提交按钮
reset:重置按钮
image:图⽚提交按钮
file:⽂件域
name:名称
value:input的默认⽂本值
size:input的页⾯宽度
checked:定义控件选择的默认选中项
maxlength:控件允许输⼊的最⼤值(最⼤字符数)
(<input type="email"><br />
<input type="tel" value="" placeholder="12356465" required><br />
<input type="url" placeholder="地址" autocomplete="on"><br />
<input type="number" value="123456"><br />
<input type="range"><br />
<input type="search" autofocus><br />
<input type="time"><br />
<input type="date" accesskey="w"><br />
<input type="datetime"><br />
<input type="month"><br />
<input type="week"><br />
<input type="file" multiple>)
label:⽤于绑定⼀个表单元素 当点击 label 标签的时候 被绑定的表单元素就会获得输⼊焦点
for:for 属性规定 label 与哪个表单元素绑定
1. ⽤label直接进⾏包裹input标签
2. 如果label⾥⾯有多个表单 想定位到某个地⽅ 可以通过for id 的格式来进⾏
textarea(⽂本域):如果需要输⼊⼤量的信息, 就需要⽤到<textarea></textarea>标签 通过textarea控件可以轻松的创建多⾏⽂本输⼊框
下拉菜单:使⽤ select 控件定义下拉菜单的基本语法
注意:
1. <select></select>中⾄少应包含⼀对<option></option>
2. 在option中定义 selected="selected" 时, 当前项即为默认选中项
表单域:在 HTML 中 form标签被⽤于定义表单域 即创建⼀个表单 以实现⽤户信息的收集和传递 form 中的所有内容都会被提交给服务器 <form action="url地址" method="提交⽅式" name="菜单名称">
各种表单控件
</form>
常⽤属性 :
1. Action
在表单收集到信息后, 需要将信息传递给服务器进⾏处理 action 属性⽤于指定接收并处理表单数据的服务器程序的 url 地址
2. method
⽤于设置表单数据的提交⽅式 其取值为 get 或 post
3. name
⽤于指定表单的名称 以区分同⼀个页⾯中的多个表单
常⽤新标签:
datalist:标签定义选项列表 请与 input 元素配合使⽤该元素
列如:
<input type="text" value="⿊⼦的篮球" list="basketball">
<datalist id="basketball">
<option>⿊⼦</option>
<option>⽩⼦</option>
<option>粒⼦</option>
</datalist>
fieldset:元素可将表单内的相关元素分组 打包 与 legend 搭配使⽤
如:<fieldset>
<legend>名称</legend>
<input type="text" />
</fileldset>
常⽤新属性:
这个表单中你必须给他⼀个名字
<from action="">
姓名: <input type="text" autocomplete(记录⽹页写下的内容) name="" />
<input type="submit" />
</form>
多媒体标签有:
embed
audio
video
多媒体audio:
HTML5 通过<audio>标签来解决⾳频播放的问题
我们可以通过附加属性 更加友好的控制⾳频的播放, 如 :
autoplay ⾃动播放
controls 是否显不默认播放控件
loop 循环播放 loop="2" 就是循环2次 loop或者loop="-1" ⽆限循环
<audio src="相对路径或者绝对路径" controls loop="-1" autoplay>(这个格式的⾳频是⾃动⽆限循环播放)
多媒体video:
HTML5通过<audio>标签来解决⾳频播放的问题
同⾳频播放⼀样 <video>使⽤也相当简单
同样 通过附加属性可以更友好的控制视频的播放
autoplay ⾃动播放
controls 是否显⽰默认播放控件
loop 循环播放
width 设置播放窗⼝宽度
height 设置播放窗⼝的⾼度
<video src="相对路径或者绝对路径" controls loop="2" autoplay>(这个视频是⾃动循环播放两次的)
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论