HTML5,css基础
HTML5
基本板式
<!DOCTYPE html>
<!--lang 语言参数-->
<html lang="en">
<head>
<!--编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>Title</title>
</head>
<body>
</body>
</html>
div
- 块级标签,内容显示默认独占一行
示例
<!--div标签-->
<div>静夜思</div>
<div>静夜思</div>
作用
- div在开发过程中一般充当网站的结构,用来包裹网站的内容,使包裹的内容和其他内容之间保持一定的独立性
span
- 行标签,内容默认在同一行显示;行级标签
示例
<!--span -->
<span>静夜思</span>
<span>静夜思</span>
<span>静夜思</span>
各级标签属性
- 行级,块级标签,行内块属性标签
- 行级标签: 多个标签的内容是在同一行显示
- 块级标签: 每个标签的内容都独自占用一行
- 行内块属性标签: 同行显示还能修改宽高(参照CSS行内块属性)
- 块级标签可以嵌入块级和行级标签,行级标签只能嵌入行级标签
- 行级标签不能通过width和height来修改宽高,只能由内容决定
作用
- span 一般用来直接标记文本内容,负责区分特殊的文本信息
img
- 图片标签;行内块属性标签
- 属性(src alt title):
src: 图片路径,必需参数属性
alt: 图片无法加载时的提示内容
title: 当鼠标放在图片上时显示提示文字,一般用于LOGO
<img src="./img/p2.gif" alt="图片加载失败" title='LOGO'>
a标签
- 超链接标签;行级标签
- 属性(href target):
href: 链接跳转页面的url
target: 设为"_blank"时会在新页面打开链接
<a href="http://www.naoxiaobai.club" target='_blank'>脑小白</a>
h标签
- 标题标签,六级标签h1,h2,h3,h4,h5,h6;块级标签
- 一般使用前三级
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>
ul,ol
- 列表,ul为无序列表,ol为有序列表;块级标签
- 一般使用无序列表,两者都配合li列表项使用;li也是块级标签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
</ol>
p标签
- 段落标签;块级标签
- 用来包裹一段内容(文字,图片,视频等),代表一段数据,默认会跟其他段落保持一定的距离
<p>
段落一
</p>
<p>
段落二
</p>
video
- 视频标签;行级标签
- 属性(src controls loop autoplay muted):
src: 视频路径
controls: 控制视频是否显示播放控件
loop: 控制视频是否循环播放
autoplay: 控制视频加载完后是否自动播放
muted: 控制视频是否静音播放
- Note:
有些浏览器对autoplay做了屏蔽,此时可以加上muted,以实现自动播放
<video src="./source/mov.mp4" controls loop autoplay muted></video>
<!--指定视频的格式-->
<video controls>
<source src="./source/m1.mp4" type="video/mp4">
<source src="./source/m1.ogg" type="video/ogg">
<source src="./source/m1.Webm" type="video/Webm">
</video>
audio
- 音频标签
- 属性(src controls loop autoplay muted):
属性的设定与视频video一样,参照video标签
<audio src="./source/a1.mp3" controls loop autoplay muted></audio>
<!--指定音频的格式-->
<audio controls loop>
<source src="./source/a1.mp3" type="audio.mp3">
<source src="./source/a1.ogg" type="audio.ogg">
</audio>
embed
- 动画插件,HTML5新增,IE9以下不支持;行级标签
- 属性(src type):
src: 资源地址
type: 资源类型,默认自动匹配
<embed src="./source/m1.mp4" type="">
作用
用来将指定的动画,视频,音频作为一个对应的插件嵌入到页面指定的位置
锚点
- 超链接标签锚点:
本质上是通过在网页中指定的位置设置标签的id属性值,
之后在超链接标签上通过设置herf="#id值",完成点击跳转.
锚点的作用:
可以帮助用户从网页中众多的内容中快速的查找用户感兴趣的内容,
一般适用于网页内容比较多的网站
<body>
<a href="#title">锚点</a>
<h1>静夜思</h1>
<p>床前明月光, 地上鞋两双.</p>
<p>举头望明月, 低头撕裤裆.</p>
<p><img src="./img/p1.gif" alt=""></p>
<h1 id="title">春晓</h1>
<p>春眠不觉晓, 处处蚊子咬.</p>
<p>夜来风雨声, 菊花肿多少.</p>
<p><img src="./img/ys.jpg" alt=""></p>
</body>
表格
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
</tr>
</table>
- table: 表格标签
- tr: 行
- th: 跟td用法相同,一般用于列标题
- td: 单元格
表单
<form action="">
姓名: <input type="text" value="" name="name">
性别: <input type="radio" value="男" name="sex">
<input type="radio" value="女" name="sex">
<input type="submit" value="提交">
</form>
- form: 表单标签
- input(type, value, name): 输入框
- type: 文本框的类型
- value: 默认值
- name: 提交时的参数名
CSS
- 层叠样式表
- 放到head标签内
<html>
<head>
<stype>
div{}
span{}
</stype>
</head>
<body>
</body>
</html>
作用
- 用来设置指定标签标记内容的样式,需要预先指定对应的选择器
- 标签名选择器: 使用标签的名字作为选择器
div{ color: red;}
文本样式
- color: 字体颜色设置
- font-weight: 字体的粗细设置
- font-size: 字体的大小,选项有px(以像素为单位),em(以字符为单位)
- font-famliy: 字体集
- text-indent(缩进): 文本缩进，单位可以是字符或是像素
- text-align(排列): 文本排列
参数：
letf : 靠左
right : 靠右
center : 居中
- text-decoration: 文本装饰
参数：
underline(下划线)
line-through(删除线)
overline(顶部线)
none(去除所有线)
- text-shadow: 文字阴影
参数(x y dim color)：
x : 水平偏移量，正值向右；
y : 竖直方向偏移量，正值向下
dim ： 模糊程度，单位可以是像素，字符...
color : 阴影的颜色
行内块属性
- 既具有行级标签的属性(同行显示)，又具有块级标签的特性(设置宽高)
display: transform-typeinline-block: 转换成行内块属性
inline: 转换成行属性
block: 转换成块属性
行内块适用于两个都是图片或都是文字的情况
盒模型
基本结构
- 盒模型含有四级结构：
image.png
- margin: 外边距，可以设置四个方向；
使用
margin: 0 auto;可以达到水平居中的效果，详细见auto项；
-
border: 边框，三个值为线宽、实线或虚线（solid/dashed）、颜色
-
padding: 内边距，可以设置四个方向；
-
content: 内容层，可以指定宽高
-
Note1: 当设置两个相邻的外边距时,两个相邻元素的外边距会出现重叠现象,
此时以外边距大的一方为准。 -
Note2: 当设置某一个块级元素的上下margin时,如果该margin作用于当前标签和其父级标签,此时父级标签必需有边框
-
Note3: 不使用怪异盒模型时，width和height只是设置内容层的规格
怪异盒模型
- 怪异盒模型是将border、padding、content三部分进行绑定，
此时通过width和height来设置规格时就不只是内容层，而是同时包含这三部分
box-sizing: border-box
- Note: 有时为确保浏览器兼容需加上以下代码
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-
应用于内容固定的盒模型，否则当内容增加时可能会从盒子中溢出
-
溢出示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
div{
background-color: #fcfdf8;
width: 300px;
height: 300px;
border: 2px solid blue;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<p>
这是一个测试这是一个测试这是一个测试这是一个测试这
是一个测试这是一个测试这是一个测试这是一个测试这是
一个测试这是一个测试这是一个测试这是一个测试这是一个
测试这是一个测试这是一个测试这是一个测试这是一个测试
这是一个测试这是一个测试这是一个测试这是一个测试这是一
个测试这是一个测试这是一个测试这是一个测试这是一个测
试这是一个测试这是一个测试这是一个测试这是一个测试这
是一个测试这是一个测试这是一个测试这是一个测试这是
一个测试这是一个测试这是一个测试这是一个测试这是一
个测试这是一个测试这是一个测试这是一个测试这是一
个测试这是一个测试这是一个测试这是一个测试
</p>
<p>
这是一个测试
</p>
</div>
</body>
</html>
盒子阴影
- box-shadow:
box-shadow: inset x y dim color
inset: 加inset时阴影向内扩散，不加时向外
x : 水平偏移量，正值向右；
y : 竖直方向偏移量，正值向下
dim ： 模糊程度，单位可以是像素，字符...
color : 阴影的颜色
盒子形状
- border-radius: 设置标签边角的裁剪半径,分为五种情况:
1个值: 四个边角都按照这一个值裁剪
2个值: 对角裁剪,第一个值为左上和右下,第二个为右上和左下
4个值: 四角对应
8个值: 分为两组,对应位置的两个数为一个顶点对应的两边的裁剪距离示例：
border-radius: 20px 50px 70px 100px / 20px 50px 70px 100px;
image.png
选择器
- 通配选择器, 优先权值为0
代表所有标签的样式;
初始化所有标签的样式;
优先级最低,一般用来完成标签样式的重置
*{
margin: 0 0;
padding: 0 0;
text-decoration: none;
}
-
标签名选择器，优先权值为1
-
class选择器，优先权值为10
.mark{
width: 800px;
margin: 0 auto;
text-align: center;
background-color: lawngreen;
border-radius: 20px;
box-shadow: 0px 0px 30px black;
}
- id选择器，优先权值为100
#title{
font-family: "yahei";
}
- 子代选择器，优先权值为class + 标签名 = 11
由id,class或标签名通过>连接形成的
具有父子关系的选择器称为子代选择器,
一般适用于仅对某一标签的子代标签设置样式
.mark>p{
color: white;
margin: 3px;
font-size: 18px;
text-shadow: 0 0 10px black;
}
- 后代选择器，优先权值为class + 标签名 = 11
由id,class,标签名通过空格组合而成的具有后代关系的一种选择器,
该选择器可以指定所有跟其构成后代关系的
.mark h1{
color: blue;
/*font-family: "kaiti";*/
margin: 20px;
}
- 群组选择器，优先权值按照","分割,分别计算
由id,class或标签名,后代选择器或子代选择器用过","连接,
形成的一种具有并列关系的选择器.
群组选择器一般用来实现多个标签相同样式的合并,减少代码的冗余
.mark h1, .mark>p{
font-family: "kaiti";
}
- Note: 优先级相同时，后者会覆盖前者
强制提升优先级为最高
使用 !important 修饰,此时优先级会被设为1000即最高优先级.
该操作只有当上面的操作无法完成修改时才使用,不建议使用.
font-family: "yahei" ! important;
伪类选择器
- 负责选择指定标签所处的不同状态,主要作用于a标签
:link 代表超链接标签之前没有被点击的状态
:hover 代表鼠标悬停在标签上的状态,该状态所有标签都有
:active 代表鼠标按下松开前的状态
:visited 代表访问过的状态
a:link{
color: red;
}
a:hover{
color: greenyellow;
}
a:active{
color: pink;
}
a:visited{
color: blue;
}
auto
- 获取标签所在父级标签的宽度,然后减去当前标签的宽度,最后除以二返回(内置函数计算)
- 一般用于实现块级元素相对于父级元素水平方向上居中
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
.father{
background-color: blue;
width: 600px;
margin: 0 auto;
}
.child{
background-color: red;
width: 200px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
</div>
</div>
</body>
</html>
文本自动隐藏
- 设置文本行数，超出范围将自动隐藏
overflow: hidden; /*隐藏标签内容*/
text-overflow: ellipsis; /*以省略号显示*/
display: -webkit-box;
-webkit-line-clamp: 1; /*要显示的行数*/
-webkit-box-orient: vertical;
- Note: 全字母时需要按照需要对单词换行(连续字母,没有空格时被当成单个单词，不换行，不隐藏)
浮动
- 对于网页的布局，float显得尤为重要
浮动布局：
主要解决多个块级元素在同一行显示的问题。
因此该布局主要应用与PC端的布局。
使用步骤：
首先对需要在同行显示的块设置浮动（left, right）,
然后设置其父级清除浮动效果，否则父级会发生高度塌陷。
清浮动方法;
1. 使用overflow: hidden；
2. 在浮动块中追加空元素,同级加div,使用clear；
3. 通过伪类after配合zoom完成清浮动
- Note: 浮动
简单示例，son1和son2实现拼接
- 使用第一种清浮动的方法，也是常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
background-color: blue;
/*隐藏标签，在这里可以达到清除子集浮动的效果*/
overflow: hidden;
}
.son1, .son2{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.son2{
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
静夜思
</div>
<div class="son2">
思今夜
</div>
</div>
</body>
</html>
overflow：
清除子集浮动造成的父级塌陷
overflow: hidden;
overflow: 内容超出范围时的处理方式
hidden: 隐藏
scroll: 滚动
empty清浮动
- 在需要清浮动的标签的同一级上新建一个空的div empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
background-color: blue;
vertical-align: top;
margin-top: 10px;
}
.son1, .son2{
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 10px;
}
.son2{
background-color: green;
}
.empty {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
静夜思
</div>
<div class="son2">
思今夜
</div>
<div class="empty"></div>
</div>
</body>
</html>
伪类选择器
- 通过使用伪类选择器after和zoom方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
background-color: blue;
vertical-align: top;
margin-top: 10px;
}
/*清浮动之after，zoom方法*/
.father:after{
content: "测试";
display: block;
height: 0;
clear: both;
/*将标签变成透明，隐藏*/
visibility: hidden;
}
.father{
/*兼容IE9以下*/
zoom: 1;
}
.son1, .son2{
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 10px;
}
.son2{
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
静夜思
</div>
<div class="son2">
思今夜
</div>
</div>
</body>
</html>
动画
过渡动画
关键帧动画
快捷操作
pycharm
-
div + table键自动创建
<div\></div\> -
div{静夜思}*2 + table 自动创建
<div>静夜思</div>
<div>静夜思</div>
- h${$级标题}*6 + table 自动创建
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>
-
div.mark + table 自动创建
<div class="mark"></div> -
div#mark + table 自动创建
<div id="mark"></div> -
a[href="#"]{HOME}.link*2
-
(tr>td{单元格$}3)3
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
