首页  思维导图  详情

HTML入门及基础

2019-10-28 18:36:22   0  举报





AI智能生成

HTML入门及基础

HTML5

作者其他创作

大纲/内容

第二周

第五天

相对定位position: relative;

相对定位：相对于原来自身的位置来进行定位（位置的改变）

1.单独设置相对定位不会对网页的内容造成影响

2.相对定位的元素在改变位置的是时候不会对网页的其他元素造成影响

3.设置相对定位的元素没有脱离文档流也就是说他原来的位置还在所以不会对网页的其他元素位置造成影响

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置

a.没有脱离文档流的，所以元素本身所占的位置会保留

b.设置了相对定位的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移

c.相对定位元素经常被用来作为绝对定位元素的容器块。

代码写法

/*首先先声明我要定位(相对定位)*/
position: relative;

/*设置移动设置 left right top bottom*/
left:100px;
top:-20px;

导航栏轮播图中下面点击的小圆点

第四周

第一周

第一天

HTML的基本概念

超文本

标记

基本标签及其写法

16种

第二天

XHTML的标准

标签的语法

双标签

单标签

规则和规范

规则

规范

标签的扩展

i标签

em标签，i标签

b标签，strong标签

em标签，strong标签的语气及其字体样式

HTML的注释

Html特殊符号

空格

大于号

小于号

引号

版权符

Html标签的属性

就是扩展html标签的功能

Img 图片插入

路径

绝对路径

相对路径

超链接

a标签

Target属性

_self

_blank

锚链接

从a页面到b页面

从a页面的甲位置到a页面的乙位置

第一步设置我要去哪的那个锚标记： <a name=”chuichui”>可以写内容也可以不写</a>

第二步去到设置的那个锚标记中 <a href=”weizhi#锚点的name属性值”></a>

第三天

列表

定义

列表的分类

有序列表

无序列表

自定义列表

列表的作用及标识符

列表的作用

无序列表标识符

取消标识符

语法注意

ul标签里只能有li标签

有序列表

table标签

table标签的属性

cellspacing

cellpadding

rowspan

colspan

textarea

表头与标题

th表头

caption标题

列表嵌套

三级嵌套不建议工作中使用

小知识点扩展

Class属性

Class的作用

<title></title>是为网页创建标题，并且显示在状态栏上

.的作用就是用来表明 class类名的 color文字的颜色

第四天

表单的定义

表单的元素

文本域

按钮

选项菜单

单选框

复选框

表单的基本结构

"post"和h e“get”的区别

表单元素属性及其作用

checked

maxlength

size属性

HTML下拉列表

select

option

select

什么是CSS

中文名称

英文名称

作用

css语法规则

css选择器

标签选择器

类（class）选择器

id选择器

.外部样式

将css样式单独写入到一个 xxx.css外部文件中。

（1）使用link标签引入外部css文件。

（2）使用@import导入外部css文件

a:link

a:hover

样式优先级和选择器的优先级

样式优先级

行内（内联）样式 > 内部样式表 > 外部样式表

选择器优先级

id选择器 > 类（class）选择器 > 标签选择器

id选择器的权重和内联样式的权重

.id选择器权重：100 或0100

内联样式权重：1000

是把列表的样式由竖行显示变为横向显示

字体样式

文字大小

文字粗细

文字类型

文字风格

首行文本缩进

设置行间距

span标签

display: inline-block;

表单基本语法

method属性：就是把数据用什么方式进行发送 get/post

form action="就是要把表单当中的数据发送到哪里去（通常写的就是后端的地址）

表单属性

文本输入框text

type属性：就是设置当前输入框的不同展示形态

子主name属性的作用就是给当前的表单元素数据起个名字不要写中文不要写特殊符号题

value属性的作用就是当前表单元素的默认值

placeholder 属性输入框的提示信息

密码框 password

checkboxes,表单复选框

name是表单元素数据的名字必须有

value 是表单元素的默认值必须要有

radio,表单单选框

name是表单元素数据的名字必须有

value 是表单元素的默认值必须要有

提交按钮 submit

-重置按钮就是把表单的内容清空reset

我是一个单纯的按钮button

扩展表单元素的属性

maxlength 显示text与password输入框的最大输入字符数

