css html5 css3

 <!-- 头部 --><header></header><!-- 导航 --><nav></nav><!-- 区间模块 --><section><!-- 文章 --><article></article><!-- 侧边栏 --><aside></aside></section><!--页脚 --><footer></footer><!-- 文章插入图片 --><figure><!-- mark强调语义 --><figcaption>又至深夜，短暂的LPL休赛期临近尾声，从3月4日开始，看点十足的<mark>LPL春季</mark>赛重燃战火，17支LPL劲旅相继登场，朝着季后赛大门迈进，其中就有领跑积分榜的“大V天龙”V5、低开高走的TES、RNG，以及名次靠前的人气战队WBG。</figcaption><img src="./img/1.jpg" alt=""></figure><!-- 时间 --><span>发布时间:</span> <time>2022-03-03 21:14</time><!-- 详情 --><details>详情</details><!-- 总结 --><summary>总结</summary><!-- 自定义标签 --><ickt>hello</ickt><ickt>hello</ickt>

标签

表单

    <!-- 表单 --><form action="/demo" target="_blank" id="demo"><input type="text" name="username" value="ickt"><input type="text" name="password" required><button>提交</button></form><!-- label不用for属性 --><!-- <label for="username">用户名</label> --><!-- <input id="username" type="text" name="username" value="ickt" form="demo"> --> --><!-- <label>用户名<input type="text" name="username" value="ickt" form="demo" placeholder="hello" autofocus autocomplete="off"></label> --><!-- placeholder     提示 autofocus       自动获取焦点autocomplate    自动补全--><!-- 校验： require， maxlength, minlength, pattern --><!-- 只能感应 --><input type="text" name="color" list="color"><!-- 定义数据 --><datalist id="color"><option value="red">red</option><option value="green">green</option><option value="blue">blue</option><option value="yellow">yellow</option><option value="purple">purple</option><option value="yellowgreen">yellowgreen</option><option value="pink">pink</option></datalist><hr><!-- html4.01 十种类型： text, password, radio, checkbox, file, hidden, button, submit, reset, image --><form action="/test" target="_blank"><!-- 搜索 --><input type="search"><!-- 电话 --><input type="tel" name="tel"><!-- 地址 --><input type="url"><!-- 数字 --><input type="number"><!-- 邮箱 --><input type="email"><!-- 拖拽条 --><input type="range"><hr><!-- 日期与时间 --><input type="date" name="" id=""><input type="datetime" name="" id=""><input type="datetime-local" name="" id=""><input type="time" name="" id=""><!-- 周 --><input type="weak"><!-- 颜色 --><input type="color" name="" id=""><button>提交</button>

音频和视频

    <audio src="./video/菊次郎的夏天.mp3" controls autoplay loop></audio><!-- 通过h5的方式引入视频src         视频资源路径controls    定义控制条autoplay    自动播放（分浏览器）loop        循环播放--><!-- <video src="./video/1.mp4" controls autoplay loop></video> --><!-- <video src="./video/11.mp4" controls autoplay loop></video> --><video controls><!-- <source src="./video/11.mp4"> --><!-- <source src="../../12 css/movie/01 BFC.mp4"> --><source src="./video/1.mp4"><source src="./video/2.mp4"></video>

css3

    .box {width: 800px;height: 600px;/* background-color: #0f0; *//* 半透明 *//* 子元素也跟着变成半透明 *//* opacity: 0.5; *//* 只会影响自己的颜色，不会影响子元素 *//* background-color: rgba(0, 255, 0, 0.5); *//* hsl：色相，饱和度，亮度 *//* background-color: hsl(200, 50%, 50%); */background-color: hsl(200, 100%, 50%);background-color: hsl(200, 0%, 50%);background-color: hsl(200, 50%, 100%);/* background-color: hsl(200, 50%, 0%); *//* hsl：色相(0-360)，饱和度(0-100%)，亮度(0-100%)，透明度(0~1 | 0~100%) *//* background-color: hsl(200, 50%, 50%, 50%); *//* background-color: hsl(200, 50%, 50%, 0.8); */}0是全透明  1 是不透明

属性选择器

/* 以value-开头，或者只有value *//* h1[title|="hello"] {color: red;} *//* 包含hello：用空格分隔，不能与后面文本连起来 *//* h1[title~="hello"] {color: red;} *//* css3提供的 *//* value开头 *//* h1[title^="hello"] {color: red;} *//* value结尾 *//* h1[title$="hello"] {color: red;} *//* 包含value *//* h1[title*="hello"] {color: red;} *//* 多个属性 *//* img[title="dog"][alt*="hello"] {border: 10px solid green;} */

儿子序列选择器和儿子类型选择器

    /* 儿子序列选择器；将所有的子元素排序丛1开始编号受不同类型的兄弟元素影响*//* 儿子类型选择器根据标签类型分类分类后排序按照序号查找注意：受相同标签的影响*/

