Fine9548-CSDN博客

原创 CSS3 相关属性

使用选择器在页面插入内容在CSS3中，使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容，比如对H2使用before选择器在H2的前面插入文字“Title”等。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>使用选择器插入内容</title> &lt

2020-06-11 20:35:42 163

原创 CSS3 UI元素状态伪类选择器

UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！UI元素状态伪类选择器对于不同的浏览器有着不同的兼容性。详细见下图：1、选择器E:hover、E:active和E:focus1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式使用方法： <元素>:hover{ CSS样式 }我们可以在“<元素>”中添加元素的type属性。例：input[type=“text”]:hover{ CSS样式}2)、E:act

2020-06-10 20:33:06 952

原创 CSS3属性选择器

属性选择器相较于CSS，CSS3中增加了三个属性选择器：[att*=val],[att^=val],[att$=val].[att * =val]属性选择器基本概念：如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。<head> <meta charset="UTF-8"> <style> [id*=section]{ background: blue; } </st

2020-06-09 20:21:24 211

原创 HTML5的图像拖放

注意对象元素的draggable属性设置为true，还需要注意的使a元素和img元素必须指定href。编写和拖放有关的事件处理代码设置拖放时的视觉效果实例代码<!DOCTYPE html><html lang="en"><header > <meta charset="UTF-8"> <title>拖放</title> <script> function allowD

2020-06-08 19:32:52 247

原创 video和audio元素的属性、事件及使用

video和audio元素HTML5中主要增加了两个新的多媒体元素：video和audio。从字面意思可以知道，video元素是与视频相关的，用于在页面中播放视频文件；audio元素是与音频相关的，用于在页面中播放音频文件。autoplay属性该属性用于设置指定的媒体文件，在页面加载完毕后是否自动播放。对于有的页面来说，所包含的视频或音频信息，不需要得到用户指令就可以直接播放。例如，页面内的宣传片、广告信息等，可以在对应的多媒体元素上添加autoplay属性的设置达到媒体自动播放的效果。使用auto

2020-06-07 20:49:48 1048

原创 Webstorage功能

HTML4中我们使用的cookies在客户端保存用户名等等一些简单的用户信息。其中有一些缺点，比如：大小限制在4kb，带宽浪费，难以操作等。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。sessionstorage1）sessionStorage是Storage类型的一个对象，拥有clear(),getItem(name),key(index),removeItem(name),setI

2020-06-06 20:55:36 191

原创 canvas

HMTL保存文件就是将网页中的构造幕布中的图片以jpg的格式保存同样需要绘制幕布<!DOCTYPE html><html lang="en"><header> <meta charset="UTF-8"> <title>canvas保存文件</title> <script type="text/javascript" src="保存文件.js"></script> &lt

2020-06-05 21:05:28 106

原创 canvas绘制各个图形

Canva绘制图形< canvas >看起来和< img >标签一样，只是 < canvas > 只有两个可选的属性 width、heigth 属性，指定绘图区域大小，但没有 src、alt 属性。如果不给< canvas >设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，它会出现扭曲。所以，建议不要使用css属性来设置< canvas

2020-06-04 21:01:05 359

原创 HTML5学习笔记

progress元素progress是HTML5的一个新元素，表示定义一个进度条，用途很广泛，可以用在文件上传的进度显示，文件下载的进度显示，也可以作为一种loading的加载状态条使用。progress maxmax属性表示进度条的进度最大值，如果有此值，必须是大于0的有效浮点数。max的默认值是1.progress valuevalue属性表示进度条完成的进度之，value值的范围为0~max之间。如果没有设置max属性，那么value属性要在0 ~1之间。具体用法：<!DOCTYP

2020-06-03 20:34:02 114

原创 HMTL快速入门笔记2

网页结构元素time元素定义的格式如下<time datetime="2020-6-2">2020年6月2日</time><time datetime="2020-6-2">6月2日</time><time datetime="2020-6-2">今天的时间</time><time datetime="2020-6-2T19:00">2020年6月2日晚上7点</time><time date

2020-06-02 20:33:09 151

原创 HTML快速入门笔记

网页结构DOCTYPE 声明使用HTML的版本< header > 表示页面中的一个内容区块或者整个页面的标题。< nav >表示页面中导航链接的部分< article > 表示页面中一块与上下文不相关的独立内容。比如一篇文章中的文章。< sectior >表示页面中一块内容区块< aside > 表示article元素的内容之外的和内容相关的辅助信息。< footer >表示页面或者页面中的一块区域的页脚。arti

2020-06-01 21:28:43 308

原创 HMTL+CSS基础入门笔记2.

HMTL+CSS基础入门笔记2按照进度应该涉及了一些CSS基础1.使用CSS样式的方式嵌入式样式表 <style type="text/css"></style>需要将样式放在< head >< /head >中引入式样式表<link rel="StyleSheet" type="text/css" href="style.css">内链样式表 <body style="background-color:green; m

2020-05-31 21:31:50 178

原创 HTML的入门笔记

HTML+CSS基础入门学习的部分笔记最近学习的HTML，只是学习了最基本的常用标签和CSS的文本设计，这里整理了最近学习的内容要点，和各个基础标签的总结。语言特点HTML语言是表示网页信息的符号标记语言，具有设置文本的各个属性，插入图像、媒体和各种超链接，创建并设计表格等特点。保存格式通常为.html .htm .xhtml 。语言基础格式为<标记>内容</标记>标记中可插入各种属性标签来控制内容。该语言并不区分大小写，<! --中的内容-- >，（因

2020-05-30 21:05:32 261

Fine9548的博客