size设置元素的宽度，当 type 为 text 或 password时

checked 设置单选框或复选阔的默认选中项

css基本选择器代码展示

/*类选择器*/.text{color: red;}

/*id选择器 #*/#idText{color:pink;}

/*通配符选择器匹配网页中所有的内容*/

使用class属性的时候他的属性值可以重复使用

id属性的属性值只能是唯一的

标签选择器

基本css选择器的优先级代码展示

第五天

边框设置的方式

四条边同事设置*//*border-style: double;*/

只设置顶部*//*border-top-style: dashed;*/

只设置左边*//* border-left-style: solid;*/

只设置右边*//*border-right-style: double;*/

只设置下面*//* border-bottom-style: dashed;*/

颜色的设置*//*四条边同时设置**border-color: rgb(0-255红,0-255绿,0-255蓝);*//* border-color: pink;

边框样式的设置

设置粗细*//* border-width: 100px;*

单独设置一条边*//*border-top:粗细类型颜色*

四条边同事设置简写

背景效果

因为div默认没有高低所以使用height可以设置高度

如果背景图片比容器大那么就会正常的显示

如果背景图片比容器小在这个时候默认会平铺*

设置背景图片平铺方式

/*no-repeat 不平铺*/

/*repeat-x 水平方向平铺

repeat-y 垂直平方向平铺 */

background-repeat:no-repeat;

设置背景图片的位置

/*background-position: x轴位置 y轴位置;*/

/*x轴和正常数学的平面直角坐标系结果相同正 ---->右边负----->左边

轴和正常数学的平面直角坐标系结果相反正 ---->往下负----->往上*/

也可以写预先定义好的参数

水平方向：left、center、right

垂直方向：top、center、bottom*/

background-position: center center;

div

div:其实在网页中主要是用来布局的，理解为是一个块

div的特点

在网页中默认呈现一个无色透明的区块

.默认情况下没有高

.会随着内容的高度改变而随之发生改变

div的属性

背景颜色

background-color

设置背景图片

background-image

外边距（margin）

边距设置

margin-left:左边界

margin-right:右边界

margin-top:上边界

margin-bottom:下边界;

margin的使用方法

边界：margin,在元素外边的空白区域，被称为边距

属性值的4种方式：

四个值：上右下左

三个值：上左右下

二个值：上下左右

一个值：四个方向

margin:0 auto;/*一个有宽度的元素在浏览器中横向居中

内边距（padding）内边距不能为负数！！！！

border-box 改变了计算盒子模型尺寸的方式不计算内边距和边框*/
box-sizing: border-box;

内边距属性值的4种方式

四个值：上右下左顺时针计算 {padding:0px 0px 0px 40px;}

三个值：上左右下 {padding:10px 20px 30px ;}

二个值：上下左右 {padding:10px 20px ;}

一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/*/

说明：可单独设置一方向填充

盒子的实际大小

宽 =左右margin+左右border+左右padding+width，

高 =上下margin+上下border+上下padding+height，

例如一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，
宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px，
高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px

背景图片的固定

/*fixed 固定*/

/*scroll 默认值可以滚动*/

伪类，注意！！！/*如果四个伪类同事设置必须要看招 link->visited->hover->active 的顺序要不要会出现下过失效*/

/*没有访问之前*/a:link{color:black;}

/*访问之后的颜色*/a:visited{color:green;}

/*鼠标悬浮之上*/a:hover{color:yellow;text-decoration: none;}

/*点击没有松开*/a:active{color: cornflowerblue;}

修改鼠标指针

/*pointer超连接样式*/