关系选择器

    <style>/* .box .item {border: 5px solid green;margin-bottom: 10px;} *//* 直接子级选择器（儿子选择器） *//* 不会去后代中查找 *//* .box > .item {margin-bottom: 10px;background-color: green;} *//* 兄弟选择器: 在兄弟里面选择 *//* 兄弟选择器: 选择后面第一个 *//* .demo + .item {background-color: green;} *//* 选择后面所有的兄弟 *//* .demo ~ .item {background-color: green;margin-bottom: 10px;} *//* 关系选择器没有权重 */.demo ~ .item {background-color: green;margin-bottom: 10px;}.box .item {background-color: purple;margin-bottom: 10px;}</style>
</head>
<body><div class="box"><div class="item">1-1-1</div><div class="item demo">2-2-2</div><div class="item">3-3-3</div><div class="item">4-4-4</div><div><div class="item">demo</div></div><div class="item">5-5-5</div><div class="item">6-6-6</div></div>

伪类

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 选中 *//* input:checked {width: 100px;height: 100px;} *//* 获取焦点 *//* input:focus {background-color: pink;} *//* 被禁用的 *//* input:disabled {background-color: green;} *//* 可用的 *//* input:enabled {background-color: orange;} *//* 激活的 *//* h1:target {background-color: skyblue;} *//* 唯一的儿子 *//* 注意：只有元素标签影响，文本注释不影响 *//* .item:only-child {background-color: purple;}.ickt:before {content: "hello";} *//* 空元素 *//* .demo:empty {width: 100px;height: 100px;background-color: orange;} *//* .item {background-color: blue;} *//* 排除选择器 *//* .item:not(div) {background-color: pink;} *//* 限制可以是多个 *//* .item:not(div, .demo) {background-color: pink;} */.item:not(h1.demo) {background-color: pink;}</style>
</head>
<body><input type="checkbox" checked><input type="checkbox"><input type="text" readonly><input type="text" disabled><input type="text"><a href="#demo">demo</a><div class="demo"></div><div class="demo">  </div><div class="demo">123</div><div class="demo"></div><h1 class="item">item h1</h1><h1 class="item demo">demo item h1</h1><div class="box"><div class="item">div 1 1 1</div></div><!-- 后面有h1，item就不是唯一的 --><div class="box"><div class="item">div 2 2 2</div><h1>hello</h1></div><!-- 注释不影响 --><div class="box"><!-- 添加注释 --><div class="item">div 3 3 3</div></div><div class="box ickt">hello<div class="item">div 4 4 4</div>ickt</div><h1>001</h1><h1>002</h1><h1>003</h1><h1>004</h1><h1>005</h1><h1>006</h1><h1>007</h1><h1>008</h1><h1>009</h1><h1>010</h1><h1>011</h1><h1>012</h1><h1>013</h1><h1>014</h1><h1>015</h1><h1>016</h1><h1>017</h1><h1>018</h1><h1>019</h1><h1 id="demo">020</h1><h1>021</h1><h1>022</h1><h1>023</h1><h1>024</h1><h1>025</h1><h1>026</h1><h1>027</h1><h1>028</h1><h1>029</h1><h1>030</h1>
</body>
</html>

伪元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {font-size: 40px;width: 1000px;}/* 伪元素 *//* h1::before {content: "hello";color: red;} */h1::after {content: "ickt";color: red;}/* 第一个字母 */h1::first-letter {color: green;}/* 第一行 */h1::first-line {color: pink;}/* 选中的 */h1::selection {color: red;background-color: purple;}</style>
</head>
<body><h1>前言：要说3月份以来英雄联盟LPL节奏最大的队伍和选手，那还得是BLG和UZI了。自从UZI在BLG复出之后，BLG立刻跻身为LPL流量队之一，比赛也频频被安排在黄金档。要知道流量对于电竞战队来说就意味着钱，很多电竞战队亏损不是因为成绩差，反而是因为流量低，因为战队只有获得更高的流量和关注度，才能吸引到更多的赞助商投资，拿到更多的钱来引援和宣传，形成一个良性循环。然而BLG在UZI首发2局之后再也没能让乌兹登场，甚至被水友曝出俱乐部雪藏UZI，连训练赛都安排得少了，让UZI铁粉彻底炸锅。</h1>
</body>
</html>

css html5 css3相关推荐

第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
html5中的css特性,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
html5 css 响应式_在HTML5 / CSS3中编写响应式简历
本文是我们的" Web响应式设计系列"的一部分,该系列由工具,资源和教程组成,可帮助您为所有平台的用户创建网站. 单击此处查看同一系列的更多文章. 业务部分的几乎每个人都在某个时间 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
html精灵图资源,知识分享：HTML5+CSS3基础之CSS Sprites（CSS精灵）
原标题:知识分享:HTML5+CSS3基础之CSS Sprites(CSS精灵) CSS Sprites介绍 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪 ...

css html5 css3

css html5 css3相关推荐

最新文章

热门文章