HTML5+CSS3
H5新增的语义化标签
<header></header> //头部
<section> //主内容区
<nav> //左侧导航区
<figure></figure> //标题
</nav>
<main></main> //主内容区中间部分
<aside></aside>//右侧部分
</section>
<footer></footer>//底部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
/* width: 100%; */
height: 100%;
}
header {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: orange;
font-size: 25px;
font-weight: bold;
}
footer {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: orange;
font-size: 25px;
font-weight: bold;
}
section {
/* width: 100%; */
height: calc(100% - 100px);
background-color: rgb(111, 107, 107);
}
nav,
aside {
width: 200px;
height: 100%;
background-color: #504c4c;
float: left;
}
main {
float: left;
height: 100%;
width: calc(100% - 400px);
background-color: #fff;
}
figure{
font-size: 25px;
font-weight: 600;
text-align: center;
color: #0de057;
}
p{
color: #fff;
}
</style>
</head>
<body>
<header>header</header>
<section>
<nav>
<figure>nav</figure>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
<main></main>
<aside>
<figure>Aside</figure>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi exercitationem perspiciatis fuga
voluptatibus sed voluptatem illo. Natus deserunt ea odio modi repudiandae repellat cupiditate accusamus,
sapiente, quos quis vero ullam!</p>
</aside>
</section>
<footer>footer</footer>
</body>
</html>
基本格式如图所示
视频及音频标签
音频
视频
常用属性：
- controls 出现控制栏(必须添加)
- loop 循环播放
- autoplay 自动播放(打开网页时自动播放，部分浏览器在刷新之后失效)
- muted 静音播放
视频标签特有的属性：
- poster=“” 设置视频开始图片(即视频未播放时的展示图片)
- width height 宽度和高度
input增强表单
type=“color” 可以获取颜色信息(包含取色器工具)
type=“email” 电子邮件 填写的信息必须按照电子邮件的规范填写
type=“url” 网站 填写的信息必须按照网址规范
type=“tel” 电话 在移动端会自动呼出拨号键盘 在客户端没有效果
type=“search” 搜索框 与文本输入框相比多一个清除按钮
type=“date” 选择日期(可以弹出日历进行选择) 精确到天
type=“month” 精确到月
type=“week” 精确到周
type=“datetime-local” 精确到分钟
滑块type=“range” 数字 type=“number” (常用来提交年龄等数字信息)
- min 设置最大值
- max 设置最小值
- value 设置默认值
- step(步长) 设置滑块或数字每次改变的值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hhh {
width: 500px;
}
</style>
</head>
<body>
<form action="">
color:<input type="color" name="color"><br>
email:<input type="email" name="email"><br>
url:<input type="url" name="url"><br>
tel:<input type="tel" name="tel"><br>
<!-- tel 只有在手机上才能使用 -->
滑块：<input class="hhh" type="range" name="range" min="100" max="200" value="100" step="10"><br>
<!--
min max 可以设置滑块的最大值和最小值
value 设置默认值 默认值初始为中间值
step 步长 设置改变滑块位置时的值
可以通过css 设置样式
-->
数字类型：<input type="number" value="5" step="2"><br>
<!--
min max 设置 最小值 最大值
value 设置初始值
step 步长 设置每次点击箭头改变的值
-->
搜素：<input type="search"><br>
<!-- 多一个快速清除的按钮 -->
日期：<input type="date" name="date"><br>
月份：<input type="month" name="month"><br>
年份：<input type="week"><br>
小时：<input type="datetime-local">
<input type="submit">
</form>
</body>
</html>
input框的属性(了解)
| autofocus | 自动获取焦点 打开页面时 鼠标默认放在该输入框上 |
|---|---|
| required | 必须填写 不能为空 |
| multiple | 支持多个地址用 , 隔开 |
| pattern | 正则表达式 限制输入的内容 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!-- autofocus 自动获取焦点 打开页面时 鼠标默认放在该输入框上 -->
<!-- required 必须填写 不能为空-->
<!-- multiple 支持多个信息用逗号隔开 (如：同时输入多个邮箱地址) -->
<!-- pattern 正则表达式 限制输入的内容 -->
<div>
用户名：<input type="text" autofocus>
</div>
<div>
邮箱：<input type="email" required multiple>
</div>
<input type="submit">
</form>
</body>
</html>
模糊搜索
在输入框输入内容时 可以联想到设置的关键词(可以与后端信息搭配使用)
<input type="text" list="mylist">
<datalist id="mylist">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</datalist>
注：datalist必须设置ID属性 在输入框部分添加list=“ID”
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 模糊搜索 -->
<input type="text" list="mylist">
<datalist id="mylist">
<option value="手机"></option>
<option value="手表"></option>
<option value="手环"></option>
<option value="手镯"></option>
</datalist>
</body>
</html>
选择器
层级选择器
| > | 子代选择器 |
|---|---|
| + | 第一个兄弟选择器 |
| ~ | **所有的兄弟选择器 **(只包含当前元素之后的) |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* > 子代选择器 */
.box>li {
border: 1px solid black;
}
/* + .child后面的第一个兄弟 */
.child+li {
background-color: orange;
}
/* ~ .child后面的所有兄弟 */
.child~li {
background-color: pink;
}
</style>
</head>
<body>
<ul class="box">
<li>111
<ul>
<li>111-111</li>
<li>111-222</li>
<li>111-333</li>
</ul>
</li>
<li class="child">222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</body>
</html>
属性选择器
- [class] 选择右class属性的
- div[class] 选择div里面有class属性的
- div[class=box] 选择div里面class属性为box的( = 为完全等于，即只包含 box 这一个属性 )
- ~= 包含 box1 的即可
- 模糊匹配(了解) ( class^=b 以这个字符开头的 class$=b 以这个字符结尾的 class*=b 包含这个字符的 )
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 选择有class属性的 */
[class] {
background-color: orange;
}
/* 选择div里面有class属性的 */
div[class] {
background-color: pink;
}
/* 选择div里面class属性为box1的 */
/* = 是完全匹配 必须是唯一的class名 */
div[class=box1] {
border: 2px solid black;
}
input[name=age] {
background-color: orange;
}
/* ~= 包含 box1 的即可选中 */
div[class~=box1] {
border: 2px solid green;
}
/* 模糊匹配(不常用)
class^=b 以这个字符开头的
class$=b 以这个字符结尾的
class*=b 包含这个字符的 */
</style>
<body>
<div class="box1">div-111</div>
<div class="box2">div-222</div>
<div>div-333</div>
<div class="box1">div-444</div>
<div class="box1 box2">div-555</div>
<p class="p1">p-1111111</p>
<p class="1">p-222222</p>
<p>p-333333</p>
<div>
<h1>注册页面</h1>
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
年龄：<input type="number" name="age"><br>
邮箱：<input type="email" name="email"><br>
</div>
</body>
</html>
伪类选择器
| :first-child | 第一个孩子 |
|---|---|
| :last-child | 最后一个孩子 |
| :nth-child() | 指定第几个孩子 |
| :nth-child(even) | 选择偶数的孩子(也可用2n) |
| :nth-child(odd) | 选择奇数的孩子(也可用2n + 1 或 2n - 1) |
| :only-child | 选择只有一个孩子的 |
| empty | 选择没有孩子的(也不能有空格换行等任何信息) |
| :root | 根节点 (即HTML标签) |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
}
/* 唯一的子元素 */
div p:only-child{
background-color: orange;
}
div{
width: 500px;
height: 200px;
}
/* 没有孩子节点的 也不能有空格 换行 */
div:empty{
background-color: pink;
}
/* :root 代表根选择器 即HTML标签 */
/* :root{
background-color: rgb(200, 32, 230);
} */
</style>
</head>
<body>
<div>
<p>111</p>
<p>222</p>
</div>
<div>
<p>333</p>
</div>
<div></div>
</body>
</html>
UI状态伪类选择器
| :enabled | 非禁用的 |
|---|---|
| :disabled | 禁用状态的 |
| :focus | 获取焦点时 匹配选择器 |
| ::selection | 选择到内容以后改变样式 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* enabled 非禁用的 */
/* input:enabled {
background-color: red;
} */
/* disabled 禁用状态的 */
input:disabled {
background-color: pink;
}
/* 获取焦点时 匹配选择器 */
/* input:focus {
background-color: blue;
} */
input[type=checkbox] {
/* 清除checkbox 默认样式 */
appearance: none;
width: 20px;
height: 20px;
border: 1px solid black;
}
input:checked {
background-color: gold;
}
div::selection{
/* 选择到内容以后改变样式 */
color: blue;
background-color: rgb(178, 32, 210);
}
</style>
</head>
<body>
<form action="">
用户名：<input type="text"><br>
密码：<input type="password"><br>
<input type="checkbox">记住用户名<br>
<input type="submit" disabled>
</form>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ipsa obcaecati eligendi hic, doloremque
consequuntur veniam natus sapiente voluptate ducimus est consequatur quasi iusto optio placeat vel, adipisci
magni ullam!
</div>
</body>
</html>
怪异盒子模型
box-sizing: content-box;
/* content-box 正常盒子 */box-sizing: border-box;
/* 怪异盒子 如果设置边框和内边距会挤压盒子的内容区域 */
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
padding: 10px;
border: 5px solid black;
margin-bottom: 20px;
box-sizing: content-box;
/* content-box 正常盒子 */
}
.box2 {
width: 200px;
height: 200px;
background-color: rgb(13, 206, 93);
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
/* 怪异盒子 如果设置边框和内边距会挤压盒子的内容区域 */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
字体引入
@font-face{
font-family: 字体名称;
src: url();
}
可以自定义下载字体 并引入到文件中 并可以对其进行命名
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
自定义字体库的引入方式
可以对字体库命名；
*/
@font-face {
font-family: 霸道体墨迹版;
src: url(../龚帆霸道体/龚帆霸道体墨迹版.ttf);
}
div {
font-family: 霸道体墨迹版;
font-size: 100px;
color: red;
text-shadow: 10px 0px 5px green;
}
</style>
</head>
<body>
<div>王亚楠</div>
</body>
</html>
弹性盒子
弹性盒子基本介绍
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
/* 显示为弹性盒子 */
/* 1.子元素默认横向排列 */
/* 2.行内元素转换为块级元素 */
/* 3.子盒子只有一个的情况 margin: auto; 可以直接水平垂直居中 */
display: flex;
}
.box>span {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px dashed red;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<span>111</span>
<!-- <span>222</span>
<span>222</span>
<span>444</span> -->
</div>
</body>
</html>
修改主轴方向
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
flex-direction: row;
/* row 横向排列 column 纵向排列 */
/* row-reverse 在X轴反向排列 */
/* column-reverse 在Y轴反向排列 */
justify-content: space-around;
/* justify-content 调整主轴对齐方式 */
/* flex-start 开始方向对齐(左对齐) */
/* flex-end 结束方向对齐(右对齐) */
/* center 中间对齐 */
/* space-between 两端对齐 */
/* space-around 距离环绕 */
align-items: center;
/* align-items 调整侧轴的对齐方式 */
/* flex-start 开始方向对齐(左对齐) */
/* flex-end 结束方向对齐(右对齐) */
/* center 中间对齐 */
}
.box>div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px dashed red;
}
</style>
</head>
<body>
<div class="box">
<div>111</div>
<div>222</div>
<div>222</div>
<div>444</div>
</div>
</body>
</html>
弹性盒子折行排列
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
/* align-items: center; */
flex-wrap: wrap;
/* 弹性盒子 如果横向排列的元素超过了父级元素宽度 会压缩子元素宽度 */
/* flex-wrap: wrap; 可以设置横向不压缩(即换行) */
/* flex-direction: column; 可以设置纵向不压缩(即换行) */
align-content: flex-start;
/* 换行之后的元素默认是等间距对齐的 */
/* align-content: flex-start; 可以设置让换行的元素紧挨着上一行显示 */
/* flex-start 开始方向对齐(左对齐) */
/* flex-end 结束方向对齐(右对齐) */
/* center 中间对齐 */
/* space-between 两端对齐 */
/* space-around 距离环绕 */
}
.box>div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px dashed red;
}
</style>
</head>
<body>
<div class="box">
<div>111</div>
<div>222</div>
<div>222</div>
<div>444</div>
<div>555</div>
<div>666</div>
</div>
</body>
</html>
7297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