/*等待*wait/

defalut ：默认光标

text：指示文档

help ：指示可用的帮助

crosshair ：鼠标呈现十字状

第三周

第一天

浏览器内核与代表浏览器

trident

(不开源，不跨平台)

浏览器

IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器

代表浏览器

代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额

又称IE内核或是MSHTML，此内核只能应用于windows平台

decko

（开源跨平台）

代表作品Mozilla Firefox(火狐浏览器)

是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。

webkit

（开源跨平台）

代表作品Safari（mac系统的内置浏览器）、Chrome 、傲游浏览器3，是一个开源项目

presto

代表作品Opera(前内核)，Presto是浏览器排版引擎

它也是世界上公认的渲染速度最快的引擎。

Opera现已改用Google Chrome的Blink内核。

blink

由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

需要注意的问题

向日常使用的一些浏览器例如360，qq，百度等这些浏览器其实就是集成了上面这5大内核其中的一些并且做了一些定制化的本地优化（在日常上网使用没有关系
但是在开发过程中不要使用因为内置了很多本地服务会导致内存占有率过大效率非常的慢
例如360安全浏览器它里面就集成了IE 与 Chrome 两个内核）

为什么会出现这些兼容性

每个浏览器内核是有不同的厂商开发出来的在这个时候每个厂商可能在编写内核的时候兼容性或多或少都有差别（ie尤其严重）

css bug:浏览器在解析css的时候出现的显示异常（没有按照预期进行显示）

css hash (解决方案)：通过技术手段来解决上面的那些显示异常的问题（非官方）

Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

兼容性问题及其解决方案

1.图片间隙在设置图片的的时候通常回合他的父容器下边框有3px的空隙

方案1：1.把图片设置为块元素 display:block:

代码：div{width: 100%;height: auto;border: 1px solid red;}
img{display: block;}

方案2：给图片设置float（用的多一些）

代码：div{width: 100%;height: auto;border: 1px solid red;overflow: hidden;/*扩展盒子模型的高度*/}
img{float: left;}

2.在a里面嵌套img时，在IE浏览器中会有边框

方案：在img中加上border:none;（在之前的全局css文件里面已经写好了）

3.透明度显示问题

方案：/*设置透明度*/opacity: .5;/*兼容低版本ie*/filter:alpha(opacity=50);

4.IE8及以下浏览器不能识别opacity属性

解决方案： div{ opacity:0.5;filter:alpha(opacity=50);}

5.双倍浮向（双倍边距）（只有IE6出现）

描述：块元素设置float后，又设置了横向的margin值，在IE6下显示的margin值比设置的值要大（2倍关系）
hack:给浮动元素添加声明：display:inline;

6.鼠标指针bug描述

cursor:hand; 将鼠标指针设置为手的形状，IE9以及以上浏览器不支持

解决方案：cursor:pointer; 所有浏览器都支持，将鼠标指针设置为手型

7.按钮元素默认大小不一

描述：各浏览器中按钮元素大小不一致

8.input的type类型

描述：input的type类型是text的时候，提示信息用value表示
如果设置了input的高度，在其他浏览器上显示的value的内容是垂直居中的，但是在ie6上是在顶部的，

解决方案

解决的方法就是给input添加一个行高等于它的高度。

解决方案

1.统一给这些按钮设置一套样式保证在不同浏览器的显示效果一样

2.使用a标签模拟按钮并且设置一个模拟按钮的样式

使用Hack带来的一些副作用

降低了CSS代码的可读性，增加了代码的负担。

使用CSS Hack和 Filter通常有两种方法

1)一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；

2)另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。

css过滤器

下划线属性过滤器

语法： div{background:red; _background:blue;}
注：添加下划线的css属性只有IE6识别，其他浏览器不识别

!important关键词过滤器

语法：div{background:orange!important; background:red;}
注：添加!important关键词的css属性值除了IE6不识别以外，其他浏览器都识别

*属性过滤器

语法：div{background:red; *background:orange;}
注：添加*的css属性只有IE6,IE7识别

语法：div{background:red; background:blue\9;}
注：只有IE6,7,8,9,10识别，其他浏览器都不识别

语法：div{background:blue; background:gray\0;}
注：IE8及其以上浏览器识别，其他浏览器都不识别

开发软件

下载开发插件

中文汉化包

选择左侧快速导航的最下面一个（类似于两个正方形嵌套的这个点击他就是下载插件的地方）在顶部搜索栏搜索chinese 点击下载---》重启软件就好

运行页面插件：Live Server

运行页面插件：Live Server 安装完成之后会发现有可能打开的浏览器不是我们想要的 1.可以吧谷歌浏览器设置成默认浏览器 2.如果之前的方式不行需要进行设置左下角有个设置图标点击---》点击设置（右侧会弹出相关页面）

在弹出的页面找到扩展----->live server config 选项----》:找到Custom Browser 点击下面的下拉菜单选择谷歌浏览器
如果上面的插件无法打开那么尝试使用下面这个 open in browser

