HTML入门
一、网页的基本结构
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
二、常用标签
标题标签：
<h1>~<h6>
水平线标签：
hr
换行标签：
br
加粗标签：
strong
倾斜标签：
em
段落标签：
p
三、图像标签
<img />
相关属性
src 图像连接地址
width 图像宽度
height 图像高度
alt 代替文字
title 鼠标悬停文字
四、超链接
<a></a>
两个属性：
href 跳转地址
target 跳转目标
三大功能：
①页面之间的跳转
<a href="XXX" traget="_self"></a>
自身页面跳转
<a href="XXX" traget="_blank"></a>
新标签页跳转
②锚定连接跳转
<a href="#one"></a> <a id="one"></a>
③功能性跳转
<a href="mailto:1300342970@qq.com"></a>
五、列表
1、无序列表：ul-li
2、有序列表：ol-li
3、定义列表：dl-dt-dd
六、特殊符号
1、大于号：>
2、小于号:<
3、双引号:"
4、版权符号©
5、空格:
七、表格 table
表格：table
行：tr
列：td
标题：th
<table>
<tr>
<td></td>
</tr>
</table>
相关属性：
border
width
height
cellspacing
bgcolor
网页中的颜色表示：
英文单词：red blue
十六进制：#FFFFFF
0 1 2 3 4 5 6 7 8
跨行：rowspan
跨列：colspan
八、媒体元素
对于以前：flash
对于目前：HTML5.0
1、视频
<video></video>
支持的格式：*.mp4 *.ogg *.webm
相关属性
src 视频地址
autoplay 自动播放
muted 静音
controls 控制条
loop 循环播放
2、音频
<audio></audio>
支持的格式：*.mp3 *.ogg *.wav
相关属性：
src 视频地址
autoplay 自动播放
muted 静音
controls 控制条
loop 循环播放
九、表单
<form action="" method> </form>
表单元素标签
<input type=""/>
常用的表单元素类型：
文本框 text
密码框 password
单选框 radio
复选框 checkbox
下拉列表* select+option
多行文本域* textarea
文件域 file
普通按钮 button
提交按钮 submit
重置按钮 reset
日期 data
电子邮箱 email
网址 url
数字 number（max/min/step/value）
滑块 rangs
隐藏域 hidden
图片按钮 实现submit提交按钮的功能： <input type="image" src="#">
相关属性：
单选框/复选框的默认选中 checked
下拉列表的默认选中 selected
只读 readonly
禁用 disabled
表单的初级验证：
默认提示文本 placeholder
非空验证 required
正则验证 pattern
pattern="[a-z]{4,6}"
pattern="^13[35]\d{8}$"
十、网页内嵌框架
<iframe></iframe>
使用<a>标签target属性跳转
<a href="#" target="frm">点我看</a> <iframe name="frm" scrolling="yes" src="" frameborder="0" width="1410px" height="700px"></iframe>
scrolling="yes/no"滚动条
frameborder="0/1"框框
CSS开篇
背景颜色：background-color
显示方式：display:inline（行）、block（块）、none（不显示）、inline-blocak（行块）;
行内元素标签：
不会独占一行，不支持宽度和高度的设置；
<strong>，<em>，<a>，<img>，<input>
块级元素标签：
会独占一行，支持宽度和高度的设置;
<h1>~<h6>，<p>，<li>，<tr>，<tb>
HTML5.0新增的结构元素标签
header
footer
section
初识CSS（层叠样式表）
一、3种样式
1、行内样式
<p style="color:red;">我是段落标签</p>
2、内部样式
<style type="text/css">
p{
color:pink;
}
</style>
3、外部样式
<link rel="stylesheet" href="css/MyStyle.css">
优先级：就近原则
二、3种选择器
1、标签选择器
p{
color:red;
}
2、类选择器
class="one"
.one{
color:red;
}
3、ID选择器
id="one"
#one{
color:red;
}
优先级： ID选择器>类选择器>标签选择器
三、标准文档流
1、行内元素： 不会独占一行，不支持宽度和高度的设置
span strong img em a input
2、块级元素： 会独占一行，支持宽度和高度的设置
p h1~h6 ul li ol dl dt dd div
3、改变标准文档流的方法之一
display显示方式：inline、block、inline-block、none
四、复合选择器
1、并集选择器：使用逗号隔开：
p，h1{
}
2、后代选择器：使用空格隔开：
.top li{
}
3、子选择器：使用>隔开:
.top>li{
}
4、相邻兄弟选择器：使用+隔开:
.a+li{
}
5、通用兄弟选择器：使用~隔开:
.a~li{
}
6、结构伪类选择器：
① .top li:nth-of-type(2){
}
确定类型后再输量
② .top li:nth-child(2){
}
确定数量后再类型
7、属性选择器
li[clss] 带有class属性的li标签 li[class=c] 带有class属性且值为c的li标签 li[class^=c] 带有class属性且值为c开头的li标签 li[class$=c] 带有class属性且值为c结尾的li标签 li[class*=c] 带有class属性且值包含c的li标签
使用CSS美化页面
一、超链接
<a href="">XX</a>
伪类样式：
1、a:link 鼠标未单机访问时的样式
2、a:visited 鼠标单击点击访问后的样式
3、a:hover 鼠标悬浮其上的样式
4、a:active 鼠标单击未释放的样式
注意：实际开发网页中，只写a{ }和a:hover{ }
二、文本美化
1、text-decoration 文本装扮
2、text-indent 首行缩进
3、line-height 行高
4、font-style 字体风格（italic斜体）
5、font-weight 字体粗细（bold加粗）
6、font-size 字体尺寸（30px）
7、font-familyh 字体类型（”微软雅黑“）
8、color 字体颜色
注意字体样式顺序font：字体风格>字体粗细>字体尺寸>字体类型
三、HTML5.0新增样式
1、文本阴影
text-shadow:30px 30px 1px green; (x轴 y轴 模糊半径 颜色)
2、盒子阴影
box-shadow:0px 0px 10px green; （x轴 y轴 模糊半径 颜色）
3、背景渐变
background:①.线性渐变：linear-gradient(to bottom,red,green); background:②.径向渐变：radial-gradient(red, green);
网页中的四个方向：top、bottom、left、right;
4、背景相关美化 1、背景颜色 background-color 2、背景图片 background-image:url("img/xxx.jpg") 3、背景重复 background-repeat:no-repeat; 4、背景定位 background-position:X Y; 5、背景尺寸 background-size:X Y;
5、列表相关美化 1、列表项样式 list-style:none; 2、列表项图片 list-style-image:url(img/xxx.jpg);
四、盒子模型
一、盒子模型三要素：
1、外边距 margin
盒子与盒子之间的距离
2、内边距padding
内容到盒子边框的距离
3、边框 border
如何使用：
border:1px solid black;
考点：四种边框样式线型
soild 单实线
double双实线
dashed 虚实
dotted 点线
4、清除所有元素的默认内外边距
*{
margin:0;
padding:0;
}
5、如何计算盒子模型的尺寸
①内盒尺寸计算：内容+边框+内边距
②外盒尺寸计算：内容+边框+内边距+外边距
6、处理盒子模型网页居中（前提要有宽度） margin:0px auto;
二、圆角边框
border-radius
1、圆形
width:100px
height:100px
border-radius:50%;
2、半圆
width:100px
height:50px
border-radius:50px 50px 0px 0px;
3、扇形
width:100px
height:100px
border-radius:100px 0px 0px 0px;
三、盒子阴影
box-shadow:X轴 Y轴 模糊半径 模糊颜色;
内阴影：box-shadow: inset 0px 0px 10px yellow;
外阴影：box-shadow: 0px 0px 10px yellow;
四、拯救盒子模型
区别于：
①、盒子模型的总尺寸=元素内容的总尺寸，不会收到padding的影响
box-sizing:border-box;
②、盒子模型的总尺寸=元素内容的总尺寸+padding，会收到padding的影响 box-sizing: content-box;
五、弹性盒子布局 父容器设置弹性盒子布局 display:flex;
子元素水平对齐方式 每个项目左右距离相等 justfy-content:space-around;
子元素垂直对齐方式 每个项目上下距离相等 align-items:center;
是否要换行 flex-wrap: wrap;
五、浮动
一、浮动
float:left/right/none;
一旦使用了浮动的元素，将会失去标准文档流（块元素独占一行）的特点；
区别于：display:inline-block;
1、默认会有间距；
2、默认只能左上角布局
清楚浮动元素带来的影响：
clear:left/right/both;
使用浮动学会网页布局：
国字型布局（1-3-1）
拐角型布局（1-2-1）
T型布局
二、解决父级盒子塌陷问题
1、写明父级元素的高度；
2、给父级元素增加一个子元素设置clear:both；
3、设置父级元素overflow:hidden;
4、给父级元素追加伪类样式（推荐）
.father:after{
content:"";
display:block;
clear:both;
}
三、溢出部分的处理
overflow:
hidden 溢出部分不可见
scroll 无论是否溢出 都会显示滚动条
auto 如果溢出 则会显示滚动条
visible 溢出部分可见
六、网页中的动画属性
transform:
提供了四种变形动画：
位移 translate(100px, 100px);
缩放 scale(1.2); 单位是倍数
旋转 rotate(30deg); 单位是角度deg
倾斜 skew(30deg); 单位是角度deg
“黄油”过渡效果
注意：黄油过渡效果 要写在元素的原始样式中 将来通过hover伪类事件触发
transition:all 0.4s linear 2s;
解释：
all：过渡属性；
0.4s：过渡完成时间
linear（线性）：过渡转速曲线
2s：过渡延迟时间
扫一扫
1922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
