Tips：这个只是作者的学习笔记，仅作参考
目录
一.HTML5常用标记
HTML常用标记(具体使用方式自行尝试,使用场景均不固定)
| 名字 | 语法 | 意义 |
| 头部 | <header></header> | 当头部内容盒子使用,显示格式为块. 只能包裹头部.既限定范围,也作为容器 |
| 尾部 | <footer></footer> | 网页最后一行使用,显示格式为块 |
| 导航 | <nav></nav> | 当装导航栏的盒子用,显示格式为块 |
| 媒体文件引入 | <embed src=""></embed> | 引用媒体文件,但不能全屏,显示格式为块 |
| 内容块 | <section></section> | 当装内容的盒子用,显示格式为块 Tips:范围没那么狭窄,头和尾都可以归为内容 |
| 辅助信息 | <aside></aside> | 啥都能放进去,就是给内容打下手的,常用于说明 |
| 文章 | <article></article> | 用来装文本内容的盒子 |
| 独立内容块 | <figure> <img src="xxx"/> <figcaption></figcaption></figure> | 一整套组合,常用于实现上图下文本的结构(也可以不用图片) |
| 高亮显示文字 | <mark></mark> | 作用如其名,常用于高亮显示搜索关键词(但要在CSS中设置样式,不常用(因为适配性问题,font用的更多)) |
| 标题组 | <hgroup></hgroup> | 被用来对标题元素进行分组,可放多个标题 |
| 对话框 | <dialog open></dialog> | 较新的浏览器版本才支持,标签中要写open才会显示 |
| 绘制图形 | <canvas></canvas> | 图形容器,要用脚本绘制图形 |
<!-- 只能包裹头部.既限定范围,也作为容器,显示模式 - 块级 -->
<header>头部</header>
<!-- 尾部 - 网站的最后一行 -->
<footer>尾部</footer>
<!-- 显示模式 - 块级 -->
<nav>导航</nav>
<!-- 范围没那么狭窄,头和尾都可以归为内容 -->
<section>内容</section>
<!-- 啥都能放进去,就是给内容打下手的,常用于说明 -->
<aside>辅助信息</aside>
<!-- 只放文本 -->
<article>文章</article>
<!-- 标题组(可以放多个标题) -->
<hgroup>标题组</hgroup>
<!-- 对话框(默认隐藏) -->
<dialog>你好</dialog>
<!-- open(会将显示模式转为块)可开启对话框 -->
<dialog open="open">你好</dialog>
<!-- 独立内容块 -->
<!-- 常用于上图下文本布局 -->
<figure>
<img src="../Day13/1.png" alt="">
<figcaption>这是对内容的描述</figcaption>
<span>222</span>
</figure>
<!-- 高亮显示文字(要在CSS中写样式配合),一般用font(因为font没有兼容性问题) -->
<mark>大红</mark>
<!-- 定义图像 -->
<canvas></canvas>
<!-- 音频文件标签-1 (不能全屏) -->
<embed src="./videos/chen.mp4" type="">二.Video视频文件
是有比embed更好用的视频标签,属于是promax版本了
video的属性
src : 视频的路径
controls : 显示播放控件
autoplay : 自动播放
muted : 静音
loop : 循环播放
poster="" : 第一帧(图片)
<video src="路径.mp4" control(控件)="control" autoplay(自动播放)="autoplay" preload(预加载)="auto" loop(循环播放)="loop" poster(视频第一帧图片,可以理解为视频封面)="图片路径"></video>
<video src="./videos/chrome_japan.mp4" controls autoplay muted loop poster="./Folder.jpg"></video>source:特地用来存放文件路径的标签,一般会写多个source来实现多路径视频(即第一个路径播放不了就加载第二个路径)
<video controls autoplay poster="./Folder.jpg" loop>
<!-- type为播放文件格式 -->
<source src="./videos/3theB.mp4" type="video/mp4">
<source src="./videos/3theB.mp4" type="video/webm">
</video>Video标签支持的格式有三种:Ogg,MPEG4, WebM.但这三种对浏览器兼容不同
NO:代表该浏览器不支持, X.0+:该版本及以上支持
三.Audio音频文件
Audio属性:
| 属性值 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放 |
| controls | comtrols | 如果出现该属性则向用户显示控件(播放按钮...) |
| loop | loop | 如果出现该属性,则会在音频播放结束后重新播放 |
| preload | prepload | 如果出现该属性,则音频在页面加载时预加载(但如果设置了autoplay,这个便会失效) |
| src | url | 要播放的音频的url |
<audio src="./music.mp3" controls loop muted></audio>
<!-- 跟视频是一个逻辑 -->
<audio controls>
<source src="./music.mp3">
</audio>四.input标签的新增属性值
属性:
| 属性名 | 属性值 | 描述 |
| type | 只能输入邮箱(参照@符号) | |
| type | url | 只能输入网址(参照https://) |
| type | number | 只能输入数字 |
| type | range | 滑块控件 |
| type | color | 调色板 |
| type | date | 年月日 |
| type | month | 年月 |
| type | week | 周 |
| type | time | 时分 |
| type | datetime-local | 本地时间 |
| type="text" | required | 判断不能为空 |
| type="passsword" | autofocus | 自动聚焦 |
| type="text" | placeholder | 提示文本 |
| type="text" | maxlength | 最大长度 |
| type="text" | pattern | 正则表达式 |
| type="text",datalist | list,autocomplete,name | 数据列表关键词相关查找显示 |
| type="text" | output | 输出 |
<!-- novalidate - 取消验证(用的话必须写在form标签内) -->
<form action="">
<!-- 邮箱地址 -->
<!-- 参照@符号进行判断 并且@符号后面要有内容 -->
<!-- multiple可以实现同时输入多个邮箱号(逗号隔开) xxx@qq.com,xxx@qq.com -->
<input type="email" multiple placeholder="请输入邮箱">
<br>
<!-- 网址 - https://开头 -->
<input type="url" placeholder="请输入网址">
<br>
<!-- 数字 - 可设定最小值(min),最大值(max) value设定初始值-->
<!-- 会自行判断是否够放数字而改变框大小 -->
<input type="number" min="0" max="8" value="2" step="">
<br>
<!-- 滑块组件 step-步长(一下滑动多少) -->
<input type="range" min="0" max="100" step="10" value="0">
<br>
<!-- 调色板 -->
<input type="color">
<br>
<!-- 时间(年月日) 将数据传送给name属性值的地方 -->
<input type="date" name="abc">
<br>
<!-- 时间(年月) -->
<input type="month">
<br>
<!-- 周 -->
<input type="week">
<br>
<!-- 时间-时分 -->
<input type="time">
<br>
<!-- 本地时间 -->
<!-- 很多浏览器识别不了 -->
<!-- <input type="datetime"> -->
<input type="datetime-local">
<!-- input新增的属性 -->
<!-- required - 判断不能为空 -->
<input type="text" required>
<br>
<!-- autofocus - 自动聚焦 会一打开就让被聚焦的内容突出 整个页面只能有一个 -->
<input type="password" autofocus>
<!-- placeholder - 提示文本 -->
<input type="text" placeholder="提示文本">
<br>
<!-- 最大长度 - 判断字符数 -->
<input type="text" maxlength="5">
<!-- 正则表达式 - pattern -->
<input type="text" maxlength="11" pattern="^\d{3}$" placeholder="请输入三位数">
<!-- 数据列表 -->
<!-- 关键词 -->
<!-- id要与list值一致 -->
<input type="text" list="a" autocomplete="on" name="inp">
<datalist id="a">
<option value="臭豆腐">臭豆腐</option>
<option value="臭螺蛳粉">臭螺蛳粉</option>
<option value="臭榴莲">臭榴莲</option>
</datalist>
<input type="text">
+
<input type="text">
<output>
</output>
<!-- <button>
提交
</button> -->datalist提供一个实现定义好的列表,通过id与input关联,当input内输入是就会有自动完成(autocomplate)的功能,用户将会看见一个下拉列表供其选择.
input标签练习案例-滑动开关
最典型的滑动开关就是苹果的椭圆形开关,内置一个白圆,点击后背景变色且白圆位置发生改变.
开启状态:
关闭状态:
个人做法:
CSS部分:
body{
text-align: center;
/* background-color: yellowgreen; */
}
input{
border-radius: 15px;
appearance: none;
width: 80px;
height: 30px;
background-color: yellowgreen;
position: relative;
}
/* 选中input后方构造一个圆点 */
input::before{
content: '';
width: 25px;
height: 25px;
/* 圆点垂直居中 */
top: 50%;
left: 2px;
transform: translateY(-50%);
background-color: white;
border-radius: 50px;
position: absolute;
}
/* 选择点击后的input后方,使其远点位移 */
input:checked::before{
transform: translate(50px,-50%);
}
/* 点击后背景颜色也发生改变 */
input:checked{
background-color: #ccc;
}HTML部分:
<input type="checkbox">
五.CSS属性选择器
标准格式:aaa[class='bbb'] (aaa和bbb是同一个标签,只不过bbb是对位置更精细的说明)
更多用法:
/* 首先是一个div,并内部有一个属性叫class */
div[class]{
color: red;
}
/* 首先是一个div,并且内部有一个名为box的class 但不是万能的,比如不能一下子写多个class
名字,一次只能一个*/
div[class='box']{
color: blue;
}
/* 首先是一个div,并有一个属性是class,其取值名开头为b */
div[class^='b']{
color: aqua;
}
/* 首先是一个div,并且一个属性是class,其取值名结尾为x */
div[class$='x']{
color: aquamarine;
}
/* 首先是一个div,并且有一个class属性,取值内可以拆分出来一个叫flower的单词 */
/* 但不能间断 */
/* 例如:查找 div class="fffflowerrrr" */
div[class*='flower']{
color: cadetblue;
}
/* 首先是一个div,并且有一个class属性,取值内包含一个单独的单词box */
/* 例如查找:class="kbkjbk box" */
div[class~='box']{
color: darkcyan;
}
/* 首先是一个div,并有一个class属性,取值是完整且唯一,识别横杆前面的单词 */
/* 例如查找:class="ggg-bx" */
div[class|='ggg']{
color: pink;
}
/* 不是非得div标签,甚至可以是类,id */
p[class='rao']{
color: yellowgreen;
}六.CSS伪类选择器
6.1 结构伪类选择器
这个可以选的比属性选择器还精细,假设说属性选择器是查找广州市的靓仔,那伪类选择器就相当于查找广州市xx区xx村名叫某某的靓仔.
| 选择器 | 作用 |
| :first-chird | 父元素的第一个子元素 |
| :last-child | 父元素的最后一个字元素 |
| :nth-child(n) | 选择父元素中第n个元素 |
| :nth-last-child() | 选择某个元素的一个或多个子元素,从最后一个开始算 |
| :only-child | 选择的元素使其父级元素的唯一子元素(独生子女) |
| :first-of-type | 选择上级元素中下第一个同类元素 |
| :last-of-type | 选择上级元素的最后一个同类子元素 |
| :nth-of-type() | 选择指定的元素,类似于:nth-child,但不同的是只计算选择器指定的元素 |
| :nth-last-of-type() | 选择指定元素,从元素的最后一个开始计算 |
| :only-of-type | 选择一个元素是他的上级元素中唯一一个相同类型子元素 |
| :empty | 选择的元素中啥都没有 |
| :root | 选择根元素(HTML) |
/* 伪类查找子集 */
/* 查找第一个div */
div:first-child{
color: aquamarine;
}
/* 查找div第一个子集 空格或>都可以 */
div>:first-child{
color: aquamarine;
}
/* 查找最后一个子集 */
div>:last-child{
color: yellowgreen;
}
/* 查找任意子集 从右往前读 */
/* 例如下:第三个子集,同时还得是个h1 */
div>h1:nth-child(3){
color: yellow;
}
/* 第三个子集,是什么不限定 */
div>:nth-child(3){
color: rgb(30, 255, 0);
}
/* 找倒数第几个子集 */
/* 例如下:找倒数第一个且id为sp */
.abc>#sp:nth-last-child(1){
color: orange;
}
/* 唯一的子集 */
div>:only-child{
color: aquamarine;
}
/* -of-type是从左向右解读 */
/* 先得是.box这个类名,然后还得是第一个.box */
.abc>.box:first-of-type{
color: goldenrod;
}
/* 最后一个h1标签 - 先得是h1,然后找到最后一盒h2 */
.abc>h1:last-of-type{
color: violet;
}
/* 先得是p标签,然后是第二个p */
.abc>p:nth-of-type(2){
}
/* 先得是b标签,其次他还得是父集中唯一的b标签 */
div>b:only-of-type{
color: skyblue;
}
/* 找类abc中没有内容的标签 */
.abc>:empty{
}
/* :root用于选中根元素(也就是html) */
:root,body{
width: 100%;
height: 100%;
}
/* 选中列表中偶数列 even或2n */
/* 偶数列则可以 odd 2n+1 */
/* 前三则可以是:-n+3 */
/* 从三开始往后则可以:n+3 */
ul>:nth-child(even){
color: skyblue;
}
6.2 UI状态伪类选择器
三种input状态:可用状态(enabled),禁用状态(disabled),选中状态(checked)
disabled : 意为禁用,直接将其加入到input标签即可用
appearance:none :意为清除按钮自带样式
具体用法如以下:
<style>
/* enabled-可用状态 */
/* 可用状态下的样式 */
div>:nth-child(2):enabled {
/* appearance:none-清除样式 */
appearance: none;
width: 100px;
height: 100px;
border: 2px solid red;
}
/* 选中状态下的样式 */
div>:nth-child(2):checked {
background-color: aquamarine;
}
/* 禁用状态下的样式 */
div>:nth-child(1):disabled {
appearance: none;
width: 50px;
height: 50px;
background-color: steelblue;
}
</style>
</head>
<body>
<div>
<!-- disabled - 禁用 -->
<input type="radio" disabled>
<input type="checkbox">
</div>
</body>6.3 否定伪类选择器
:not():除了...,其他都定位到
/* 将第一个li变色 */
ul>li:nth-of-type(1){
color: red;
}
/* 将除了第一个li其他都变色 */
ul>li:not(:nth-of-type(1)){
color: aquamarine;
}
6.4 目标伪类选择器
:target 选择器:可以选中当前活动的目标元素,常用于点击跳转后高亮提示当前位置
例如下:
<style>
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
ul{
height: 100%;
}
ul>li{
height: 100%;
width: 500px;
list-style: none;
border: 3px solid red;
box-sizing: border-box;
}
ol{
position: fixed;
right: 0;
top: 0;
list-style: none;
width: 100px;
height: 200px;
background-color: aquamarine;
}
ol>li{
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid blue;
box-sizing: border-box;
color: red;
}
ol>li>a{
text-decoration: none;
color: black;
}
/* 目标伪类选择器 - 高亮显示的目标 */
li:target>h1{
background-color: yellow;
color: orange;
}
</style>
</head>
<body>
<ul>
<li id="box1">我是第1章
<h1>第一章标题</h1>
<p>第1段</p>
<p>第2段</p>
<p>第3段</p>
<p>第4段</p>
<p>第5段</p>
</li>
<li id="box2">我是第2章
<h1>第二章标题</h1>
<p>第1段</p>
<p>第2段</p>
<p>第3段</p>
<p>第4段</p>
<p>第5段</p>
</li>
<li id="box3">我是第3章
<h1>第三章标题</h1>
<p>第1段</p>
<p>第2段</p>
<p>第3段</p>
<p>第4段</p>
<p>第5段</p>
</li>
<li id="box4">我是第4章
<h1>第四章标题</h1>
<p>第1段</p>
<p>第2段</p>
<p>第3段</p>
<p>第4段</p>
<p>第5段</p>
</li>
<li id="box5">我是第5章
<h1>五章标题</h1>
<p>第1段</p>
<p>第2段</p>
<p>第3段</p>
<p>第4段</p>
<p>第5段</p>
</li>
</ul>
<ol>
<li><a href="#box1">第1章</a></li>
<li><a href="#box2">第2章</a></li>
<li><a href="#box3">第3章</a></li>
<li><a href="#box4">第4章</a></li>
<li><a href="#box5">第5章</a></li>
</ol>
</body>
七.CSS3浏览器前缀
不同的浏览器专属CSS需要添加其对应的前缀
| 属性值 | 格式(box-shadow是例子) | 浏览器 |
| -ms- | -ms-box-shadow | IE |
| -moz- | -moz-box-shodow | 基于Gecko引擎的浏览器(火狐) |
| -o- | -o-box-shodow | Opera(欧朋)浏览器 |
| -webkit- | -webkit-box-shodow | 基于Webkit引擎的浏览器(苹果,谷歌) |
八.CSS3优雅降级渐进增强
渐进增强写法:
.transition { /*渐进增强写法 从小到大*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
优雅降级写法:
transition { /*优雅降级写法 从大到小*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
九.文字与盒子阴影
文字阴影 属性值:text-shadow
盒子阴影 属性值:box-shodow
具体用法如下(例):
<style>
/* 文字影子 */
p{
/*
第一个取值-水平距离(越大越靠右)
第二个取值-垂直距离(越大越往下)
第三个取值-模糊度(越大越模糊,不能取负值)
颜色 - 一样的影子,谁在前面谁生效
*/
/* 颜色不写默认黑色 */
/* 有多个取值的时候,逗号隔开,谁在前面谁优先生效 */
text-shadow: 3px 8px 8px grey,5px 10px 8px red;
}
/* 盒子影子 */
div{
width: 200px;
height: 200px;
background-color: pink;
margin: auto;
margin-top: 100px;
/* 盒子阴影 */
/*
第一个取值 - 水平阴影
第二个取值 - 垂直阴影
第三个取值 - 模糊度(越大越模糊,不能取负值)
第四个取值 - 延伸半径(值越大欲望外延伸,值越少越往里收缩,可取负值)
inset - 内阴影
*/
box-shadow:3px 3px 3px 3px rgb(253, 180, 192) inset,4px 4px 4px 4px rgba(255, 105, 180, 0.499), 5px 5px 5px 5px grey ;
}
</style>十.CSS3的圆角
做法不太好说清楚,把下方例子全走一遍就懂了
<style>
div{
margin: auto;
width: 100px;
height: 50px;
background-color: pink;
text-align: center;
margin-bottom: 20px;
}
/* 四个角 */
.box1{
/* 一个值就四个角一样 */
border-radius: 5px;
/* 两个值时 取值一:左上,右下 取值二:左下,右上 */
border-radius: 2px 10px;
/* 三个值时 取值一:左上 取值二:右上,左下 取值三:右下 */
border-radius: 3px 10px 15px;
/* 四个值时 左上 右上 右下 左下 */
border-radius: 5px 10px 15px 20px;
}
/* 方向 */
.box2{
/* 方向词 left top right bottom - 先写上下在写左右 */
/* 右上 */
border-top-right-radius: 15px;
}
/* 胶囊型 */
.box3{
/* 较短那一边取值的一半 */
border-radius: 25px;
}
/* 椭圆形 */
.box4{
/* 较长那一边取值的一半 */
border-radius: 50px;
}
/* 圆形 */
.box5{
width: 100px;
height: 100px;
line-height: 100px;
/* 宽高的一半 */
border-radius: 50%;
}
/* 只切一角的半圆-四个角切完就是胶囊 */
.box6{
/* 左上角就切水平的50%和垂直的100% */
border-top-left-radius: 50% 100%;
}
/* 椭圆 - 在角落画一个10(短半径)*20(长半径)的椭圆 */
/* 正常空格是正圆,斜杠是椭圆 */
.box7{
border-radius: 10px/20px;
}
.box8{
/* 10px和30px是一组(左上/右下),20px和40px是一组(右上/左下)
可以看成是10px/30px 20px/40px */
border-radius: 10px 20px/30px 40px;
}
.box9{
/* 10px/15px为一组(左上)
20px/25px为一组(右上和左下)
30px/35px(右下)
*/
border-radius: 10px 20px 30px/15px 25px 35px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
<div class="box10">10</div>
</body>
十一.CSS3的字体图标书写
什么是字体图标?
其实就是图标,只不过其属于文字的一种,那怎么使用嘞?
以下是个字体图标库网站
https://www.iconfont.cn/
方法一:直接用SVG代码
第一步:在网站上找到自己想用的图标
第二步:复制SVG代码:
第三步:直接写在HTML代码里头:
<!-- 1.svg代码 大小样式那些直接在svg里改 -->
<svg t="1705457584247" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4470" width="50" height="50">
<path d="M642.976 581.664a130.976 130.976 0 0 1-261.952 0 130.976 130.976 0 0 1 261.952 0zM512 79.2c228.64
1.792 488.608 162.976 512 466.784h-309.6S674.496 378.176 512 379.296s-202.4 166.688-202.4 166.688H0C15.072
247.584 270.688 77.344 512 79.2z m2.144 865.6c-170.496 0.48-329.76-128.224-395.04-327.424h190.496s41.088 165.92
203.648 164.832 201.216-164.832 201.216-164.832h190.496c-42.464 210.784-220.32 327.008-390.816 327.424z"
p-id="4471">
</path>
</svg>方法二:unicode
第一步:将要使用的代码都加入购物车
第二步:上方导航栏找到购物车图标,点击下载代码
第三步:将解压后的文件夹拖入代码文件夹中,并打开运行其中的HTML文件
第四步:按照HTML文件中提示步骤进行操作
图标编码就在图案下方:
第五步:将@font-face中的url路径改为ttf文件路径,改完即可使用(前提是第四步按照官方步骤做完)
Tips:修改字体图标样式可以用优先级更高的选择器覆盖修改 ,也可以在CSS代码中修改
方法三(常用):font class
前三步与方法二一致
第四步:点击列表中FontClass找到font class代码
第五步:在代码中使用link连接图标文字文件夹中的iconfont.css文件
<link rel="stylesheet" href="./download/font_mjpjwc7050c/iconfont.css">第六步:在要使用的标签中直接class ="class="iconfont 图标编码"即可
<!-- class类输入字标名字(iconfont是固定的 后面必须空格) -->
<span class="iconfont icon-pikaqiu"></span>图标编码在这里看:
Tips:修改字体图标样式可以用优先级更高的选择器覆盖修改 ,也可以在CSS代码中修改
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
