HTML4
a标签
- 打开应用
<a href="tel:10010">打电话</a>
<a href="mailto:963076624@qq.com">发邮件</a>
<a href="sms:10010">发短信</a>
- 下载文件
<a href="./test.txt" download="test.txt">下载文件</a>
dl dt dd 标签(自定义列表)
<dl>
<dt>做好笔记</dt> <!--标题-->
<dd>笔记是我们以后复习的一个抓手</dd> <!--内容-->
</dl>
table 标签
- 普通用法
<table border="1" width="500" height="300" cellspacing="0" cellpadding="0">
<caption>学生信息</caption>
<thead height="50" align="left" valign="top">
<tr>
<th align="right" valign="bottom">姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr height="50" align="left" valign="top">
<td align="right" valign="bottom">李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
- 表格跨行跨列
<table border="1" width="500" height="300" cellspacing="0" cellpadding="0">
<caption>课程表</caption>
<thead height="50" align="left" valign="top">
<tr>
<th align="right" valign="bottom">项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody>
<tr height="50" align="left" valign="top">
<td align="right" valign="bottom">星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td align="right" valign="bottom" rowspan="4">上午</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td rowspan="4">星期日</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
<tr>
<td align="right" valign="bottom" rowspan="2">下午</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td rowspan="2">星期日</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
</tbody>
</table>
form 表单
- 普通用法
<form action="https://search.jd.com/search">
账户：<input type="text" name="account" value="zhangsan" disabled><br>
密码：<input type="password" name="pwd"><br>
性别：<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
<br>
爱好：
<input type="checkbox" name="hobby" value="smoke" checked> 抽烟
<input type="checkbox" name="hobby" value="drink"> 喝酒
<input type="checkbox" name="hobby" value="perm"> 烫头
<br>
其他：<textarea name="other" cols="30" rows="3"></textarea>
<br>
籍贯：<select name="place" id="">
<option value="010">河北</option>
<option value="011">山东</option>
<option value="012">广西</option>
<option value="013" selected>广州</option>
<option value="014" disabled>北京</option>
</select>
<br>
<button type="submit">确认</button>
<button type="reset">重置</button>
<button type="button">检测账户是否被注册</button>
</form>
- label 标签
<form action="https://search.jd.com/search">
<label for="account">账户：</label>
<input id="account" type="text" name="account" value="zhangsan"><br>
<label>
密码：<input type="password" name="pwd">
</label>
<br>
性别：
<label>
<input type="radio" name="gender" value="male" checked> 男
</label>
<label>
<input type="radio" name="gender" value="female"> 女
</label>
<br>
爱好：
<label><input type="checkbox" name="hobby" value="smoke" checked> 抽烟</label>
<label><input type="checkbox" name="hobby" value="drink"> 喝酒</label>
<label> <input type="checkbox" name="hobby" value="perm"> 烫头</label>
<br>
<label>其他：<textarea name="other" cols="30" rows="3"></textarea></label>
<br>
<label>
籍贯：<select name="place" id="">
<option value="010">河北</option>
<option value="011">山东</option>
<option value="012">广西</option>
<option value="013" selected>广州</option>
<option value="014" disabled>北京</option>
</select>
</label>
<br>
<button type="submit">确认</button>
<button type="reset">重置</button>
<button type="button">检测账户是否被注册</button>
</form>
CSS2 (Cascading Style Sheet)
交集选择器
/*p元素并且类名为 .beauty的元素*/
p.beauty {
color:red;
}
并集选择器
/*类名为rich或者beauty或者dog或者pig的元素*/
.rich,
.beauty,
.dog,
.pig{
font-size:40px;
background-color:red;
width:180px;
}
后代选择器
/*ul 里面的所有(包括直接的和间接的) li*/
ul li{
color:red;
}
子代选择器
/*div中的子元素a*/
div>a {
color:red;
}
兄弟选择器
/*div紧紧相连的兄弟p元素，且只能在div后面的p*/
div+p{
color:red;
}
/*div所有的兄弟p元素，且只能在div后面的所有p*/
div~p{
color:red;
}
属性选择器
/*1. 选中具有title属性的元素*/
[title] {
color:red;
}
/*2. 选中具有title属性且值为atguigu1的元素*/
[title="atguigu1"] {
color:red;
}
/*3. 选中具有title属性且值为字母a开头的元素*/
[title^="a"] {
color:red;
}
/*4. 选中具有title属性且值为字母a结尾的元素*/
[title$="a"] {
color:red;
}
/*5. 选中具有title属性且值含有字母a的元素*/
[title*="a"] {
color:red;
}
伪类选择器
什么是伪类？ -很像类，但不是类(class)，是元素特殊状态的一种描述
/*选中没有访问过的a*/
a:link {
color:red
}
/*选中访问过的a*/
a:visited {
color:red
}
动态伪类
/*以下样式顺序不能变*/
/*选中没有访问过的a*/
a:link {
color:red;
}
/*选中访问过的a*/
a:visited {
color:red;
}
/*选中鼠标悬浮状态的a*/
a:hover {
color:red;
}
/*选中鼠标激活状态的a*/
a:active {
color:red;
}
input:focus{
color:red;
}
结构伪类 (重要)
/*选中div中(第一个元素且叫p的元素). 如果第一个不是p则 一个都不会选中*/
div>p:first-child{
color:red;
}
/*选中div中(第最后一个元素且叫p的元素). 如果第最后一个不是p则 一个都不会选中*/
div>p:last-child{
color:red;
}
/*选中div中(第2个元素且叫p的元素). 如果第2个不是p则 一个都不会选中*/
div>p:nth-child(2){
color:red;
}
/*选中div中所有叫p的元素 (n从0开始到无穷大)*/
div>p:nth-child(n){
color:red;
}
/*选中div中所有偶数位叫p的元素 (n从0开始到无穷大)*/
div>p:nth-child(2n){
color:red;
}
/*选中div中所有奇数位叫p的元素 (n从0开始到无穷大)*/
div>p:nth-child(2n+1){
color:red;
}
/*选中div中前五个叫p的元素 (n从0开始到无穷大)*/
div>p:nth-child(-n+5){
color:red;
}
/*选中div中第三个到第六个叫p的元素*/
div>p:nth-child(n+3):nth-child(-n+6){
color:red;
}
/*选中div中第一个p类型的元素*/
div>p:first-of-type{
color: red;
}
/*选中div中最后一个p类型的元素*/
div>p:last-of-type{
color: red;
}
/*选中div中第一个p类型的元素*/
div>p:nth-of-type(1){
color: red;
}
/*选中div中所有叫p的元素 (n从0开始到无穷大)*/
div>p:nth-of-type(n){
color:red;
}
结构伪类 (普通)
/*选中div中倒数第二个元素，且第二个元素为p*/
div>p:nth-last-child(2){
color: red;
}
/* 选中div中所有p元素中的倒数第二个 */
div>p:nth-last-of-type(2){
color: red;
}
/* 选中span是其父元素的唯一元素 的span */
span:only-child{
color: red;
}
/* 选中没有同类型兄弟的span元素 */
span:only-of-type{
color: red;
}
/*:root 就表示html*/
:root{
background-color: gray;
}
/* 选中没有内容的div */
div:empty{
width: 100px;
height: 100px;
background-color: red;
}
否定伪类
/* 选中div中类名不是.fail的p元素 */
div>p:not(.fail){
color: red;
}
UI伪类
/* 选中的是勾选的复选框或者单选框 */
input:checked{
width: 100px;
height: 100px;
}
/* 选中禁用的input的元素 */
input:disabled{
background-color: gray;
}
/* 选中可用的input元素 */
input:enabled{
background-color: green;
}
目标伪类
div:target{
background-color: green;
}
语言伪类
/*指定的语言为简体中文的元素*/
:lang(zh-CN){
color:red;
}
伪元素选择器
/*选中div中的第一个字符*/
div::first-letter{
color: red;
}
/*选中div中的第一行字符*/
div::first-line{
background-color: aqua;
}
/* 选中的是div中被鼠标选择的文字 */
div::selection {
background-color: green;
color: orange;
}
/*选中input的placeholder*/
input::placeholder{
color:skyblue;
}
/*在p元素的内容之前*/
p::before{
content: '￥';
}
/*在p元素的内容之后*/
p::after{
content: '.00';
}
文本间距
.atguigu1 {
/* 字母之间的间距 */
letter-spacing: 20px;
}
.atguigu2 {
/* 单词之间的间距 */
word-spacing: 20px;
}
表格样式（table）
table {
border: 2px green solid;
width: 500px;
/* 固定表格每一列的宽度 */
table-layout: fixed;
/* 每一个格子之间的距离 */
border-spacing: 10px;
/* 去掉相邻单元格之间的边框 */
border-collapse: collapse;
}
th,
td {
border: 2px solid orange;
}
.serinalNum {
width: 50px;
}
HTML5
新增的标签
手机电量用meter
<meter max="100" min="0" low="10" high="20" optimum="80" value="50"></meter>
进度用progress
<progress max="100" value="20"></progress>
datalist 标签
<form action="#">
<input
type="text"
list="myList"
/>
<button>提交</button>
</form>
<datalist id="myList">
<option value="周杰伦">周杰伦</option>
<option value="周冬雨">周冬雨</option>
<option value="马冬梅">马冬梅</option>
<option value="温兆伦">温兆伦</option>
</datalist>
details 标签
<details>
<summary>如何一夜暴富？</summary>
<p>学习前端</p>
</details>
ruby 标签
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>
<hr />
<ruby>
<span>魑</span>
<rt>chī</rt>
<span>魅</span>
<rt>mèi</rt>
</ruby>
mark 标签
<p>
Lorem ipsum <mark>dolor</mark> sit, amet consectetur adipisicing elit.
Fuga, mollitia!
</p>
表单新增属性
<form action="">
账号：
<input
type="text"
placeholder="请输入账号"
required
autofocus
autocomplete="on"
pattern="\w{6}"
name="account"
/>
<br />
密码：
<input
type="password"
placeholder="请输入密码"
required
pattern="\w{6}"
name="pwd"
/>
<button>提交</button>
</form>
表单元素新增type属性
<form action="" novalidate>
邮箱:
<input type="email" name="email" />
<br />
url:
<input type="url" required name="url" />
<br />
数值:
<input type="number" required name="number" step="2" max="100" min="0" />
<br />
搜索:
<input type="search" required name="keyword" />
<br />
电话:
<input type="tel" required name="phone" />
<br />
光照强度:
<input type="range" name="range" max="100" min="10" value="30" />
<br />
颜色:
<input type="color" name="color" />
<br />
日期:
<input type="date" required name="date" />
<br />
月份:
<input type="month" required name="month" />
<br />
周:
<input type="week" required name="week" />
<br />
时间
<input type="time" required name="time">
<br />
日期时间
<input type="datetime-local" required name="dateTime">
<br />
<button>提交</button>
</form>
视频标签
<video src="./12.mp4" controls muted loop poster="./23.jpg" preload="auto"></video>
CSS3
新增的单位 vw vh
1vw 就等于视口宽度的1% 1vh 就等于视口高度的1%
.box1 {
width: 50vw;
height: 20vw;
background-color: blue;
}
新增的样式
resize 必须和 overflow 配合使用才会有效果；可以用鼠标调节盒子的大小
.box1 {
width: 50vw;
height: 20vw;
background-color: blue;
resize: both;
overflow: hidden;
}
box-shadow
语法： box-shadow: h-shadow v-shadow blur spread color inset;
.box1 {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
margin-top: 100px;
transition: 0.5s linear all;
}
.box1:hover {
top: -8px;
left: 0;
box-shadow: 0px 0px 30px 0px black;
border-radius: 10px;
}
opacity
opacity:透明度; 可以设置整个元素的透明度包括里面的文字
.box1 {
width: 200px;
height: 200px;
background-color: orange;
opacity: 0.5;
}
background-origin
background-origin: 设置背景图片的起点 默认值 padding-box;
.box1 {
width: 200px;
height: 200px;
background-color: orange;
background-image: url(./23.jpg);
background-size: 100px;
padding: 50px;
border: 50px dashed red;
background-origin: border-box;
background-origin: content-box;
background-origin: padding-box;
}
background-clip
background-clip: 裁剪背景图片 默认值 padding-box;
background-clip: border-box;
background-clip: content-box;
background-clip: padding-box;
background 多背景图
.box1 {
width: 600px;
height: 600px;
border: 1px solid black;
background: url(./23.jpg) left top/ 100px no-repeat,
url(./23.jpg) right top/ 100px no-repeat,
url(./23.jpg) left bottom/ 100px no-repeat,
url(./23.jpg) right bottom/ 100px no-repeat;
}
white-space
.box1 {
width: 400px;
height: 400px;
border: 1px solid black;
/* 自动换行 */
white-space: normal;
/* 原文输出 */
white-space: pre;
/* 超出换行 */
white-space: pre-wrap;
/* 原文输出，去掉行头行尾的空格 */
white-space: pre-line;
/* 不换行 */
white-space: nowrap;
}
text-overflow
此样式需要配合 white-space 和 overflow 一起使用
/*文本在一行显示，超出部分用省略号代替*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
背景线性渐变
.content {
display: flex;
justify-content: space-evenly;
}
.box {
width: 300px;
height: 200px;
border: 1px solid black;
}
.box1 {
background-image: linear-gradient(red, yellow, green);
}
.box2 {
background-image: linear-gradient(to right, red, yellow, green);
}
.box3 {
background-image: linear-gradient(20deg, red, yellow, green);
}
.box4 {
background-image: linear-gradient(red 50px, yellow 100px, green 150px);
}
.box5 {
background-image: linear-gradient(45deg, red 100px, yellow 150px, green 200px);
font-size: 80px;
text-align: center;
line-height: 200px;
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
}
背景径向渐变
.box {
width: 300px;
height: 200px;
border: 1px solid black;
}
.box1 {
background-image: radial-gradient(red, yellow, green);
}
.box2 {
background-image: radial-gradient(at left top, red, yellow, green);
}
.box3 {
background-image: radial-gradient(at 100px 50px, red, yellow, green)
}
.box4 {
background-image: radial-gradient(circle, red, yellow, green)
}
.box5 {
background-image: radial-gradient(150px 150px, red, yellow, green);
}
.box6 {
background-image: radial-gradient(red 60px, yellow 120px, green 180px);
}
2D变换
位移
transform: translate(50px, 50px);
缩放
transform: scale(0.5);
旋转
/*沿着Z轴旋转*/
transform: rotateZ(30deg);
扭曲
transform: skew(30deg);
变换原点加旋转
transform-origin: left top;
transform: rotate(30deg);
3D旋转
开启3d，设置景深
/*需要给旋转的父元素开启3d和景深*/
transform-style: preserve-3d;
perspective: 500px;
/*子元素旋转就可以看到效果*/
transform: rotateX(30deg);
观察者的位置
perspective-origin: 240px 200px;
媒体查询
// 且运算符 and
@media screen and (min-width: 700px) and (max-width: 800px) {
// 屏幕宽度在700和800之间所用到的样式包含（700,800）
}
// 或运算符
@media screen and (max-width: 700px) or (min-width: 800px) {
// 屏幕最大宽度为700或者最小宽度为800
}
// 否定运算符
@media not screen {
// 不是屏幕的样式
}
// 肯定运算符
@media only screen {
// 只有屏幕才会用到的样式
}
