h5、css3

最新推荐文章于 2023-08-24 20:02:40 发布

enternal567

最新推荐文章于 2023-08-24 20:02:40 发布

阅读量355

点赞数

本文链接：https://blog.csdn.net/enternal567/article/details/78553870

版权

1.HTML5=HTML+css3+Javascript+API
2.新增的HTML5标签
1)article标签
表示文档、页面、或站点中自包含成分所构成的一个页面的一部分。
2)section标签
用来定义文档中的节。
区别：section作用是对页面上内容进行分块，article是独立完整的内容。
3)header
4)hgroup(将标题及其子标签进行分组的标签)
5)footer
6)address（一般包含版权数据，备案信息是，联系方式等）
7)figure标签
表示一段独立的流内容（文本图像）
8)figcaption标签
位于figure内，用于定义figure标签标题
9)details
用于描述文档或某个部分的细节。（目前只有chrome浏览器识别）
二.多媒体应用
1.视频:video

<video src="文件地址" controls="controls"></video>
< video src="文件地址" controls="controls">
    您的浏览器暂不支持video标签。播放视频
</ video >
< video  controls="controls"  width="300“ >
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持video标签。播放视频
</ video >

autoplay：媒体加载后自动播放
muted：是否静音
playbackrate：播放速率
volume：音量值
loop：循环播放
poster：视频第一页上的图片
preload:预加载
eg.

<video width="320" height="240" controls="controls">
  <source src="/i/movie.ogg" type="video/ogg">
  <source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

运行结果：这里写图片描述
音频：audio

<audio src="song.ogg" controls="controls">
</audio>

autoplay：媒体加载后自动播放
muted：是否静音
loop：循环播放
preload:预加载
controls:向用户显示控件，比如播放按钮。

<audio src="/i/song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

运行结果：这里写图片描述
三.表单
HTML5中为了方便排版，可以使form中的表单标签脱离form的嵌套。方法:form指定ID，所有表单标签均添加form=id属性

<form action="" method="post" id="register" >
</form>
    <input  type="text" name="user" form="register" />
    <select name="year" form="register" >
        <option value="1999"></option>
    </select>
    <textarea name="ext" form="register" ></textarea>
    <button type="submit" form="register" >提交</button>

type=”E-mail”:限制用户输入只能是E-mail类型
type=”url”:限制用户输入只能是url类型
type=”date限制用户输入只能是日期类型
type=”month”:限制用户输入只能是月类型
type=”week”:限制用户输入只能是周类型
type=”number”:限制用户输入只能是数字类型
type=”range”:产生一个滑动条表单
type=”search”:产生一个搜索意义的表单配合results=”n”属性 C
type=”color”:生成一个颜色选择表单
required:表单拥有该属性表示其内容不能为空，必填
placeholder=”提示信息”：表单的提示信息，存在默认值将不显示
autofocus：自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete=”on/off”:自动完成功能
eg.

<form action="" id="myform" autocomplete="on"></form>
    <input type="text" form="myform" required placeholder="请输入用户名" autocomplete="off" name="username" autofocus/>
    <input type="submit"  form="myform"/>
<p>邮箱：<input type="email" form="myform"/></p>
<p>网址： <input type="url" form="myform"/></p>
<p>日期： <input type="date" form="myform"/></p>
<p>时间： <input type="time" form="myform"/></p>
<p>月：<input type="month" form="myform"/></p>
<p>周：<input type="week" form="myform"/></p>
<p>数字： <input type="number" form="myform"/></p>
<p>滑动条 <input type="range" form="myform"/></p>
<p>搜索： <input type="search" form="myform"/></p>
<p>颜色: <input type="color" form="myform"/></p>

运行结果：这里写图片描述
css3
1.box-shadow
bax-shadow:h-shadow，v-shadow，blur(模糊距离)，spread(阴影大小) color，inset（内/外）
box-shadow:0px(左右偏移) 0px(上下偏移)10px(模糊距离)-3px(模糊半径)red(颜色)
2.text-shadow
text-shadow:h-shadow,v-shadow,blur,color
eg.

<style>
        section{
            width:300px;
            height:300px;
            margin:0 auto;
            -webkit-box-shadow:0 0 10px 3px red;
            -moz-box-shadow:0 0 10px 3px red;
            box-shadow:0 0 10px 3px red;
        }
        h1{
            text-shadow: 0px 8px 0px green;
            text-align:center;
        }
    </style>
</head>
<body>
<section>
    <h1>hello</h1>
</section>
</body>

运行结果：这里写图片描述
优雅降级：整体+各个

box-shadow: inset hoff voff blur color;
-webkit-box-shadow: inset hoff voff blur color;
            -moz-box-shadow: inset hoff voff blur color;

渐进增强：各个+整体

-webkit-box-shadow: inset hoff voff blur color;
            -moz-box-shadow: inset hoff voff blur color;
            box-shadow: inset hoff voff blur color;

2，边框：border-image
border-image:source(路径) slice(图像边界向内偏移)width(宽度)oue-set(重复多少)
round:填充 strech:拉伸
eg：

div{
            height:50px;
            width:200px;
            border:solid 15px #ccc;
        }
        .round{
            -webkit-border-image:url(img/borimg.png) 20 20 round;
            -moz-border-image:url(img/borimg.png) 20 20 round;
            -o-border-image:url(img/borimg.png) 20 20 round;
            border-image:url(img/borimg.png) 30 30 round;
        }
        .stretch{
          -webkit-border-image:url(img/borimg.png) 20 20 stretch;
          -moz-border-image:url(img/borimg.png) 20 20 stretch;
          -o-border-image:url(img/borimg.png) 20 20 stretch;
          border-image:url(img/borimg.png) 30 30 stretch;
        }
       </div>

