html5学习笔记

来源：互联网发布：美工待遇编辑：程序博客网时间：2024/05/16 19:42

1、表格

<caption>table title</caption>

<thead>

<tr>

<th>content</th>

</tr>

</thead>

<tbody>

<tr>

<td>content</td>

</tr>

<tr>

<td>content</td>

</tr>

</tbody>

</table>

table-tr-td 标签固定顺序，td可放任何内容

其他表格属性

cellspacing 单元格与单元格之间的空白间距(num)

cellpadding 单元格和边框之间的空白间距(num)

align 设置表格在网页中的水平对其方式（left|center|right）

表头标签<th>替换<td>

表格结构：表头thead-主体tbody

表格标题：<caption>

合并单元格:

rowspan="num" 从上往下、跨行合并、删除多余

colspan="num" 从左往右、跨列合并、删除多余

2、列表

无序

<ul>

<li>content</li>

</ul>

有序

<ol>

<li>content</li>

</ol>

自定义列表

<dl>

<dt>content1</dt>

<dd>content1 dv1</dd>

<dd>content1 dv2</dd>

<dd>content1 dv3</dd>

<dt>content2</dt>

<dd>content2 dv1</dd>

<dd>content2 dv2</dd>

<dd>content2 dv3</dd>

</dl>

dl-dt-dd

dd是dt的具体描述

3、表单-为了收集用户信息

以下类型：

text 单行文本框

password 输入密码

radio 单选框-配合name设置同一组单选框 ,默认选择checked="checked"

checkbox 复选框-配合name设置同一组 ,默认选择checked="checked"

button 普通按钮，value默认文本值

submit 提交按钮，value默认文本值

reset 重置表单，value默认文本值

image 图片，src图片路径

file 文件域，打开文件夹选择器

其他属性

maxlength="num" 输入最大长度

4、label获取鼠标点击焦点

1 用标签包裹内容

<label>content</label>

<label>input account<input type="text"/></lablel>

2label有多个内容，则在目标处加id,跳转到目标

<label for="id">input account<input type="text"/> <input type="text" it="it"/>

5、文本域，多行文字可以换行

<textarea cols="每行字数” rows="显示行数">content</textarea>

6、下拉窗口

<select>
<option>op0</option>
<option>op1</option>

<option selected="selected" >op2</option>//默认

<option>op3</option>

</select>

7、表单域

完整的表单域包含表单和文字

<form action="提交地址" method="get|post" name="表单域名字">content </form>

8、html5新增标签

以下包含在<body></body>

页眉<header></header>

导航栏<nav></nav>

页脚，页面底部<footer></footer>

文章<article></article>

区域<section></section>

侧边<aside></aside>

其他

9、datalist

类似百度搜索中，输入文字时显示提示选项

</datalist>

10、fieldset

<fieldset>
<legend>title</legend>
accont<input type="text" name=""><br>
password<input type="password" name="">
</fieldset>

效果：

11、html5新增input表单

email 邮箱

tel 手机

number 数字

url 网址

search 搜索

range 滑块区域，progressbar

time 小时分钟

date 年月日

datetime 时间

month 年月

week 星期

color 颜色

12、html5新增input属性

text属性

placeholder 和edittext的hint效果一样

autofocus=“autofocus” 自动获得焦点

file属性

multiple 上传多文件

text属性

autocomplete 自动记录历史提交

1、需要配合表单提交 2、需要name

<input type="text" autocomplete="on|off" name="name"/>

required 必须填，不能为空

accesskey 快捷键

<input type="text" accesskey="s"/> alt+s 键快速聚焦

13、多媒体标签

embed 视频

<embed src="路径"/>

快捷方式：上传优酷服务器再引用

audio 音频

(ogg , mp3 ,wav)格式

<audio src="路径" autoplay="autoplay" controls loop="次数"></audio>

loop="-1"无限循环

兼容性写法

your ie cant play audio

</audio>

vedio 多媒体视频

(ogg ,MPEG4,webM)格式

<video src = "路径" controls width="宽度" height="高度">
     
</video>

兼容性写法

your ie cant play video

</video>

阅读全文

0 0