使用

创建项目：在创建项目的时候需要在电脑的指定位置自己创建一个文件夹作为存放项目的文件夹然后在vscode中选择文件---》打开文件夹 --》找到指定文件夹的位置

创建文件：点击新建文件即可创建文件（需要手工添加文件的后缀名 HTML文件默认是空的快速创建 1.输入html:5 2.输入！都可以）

注意注意：初学者容易忘记保存点击文件下来菜单选择自动保存就不需要ctrl+s了

第二天

圆角

定义

用来对于页面中的边边角角用来进行样式的美化更加符合现在用户的需求

语法

border-radius:数值+单位;

四个角单独设置

border-top-left-radius:20px; （左上角）

border-top-right-radius:20px; （右上角）

border-bottom-right-radius:20px; （右下角）

border-bottom-left-radius:20px; （左下角）

圆角的简写

1.设置一个值 border-radius:20px; 四个方向圆角均为20px

2.设置两个值 border-radius:50px 10px; 左上和右下为50px，右上和左下为10px

3.设置三个值 border-radius:50px 0 10px; 左上为50px，右上和左下为0，右下为10px

4.设置四个值 border-radius:50px 20px 5px 0; 按照顺时针方向依次为左上50px,右上20px，右下5px,左下0

扩展变成圆形

如果需要把内容变成圆形那么这个内容必须必须必须正方形同时最大值是50%

表单标签回顾

声明表单

什么情况下可以写value 什么情况下不需要写value

可以让用户输入的表单元素就可以不用写value

不能让用户输入的表单元素就必须要写value

表单元素

form action="数据发送到哪里去"

method="用什么方式发送 GET/POST"

input type="显示类型（显示那种形态）

text" name="给当前数据起个名字"

input type="checkbox复选框"

name="给当前数据起个名字"

value="当然的默认值"

表单元素扩展

1）label

语法

<label>提示信息文字</label>

代码

<label for="aa">username:</label>

<input type="text" name="uname" id="aa">

：I.利用label可以实现点击文字选中按钮的效果，方法如下

II.给label设置样式达到一些特定的效果

label是内联元素

<label for="需要和绑定的表单元素的id进行关联">显示在页面的内容</label>

2）表单字段集

语法

说明

相当于一个方框，在其中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。

<fieldset>元素来对网页中表单元素进行分组

3）字段级标题

语法

说明

legend元素可以在fieldset对象绘制的方框内插入一个标题。

<legend>元素来对网页的分组进行标题的设置（其中还有一个属性是align=“left/center/right”来设置当前标题的展示位置）

代码

<fieldset>
<legend align="right">biaoti</legend>
<label for="aa">username:</label>
<input type="text" name="uname" id="aa">
<br>
<label for="aa">username:</label>
<input type="text" name="uname" id="aa">
</fieldset>

4）上传文件框：file上传文件框（只有样式没有功能）

语法

file上传文件框（只有样式没有功能）

说明

type属性值新增的类型有：file文件类型，可进行文件的选择

代码

5）图像域

语法

作用

用在提交按钮位置的图像，使得这幅图像具备提交功能

图片提交按钮 / 图像域图像域/图片提交按钮

表单标签及高级属性

隐藏表单元素

type="hidden" 作用：基本作用用来隐藏表单元素（设置不想让用户看见的数据那么就可以使用hidden隐藏起来并且在提交的时候发送给后台）

表单元素只读

readonly="readonly" 作用：只能看不能用

表单元素禁用

disabled="disabled" 作用：直接让你不能用

表格标签及属性高级

回顾

表格的基本结构

<table>
<caption>标题</caption>
<tr><th>单元格特点默认居中文字加粗</th></tr>
<tr><td></td></tr>
</table>

表格的作用

数据显示

单元格间距

border-spacing:value;

就是设置表格的单元格边框与单元格边框之间的距离（需要给table标签进行设置）

隐藏无内容单元格的边框（不能和合并单元格属性同时使用否则会失效）

empty-cells:show/hide; （需要给table标签进行设置）

合并相邻单元格边框

border-collapse:collapse; （需要给table标签进行设置）

说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示；hide：隐藏；

表格布局算法(加快运行的速度)

