HTML5文档基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页名称</title>
</head>
<body><!结构身体部>
网页内容
</body>
</html>
基础标签
加粗: <b></b> <strong></strong>
倾斜: <i></i> <em></em>
删除线: <del></del>
下划线: <ins></ins>
上标: <sup></sup> 下标: <sub></sub>
缩写: <abbr title=""></abbr>
标记: <mark></mark>
文本: <span></span>
标题: <h*>标题标签</h*>h1-h6:从大到小的标题标签
换行: <br/>
字体标签: <font></font>
段落标签: <p></p>
常用标签
图片标签
<img>
属性:
src 引入图片地址
alt 替换文本
title 提示信息
width 宽
height 高
链接标签
<a href="url"> </a
属性:
href 地址
target 目标位置
target 属性值:
blank:新窗口打开、
new:新窗口打开
top:顶级窗口打开
标签的作用
- 打开外部文件
<a href="http://www.baidu.com">百度一下</a>
- 打开内部文件
<a href="test1.html">test1 文件</a>
- 打开一张图片
<a href="images/tulips.jpg">打开一张图片</a>
- 书写简单的 javascript
<a href="javascript:alert('这是一个弹框!')">提示框</a>
- 锚点(1)创建锚点
<a name="top"></a>
<a id="top2"></a>
(2)引用锚点
<a href='#top'>返回顶部</a>
滚动字幕
<marquee>滚动字幕</marquee>
属性:
direction:方向(left、right)
behavior:滚动方式(scroll、slide、alternate)
scrollamount:速度,值是正数默认为 6
scrolldelay:时间,值是正数默认为 0,单位毫秒
onmouseover="stop()" :鼠标悬浮停止移动
onmouseout="start()":鼠标离开开始移动
水平线
<hr />
属性
scrollamount:速度,值是正数默认为 6
scrolldelay:时间,值是正数默认为 0。单位毫秒
onmouseover="stop()" :鼠标悬浮停止移动
onmouseout="start()":鼠标离开开始移动
:
width:长度(px|%)
align:水平位置(left 左|center 中|right 右)
color:线的颜色
size:粗细(px
div块标签
div 元素是通用的块元素,内部可以包含其他各种元素包括其他 div
元素。
HTML媒体
我们可以使用 <video>
和 <audio>
标签来显示视频和音频
HTML 支持有序、无序和自定义列表
- 无序列表:使用
<ul>
标签来表示无序列表,其中每个列表项用<li>
标签包裹。例如:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
- 有序列表:使用
<ol>
标签来表示有序列表,其中每个列表项用<li>
标签包裹。不同于无序列表,有序列表会自动为每个列表项添加序号(数字或字母)。例如:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
- 自定义列表:使用
<dl>
标签来表示定义列表,其中每个术语使用<dt>
标签包裹,对应的定义使用<dd>
标签包裹。例如:
<dl>
<dt>术语1</dt>
<dd>定义1</dd>
<dt>术语2</dt>
<dd>定义2</dd>
<dt>术语3</dt>
<dd>定义3</dd>
</dl>
HTML 表格的基本结构
在HTML中,使用<table>
…</table>
定义表格标签可以创建表格。表格结构通常由以下几个关键组件组成:
<th>
…</th>
:定义表格的标题栏(文字加粗)- 行:使用
<tr>
…</tr>
标签来定义表格的行 - 列:使用
<td>
…</td>
标签来定义表格的列
在<table>
标签中我们可以使用<caption>
…</ caption>
标签作为
标题,并在表的顶部显示出来
HTML 表格空间
有以下两个属性,用于调整 HTML 表格中单元格的空间:
cellspacing 属性-定义表格单元格之间的空间
cellpadding 属性-表示单元格边框与单元格内容之间的距离
- 合并单元格
- 如果要将两个或多个列合并为一个列,将使用 colspan 属性
- 如果要合并两行或更多行,则将使用 rowspan 属性
表单
HTML 表单用于收集不同类型的用户输入
<from>
表单元素</from>
文本表单
通过<input type="text">
标签来设定,当用户要在表单中键入
字母、数字等内容时,就会用到文本域
密码字段
密码字段通过标签 <input type="password">
注意:密码字段字符不会明文显示,而是以星号或圆点替代
单选按钮
<input type="radio">
标签定义了表单单选框选项
复选框
<input type="radio">
标签定义了表单单选框选项
提交按钮
定义了提交按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的
动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常
会对接收到的输入数据进行相关的处理
框架
整合框架
<frameset></frameset>
内联框架
<iframe></iframe>
属性:
idth 宽
height 高
scrolling 规定是否在框架中显示滚动条
src 规定在 iframe 中引入的 URL
css 层叠样式表
1、css 写法一 style 内联样式表
2、CSS写法二 内部样式
3、CSS写法三 外部样式表
<link rel="stylesheet" href="./class1.css">
层叠: 同一个元素使用了不同的样式表,所有的样式进行叠加就叫做层叠
冲突: 同一元素设置相同的属性会造成冲突,遵循就近原则选择属性值
继承: 在子父关系中,文本样式可以被继承,布局样式不可以被继承(块及元素继承父的宽,行级不可以)
颜色 color background-color
1、英语字母
2、 十六进制
3、rgb(0-255,0-255,0-255)
4、rgba(0-255,0-255,0-255,0-1)
- 标签选择器
- 全局选择器
{
margin:0;
padding:0;
}
-
class 选择器
.q{background-color: aqua;}
-
id # 独一无二
#q{background-color: yellow;}
-
群组选择器
b,a{background-color: red;}
-
层次选择器
子代选择器 >
ul>li{color:red;}
后代选择器 空格
去除无序列表的点
.uu li{list-style: none;}
相邻兄弟 +
.ss+a{background-color: blue;}
通用兄弟 ~
.ss>li~a~p{background-color: chartreuse;}
-
伪类选择器
ui伪类 a标签使用
默认状态
b+a:link{background-color: yellowgreen;}
访问过后的状态
b+a:visited{background-color: aqua;}
鼠标悬浮
b+a:hover{background-color: red;}
鼠标按下
b+a:active{background-color: orange;}
结构伪类
ul li:nth-child(3){background-color: orangered;}
a:nth-child(4){background-color: gold;}
ul p:nth-child(18){background-color: antiquewhite;}
css文字样式
css边框
1.元素的边框属性:
border 简写属性,用于把针对四个边的属性设置在一个声明
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。常用单位为像素(px)、em。
thin 细的边框。/medium 默认/thick 定义粗的边框。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
none 定义无边框。
dotted 定义点状边框
dashed 定义虚线
solid 定义实线。
groove 定义 3D 凹槽边框。
ridge 定义 3D 垄状边框。
inset 定义 3D inset 边框。
outset 定义 3D outset 边框。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
- border-bottom-color 设置元素的下边框的颜色。
- border-bottom-style 设置元素的下边框的样式。
- border-bottom-width 设置元素的下边框的宽度。
- border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
- border-left-style 设置元素的左边框的样式。
- border-left-width 设置元素的左边框的宽度。
- border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
- border-right-color 设置元素的右边框的颜色。
- border-right-style 设置元素的右边框的样式。
- border-right-width 设置元素的右边框的宽度。
- border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
- border-top-color 设置元素的上边框的颜色。
- border-top-style 设置元素的上边框的样式。
- border-top-width 设置元素的上边框的宽度。
2.CSS3 新增的边框属性:
border-radius 设置所有四个 border-radius 属性的简写属性。
同时设定四个角的圆角。
分别设定左上 右下、左下 右上圆角。
分别设定左上 、右上、右下、左下圆角。
border-top-left-radius 左上角圆角边框。
阴影
box-shadow 添加阴影
向方框添加一个或多个阴影。
none: 无阴影。
阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延
值/阴影的颜色/inset 内阴影(默认值为 outset)
CSS盒模型
margin xxxx
一个参数代表上下左右的数据
两个参数时第一个代上下,第二个左右的数据
三个参数时第一个上,第二个左右的数据,第三给下的数据
四个参数时 上,右,下,左
argin:0px auto (水平方向居中) (外边距)
标准盒模型 div宽=内容的宽
怪异盒模型 div宽=内容宽+border+padding
box-sizing:border-box(转换怪异盒模型)
font-size:0(消空格)
opacity:0.3(透明度)
cursor:pointer(变小手)wait(等待)
overflow:hidden(溢出隐藏)scroll(溢出滚动条)
auto(自动)visible(默认,溢出显示)
display:none(隐藏)
display:block(显示)
浮动
文档流:包含代表元素的布局宽高背景颜色
文本流:包含文字元素内容
顺序是上,左,右,下
左浮:不脱离文本流脱离文档流
float:left
右浮:脱离文本流也脱离文本流
float:right
浮动带来的问题
1.对自身有影响都脱离文档流
2.对兄弟改变了布局
3.对父级造成了坍塌
清浮动
1.给父设置高(不推荐)
2.给使用浮动元素后面添加空的块级元素,clear:both;
3.after伪类清浮动 在浮动元素的父级上清楚浮动
父级::after{
content:“”;
display:block;
clear:both;
}
4.在父容器上添加溢出隐藏属性 overflow:hidden;
补充:
display:inline-block(转换行内块标签)
display:block(转换块)
border-radius:50%(设置圆)
transparent(透明色)
相对定位
position relative
相对定位 top距离上 left距离左边。
相对定位不会脱离文档流,也不会脱离文本流
相对定位是根据原位置定位的
绝对定位
position absolute
绝对定位 top距离上 left距离左边。
相对定位会脱离文档流和脱离文本流
相对定位是根据原位置定位的
绝对定位父级没定位,根据窗口定位,如果有定位,根据父级定位。
固定定位
position fixed
固定定位。opac加透明度
脱离文档流和文本流
永远根据窗口定位,固定在页面中不会移动
粘性定位
position sticky
距离顶部xx像素才会移动
当没达到偏移量是,是相对定位,达到偏移量是固定定位.
z-index
设置元素的堆叠顺序。
z-index 可以设置元素的堆叠顺序,但必须搭配定位使用。
渐变
线性渐变
farthest-side:圆心到距离最远的边
o closest-corner:圆心到距离最近的角
o farthest-corner:圆心到距离最远的角
bbackground-image: linear-gradient(red blue)两种颜色的渐变,方向默认由上到下
background-image: linear-gradient(to right,red blue)能添加方向属性,改变渐变的颜色方向
background-image: linear-gradient( to right bottom,red,blue)添加方向属性,改变渐变的颜色方向
backgro und-image: linear-gradient(60deg,red,blue)添加角度,60度渐变
径向渐变:
background-image: radial-gradient
重复的径向渐变:repeating-radial-gradinet()
radial-gradinet()(形状 发散方向,起始颜色,终止颜色)
形状:ellipse(椭圆)/circle(圆形)
发散方向:属性值可以为 left、right、top、bottom、center (可组合使用)
重复渐变将属性修改为:repeating-linear-gradinet()
动画
css动画:
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长
或拉伸。转换方法:
translate()/rotate()/scale()/skew()/matrix()
none 定义不进行转换。
translate(x,y) 定义 2D 平移转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值
动画 transform:translate{100px,100px}水平竖直方向上的位移
transition:0.3s 过渡时间
transform: scale(0.5)缩放为原来的0.5倍
transform: rotate(60deg)旋转,单位是度deg
transform-origin: right bottom;旋转的基准点
动画帧: @keyframes 动画名{from{} to{} }
动画 animation:属性值(动画名 动画时长 贝塞尔曲线 开始时间 播放次数 )
Transition:all 动画秒数 ease 0s;鼠标移开动画返回
Css过渡:
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
指定要添加效果的CSS属性
指定效果的持续时间。
还得要有设置触发过渡(例如鼠标悬浮时)
例如:宽属性过渡,过渡时间两秒
-webkit-transition: width 2s;(必须在上)
transition: width 2s; }
布局
布局
表格布局
display:table(转换成表格标签)
display:table-cell;
浮动
对自身的影响:脱离文本流,使元素独立起来并且可以设置宽高
对兄弟元素影响:改变兄弟元素布局
对父容器影响:造成坍塌
定位
left(左)
right(右)
固定布局:使用标准px单位
流式布局:使用百分百 %
多列布局:
列宽:column-width:xxpx;
弹性布局
Flex也叫弹性布局,可以实现子元素在父元素自动伸缩,特别适合移动端布局
display: flex; 弹性盒模型,默认主轴方向是x轴,起始线是左边开始
w-reverse x轴为主轴,起始线从右开始
column-reverse y轴为主轴,起始线从下开始
flex-direction 改变主轴方向
row x轴为主轴
colum y轴为主轴
rflex-wrap: wrap; 默认是nowrap不换行,子元素在父元素中换行 */flex-flow 以上两种的综合属性
设置子元素在父容器中主轴的排列位置的justify-content:space-between
两端对齐,有空余会分配给每个子元素中间space-around 将剩余空间分成元素的2倍
分别在元素的左右分配space-evenly 平均分配剩余空间