HTML基础
HTML概念
HTML（超文本标记语言）是纯文本类型的语言，它是Internet上用于编写网页的主要语言，使用html编写的网页文件也是标准的纯文本文件。
单独标记 成对标记
html的文件结构
<html>
<head>
<title>文件标题</title>
</head>
<body>
文件正文
</body>
</html>
html的基本标记
| 属性 | 描述 |
|---|---|
| html | 文件开始标记 |
| head | 文件头部标记 |
| title | 文件标题标记 |
| meta | 元信息标记 |
| body | 文件的主体标记 |
body元素的属性
| 属性 | 描述 |
|---|---|
| text | 设定页面文字的颜色 |
| bgcolor | 设定页面背景的颜色 |
| background | 设定页面的背景图像 |
| bgproperties | 设定页面的背景图像为固定状态，不随页面的滚动而滚动 |
| link | 设定页面默认的链接颜色 |
| alink | 设定鼠标正在单击时的链接颜色 |
| vlink | 设定访问过后的链接颜色 |
| topmargin | 设定页面的上边距 |
| leftmargin | 设定页面的左边距 |
页面的注释
CSS注释
/*注释文字*/
html注释
<!--注释文字-->
JavaScript注释
//单行注释
/*多行
注释*/
文本
标题
标题标记
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
标题对齐方式
<h2 align="left">文本内容</h2>
| 属性 | 含义 |
|---|---|
| left | 文字左对齐 |
| center | 文字居中对齐 |
| right | 文字右对齐 |
文字
斜体、下划线、删除线
斜体内容
带下划线的文字
带删除线的文字
<em>斜体内容</em>
<u>带下划线的文字</u>
<strike>带删除线的文字</strike>
上标、下标
1 上标标记内容
1下标标记内容
1<sup> 上标标记内容</sup>
1<sub>下标标记内容</sub>
特殊符号
| 特殊符号 | 实体名称 | 含义 |
|---|---|---|
| " | " ; | 引号 |
| < | < ; | 左尖括号 |
| > | > ; | 右尖括号 |
| × | × ; | 乘号 |
| © | © ; | 版权符号 |
| (空格) |   ; | 空格占位符 |
| ♥ | &hearts ; | 心形符 |
段落
段落标记
<p>段落文字</p>
段落的换行标记
<p>一段文字<br>一段文字</p>
段落的原格式标记
<pre>文本内容</pre>
水平线
<hr><!--默认水平线-->
<hr width="20" align="left">
图像与超链接
添加图像
图像的基本格式
添加图像
<img src="D:/123/5.jpg"><!--绝对路径-->
<img src="5.jpg"><!--相对路径，位于同一目录下-->
<img src="next/5.jpg"><!--相对路径，位于下一级目录-->
<img src="…/5.jpg"><!--相对路径，位于上一级目录-->
src用于设定图像文件的所在地址。
设置图像属性
图像大小与边框
<img src="图像路径" height="高度" width="宽度"><!--单位是像素-->
<img src="图像路径" border="图像边框大小"><!--单位是像素-->
边距与对齐方式
<img src="路径" hspace="图像水平间距" vspace="图像垂直间距"><!--单位是像素-->
<img src="路径" align="相对文字的对齐方式">
| align取值 | 表示含义 |
|---|---|
| top | 把图像的顶部与同行最高部分对齐 |
| middle | 把图像的中部和行的中部对齐 |
| bottom | 把图像的底部和同行文本的底部对齐 |
| texttop | 由快到慢，逐渐减速 |
| absmiddle | 把图像的中部和同行最大项的中部对齐 |
| baseline | 把图像的底部和文本的基线对齐 |
| absbottom | 把图像的底部和同行中的最低项对齐 |
| left | 使图像和左边界对齐（文本环绕图像） |
| right | 使图像和右边界对齐 （文本环绕图像） |
替换文本与提示文字
<img src="路径" title="图像提示文字"><!--鼠标放在图像上显示的提示文字-->
<img src="路径" alt="图像的替换文本"><!--图像无法显示时，显示的文字-->
链接标记
文本链接
<a herf="链接地址" target="打开窗口方式">链接文字</a>
| target属性值 | 含义 |
|---|---|
| _blank | 新建一个窗口打开 |
| _parent | 在上一级窗口打开（常在分帧的框架页面中使用） |
| _self | 在同一窗口中打开，默认值 |
| _top | 在浏览器的整个窗口打开，将会忽略所有的框架结构 |
书签链接
<a name="123">hello</a> <a herf="#top">回到顶部</a>
<a herf="#123">回到hello</a>
图像的超链接
<a herf="链接地址" target="目标窗口的打开方式"><img src="路径"></a>
<!--图像的超链接-->
<img src="图像地址" usemap="映射图像名称">
<map name="映射图像的名称">
<area shape="热区形状" coords="热区坐标" herf="链接地址">
</map>
<!--图像的热区链接-->
| shape属性 | 含义 |
|---|---|
| rect | coords包含4个参数，分别为left、top、right、bottom |
| cicle | coords包含3个参数，分别为center-x、center-y、tadius |
| poly | coords按顺序取各点的x、y的值 |
CSS3概述
CSS（层叠样式表）是一种样式表语言，各主流浏览器支持其大部分特性。
CSS是一种网页控制技术，采用CSS技术，可有效地对页面布局、字体、颜色、背景和其他效果实现更加精准的控制。
CSS示例
CSS选择器语法格式：
selector {property:value}
/*selector:选择器，CSS可以通过某种选择器选择想要改变样式的标记。
property:CSS属性。
value:CSS属性值。
*/
示例：
hello.html
<html>
<head>
<meta charset="UTF-8">
<link herf="css/css.css" type="text/css" rel="stylesheet">
<!--将css文件连接到HTML文件-->
</head>
<body>
<p>我想做你的太阳</p>
<p class="sun">You are my sunshine!</p>
<p class="star">You are my thousands of stars.</p>
<p class="moon">You are my moonpie.</p>
<p claas="Mar">You born in the Mar.</p>
</body>
</html>
css.css
p{
text-align:center;/*设置文本居中显示*/
}
.sun{
text-transform:capitalize;/*设置每个单词的首字母大写*/
line-height:30px;/*设置行高为30像素*/
color:#ff6437;/*设置文字颜色*/
font-weight:500;/*设置文本的粗细*/
cursor:help;/*设置鼠标放置文字上时光标的形状*/
}
.star{
letter-spacing:10px;/*设置文字间距*/
color:#00B2ED;/*设置文字颜色*/
text-decoration:underline;/*为文字添加下划线*/
}
.moon{
color:red;/*设置文字颜色*/
font-weight:bold;/*加粗*/
}
.Mars{
font-size:30px;/*设置文字的字体大小*/
background-color:red;/*设置文字的背景颜色*/
cursor:pointer;/*设置鼠标放在文字上时光标的形状*/
text-indent:30px;/*设置文本缩进*/
}
CSS中的选择器
属性选择器
属性选择器是用属性进行标记，这些属性可以是标准属性，也可以是自定义的属性。
<p font="fontsize" >鬼吹灯</p>
<p color="red" font="fontsize">PHP</p>
<p color="green">破敌之域</p>
<div class="num">
<img src="images/1.jpg" alt="1" att="a">
<img src="images/2.jpg" alt="2" att="b">
<img src="images/3.jpg" alt="3" att="c">
<img src="images/4.jpg" alt="4" att="d">
<img src="images/5.jpg" alt="5" att="e">
</div>
[ att = val ] { }
其中att代表属性，val代表属性值。0
[att=a],[att=b],[att=c],[att=d],[att=e]{
width:108px;
height:182px;
}
[att=a]{
left:140px;
top:20px;
}
[att=b]{
left:700px;
top:20px;
}
[att=c]{
left:400px;
top:180px;
}
[color=red]{
color:red;
}
[color=green]{
color:green;
}
[font=fontsize]{
font-size:20px;
}
类和ID选择器
#into{color:red; }/*ID选择器*/
.into{color:red; }/*类选择器*/
/*class属性可以定义多个，但id属性只能定义一个*/
<div id="OnlineShop">
<div class="top">特价</div>
<div class="bottom">
<div class="part1"><img src="images/1.jpg" class="img"><!--商品图1-->
<p class="title">连衣裙</p>
<div>
<div class="money">￥189.00</div>
<div class="minute">秒杀</div>
</div>
</div>
<div class="part2"><img src="images/2.jpg" class="img"><!--商品图2-->
<p class="title">牛仔裤</p>
<div>
<div class="money">￥299.00</div>
<div class="minute">秒杀</div>
</div>
</div>
</div>
</div>
#OnlineShop{
width:1090px;
height:390px;
margin:0 auto;
background:#ffd800;
border:1px solid red;
text-align:left;
}
.top{
width:1073px;
height:60px;
padding:20px 0 0 10px;
color:#8a5223;
font-size:32px;
font-weight:bolder;
}
.bottom{
width:1200px;
height:336px;
}
.part1{
width:260px;
height:300px;
float:left;
text-align:center;
margin-left:10px;
background:#FFF;
}
伪类和伪元素选择器
伪类选择器是CSS已经定义好的选择器，用来对某种特殊状态的目标元素应用样式。
- :link：表示对未访问的超链接应用样式。
- :visited：表示对已访问的超链接应用样式。
- :hover：表示对鼠标所停留的元素应用样式。
- :active：表示对用户正在单击的元素应用样式。
a:link{
color:#000;
}
a:visited{
color:#f00;
}
.hov:hover{
border:2px red solid; /*增加边框*/
}
.act:active{
background:#ffff00;
}
伪元素选择器
伪元素选择器是用来改变文档中特定部分的效果样式，而这一部分是通过普通的选择器无法定义到的部分。
- first-letter：对指定对象内第一个字符起作用。
- first-line：对指定对象内的第一行内容起作用。
- before：与内容相关的属性结合使用，用于正在指定对象内部的前端插入内容。
- after：用于在指定对象内部的尾端插入内容。
.txt:first-line{
font-size:35px;
height:50px;
line-height:50px;
color:#000;
}
p:first-letter{
font-size:30px;
margin-left:20px;
line-height:30px;
}
.txt:after{
content:url("··/img/1.png");
position:absolute;
top:55px;
left:777px;
}
其他选择器
| 选择器 | 类型 | 说明 |
|---|---|---|
| E{} | 标记选择器 | 指定该CSS3样式对所有E标记起作用 |
| EF | 包含选择器 | 匹配所有包含在E标记内部的F标记。注意，E和F不仅仅是指类型选择器，还可以是任意合法的选择器组合 |
| * | 通配选择器 | 选择文档中所有的标记 |
| E>F | 子包含选择器 | 选择匹配E标记的子标记中的F标记。注意，E和F不仅仅是指类型选择器，还可以是任意合法的选择符组织 |
| E+F | 相邻兄弟选择器 | 匹配与E标记同级，且位于E标记后面相邻位置的F标记。注意，E和F不仅仅是指类型选择器，还可以是任意合法的选择符组合 |
| E~F | 通用兄弟标记选择器 | 匹配所有的与E同级且位于E后面的所有F标记。注意，这里的同级是指子标记和兄弟标记的父标记是同一个印记 |
| E:lang（fr） | :lang()伪类选择器 | 选择匹配E标记，且该标记显示内容的语言类型为fr |
| E:first-child | 结构伪类选择器 | 选择E标记的第一个子标记 |
| E:focus | 用户操作伪类选择器 | 选择匹配E的标记，且匹配标记获取了焦点 |
常用属性
文本相关属性
- 字体属性font-family
font-family:name1,[name2],[name3];
name2，name3是备用字体。
.font{
font-family:"宋体","黑体","楷体";
}
- font-size:length
| 长度单位 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 印刷的点数，在一般的显示器中，1pt相当于1/72inch |
| pc | 1pc=12pt |
- 相对长度单位px，相当于1像素
- 绝对长度单位em和ex，1em是表示父标记中字母m的标准宽度，1ex表示父标记中字母x的标准高度。
- 设置文字颜色属性color
color:color
color指具体的颜色值，表示方法为英文单词、十六进制、RGB或HSL。 - 设置文字的水平对齐方式属性text-align,
text-align:left/center/right/justify
left:左对齐；
right:右对齐；
center:居中对齐；
justify:两端对齐； - 设置段首缩进属性text-indent
text-indent:length
length是由百分比数值或者浮点数和单位标识符组成的长度值，允许为负值。
背景相关属性
- 添加背景颜色属性background-color
backround-color:color
color:color设置背景的颜色。它可以采用英文单词、十六进制、RGB、HSL、HSLA和RGBA等表示方法。
transparent:表示背景颜色透明。 - 添加HTML5中标记的背景图片background-image。
background-image:url() - 设置图像的平铺方式background-repeat
background-repeat:inherit/no-repeat/repeat/repeat-x/repeat-y
| 属性值 | 含义 |
|---|---|
| inherit | 从父标记集成background-repeat属性的设置 |
| no-repeat | 背景图像只显示一次，不重复 |
| repeat | 在水平和垂直方向上重复显示背景图像 |
| repeat-x | 只沿x轴重复显示背景图像 |
| repeat-y | 只沿y轴重复显示背景图像 |
- 设置背景图像是否随页面内容滚动background-attachment:
background-attachment:scroll/fixed
- scroll:随页面内容滚动。
- fixed:背景图像固定。
- 设定背景图像在页面中的位置background-position:
background-position:length/percentage/top/center/bottom/left/right
| 属性值 | 含义 |
|---|---|
| length | 设置背景图像与页面边距水平和垂直方向的距离，单位为cm、mm、px等 |
| percentage | 根据页面标记框的宽度和高度的百分比放置背景图像 |
| top | 设置背景图像顶部居中显示 |
| center | 设置背景图像居中显示 |
| bottom | 设置背景图像底部居中显示 |
| left | 设置背景图像左部居中显示 |
| right | 设置背景图像右部居中显示 |
列表相关属性
- list-style：简写属性，把所有勇于列表的属性设置于一个声明中。
- list-style-image：将图像设置为列表项标志。
- list-style-position：设置列表项的标志在文本以内或以外。
- list-style-type：设置列表项标志的类型。
CSS3高级应用
框模型
外边距margin
外边距是元素与元素之间的距离，包括四部分：margin-top,margin-right,margin-bottom,margin-left。
语法格式如下：margin-top:/auto
① auto:表示默认的外边距。
② length:使用百分比或者长度数值表示上边距。
可以只设置部分外边距的值的值。
只有一个数值时，默认四个都为该值。
只有两个，默认对应值相同。
有多个时，表示从顶端开始，按照顺时针的顺序，依次描述各外边距的值。
内边距padding
内边距就是元素的内容与对象边框之间的距离。它可以通过padding属性进行设置。
① List item
包括padding-top,padding-right,padding-bottom,padding-left.
② 方法同上margin.
边框border
- 边框的颜色属性：border-color
① 四边框一种颜色时：border-color:color;
② 不同颜色时，同margin设置。 - 边框的样式属性：border-style
border-style:dashed/dotted/double/groove/hidden/inset/outset/ridge/solid/none.
| 属性值 | 含义 |
|---|---|
| dashed | 边框样式为虚线 |
| dotted | 边框样式为点线 |
| double | 边框样式为双线 |
| groove | 边框样式为3D凹槽 |
| hidden | 隐藏边框 |
| inset | 设置线条样式为3D凹边 |
| outset | 设置线条样式为3D凸边 |
| ridge | 设置线条样式为菱形边框 |
| solid | 设置线条样式为实线 |
| none | 没有边框 |
- 边框的宽度属性：boeder-width
border-width：medium/thick/length
① medium：默认边框宽度
② thin：比默认边框窄
③ thick：比默认边框宽
④ length：指定具体的线条的宽度
布局常用模型
浮动
float是CSS3表中的浮动属性
float:left/right/none
- left:元素浮动在左侧
- right:元素浮动在右侧
- none:元素不浮动
定位相关属性
position:static/absolute/fixed/relative
- static:无特殊定位，元素遵循HTML规则。使用该属性时，top、right、bottom、left等属性无效
- absolute:绝对定位，使用top、right、bottom、left指定绝对位置。使用该属性值可以让元素漂浮于页面上。
- relative:绝对定位，遵循HTML规则，并由top、right、bottom、left决定位置。
- fixed:绝对定位，且元素位置固定，不随滚动条移动而改变位置。
动画与特效
变换transform
| 值/函数 | 含义 |
|---|---|
| none | 表示无变换 |
| translate（length1，[lenth2]） | 实现2D平移，第一个参数对应水平方向，第二个对应y轴 |
| translateX（length） | 表示在水平方向上实现平移 |
| translateY（length） | 表示在垂直方向上实现平移 |
| scaleX（number） | 表示在x轴上进行缩放 |
| scaleY（number） | 表示在x轴进行缩放 |
| scale（number1，number2） | 表示进行2D缩放 |
| skew（angle1，angle2） | 表示进行2D倾斜。第一个参数对应水平方向，第二个参数对应垂直方向。 |
| skewX（angle） | 表示在x轴上进行倾斜 |
| skewY（angle） | 表示在y轴上进行倾斜 |
| rotate（angle） | 表示进行2D旋转。参数angle用于表示旋转的角度 |
| matrix（number1，number2，number3，number4，number5，number6） | 代表一个基于矩阵变换的函数，以一个包含6个值的变换矩阵形式指定一个2D变换，相当于直接应用一个变换矩阵。也就是基于X轴和Y轴重新定位标记。 |
过渡transition
- 参与过渡的属性transition-property
transiton-property：all|none|property[property]
all:默认值，表示所有可以过渡的CSS属性
none:表示不指定过渡的CSS属性
property:表示指定要进行过渡的CSS属性。可以同时指定多个属性值。 - 指定过渡持续的时间
transition-duration:time1，[time2]
time用于指定过渡持续的时间，默认值都为0。 - 指定过渡的延迟时间的属性
transiton-delay:time1，[time2]
time用于指定延迟过渡的时间，默认值都为0。 - 制定过渡的订花类型属性
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(x1,x2,x3,x4)[,linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(x1,x2,x3,x4)]
| 属性 | 说明 |
|---|---|
| linear | 线性过渡，也就是匀速过度 |
| ease | 平滑过渡，过渡的速度会逐渐慢下来 |
| ease-in | 由慢到快，也就是逐渐加速 |
| ease-out | 由快到慢，也就是逐渐减速 |
| ease-in-out | 由慢到快再到慢，也就是先加速后减速 |
| cubic-bezier（x1,x2,x3,x4） | 特定的贝塞尔曲线类型 |
动画animation
（1）关键帧
@keyframes name（keyframes-blocks）
name:定义一个对话名称，该对话名称将用来被animation-name属性所使用。
keyframes-blocks：定义动画在不同时间段的样式规则。
| 属性 | 属性值 | 说明 |
|---|---|---|
| animation | 复合属性，以下属性的值的集合 | 用于指定对象所应用的动画特效 |
| animation | name | 指定对象所应用的动画名称 |
| animation-duration | time+单位（s） | 指定对象动画的持续时间 |
| animation-timing-function | 其属性值与transition-timing-function属性值相关 | 指定对象动画的过渡类型 |
| animation-delay | time+单位s | 指定对象动画的循环次数 |
| animation-itertion-count | number或infinite | 指定对象动画的循环次数 |
| animation-direction | noamal或alternate | 指定动画在循环中是否反向运动 |
| animation-play-slate | running或paused | 指定对象动画的状态 |
| animation-fill-mode | none：表示不设置动画之外的状态，默认值.forwards：表示设置对象状态为动画结束时的状态，backwards：表示设置对象状态为动画开始时的状态，both：表示设置对象状态为动画开始或结束的状态 | |
| 指定对象动画时间之外的状态 |
扫一扫
62万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