定义表格的布局算法，设置fixed，文本为英文字母/数字且无空格时，内容超出单元格宽度则固定不变；如没设宽则平均分配；设置auto时，则随内容宽度而定；火狐浏览器存在兼容。

(fixed：固定宽，不会随内容多少改变单元格宽,宽度可以明确定义，没有定义时则宽度会平均分配，高度则会随内容变化)

默认情况下就算表格设置了width 如果内容变多也会把当前的表格撑开；
如果我就不想让内容变多把表格撑开怎么办？
在这个时候我们就要使用表格的布局算法来进行实现

给当前的表格设置一个table-layout:fixed; 就可以来固定当前表格的宽度无论表格的内容有多少都不会被撑大

代码：.table{border:1px solid gray;/* 设置当单元格没有内容的时候就不显示当前单元格的边框不能和合并单元格同时使用否则无效*/empty-cells: hide;table-layout: fixed;}

表格标题位置：caption-side:top/right/bottom/left

兼容性说明：left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top（所以使用频率相对来说说比较少）

表格重要属性

1）colspan="value" 合并列

2）rowspan="value" 和并行

3）rules="groups/rows/cols/all/none" 添加组分隔线

说明：

rows:位于行之间的线条

cols:位于列之间的线条

all：位于行和列之间的线条

none:没有线条

groups:位于行组和列组之间的线条

数据行分组

<thead></thead> 表头

<tbody></tbody> 表体

<tfoot></tfoot> 表尾

说明

一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。
在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

第三天

html5

概念：HTML5就是HTML的第5个版本（但是HTML5内置了很多跨时代的新技术新特征在学习阶段会慢慢进行学习）

HTML5就是HTML的第5个版本（但是HTML5内置了很多跨时代的新技术新特征在学习阶段会慢慢进行学习）
如何写HTML5 ：文档声明 ---》一定要注意在创建页面的时候必须使用 html5的文档声明

H5的特点

1）更简洁、但是在实际开发中要注意书写规范，利于后期维护

2）标签的语义化

H5新增加的语义化标签

网页结构

上左右下结构

网页内容

顶部、主体内容、底部

左边栏、主体内容、右边栏

代码

<div id="header">header</div><div id=“container">
<div>left side</div><div>main</div>
<div>right side</div></div><div id=“footer">footer</div>

新增标签及说明

header

页面或页面中某一个区块的页眉，通常是一些引导和导航信息。

progress

运行中的进度（进程） value当前值 max最大值

nav

可以作为页面导航的链接组

section

定义网页的某个区域

article

定义网页的一篇文章

aside

定义网页的侧边栏或者和页面内容关联不大的内容

footer

定义网页的底部

video

定义视频，如电影片段或其他视频流

audio

定义音频，如音乐或其他音频流

datalist

定义可选数据的列表绑定input list属性值与datalist的 id

使用方法：给输入框添加list属性其属性值要和datalist的id属性值相同

代码：<input type="text" name="uname" list="aaa"/>
<datalist id="aaa">
<option value="小明">小明</option><option value="大名">大名</option><option value="蛮王">蛮王</option><option value="VN">VN</option><option value="EZ">EZ</option>
</datalist>

步骤：

time

标签定义日期或时间 <time>9:00</time>

mark

在视觉上向用户呈现那些需要突出的文字

canvas

定义图形

了解部分

hgroup

对网页的标题进行组合(用来包裹多个标题)

原因

1.方便后期对于代码进行维护（方便程序员通读代码）

2.方便搜索引擎的SEO（搜索引擎优化）

代码：

figure

对网页的一些元素进行组合

figcaption

给figure组合添加一个标题

dialog

类似于会话框

dialog 弹出框（默认情况下是不现实的如果想让弹出框显示出来必须必须必须加上一个open的属性才能进行显示）

代码： <dialog open="open">我是一个弹出框</dialog>

main

内容主体部分

语义化及语义化标签

语义化：就是看见这个内容就知道他的作用。

语义化标签：看见这个标签就知道这个标签在网页中的作用。

语义化的重要性

1）当页面加载失败的时候，还能够呈现出清晰的结构

2）有利于SEO优化，利于被搜索引擎收录（即便于网络爬虫的识别）

3）在项目开发及维护时，语义化的也很大程度上降低开发难度，节省成本

