首页 > 代码库 > 学习HTML5的第二周

学习HTML5的第二周

2024-09-09 12:56:34   216人阅读

*margin:外边距
* margin属性最多有四个
* ①只写一个margin属性均为这个值
* ②写两个值时意味着上又两个放向，下默认等于上，左默认等于又
* ③写三个值;上、又、下三个放下，左边默认等于右边
* ④写四个值，上又下左四个值
* ⑤写三个值加auto，控件居又显示
* margin：50px 30px 20px auto；距离父容器右边30个像素。
* ⑥：margin：0 auto；设置控件在父容器中水平居中
* border有三个属性值，宽度，样式，颜色
* 原则上三个属性都要指定（color不写时，默认为黑色）
* padding
* 使用方法同margin的1234，使用padding会将整个控件撑大，需要控制控件可视区域的实际大小
*
* [border-radius 圆角]
* 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
* 例如：border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
* 3、只写一个数，默认8个值均相等。
*
* [box-shadow 盒子阴影]
* 1、六个属性值，空格分割：
* x轴阴影距离：(必选) 可正可负，正——右移 负——左移
* y轴阴影距离：(必选) 可正可负，正——下移 负——上移
* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小
* 阴影颜色：(可选) 默认为黑色
* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
*
box-shadow: 0px 0px 10px 0px blue inset;
input:focus{
box-shadow: 0px 0px 10px 0px blue inset;
 
 
二、 [border-image 图片边框]
 * 1、十个属性：
 *  ① 图片路径：url()
 *  ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
 *  写的时候，不能带px单位
 *  ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
 *  写的时候，必须带px单位
 *  ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
 *  【铺满和平铺区别】
 *  平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
 *  铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
 * 
 * 2、属性值写法：border-image: ① ②/③px ④;
 *  第②部分可以只写1个、2个、3个，判断方式同margin
 
*【相对定位relitive】
* 1、使用position：relative；设置元素相对定位的元素
* 2、定位机制;
* ① 相对于自已原来文档流中的位置定位，当不指定top等定位值的时候，不会改变元素的位置。
* ② 相对定位元素仍会占据原有文档流位置，不会释放
* 3、使用top、left、right、bottom元素调整位置时，当left和right同时存在时left生效，top和bottom同时存在的时候
*【绝对定位】
* 1、使用position-absolute；设置元素为绝对定位元素
* 2、绝对定位的定位机制
* ①相对于第一个非static的祖先元素（即使用了relative、absolute、fixed定位的祖先元素）进行定位，
* 如果所有祖先元素均为定位，则相对于浏览器进行定位
* ②使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有
* 【固定定位fixed】
* 1、position-fixed是一种特殊的绝对定位，父容器无法使用relative锁住
* 2、定位机制：永远相对于浏览器定位。
* 【z-index】属性，设置定位元素z轴的层叠顺序，使用时必须是定位元素才能使用。relative、absolute、fixed
* ②使用zindex需要考虑父容器的约束，如果父容器为z-index：auto，则子容器的z-index可以
* 不受父容器约束，如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准（在同一
* 父容器的不同字元素仍可以通过自己的z-index调整层叠关系）
* 3、z-index：auto & z-index：0
* ①z-index：auto为默认值，与z-index：0处于同一平面。
* ②z-index：auto不会约束子元素的z-index的层次，而z-index：0，会约束元素必须与父元素处于同一平面
* 4、z-index相同（处于同一平面的定位元素）的层叠关系：后来者居上
* top生效。
 
2、display属性：
*none：隐藏元素
*block：设为块级元素
*inline：设为行级元素
*inline-block：设为行级里面的块级元素
 
3、transition属性（定义过渡）
transition: all .5s ease;
-webkit-transition: all .5s ease;
①可以单独指定某个元素过渡，也可以指定all
②过渡的样式函数：ease，其它参考帮助文档
③可以同时定义多个过渡效果，用逗号分隔
列：transition：color .3s ease,border .5s linear
 
 
 
 
二、HTML基本标签二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
 
<body>
<!-- 【HTML5 新增结构标签】
section：表示页面中的一个内容区块，文档的主体部分，用于将网页或文章划分章节、区块。
article：表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。
aside：表示article元素内容之外的，与article元素内容相关的辅助信息。(常用于相关推荐啊等)
header：网页或文章的头部。
footer：网页或文章的底部。
nav：表示页面中导航链接的部分
hgroup：用于整个页面或页面中一个内容区块的标题进行组合。
-->
 
<!--【HTML5表单属性】
Form:指向特定表单id，实现input无需放于form中，即可通过form提交；
 
Formaction/Formmethod:设置某个submit按钮，提交到指定的action地址，使用指定的method方法。 会覆盖form中的action和method属性
 
Placeholder:自动提示
Autofocus:自动获得焦点
Autocomplete:自动完成功能
 
详见 05_表单form.html 第8部分
 
List：指向指定的datalist的ID，为input绑定一组指定的datalist提示信息(datalist具有和Autocomplete类似的自动筛选完成功能)
>>>写法：<input type="text" list="data1"/>
<datalist id="data1">
<option>1234</option>
<option>2234</option>
<option>3234</option>
</datalist>
>>> 效果图：
 
maxlength:设置输入框的最大输入长度
-->
<form action="01_HTML结构之Head.html" method="get" id="form1">
用户名:<input type="text" name="name" list="data1" maxlength="6"/>
 
<datalist id="data1">
<option>1234</option>
<option>2234</option>
<option>3234</option>
</datalist>
 
 
密码:<input type="password" name="pwd" />
<input type="submit" value="http://www.mamicode.com/提交" />
 
<input type="submit" value="http://www.mamicode.com/使用post提交到第二个文件" formaction="02_常见的块级标签.html" formmethod="post" />
</form>
 
<input type="text" name="test" form="form1" />
 
</body>
 
三、css新增属性
 
</html>
*
* background-origin：设置背景图的定位方式。border-box从边框外缘开始，padding-box从边框内缘，content-box从文字内容区开始
* background-origin不改变背景图显示区域大小，只决定左上角定位位置。
 
* background-clip：裁切背景图和背景色显示区域。border-box从边框外缘开始显示，padding-box从边框内缘开始显示，content-box从文字内容区开始显示 。不在显示区域内的背景图或背景色，会被裁切不显示
* background-clip不改变定位位置，只是通过裁切显示部分区域。
*
 
一、transform定义变换(详见css3新增属性)
①图片缩放transform（scale）、平移transform（translate单位px）、旋转transform（rotate单位deg）
②transform可同时进行多种变换，多种变换之间空格分隔
③transform-origin定义变形的起点（可选值：left/center/right top/center/bottom，或者直接写x、y、z坐标点
二、transition属性：定义过渡
* ① 参与过渡的属性，可以单独指定某个CSS属性，也可以all/none
* ② 过渡开始到过渡完成的时间，.3s .5s
* ③ 过渡的样式函数 常选 ease
* ④ 过渡开始前的延迟时间，可以省略
*
* transition属性可以同时定义多个过渡效果，用逗号分隔
* 例如：transition: color .3s ease,border .5s linear;
 
三、 *[CSS3 动画的使用]
1、声明一个动画(关键帧)
@keyframes name{
from{}
to{}
}
阶段写法：
① 每个阶段用百分比表示，从0%到100%
② 起止必须设置即0%和100%或者from和to
 
2、在CSS选择器中，使用Animation动画属性，调用声明好的关键帧
【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)
 
Animation-duration 动画持续时间
 
Animtaion-timing-function动画速度曲线 常选ease
 
Animtaion-delay 动画延迟时间
 
Animation-iteration-count 播放次数，默认为1，无限次Infinite
 
Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）
 
* animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）
 
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔

学习HTML5的第二周


联系
我们