运行结果：这里写图片描述
3.圆角
border-radius:a——四边圆角效果相同
a b——左上右下，右上左下
a b c——左上，右上左下，右下
a b c d——左上，右上，右下，左下
4.多背景

<div>
background:url()
background:url()
background:url()
</div>

在最上层的最先写
背景放大：background-size:cover(以最小程度放大) contain(以最大程度放大)或background-size:百分比/精确像素
background-attachment:local(随文字滚动)fixed(固定)scroll(随滚动条滚动)
5.渐变
线性渐变(liner-gradient)
background:liner-gradient(direction(默认从上到下)，color1….color n)
eg.

div.box1{
            width:300px;
            height:200px;
            background:-webkit-linear-gradient(red,green);
            background:-o-linear-gradient(red,green);
            background:-moz-linear-gradient(red,green);
            background:linear-gradient(red,green);
        }

运行结果：这里写图片描述

角度
background:liner-gradient(30dge，color1….color n)
eg：

div.box3{
            width:300px;
            height:200px;
            background:-webkit-linear-gradient(20deg,red,green);
            background:-o-linear-gradient(20deg,red,green);
            background:-moz-linear-gradient(20deg,red,green);
            background:linear-gradient(20deg,red,green);
        }

运行结果：这里写图片描述

斜渐变
background:liner-gradient(to right(从左往右)，color1….color n)
eg：

div.box2{
            width:300px;
            height:200px;
            background:-webkit-linear-gradient(left,red,green);
            background:-o-linear-gradient(right,red,green);
            background:-moz-linear-gradient(right,red,green);
            background:linear-gradient(to right,red,green);
        }

运行结果：这里写图片描述

重复线性渐变
background:repeating-liner-gradient(color1 %25….color n %10)
eg：

div.box4{
            width:300px;
            height:200px;
            background:-webkit-repeating-linear-gradient(red,green 10%,brown 20%);
            background:-o-repeating-linear-gradient(red,green 10%,brown 20%);
            background:-moz-repeating-linear-gradient(red,green 10%,brown 20%);
            background:repeating-linear-gradient(red,green 10%,brown 20%);
        }

运行结果：这里写图片描述

径向渐变
background:radial-gradient(center(默认形状中心点)，shape ，size，color1….color n)
eg：

div.box1{
            width:300px;
            height:200px;
            background:-webkit-radial-gradient(red,green,yellowgreen,greenyellow);
            background:-o-radial-gradient(red,green,yellowgreen,greenyellow);
            background:-moz-radial-gradient(red,green,yellowgreen,greenyellow);
            background:radial-gradient(red,green,yellowgreen,greenyellow);
        }

运行结果：这里写图片描述

size：渐变大小：closest-side furthest-side
closest-corner furthest-corner
eg：

div.box2{
            width:300px;
            height:200px;
            background:-webkit-radial-gradient(red 10%,green 40%,yellowgreen 70%,greenyellow);
            background:-o-radial-gradient(red 10%,green 40%,yellowgreen 70%,greenyellow);
            background:-moz-radial-gradient(red 10%,green 40%,yellowgreen 70%,greenyellow);
            background:radial-gradient(red 10%,green 40%,yellowgreen 70%,greenyellow);
        }

运行结果：这里写图片描述
重复径向渐变
eg：

div.box5{
            width:300px;
            height:200px;
            background:-webkit-repeating-radial-gradient(circle,red,yellow 10%,green 15%);
            background:-o-repeating-radial-gradient(circle,red,yellow 10%,green 15%);
            background:-moz-repeating-radial-gradient(circle,red,yellow 10%,green 15%);
            background:repeating-radial-gradient(circle,red,yellow 10%,green 15%);
        }

运行结果：这里写图片描述
6.文本：text-overflow:clip
white-space:nowrap——禁止换行
text-overflow：ellipsis——溢出用点代替
Word-break：break-all——单词内换行
7.字体
eg：

@font-face{
            font-family:newfont1;
            src:url(font/Marvel-Regular.ttf);
        }
        @font-face{
            font-family:newfont2;
            src:url(font/Roboto-Regular.ttf);
        }
        .a{
            font-size:20px;
            font-family:newfont1;
        }
        .b{
            font-size:16px;
            font-family:newfont2;
        }

这里写图片描述
8.多列

a{ column-count:5;/*分列*/ column-gap:20px;/*列间距/行间距*/ column-rule:solid 3px red;/*间隔线*/ } .b{ columns:200px 3;/*column-width column-count*/ } 这里写图片描述
9.用户页面
resize：none能不能缩放
eg：

 textarea{
            resize:none;
        }
        div{
            height:100px;
            width:200px;
            border:solid 2px black;
            resize:/*horizontal*/vertical;
            overflow:auto;
        }

10.outline-offset外边框线和边框线距离
eg：

 p{
            margin:100px auto 0;
            height:200px;
            width:200px;
            border:solid 3px red;
            outline:solid 3px black;
            outline-offset:15px;
        }

运行结果这里写图片描述

enternal567

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
h5、css3

1.HTML5=HTML+css3+Javascript+API 2.新增的HTML5标签 1)article标签表示文档、页面、或站点中自包含成分所构成的一个页面的一部分。 2)section标签用来定义文档中的节。区别：section作用是对页面上内容进行分块，article是独立完整的内容。 3)header 4)hgroup(将标题及其子标签进行分组的标签)
复制链接

扫一扫

h5、css3

“相关推荐”对你有帮助么？