4）语法更宽松

5）多设备跨平台

6）自适应网页设计

视频

< video src="视频路径"> </video>

属性

–controls：controls显示或隐藏用户控制界面

–autoplay：autoplay媒体是否自动播放（部分浏览器已屏蔽此功能）

–loop：loop媒体是否循环播放

–poster在视频播放前显示的一张图片

–width、height：length（px)

常见的视频格式

.avi、.flv、.mp4、.mkv、.ogv

视频source元素

veido元素允许多个source元素
source可链接不同的视频文件

代码：

<video controls="controls">
<source src="video/movie.webm"/> <source src="video/1.mp4"/> 不好意思您的浏览器不支持视频播放
</video>

音频

< audio src="音频路径"> </ audio >

属性

controls：controls显示或隐藏用户控制界面

autoplay：autoplay媒体是否自动播放（部分浏览器已屏蔽此功能）

loop：loop媒体是否循环播放

设置不同浏览器都可以正常播放（不同浏览器支持的音频格式不同）

代码

<audio controls="controls">
<source src="vedio/song.ogg"></source>
<source src="vedio/song.mp3"></source>
不支持提示语
</audio>

浏览器的兼容

IE浏览器只支持MPEG4

火狐浏览器支持OGG和WEBM

OPER浏览器支持OGG和WEBM

谷歌浏览器支持OGG,WEBM和MPEG4

Safari浏览器只支持MPEG4

BFC概念和应用场景

BFC是什么？

BFC(Block formatting context)直译为"块级格式化上下文"。

它是一个独立的渲染区域，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

哪些元素会生成BFC?（只要元素满足下面任一条件即可触发 BFC ）

a）设置float为left或right

b）设置overflow除visible以外的其他值（hidden，scroll，auto）

c）设置display的属性值为table-cell,table-caption,inline-block,flex;

d）设置position属性值为absolute或fixed

BFC特性

a）浮动的子元素会参与父元素的高度计算（父元素触发了BFC）

b）子元素的margin值不会传递给父级（父级触发了BFC）

c）两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

d）非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）

注：当默认文档流，浮动流，定位流同时存在时，三者关系如下：
定位流高于浮动流，浮动流高于默认文档流

BFC的作用

a) 用于解决上下margin重叠问题

b) 用于解决高度塌陷问题

c) 用于布局

与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多列布局的一种实现方式

第四天

H5新增加的表单元素

1）email

定义

专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的，则不允许提交。但它不检查email地址是否存在。提交时可以为空，除非加上了required属性。具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址。

代码

2）url

定义

专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的，则不允许提

代码

3）number

定义

Number：专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，具有min、max、step的属性。

说明

代码

4）range

定义

是用来只允话输入一段范围内数值的文本框它具有min属性与max属性，及step属性，可以指定每次拖动的步幅。

说明

代码

5）date pickers (date, month, week, time, datetime, datetime-local)

定义

拥有多个可供选取日期和时间的新输入类型。 date - 选取日、月、年 Internet Explorer 或 Firefox 不支持 "month"

内容

month - 选取月、年 Internet Explorer 或 Firefox 不支持 "month" 元素。

week - 选取周和年Internet Explorer 或 Firefox 不支持 "month" 元素。

time - 选取时间（小时和分钟）Internet Explorer 或 Firefox 不支持 "month" 元素。

datetime - 选取时间、日、月、年（UTC 时间）Internet Explorer、Firefox 或者 Chrome 不支持 "datetime 元素，Safari 中部分支持。Opera 12 以及更早的版本中完全支持。

datetime-local - 选取时间、日、月、年（本地时间）Internet Explorer 或 Firefox 不支持 "month" 元素。

颜色 color

注意

跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果等，这些都不可以实现。

定义

内容

1）placeholder 文本框处于未输入状态时文本框中显示的输入提示。

2）autofocus：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。

3）required 验证输入不能为空

4） autocomplete

autocomplete属性：注：表单元素要必须有name属性。输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。只有三种：on/off/""。on可是显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以讲该datalist元素中的数据作为候补输入的数据在文本框中显示：

代码

5）自动验证 max: 最大值 min: 最小值 step: 数字间隔 maxlength

6）取消验证novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

子主题

第五天