Html和Css学习笔记-html进阶-html5属性

此篇博客是我的复习笔记，html和css学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开html的书略读，后记录了标签，元素，属性的具体意义。

这里所介绍的html和css的版本为html5与css3

Html是超文本标记语言（英语全称：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

Css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来html和xml等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

Html和Css验证工具的地址：http://validator.w3.org/

一.html5标准新增的标签

1.<header> 标签定义文档或者文档的一部分区域的页眉

2.<footer>定义一个区块的底部和整个文档的页脚

3.<aside>标签定义文章的侧栏

4.<section>定义文档的主要区块

5.<time datetime="xxxxx">定义元素的日期和时间

6.<article>用于标记类似新闻报道或博客帖子等独立的内容

7.<nav>标签定义导航链接的部分

8.<progress>显示任务的完成进度

9.<mark>突出显示某些文本

10.<meter>显示某个范围的度量

11.<canvas>用来在页面显示用javascript绘制的图像和动画

12.<figure>用于定义类似照片，图表甚至代码清单等独立的内容

13.<video>标签定义视频，，可用的参数如下：

（有些浏览器不支持html5播放器，则在下面加入<object>标签，如果浏览器不支持html5视频则会使用flash视频）

值	描述
autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	如果出现该属性，则向用户显示控件，比如播放按钮。
pixels	设置视频播放器的高度。
loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
url	要播放的视频的 URL。
pixels	设置视频播放器的宽度。
poster	提供一个可选的海报图像
codecs	指定使用哪个编解码器对视频和音频编码，来创建编码的视频文件

二.建立表格

1.所需要使用的属性：

（1）<table>标记内容为表格

（2）<tr>标记内容为一行

（3）<th>标记内容为一列,使用rowspan参数可以实现跨多行显示

（4）<caption>标记内容为表格的标题

（5）border-colllapse:属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示

2.知识要点

（1）表格提供了一种在html中指定表格数据的方法

（2）表格由行中的数据单元格组成

（3）列隐含的定义在行中

（4）表格中的列数就是行中数据单元格的个数

（5）一般来讲，表格不用来提供表现，那是css的工作

（6）表格中可嵌套表格

三html表单，建立交互

1.加入一个表单

<form action="url" method="POST">xxxxxx</form>
form开始标记为表单
action链接web服务器的地址
method确定表单数据如何发送到服务器

2.表单使用的元素

1.<fieldset>包围一组输入元素

2.<legend>为一组表单提供标签

3.表单里的内容

（1）文本输入框

<input type="text" name="输入框显示的内容">

(2)提交输入

<input type="按钮的名字">

（3）单选钮输入

<input type="radio" name="给定选项关联的按钮的名字" value="按钮的不同值">

（4）复选框

<input type="checkbox" name="复选框的名字"value="复选框的值">

（5）文本区

<textarea name="属性的名字" rows“设定文本的高度”cols="设定文本的宽度">xxxxx</textarea>

（6）菜单控件

单选菜单

<select name="元素的名字">
    <potion value="元素的名字">xxxx</potion>
    <potion value="元素的名字">xxxx</potion>
    <potion value="元素的名字">xxxx</potion>
</select>

多选菜单

<select name="元素的名字" multiple>
    <potion value="元素的名字">xxxx</potion>
    <potion value="元素的名字">xxxx</potion>
    <potion value="元素的名字">xxxx</potion>
</select>

（7）数字输入

<input type="number" min="最小值"max="最大值">

（8）范围输入

<input type="range" min="最小值" max="最大值"step="间隔数">

（9）颜色输入

<input type="color">

（10）日期输入

<input type="date">

（11）email输入

<input type="email">

（12）tel输入

<input type="tel">

（13）url输入

<input type="url">

（14）密码输入

<input type="password" name="xxxxx">

（15）文件输入

<input type="file" name="xxxx">

（16）提供一个提示

<input type="text"placeholder="提示内容">

（17）设置选项必填

<input type="text" placehollder="提示内容"required>

四.新增的杂乱的知识

1.伪元素(语法与伪类类似)

p:first-letter{
}

2.属性选择器

img[width]{参数}选择html中所有包含width属性的图像
img[height="300"]{参数}选择height属性值为300的图像
image[alt~="flowers"]{参数}选择alt属性包含单词“flowers”的所有图像

3.开发商特定的css属性

-moz-transform mozilla浏览器
-webkit-transform safari或chrome浏览器
-o-transform   opera浏览器
-ms-transform  ie浏览器

4.加入音频

<audio src-"音频文件的路径" id="id名字">
xxxxxxxxx
</audio>