HTML5
html5知识
lxl。。
这个作者很懒,什么都没留下…
展开
-
初学HTML5——响应式栅格系统
一.栅格系统:在网页制作中,栅格系统就是用固定的格子进行网页布局,是一种清晰,工整的设计风格二.弹性盒布局:弹性盒分为容器,子元素,轴(横轴,纵轴)弹性盒改进了块模块,既不使用浮动,也不会在弹性盒容器与其内容之间合并外边距,是一种非常灵活的布局方法。1.displaydisplay用于指定弹性盒的容器,其值可以为flex;如果为行内元素,值为inline-flex.2.flex-...原创 2020-04-20 21:16:32 · 1995 阅读 · 0 评论 -
初学HTML5——响应式设计
1.什么是响应式:响应式设计理念是基于流动布局、弹性图片、弹性表格、弹性视频和媒体查询等技术的组合。使用百分比布局创建流动的弹性界面,同时使用媒体查询来限制元素的变动范围,这两者组合到一起构成了响应式设计的核心。2.什么是视口:视口在响应式设计中是一个非常重要的概念。视口的概念针对移动端浏览器,分为两种视口,一种是可见视口即设备大小,另一种是视窗视口即网页宽度。<meta>标签...原创 2020-04-18 21:42:32 · 581 阅读 · 0 评论 -
初学HTML5——音频
<audio>标签1.基本语法:<audio src="音频文件路径" controls>你的浏览器不支持audio标签</audio>2.<audio>标签的常用属性属性允许取值取值说明autopalyautoplay如果出现该属性,则音频在就绪后马上播放controlscontrols如果出现该属性,...原创 2020-04-10 10:59:51 · 301 阅读 · 0 评论 -
初学HTML5——视频
<video>标签1.具体语法格式:<video src="视频文件路径" controls="controls"> 你的浏览器不支持video标签/*当浏览器不支持时显示*/</video>2.用于控制视频播放的属性属性允许取值取值说明autopalyautoplay如果出现该属性,则视频在就绪后马上播放cont...原创 2020-04-09 22:21:49 · 1635 阅读 · 0 评论 -
初学HTML5——画布(canvas)
一.canvas介绍canvas为画布, 使用canvas便可以轻松的在网页上绘制图形,文字,图片等。二.画布的使用1.创建画布:HTML5中提供了<canvas>标签,使用<canvas>标签可以在网页中创建一个矩形区域的画布:<canvas id="cavsElem" width=“400” height="300">你的浏览器不支持canva...原创 2020-04-04 19:44:04 · 3291 阅读 · 0 评论 -
初学HTML5——CSS3动画
CSS3 animations一个完整的CSS animations由两部分构成一组定义的动画关键帧:@keyframes规则描述该动画的CSS声明:animation属性1.@keyframes规则在CSS3中使用@keyframes规则来创建动画,keyframes可以设置多个关键帧,每个关键帧表示动画过程中的一个状态,多个关键帧就可以使动画十分绚丽。(1)基本语法格式:@k...原创 2020-03-29 21:59:52 · 893 阅读 · 0 评论 -
初学HTML5——CSS3变形
CSS3 transform1.基本语法:transform:none|transform-functions;属性解释:none:默认值为none,适用于内联元素和块元素,表示不进行变形transform-functions:用于设置变形函数,可以是一个或多个变形函数列表2.2D转换3.元素变形原点元素的变形都有一个原点,元素围绕着这个点进行变形或者旋转,默认的起始位置...原创 2020-03-29 20:13:12 · 967 阅读 · 0 评论 -
初学HTML5——CSS3过渡
CSS3 transitionsCSS3的过渡就是平滑的改变一个元素的CSS值,是元素从一个样式逐渐过渡到另一个样式。CSS3过渡使用transition属性来定义,transition属性的基本语法如下所示: transition:prpperty duration timing-function delay;1.属性解释transition-property:应用过渡的CSS...原创 2020-03-27 21:49:17 · 306 阅读 · 0 评论 -
初学HTML5——CSS3圆角边框
border-radius属性CSS3的圆角边框实际上是矩形的四个角分别做内切圆,然后通过内切圆的半径来控制圆角的弧度CSS3的圆角边框使用border-radius属性来实现,1.基本语法如下所示: border-radius:1-4 length|% / 1-4 length|%;2.属性解释length:用于设置对象的圆角半径长度,不可为负值。...原创 2020-03-27 21:10:31 · 2962 阅读 · 0 评论 -
初学HTML5——CSS渐变
一.线性渐变1.基本语法格式:background-image:linear-gradient([<angle>|<side-or-center>,] color stop,color stop[,color stop]*);2.属性解释:<angel>:表示渐变的角度,角度数的取值范围为0~360deg,这个角度是以圆心为起点的角度,并以这个角度为...原创 2020-03-27 11:22:56 · 1471 阅读 · 0 评论 -
初学HTML5——CSS阴影
一.text-shadow为文本添加阴影效果1.基本语法格式:选择器{text-shadow:h-shadow v-shadow blur color;}2.属性介绍:h-shadow:水平阴影v-shadow:垂直阴影blur:模糊半径color:阴影颜色3.示例如下:<!DOCTYPE html><html><head> ...原创 2020-03-26 22:57:24 · 302 阅读 · 0 评论 -
初学HTML——过渡与变形综合应用
一.基本要求1.当鼠标移上第一张图像时,产生直角边框过渡为圆角边框2.当鼠标移上第二张图像时,产生图片逐渐放大的过渡效果3.当鼠标移上第三张图像时,产生图片旋转的过渡效果4.当鼠标移上第四张图像时,产生图片透明度逐渐变暗5.当鼠标移上四张图像的任一图像时,都伴随着盒子阴影效果二.代码部分<!DOCTYPE html><html><head> ...原创 2020-03-26 17:14:48 · 952 阅读 · 0 评论 -
用HTML编写各式各样的图形
一.圆环1.代码部分<!DOCTYPE html><html><head> <meta charset="utf-8"> <style type="text/css"> #one{ width: 400px; height: 400px; background-colo...原创 2020-03-22 16:39:14 · 3288 阅读 · 0 评论 -
用HTML5编写课程表
代码部分:<!DOCTYPE html><html><head><meta charset=utf-8" /><title>课表</title><style> td{ width: 13%; text-align: center; } td:first-child{ height: ...原创 2020-03-22 16:17:05 · 3378 阅读 · 0 评论 -
初学HTML——文本类网页设计
一.常用的文本标签1.标题标签HTML中,定义了6级标题,分别为h1、h2、h3、h4、h5、h6,每级标题的字体大小依次递减,1级标题字号最大,6级标题字号最小。2.段落标签<p>标签用于定义段落。<br>标签与<wbr>标签<br>标签:可插入一个简单的换行符,用来输入空行,而不是分割段落。(<br>是直接显示换行)&l...原创 2020-03-16 21:53:54 · 1272 阅读 · 0 评论 -
初学HTML5——CSS选择器
已学过的一.通配符选择器*{} 选择所有元素,常用于清除内外边距二.标签选择器元素名称{} 根据标签选择标签里面的元素 如a{},body{}三.类选择器.<类名>{} 根据class的值选择元素。类名的命名规则:不能以数字开头四.Id选择器#<id值> 根据ID的值选择元素五.并集选择器<选择器>,<选择器>使用逗号隔开 同时...原创 2020-03-07 22:25:22 · 334 阅读 · 0 评论 -
使用HTML5+CSS3绘制HTML5的logo
一.了解HTML5 logo 的构造1.对HTML5的logo进行分析:2.logo的实现步骤:图1:定位出整个页面的背景区域“bg”,并实现背景光束。图2:定义logo样式,并画出盾牌的左半边。图3:画出盾牌的右半边。图4:画出浅橘色区域。图5:画出“5”的左半边。图6:画出“5”的右半边。图7:用色块遮盖多余的部分。图8:在盾牌上方添加“HTML”图片。二:代码实现1...原创 2020-03-03 16:29:11 · 1885 阅读 · 0 评论 -
初学HTML5——语义化标签
HTML5中的语义化标签一.结构元素1.header元素:是一种具有引导和导航作业的结构元素,该元素可以包含所有通常放在页面头部的内容。注.header是一个标签,类似于p标签。此外,还要分清head和header,head是网页的头部,header是指头部的信息。基本语法:><header>> <h1>网页主题</h1>> ...原创 2020-03-02 23:14:53 · 1143 阅读 · 0 评论