导图社区 HTML5 CSS3网页设计与制作
- 555
- 28
- 5
- 举报
HTML5 CSS3网页设计与制作
HTML5 CSS3网页设计与制作，Wed前端开发适应于初学者 1-4章CSS基础知识、Wed基本概念、HTML，CSS基本概念、Dreamweaver工具的使用、HTML图文标签，CSS基础选择器等内容。 5-8章盒子模型、列表超链接、表格和表单、DIV CSS布局等网页制作核心 9-11章HTML5，CSS3新特性、多媒体嵌入、过度、变形、动画、绘图等内容 这些内容可以帮助初学者快速掌握网页设计的基本知识。
编辑于2021-06-28 16:26:54- 网页
- html5
- 初学者
- Wed
- 相似推荐
- 大纲
HTML5+CSS3
标签概述
标签分类
杂项
<b>/<strong>文字加粗显示
<u>/<ins>加下划线的显示方式
<i>/<em>文字以倾斜方式显示
<s>/<del>文字加以删除线的方式显示
时间标签
time
datetime 定义相对时间
pubdate发布日期
mark高亮字符
cite标签引用
标题标签
align
left左对齐标签
center居中标签
rhght右对齐标签
水平线标签
<hr>
align设置对齐方式（标签如上）
size粗细
color颜色
width宽度
原格式标签
<per>
换行标签
<br/>
文字标签
font
face字体
size大小
color颜色
概要
storng加粗 em倾斜 del删除线 ins下划线
图像标签
img
src图像路径
<img src="图像地址"/>
alt图像显示时不能替换文本
title指针悬停显示的内容
width图像的宽度
height图像的高度
border设置图像的边框宽度
margin设置外边框
padding内边框
vspace设置图像底部和顶部的空白
hapace设置图像左侧和右侧的空白
align
left将图像对齐到左边
right将图像对齐到右边
top将图像的顶端和文本的第一行文字对齐
middle将图像的水平中线和文字的第一行文字对齐 其他文字居于下方
bottom将图像的底部与文字的第一行对齐 其他文字居于图像下方
初识CSS3
CSS的优势
节约成本
提高性能
CSS基础核心
规则
选择器{属性1：属性值1；属性2：属性值2;.......}
引入样式表
行内式
<标签名 style="属性1：属性值1；属性2：属性值2；">内容</标签名>
内嵌式
<style type="text/css"> 选择器{属性1：属性值1；属性2：属性值2；} </style>
外链式
外链式需要创建一个css文件 然后通过<link href="CSS文件路径"type="text/css"rel="stylesheet">获取
导入式
<style type="text/css"> @import url（css路径）；或@import "css路径" </style>
基础选择器作用于这三种
基础选择器
标签选择器
按标签名分类 格式： 标签名{属性1：属性值1；属性2：属性值2}
类选择器
用“.”表示后面跟类名 格式： .类名{属性1：属性值1；属性2：属性值2；}
id选择器
使用“#”后面跟id名 格式： #id名{属性1：属性值1；属性2：属性值2；}
通配符选择器
用“*”号表示 作用与页面所有元素 格式： *{属性1：属性值1；属性2：属性值2；}
id>类>标准>通配符
设置文字样式
文字样式属性
font-size字号大小
em倍率（相对于当前文字的倍数）
px像素
in英寸
cm厘米
mm毫米
pt点
font-family字体
font-weight字体粗细
normal默认值
bold粗体字符
bolder更粗的字符
lighter定义更细的字符
100-900自由定义细到粗的字符
font-style字体风格
normal默认
italic倾斜字样（文字本身改变）
oblique倾斜字样（让没有倾斜的进行倾斜处理）
font：综合设置字体样式
选择器{font-style font-weight font-size/line-height font-family；} 列： p{ font-style：30px； font-family：arial，“宋体” font-style：italic； font-weight：bold； line-height：40px； } 等价于 p{font：italic bold 30px/40px arial，“宋体”}
@font-face规则
定义服务器字体 @font-face{ font-family：字体名称； src:字体路径； }
文字外观属性
color颜色
letter-spacing：字间距
word-spacing：单词间距（仅作用与英文）
line-height：行间距
texe-transform：文本转换
none不转换
capitalize首字母大写
lowercase全部转小写
text-decoration：文字装饰
none无装饰
underline下划线
overline上划线
line-through删除线
text-align：水平对齐方式
left左对齐
right右对齐
center居中对齐
text-indent首行缩进
white-space：空白符处理
normal常规
per预格式化原样显示
uppercase全部转大写
nowrap空格换行无效强制文本不能换行
text-shadow：阴影效果
选择器{text-shadow：h-shadow v-shadow blur color；} h-设置水平阴影距离 v-设置垂直阴影距离 bulr设置模糊半径 color设置阴影颜色
text-overflow：标示对象内溢出文本
clip修剪溢出文本不显示省略标签
ellipasis用省略标签“.....”替代修饰文本
word-wrap自动换行
normal只允许断字点换行
break-word在长单词或URL地址内部换行
高级特性
CSS复合选择器
标签指定式选择器：
一般由两个选择器构成，第一个为标签选择器 第二个为类选择器或者id选择器，两者之间不能有空格
后代选择器
如： p strong{color：red；} strong{color：blue；} 两种互不影响其写法就是将外层标签写在前面内层标签写在里面，中间用空格隔开
并集选择器
如： p，h1，h2{color.red;font-size:14px} 将所以需要赋予相同效果的标签写在一起进行选择器设置
CSS层叠性和继承性
层叠性
将效果层叠，按照优先级覆盖其效果
继承性
子辈继承父辈
CSS优先级
优先权为各选择器的权重相加 标签选择器权重为1 类选择器权重为10 id选择器为100
CSS3选择器
属性选择器
E[att^=value]属性选择器（前缀选择器）
E[att$=value]属性选择器（后缀选择器）
E[att$=value]属性选择器（包括）
E表示标签名 att表示选择器 value前缀后缀标签
关系选择器
子元素选择器：选择某一个元素的一级原素
h1>strong{ color:red font-size:20px } 它只作用于strong里的内容
兄弟选择器
临近兄弟选择器：使用+号进行连接
p+h1{ color:red} 、紧跟于且只生效于p后面的h1
普通兄弟选择器：用~来链接前后
不用紧跟第一个元素 列：p~h1 作用于p后的所有h1
结构化伪类选择器
不存在的类用来描述一个元素的特殊状态
：root选择器 ：根标签永远是html 对所有的页面标签都生效
：not选择器 ：排除这个结构元素下面的一个子结构元素
body*：not（h3） 使h3不应用样式
：only-child选择器 ：匹配某个父元素仅有的一个子元素
: first-child和：last-child选择器 ：分别选择父元素中的第一个和最后一个子元素
：nth-child（n）和：nth-last-child（n）选择器 :选择父对象的第n个元素和倒数第n个元素
：nth-of-type（n）和：nth-last-of-type（n）选择器 :选择父对象中特定类型的第n个元素和倒数第n个元素
列: h2:nth-of-type(odd){color:red；} h2:nth-of-type(even){color:#f09} odd用于奇数元素的改变 even用于偶数函数的改变
：empty选择器 :用来选择没有子元素或文本内容为空的所有元素
列： ：empty{backgronud-color：red；} 给空元素填充红色的背景
子主题
伪元素选择器
表示页面中一些特殊的并真实存在的元素（特殊的位置）
：before伪元素选择器
<元素>：before { content：文字/url(): } 该语句用于在被选元素内容前面插入内容 要注意的是:before也可以写成::before
：after伪元素选择器
在某个元素后面添加
BOX盒子模型
认识盒子模型
CSS将页面中所有的元素都设置了一个矩形的盒子 将元素设置为矩形的盒子后，网页中的布局是将不 同的盒子摆放在不同的位置 每一个模型 由元素内容（content） 内边距（padding） 边框（border） 和外边距组成（margin）
盒子相关属性
width 宽度 height 高度
边框属性
上边框
border-top-style样式；
border-top-width宽度；
border-top-color颜色；
border-top：宽度 样式 颜色；
下边框
border-bottom-style样式；
border-bottom-width宽度；
border-bottom-color颜色；
border-bottom：宽度 样式 颜色；
左边框
border-left-style样式；
border-left-width宽度；
border-left-color颜色；
border-left：宽度 样式 颜色；
右边框
border-right-style样式；
border-right-width宽度；
border-right-color颜色；
border-right：宽度 样式 颜色；
样式综合设置
border-style：上边[右边 下边 左边]；
none无
solid：单实线
dashed：虚线
dotted：点线
double：双实线
宽度综合设置
border-width：上边[右边 下边 左边]；
像素值
颜色综合设置
border-color：上边[右边 下边 左边]；
边框综合设置
border：四边宽度 四边样式 四边颜色；
内边距属性
padding-top：上边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
padding：上内边距[右内边距，下内边距，左内边距]
外边距属性
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin：上外边距[右外边距，下外边距，左外边距]
可使用负值使标签从叠
背景属性
背景颜色：background-color：
背景图像：background-image：url（）
背景图像平铺：background-repeat：属性
repeat沿水平和竖直方向平铺
no-repeat不平铺
repeat-x沿水平方向平铺
repeat-y沿垂直方向平铺
背景图像的位置：background-position：right bottom；
默认值使 0 0 也可以使用预定关键字 水平方向：left、center、right 垂直方向：top、center、bottom 也可使用百分比
背景图像固定
background-attachment：属性；
scroll图像随页面移动而移动
fixed图像固定在页面上
综合设置元素的背景
background：背景色 url（”图像“） 平铺 定位 固定；
盒子的宽与高
CSS3新增盒子模型属性
颜色透明度
rgba（r,g,b,alpha）rgb表示颜色半分比 alpha是一个参数0.0完全透明1.0完全不透明；
opacity：参数；介于0~1之间的参数
圆角
border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4；
图片边框
border-image-source指定图片路径
border-image-slice指定边框图像顶部、右侧、底部、左侧向内偏移量
border-image-width指定边框宽度
border-image-outset指定边框背景向盒子外部延伸的距离
border-image-repeat指定背景图片的平铺方式
阴影
h-shadow表示水平阴影的位置，可以为负值(必选属性)
v-shadow表示垂直阴影的位置，可以为负值(必选属性)
blur阴影模糊半径（可选属性)
spread阴影扩展半径,不能为负值(可选属性)
color阴影颜色(可选属性)
outset/ inset默认为外阴影/内阴影(可选属性)
渐变
线性渐变background-image:linear-gradient(渐变角度，颜色值1,颜色值2…·…,颜色值n);
径向渐变background- image:radial -gradient(渐变形状四心位置,颜色值1,颜色值2.颜色值m;
重复线性渐变background-image:repeating-linear-gradient(渐变角度，颜色值1，颜色值2…，颜色值n);
重复径向渐变background-image:repeatina-radial-aradient (渐恋形状圆心位置，颜色值1，颜色值2........，颜色值n）；
多背景图像
修剪背景图像
设置背景图像大小：background-size：属性值1 属性值2；
设置背景图像显示区域：background-origin：属性值；
设置背景图像裁剪区域：background-clip
元素的类型和转换
块元素：<hl> ~ <h6>、<p>、<div> <hl>~<h6>、<ul>、<ol>、<li>
行内元素：<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<u>、<span>等
div和span标签
div实现网页的规划布局
span常用于标记特殊显示的文本配合class属性使用
元素类型的转换
display 属性常用的属性值及含义如下
inline :此元素将显示为行内元素（行内元素默认的display属性值) block :此元素将显示为块元素（块元素默认的display属性值)。 inline-block :此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。 none :此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。
列表和超链接
列表标签
有序列表<ol>
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
type：属性值（1默认）/a-A/i-I
start 数字（规定项目符号的起始值）
value 数字（规定项目符号的数字）
无序列表<ul>
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
type-
disc实心圆
circle空心圆
square实心方块
定义列表<dI>
<dt>表示定义内容<dd>对内容进行解释
CSS控制列表样式
list-style-type用于控制列表项显示符号的类型
disc实心圆(无序列表)
none不使用项目符号(无序列表和有序列表）
circle空心圆（无序列表)
cjk-ideographic简单的表意数字
square实心方块（无序列表
georgian传统的乔治亚编号方式
decimal阿拉伯数字
decimal-leading-zero以0开头的阿拉伯数字
lower-roman小写罗马数字
upper-roman大写罗马数字
lower-alpha小写英文字母
upper-alpha大写英文字母
lower-latin小写拉丁字母
upper-latin大写拉丁字母
hebrew传统的亚美尼亚编号方式
armenian传统的希伯来编号方式;
list-style-image可以为各个列表项设置项目图像
list-style-position用于控制项目符号的位置
inside：列表项目符号位于文本内
outside：列表项目符号位于列表文本之外
list-style：列表项目符号 列表项目符号位置 列表项目图像 （综合设置列表样式）
超链接
<a href="跳转目标" terget=“目标窗口的弹出方式”>文本图像</a> href链接目标的url(#可以建立一个空连接)l target指定打开方式
锚点链接超链接配合列表标签使用
链接伪类控制超链接
a:link{css样式规则；}默认
a:visited{css样式规则；}超链接被访问后的样式
a:hover{css样式规则；}鼠标悬停的超链接样式
a:active{css样式规则；}鼠标点击不放时的超链接样式
表格和表单
表格
<table> <tr> <td> 单元格中的文字</td> </tr> < /table>
<table> < /table>定义一个表格开始与结束
border设置表格的边框( 默认border="0"为无边框) border-collapse：collapse边框合并 border-collspacing设置相邻单元格之间的距离
cellspacing设置单元格与单元格之间的空间
cellpadding设置单元格内容与单元格边缘之间的空间
width设置表格的宽度
height设置表格的高度
align设置表格在网页中的水平对齐方式
bgcolor设置表格的背景颜色
background设置表格的背景图像
<tr> </tr>定义其中的一行
height设置行的高度
align设置一行内容在网页中的水平对齐方式
valign设置一行内容的垂直方式
bgcolor设置行背景颜色
background设置行背景图像
<td> </td>定义表格中的单元格
width设置单元格的宽度
height设置单元格的高度
align设置单元格在网页中的水平对齐方式
valign设置单元格内容的垂直方式
bgcolor设置单元格背景颜色
background设置单元格背景图像
colspan设置单元格横跨的列数（用于合并水平方向的单元格）
rowspan设置单元格竖跨的行数（用于合并竖直方向的单元格）
<th>标签用于设置表头与td标签同级
表格的结构
<thead>定义表格头部 位于table标签中
<tfoot>用于定义表格的页眉页脚 位于thead之后
<tbody>定义表格的主题
CSS控制表格边框
table标签的border属性就可以设置表格边框
表单
表单的构成
from表单元素语法: <from> 表单控件</from>
action指定数据提交的目的地址
method数据请求方式get /post get表示浏览器与表单服务器建立连接然后直接传送安全性较低 post表示浏览器将action属性中指定的表单建立链接然后分段传送隐式提交安全性较高
name用于给表单指定名称
表单核心控件
input控件
<input type="控件类型"/ >
type
text单行文本输人框
password密码输人框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像形式的提交按钮
hidden隐藏域
file文件域
name控件的名称
value input控件中的默认文本值
size input控件在页面中的显示宽度
readonly 该控件内容为只读(不能编辑修改)
disabled 第一次加载页面时禁用该控件(显示为灰色)
checked 定义选择控件默认被选中的项
maxlength 控件允许输人的最多字符数
textarea控件
input控件tayp属性的值为text是 此控件可以创建多行文本其中cols可以设置多行文本框每行的的字符数 和rows用来定义多行文本输入框显示的行数
name属性设置名称
readonly空间内容为只读
disabled第一次加载页面时禁用该控件
select控件
用于制作下拉菜单
select
size指定下拉菜单的可见项数
multiple定义multiple=“multiple”时，下拉菜单将具有多项选择的功能
option
定义selected时当前项及为默认项
HTML5表单属性
全新form属性
autocomplete属性用于指定表单是否有自动完成功能 也就是指表单控件输入的内容记录下来，再次输入时会将输入的历史记录显示在下拉列表里面
on表示有自动完成功能
off表示无自动完成功能
novalidate属性指定在提交表单时取消对表单进行有效检查 为表单设置该属性后具有关闭整个表单的验证 使form控件内的所有表单不被验证 使用方法novalidate=“novalidate”
全新的表单控件P172
全新的input控件类型
email类型<input type="email">是种专门输入E-mail地址的文本框
url类型<input type="url">是种专门输入url地址的文本框
tel类型<input type="tel">是种专门输入电话号码的文本框
search类型<input type="search">是种专门输入搜索关键词的文本框
color类型<input type="color">是种专门设置颜色的的文本框
numder类型<input type="numder">是种专门输入数值的文本框
value 指定输入框的默认值
max最大值
min最小值
step输入合法的间隔
range类型<input type="range">用于提供一定范围内数值的输入范围
Date pinckers类型<input type=date，month，week...>指定时间日期类型
date选取日月年
month选取月，年
week选取周和年
time选取时间
datetime选取时间，年，月，日（utc时间）
datetime-local选取时间，日，月，年（本地时间）
全新的input属性
autofocus属性用于指定页面加载后是否自动获取焦点 （在输入框）
form属性可以把表单内的子元素写在页面中的任意位置只需要为这个指定设置元素form属性值为该表单即可
list属性用指定输入框所绑定的datalist元素，其值是某个datalist元素的id
multiple属性指定输入框可以选择多个值该属性适用于email（用逗号隔开）和file（文件）
min，max，step属性用于包含数字或日期的input输入类型规定限值
pattern属性用于验证input类型输入框中输入的内容是否与所定义的正规表达式相匹配 P181
placeholder属性用于为input类型的输入框提供相关信息，以描述输入框期待用户输入何种内容
required属性用于判断用户是否在表单输入框中输入内容为空时则不允许用户提交表单
DIV+CSS布局
布局常用属性
标签浮动属性
选择器{float：属性值}
float常用属性值
left标签向左浮动
right标签向右浮动
none标签不浮动
浮动的特点： 1.浮动元素脱离了文档流不再占有文档中的位置 2.设置浮动元素以后，元素会向父元素的左侧或者右侧移动 3.浮动元素默认不会从父元素中移出 4.浮动元素向左或者向右移动的时候不会超过前面的其他浮动元素 5.如果浮动元素的上边是一个没有浮动的块元素则浮动元素无法向上移 6.浮动元素不会超过上边浮动元素的高度最多就是和他一样高 7.浮动元素不会覆盖文字文字会自动环绕在元素的周围
清除浮动
选择器{clear：属性值；}
left不允许左侧有浮动标签
right不允许右边有浮动标签
both同时清除两侧浮动
空标签清除浮动
使用overflow清除浮动
对标签应用overflow：hidden样式也可以清除浮动对该标签的影响
标签的定位属性
选择器{position：属性值；}
static自动定位
relative相对定位，相对于其原文档流的位置进行定位
absolute绝对定位，相对于其上一个定位的父标签进行定位
fixed固定定位，相当于浏览器窗口进行定位
position定位模式 仅仅用于定义标签以哪种方式定位，并不能确定标签的具体位置
top顶端偏移量定义标签相对于其父标签上边线的距离
bottom底端偏移量定义标签相对于其父标签下边线的距离
left左端偏移量定义标签相对于其父标签左边线的距离
top右侧偏移量定义标签相对于其父标签右边线的距离
其他属性
选择器{overflow：属性值；}
visible内容不会被修剪，会呈现在标签框之外
hidden溢出的内容会被修剪，并且修减的内容是不可见的
aoto在需要时产生滚动条，及自适应所需要显示的内容
z-index属性调整上下位置
布局类型
单列布局
多媒体嵌入
视频文件和音频文件的格式
HTML5支持的视频格式：ogg,mpeg4,webm
HTML5支持的音频格式：ogg,mp3,wav
嵌入视频和音频
视频： <video src=”视频文件路径“ controls=”controls“></video> 是否显示视频插件 video之间也可以插入文字无法显示视频的时候可以将文字显示出来
属性： autoplay当前页面载入完成后自动播放视频 loop视频结束从新开始播放 preload视频在页面加载时进行加载，并预备播放，但是如果使用autoplay属性则忽略此属性 poster当视频无法播放时，链接一张图片，并将图片按照一定比列显示出来
音频：<audio src="音频文件路径" controls=”controls“></audio>
属性： autoplay当前页面载入完成后自动播放音频 loop音频结束从新开始播放 preload音频在页面加载时进行加载，并预备播放，但是如果使用autoplay属性则忽略此属性
过度变形和动画
过度
transition-propensity属性
none没有属性会获得过度效果
all所有属性获得过度效果
property定义应用过度效果的css属性名称 多个名称之间以逗号隔开
transition-duration属性
time定义过渡效果的持续时间
transition-timing-function属性
用于规定过度属性的过度效果的速度曲线
linear指定以相同速度开始至结束的过度效果，等同于cubic-bezier
ease（默认）慢速开始然后加快然后慢慢结束
ease-in以慢速开始然后逐渐加快的过渡效果
ease-out以慢速结束的过渡效果
ease-in-out以慢速开始以慢速结束的过渡效果
cubic-bezier自己定义加速减速的贝塞尔曲线的形状
transition-delay属性
规定过度效果的开始时间
transition复合属性循序如上
2D变形
transform属性
transform-functions用于设置变形
transform：translate（x-... y-...）平移
transform：scale（x-... y-...）缩放
transform：skew（x-... y-...）倾斜
transform：rotate（angle）旋转
设置其中心点transform-origin：x-axis y-axis z-axis
3D变形
rotateX（）可以让指定元素围绕着X轴转
rotateY（）可以让指定元素围绕着Y轴转
rotateZ（）可以让指定元素围绕着Z轴转
rotated3d（x-y-z，angle（旋转角度））综合属性设置
动画
@keyframes规则 animation表示当前动画的名称 keyframes-selector关键贞选择器 form（0）表示开始 to（100%）表示结束 css-style定义执行当前关键帧时应对的动画
animation-name属性用于定义要应用的动画名称该动画名称会被@Keyframes规则引用 animation-name：Keyframename|none none表示不应用任何动画
animation-duration属性用于定义整个动画效果完成所需要的时间 animation-duration：time
animation-timing-function属性用来规定动画的速度曲线 animation-timing-function：value；
linear指定以相同速度开始至结束的过度效果
ease（默认）慢速开始然后加快然后慢慢结束
ease-in以慢速开始然后逐渐加快的过渡效果
ease-out动画以低速结束
ease-in-out以慢速开始以慢速结束的过渡效果
cubic-bezier（n,n,n,n）自己定义加速减速的贝塞尔曲线的形状
animation-delay属性用于定义执行动画效果延迟的时间 animation-delay：time 定义等待时间
animation-iteration-count属性用于定义动画的播放次数 animation-iteration-count：number | infinite； 定义播放次数
animation-direction属性定义当前动画播放的方向
animation属性用于定义以上的六种属性的集合
绘图和数据存储原理