1
<!DOCTYPE html.>标题头部(超文本语言)
<head lang=”en”>标签
<meta charset=”gb2312”>
<meta charset=”keywords”content=””>
<meta charset=”descrption”content=””>
<meta charset=”conten-type”content=””>
注释<!<link rel=”” type=””/>
<meta http-equiv="Content-Type" content="text/html" charset="gbk">
文字编码常用
文字出现乱码原因:代码内容为<meta name="content-type" content="text/html; charset=UTF-8">charset选择的是UTF-8文件选择的并不是utf-8所以乱码(右键文件选择更改)
GB2312
GBK
UTF-8
国外
UTF-16
ISO8859-1
...
<.title>题目
<body>主体
<.hl></hl.>小标题2/3/4/由大到小以此类推(本身加粗0)。。。。。。。。。,。<h4.></h4>跟本身文字的差不多大
,.<h3></h3>注释
<.P></p.>段落
<br/>
行及标签占一行中的一小块
<.strong<.em>.<img><a>
块及标签占一整行
<h1.><p.><hr.>
特殊标签<.br./>
<hr/>贯穿线
<em></em>倾斜
<strong></strong>加粗
文本操作标签:<h1>-<.h2>,<.p><strong><br.><em><.hr>
W3c标准
1结构化标准语言(xhtml,xml)
2保险标准语言
3行为标准语言
图片
图片路径:相对路径,网页上的图片;绝对路径,硬盘上的图片。
同级目录直接写文件名字<img src=”” alt=(图片加载失败时显示的文字)” ”title=(鼠标指向图片时显示的内容)”>
空格
Shift+空格=空格 半角字符切换全角字符
<小于号<;如果时间>晚上六点,就坐车回家
>大于号>
引号(“)"
版权©
插入图像标签
<.img src =”(file://代表根目录找文件0)ff(:英文)(盘符)/(..返回上级目录)(目录名/图片名)’’alt=’’ ’’提示加载失败文字)(width=”200”宽度)(height=’’100’’/高度)title=”(鼠标指向图片时显示的内容)”>
插入视频
<body>
<video controls(控制播放)/autoplay(自动播放)>
<source src="video/video.webm" type="video/webm"/> <source src="video/video.mp4" type="video/mp4"/>
插入音频
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
单位:
px像素
Mm毫米Cm厘米
In英寸
Pt镑
pc派卡
例子 :单元格的对齐方式改为水平右对齐,垂直底端对齐
<table weidth=”500” cellpading(单元格内文字与边框的距离)=’’0’’cellspacing=”0”border(边框)=”1”>
<tr>
<td align=’’right” valign=bottom”> </td>
</tr>
</table>
超链接
<a>超链接</a>
http://
Href:链接地址
代表当前页面
Target:是否在新页面打开
-black新页面打开
-self在本页面打开
<iframe(开窗口)=””></iframe>
锚链接:
<a href=”top”></a>
<a href=”#top”>返回顶部</a>
字的外部链接:外网页面<a href="http://www.baidu.com/"(链接地址)>百度</a>
<a href=”新链接地址” target= -self/-black”></a>
点击图片,会打开新页面:<a href=”新链接 ” target=””><img src=”图片链接”></a>
功能性链接
<a href="mailto:1243238502@qq.com">发送邮件</a>
JPG 压缩会改变颜色
PNG 支持透明
GIF 动图
BMP 保留图片原色
例子;
<html>
<head.>
<.title> 第一个网页<./title.>
</head>
<.body>
<h1>网页<./h1
.......
</body>
</html.>
2有序列表<ol type=’’ A’’>
<li>fergds</li>
</ol>
无序列表<ul>,</ul><li></li>list列表
定义列表<dl>
<dt>小标题</dt>
<dd>内容,,</dd>
表格:<table>
<tr>行
<td>单元格 1 </td>
<td>单元格 2</td>
</tr>
</table>
表格对齐方式:默认对齐,居中对齐align=center,左对齐,右对齐
单元格对齐方式:水平对齐方式,垂直对齐方式,
Align(水平对齐方式)row:行,column列,cell单元格,spacing间距,border边框,width宽度,height高度,padding填充valign垂直对齐
Left | 左对齐 |
Center | 居中对齐 |
Right | 右对齐 |
Valign垂直对齐方式
top | 顶端对齐 |
middle | 居中对齐 |
bottom | 底端对齐 |
baseline | 基线对齐 |
html里表格概念:
<table border="1"(边框)>
<tr height="100px">高度
<td width="100px"(宽度)align="center"(水平居中)"right"(右对齐)"left"(左对齐)></td>行中的一列
</tr>行
</table>代表表格
<tr colspan="2">跨列
<td rowspan="2">跨行
valign
<table border="1">
<tr>
<td colspan="3"><td>
3(选择value,name都写,文本框写name)
<!--表单:收集用户数据-->
<!--method:传读数据的方式:get/post-->
开始<form action=”地址” method=”get/post”/>
结束:</form>
用户名<input type=”text” name”” maxlength=”10” placeholder=”用户名2~6位数”/><!--文本框-->
maxlength几位数的限制
密码<input type=”password” name=””/><!--密码框-->
<input type=”submit” value=”提交”/><!--提交按钮-->
性别:<input type=”radio” name=”” value=”boy” id=”zz” checked=”checked(默认被选中)”/><lable for=”zz”>男
</lable>
<input type=”radio” name=”” value=”girl” id=”ss”/><lable for=”ss”>女</lable>点击字依旧能选择在男女的<>里加id=””名字,后面加<lable for=填id里面命的名字”>女</lable>
checked=”checked(默认被选中)”只能在checkbox,radio中用;
type单选
兴趣爱好(多选)<input type=”checkbox” name=”” value=”eat”/>按时吃饭
checkbox多选
<form>
上传文字:<input type=”file” name=”upload” hidden=”hidden”(隐藏属性)/><br/>
所在城市:<select name="ciry"><selected=”selected”>默认被选中
<option value="qd" selected=”selected”(默认选中)>青岛
<option value="yt">烟台
<option value="jn">济南
<option value="jd">胶东
</select><br>
简介:<textarea rows="3" cols="5" name="jianjie" readonly=”readonly”>我是</textarea><br/>
disabled="disabled" 禁止使用 readonly只读
<!--重置按钮--> <input type="reset" value="重置">
<!--提交按钮-->
<input type="submit" value="提交">
</form>
Ctrl+alt+向下的键(复制
Ctrl+z撤销
Ctrl+d(删减一行)
Ctrl+s(保存)
S
Alt+/(提示,代码补全)
<1--隐藏域;页面看不见,但可以传到后台-->
<input type=”hidden” name=”blank-num” value=”k123”>
邮箱:<input type=”email” name=””>
年龄:<input smtype=”number” name=”age” min=”1” max=”99” step=”1”><br/>
生日:<select name=””/></select>年
<select name=””></select>月
min最小值;max最大值;step
Css
<span>该改段落里面的个别字体
内部样式
必须在</head>前面添加<style type=”text/css”>
选择器+{样式;}(例子 h1{color:red;})
</style>
{color:#00 00 00}
颜色变化(查颜色rgb):#00(red) 00(green) 00(blue)
{color#000/#rgb(rgb泛指代码)}
十六进制
Ctrl+shift+/
Ctrl+shift+\:消除
/
字体风格{font-style:italic(倾斜)}
Normal(垂直)
Font-weight字体粗细{font-weight:700px;}
normal标准字体
font-size改字体大小{font-size:90px}
字体类型{font-family:隶书}
{Border:10px solid red};border边框 solid实现
在一串文字中添加所有属性Font:1.style 2.weight 3.size 4.family
行内样式;分别变化
标签
样式位置:1行内标签(最大):标签内,单独添加<h1 style=”color:green;”></h1>
2内部(改所有):<style type="text/css">
p{color:green;
font-size:14px;}
</style>
</head>
3外部(插入)<link rel="stylesheet" type="text/css" href="新路径.css"/>
选择器:span圈字
A.行内(最大)<style type="text/css">
p{color:green;
font-size:14px;}
</style>
B.类选择器:(挑不同的标签)
<style type=”text/css”>
.aaa{color:pink;}
.bb{}
</style>
插入<p class="aaa">疑是银河落九天.</p>
<p><span class="bb">我是你</span>在你以为举不俊<p>
span一行中仅一块变色
<h4 class="aaa">生活</h4>
C.ID选择器(不能重):只能管第一个,就加一个,
<style type=”text/css”>
#myid{color:blue;}
</style>
<p id="myid">飞流直下三千尺,</p>
超链接上+颜色
a{color:red;}
<a href="https://daohang.qq.com/?fr=hmpage">慈文传媒集团</a>
层次选择器
- 后代选择器:E F
- 子代选择器:E>F(选中儿子辈的)
- 紧邻兄弟选择器(同辈,紧跟在后面):(类选择器+F)
- 通用兄弟选择器(只能选中后面的兄弟):E~F(类选择器~F)
- 交集:(E类选择器)
- 并集:(E,类选择器)
- 结构伪类选择器
- Ul li:first-child{}
- Ul li Last-child{}
3.nth-child(n):例子p:nth-child(2){}先数个数,在看类型
4. (body p:first-of-type{}先数类型,在数第几个
5. body p:last-of-type{}
6. body p:nth-of-type(n){})
- 属性选择器:a【id】
a【id=img】=具体
a[id^=img]^表看开始的单词
a[id$=img]$表看结尾的单词
a[id*=img]*表看中间的单词
美化页面
1.Font-weight字体粗细{font-weight:700px;}
normal标准字体bold加粗,bolder更粗lighter更细
2.字体风格{font-style:italic(倾斜)}
normal(垂直)
3.字体类型{font-family:隶书}
{Border:10px solid red} border边框 solid实现
- 在一串文字中添加所有属性Font:1.style 2.weight 3.size 4.family
- 文本{text-align:cente r;justify(文本两端对齐)
Text-decoration(文本装饰):underline
(下划线)line-through;(中间线)overline;(上划线)
Text-indent:40px;(首行缩进)
Line-height(行高):10px(em);}
- 去掉超链接中下划线a{Text-decoration;none;}
- {Color:rgba(a控制透明不透明)(255,0,0,1);}
- Img{vertical(垂直)-align:middle、top、bottom’;}
文本阴影:
{text-shadow:color x(+10px) y(-10px) 0.5px(阴影模糊半径)}
伪类样式
选择器:伪类名{样式;}
hover当鼠标指向时变样式,a:hover{}
改变列表样式
ul{List-style-type:square(方块);decimal(数字);circle(空心圆);disc(实心圆);none(无标记);/*控制黑点样式*/}
背景色{background-color:red;}
背景图
{background-image:url(“”);
Background-repeat( 背 景 图 重 复 ) :no-repeat(repeat-x/repeat-y);
Background-position(背景图位置):150px(x右正左负) 150px(上负下正);
Background-size:cover(覆盖);percentage(百分比);contain
线性渐变
{background:-webkit-(搜狗内核前缀)linear-gradient(left ( 起 点),blue,white);}
Background:-webkit-linear-gradient(left,white,blue)IE浏览器是Trident内核,加前缀:-ms-
Chrome浏览器是Webkit内核,加前缀:-webkit-
Safari浏览器是Webkit内核,加前缀:-webkit-
Opera浏览器是Blink内核,加前缀:-o-
Firefox浏览器是Mozilla内核,加前缀:-moz-
盒子
- div{i.border:1px solid blue;
ii.分部写border-top-width:5px;
border-top-color:red上边框颜色
iii.border-style:double双实线;solid实dashed虚(上右下左看对门
(border-bottom:1px solid blue;)
- {margin外填充-top:0px}
{img src=”img/manor-2.jpg”}
图片填充img {margin-left:0px auto;margin-top:10px;}
{text-align:center;}
- padding内填充
- 控制弧度左1顺时针排列border-radius: 20px 10px 50px 30px;
圆{border-radius:50%;}
5.控制盒子的大小box-sizing:content-box (可变动) | border-box (不变)| inherit;
6.box-shadow:inset(上往下)/ 10px(x轴) 10px 5px black;
第七章
display
display:inline;不换行,没有原来的体积
inline-block;不换行,没有原来的体积,使块元素排在一行
none不会显示
display:none;隐藏
Block换行
float浮动
{float:left; |right; |none;不变}
{Clear:清除浮动}
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左、右两侧不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
{overflow溢出:scroll滚动/hidden隐藏}
<li><button>登录</button></li>
<li><button id="btn2">开通超级会员</button></a></li>
button按钮
移动图片位置Position
{Position:relative/*相对自己的位移,不会脱离文档*/
absolute;/*绝对位移,会脱离文档流*/(若自己当前最近父级盒子没定位,找他定位;若他进行了定位,相对浏览器定位}
{Position:relative;left:10px;top:20px;}
控制透明度{Opacity:0.5px;}数值越小,透明度越高
覆盖z-index:3/2/1大的覆盖小的
第九章
设置变形函数,可以是一个,也可以是多个,中间以空格分开;
{transform:translate(230,230) scale(2); }
平移函数Translate;
缩放Scale(2)(x,y)
x即表示宽度的缩放量,y轴即高度的缩放量
旋转Rotate(250deg)
倾斜Skew(x,y)
X即x轴的倾斜程度,y即y轴的倾斜程度
过渡Transition:all/(过渡或动态模拟的CSS属性
) transition-duration(完成过渡所需要的时间
) transition-timing-function(指定过渡函数
) transition-delay(过渡开始出现的延迟时间
)
类举:div:hover{
transform:skew(20deg);
transition:all 0.6s linear;
}
ease:速度由快到慢(默认值)
linear:速度恒速(匀速运动)
ease-in:速度越来越快(渐显效果)
ease-out:速度越来越慢(渐隐效果)
ease-in-out:速度先加速再减速(渐显渐隐效果)
动画
定义:@keyframes aaa {
0% {width:0;}
33% {width:23px;}
66% {width:46px;}
100% {width:69px;}
}
Img{animation:aaa 3s ease forwards;}
{animation:name 动画时间
动画方式 延迟时间 动画的播放次数 的播放方向 动画的播放状态
动画开始之前和结束之后发生的操作;}
动画的播放方向(animation-direction)
normal,动画每次都是循环向前播放
alternate,动画播放为偶数次则向前播放
动画的播放状态(animation-play-state)
running将暂停的动画重新播放
paused将正在播放的元素动画停下来