HTML5基础标签

###锚点定位

1.使用“a href=”#id名>“链接文本"创建链接文本。

2.使用相应的id名标注跳转目标的位置。

### base 标签

base 可以设置整体链接的打开状态   

base 写到 之间

## 链接标签

文本或图像

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。  Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

## 相对路径

1.图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如。

2.图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如。

3.图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如。

## 绝对路径

绝对路径

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

# 列表标签

## 无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

样式 

ul {

    list-style: none; 取消列表自带的小点 默认的列表样式

}

 

• 列表项1

 

• 列表项2

  ......

1.

中只能嵌套

，直接在

标签中输入其他标签或者文字的做法是不被允许的。

 2.

与

之间相当于一个容器，可以容纳所有元素。

 3. 无序列表会带有自己样式属性

## 有序列表 ol 

1. 列表项1

 

2. 列表项2

  ......

  所有特性基本与ul 一致。 

## 自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

名词1

名词解释1

名词解释2

...

名词2

名词2解释1

名词2解释2

...

# 表格 table(会使用)

  表格的现在还是较为常用的一种标签，但不是用来布局，常见处理表格式数据。

## 创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

    

                

                ...

    

    ...

单元格内的文字

在上面的语法中包含三对HTML标签，分别为

、、;，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释。

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table /table标签中，在 table /table中包含几对 tr /tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。

4.:表头标签，一般位于表格的第一行或者第一列，其文本加粗居中，设置表头很简单，只需用表头标签代替单元格标签即可.

5.:表格标题

注意：

1. 中只能嵌套

```

```

2. 标签，他就像一个容器，可以容纳所有的元素

```

## 表格属性

cellspacing是设置cell间的间距默认是2  border是表格的框线 cellpadding设置单元格内容与单元格边框之间的间距默认是1 align设置表格在网页中的水平对齐方式：left,right.center

## 表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：

：用于定义表格的头部。

必须位于

标签中，一般包含网页的logo和导航等头部信息。

：用于定义表格的主体。

位于

标签中，一般包含网页中除头部和底部之外的其他内容。

## 合并单元格

跨行合并：rowspan    跨列合并：colspan

合并单元格的思想：

​将多个内容合并的时候，就会有多余的东西，把它删除。    例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

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

合并之后的单元格 

## input 控件

在上面的语法中，标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，标签还可以定义很多其他的属性，其常用属性如下表所示。input{border:0;outline:none;/去除蓝色边框/}这样就可以去除蓝色边框

用户名 :

 text单行文本框输入 value是设置默认文本值的

密码 :

 password密码框输入 maxlength设置最大输入长度

女 男 radio单选框 如果是一组，通过相同的name来实现单选 , checked设置默认选择项

复选框：足球 篮球 羽毛球

checkbox复选框

 button 普通按钮

submit提交按钮

 reset重置按钮

image图像按钮

file 文件域 选择文件按钮

## label标签(理解)

label 标签为 input 元素定义标注（标签）。

作用：  用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

输入账号： 用lable直接进行包裹input就可以了

Male

值lable绑定指定id的表单元素

## textarea控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

</p> <p>  文本内容</p> <p>

## 下拉菜单

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

 

选项1

 

选项2

 

选项3

  ...

1.中至少包含一对 

2.北京 在option中定义 selected = "selected"时，当前项即为默认选中项。

## 表单域

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

  各种表单控件

1.Action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接受并处理表单数据的服务器的url地址。

2.method用于设置表单数据的提交方式，其取值为get或者post.

3.nam用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每个表单都应该有自己表单域。

# 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属性值：

 输入邮箱格式

输入手机号码格式

输入url格式 

输入数字格式

搜索框（体现语义化

自由拖动滑块

小时分钟   

年月日

时间 

    月年 

 星期 年

## 常用新属性

 占位符  当用户输入的时候 里面的文字消失  删除所有文字，自动返回      |

   规定当页面加载时 input 元素应该自动获得焦点   

    多文件上传     

 规定表单是否应该启用自动完成功能 ,有2个值，一个是on 一个是off      on 代表记录已经输入的值  1.autocomplete 首先需要提交按钮2.这个表单您必须给他名字 

     必填项  内容不能为空   

        | 规定激活（使元素获得焦点）元素的快捷键  采用 alt + s的形式      |

## 多媒体标签

-embed：标签定义嵌入的内容

-audio：播放音频

-video：播放视频

### 多媒体 embed（会使用）

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。 

优酷，土豆，爱奇艺，腾讯、乐视等等

1.先上传   

2.在分享

### 多媒体 audio

autoplay 自动播放

controls 是否显不默认播放控件

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

由于版权等原因，不同的浏览器可支持播放的格式是不一样的

多浏览器支持的方案:把音频文件转成三种格式的

为了浏览器兼容，我们需要三种声音文件 MP3 ogg wav

   

   

    

    您的浏览器不支持音频播放

### 多媒体 video

HTML5通过