1.HTML的基本标签
1.1.h1-h6标题标签 特点：自动加粗，依次减小。
格式：
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>水平对齐方式：align=（left，center，right）
格式：
<h1 align=""> </h1>1.2 描述性简单标签
换行 r 加粗 b 倾斜 i 下滑线 u 文字 font
格式：
</br>
<b> </b>
<i> </i>
<u> </u>1.3水平线标签 hr
color 颜色
width 宽度
size 粗细、高度
align 水平对齐【默认居中对齐】
<hr color="" size=""width="" align=""> </hr>1.4段落标签 p
以&开头，以；结尾
一个英文空格
 半个字空格
 一个字空格
⁢> 大于号 >
>< 小于号
©© 版权
®® 注册
1.5 图像标签 img
- src 路径【绝对路径和相对路径】
- title 鼠标滑过时显示提示文字
- border 边框
- height 高度
- width 宽度
- alt 图片非正常加载时，显示提示文字
1.6 无序列表 标签ul
- 快捷键ul{文字}*n（数字）
- 属性值：disc默认实心圆
- circle空心圆
- square小方块
- none无
1.7超链接 a
超链接（hyperlink）是Web页面中用于连接不同资源的一种机制。它允许用户点击文字或图片，从而跳转到另一个页面、文件、电子邮件地址或执行其他操作
链接源：文字、图片
链接目标：网页、网址、文件、邮箱、应用程序exe、锚点、空链接【#】等等等
格式：
href后加链接位置
<a href="#"></a>锚点设置
<a id="bottom"></a>
<a href="#bottom"></a>点击bottom后即可转到bottom位置
1.8 table表格标签
属性值：
- border 边框
- height 高度
- width 宽度
- bgcolor 背景颜色
- cellspacing 边框粗细
- 格式：
-
<table align="center" cellspacing="1" width="2 "height="2"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>快捷键 tr*3>td*3;创建一个3*3的表格
1.9表单标签
form
制作表单 input 命令
<input type="text" name="" value="" placeholder="">
<!-- text文本框 -->
<input type="button" name="" value="">
<!-- button按钮 -->
<input type="checkbox" name="" value="">
<!-- checkbox多选框 -->
<input type="datetime" name="" value="" placeholder="">
<!-- datatime时间日期 -->
<input type="radio" name="" value="" placeholder="">
<!-- radio单选框 -->
<input type="submit" name="" value="">
<!-- submit提交 -->
<input type="reset" name="" value="">
<!-- reset重置 -->在radio单选框中，必须使用name设置同一组，才能实现单选
在单选框radio和复选框CheckBox中使用checked设置初始选中
在文本框 密码框中使用 placeholder 设置模糊提示文字
有三种按钮形式reset重置 submit提交 button普通
1.10下拉列表标签select
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>1.11
文本域 textarea
cols 控制列数/宽度
rows 控制行数/高度
maxlength 控制最大长度/限制字数
<textarea name="" id="" cols="30" rows="10"></textarea>2.css样式表
2.1 css选择器
| 全局选择器 * | *{color: red;} 选择所有标签，文字颜色为红色 |
| 标签选择器 标签名 | p{color: red;} 选择所有p标签，文字颜色为红色 |
| class类选择器 .类名 | .name_li{color: red;} 选择所有class名为name_li的标签，文字颜色为红色 |
| id选择器 #id名 | #tel{color:red;} 选择唯一的id名为tel的标签，文字颜色为红色 |
| 伪类选择器 :状态名 | :link{} 初始状态 :visited{} 点击后的状态 :hover{} 鼠标悬停/滑过状态 :active{} 鼠标点击状态 :focus{} 获取光标状态 |
| 包含选择器 以空格隔开 | ul li{} 选择ul里面的li ol li{} 选择ol里面的li .nav .a2{} .nav a:hover{} ul li a:hover{} |
| 群组选择器 以,隔开 | h1,h2,h3{} |
2.2文字样式修改
color:#0ff;
font-size:2em;
/*文字大小*/
font-family:"楷体";
/*文字字体*/
font-weight: bold;
/*文字加粗*/
font-style: italic;2.3段落样式修改
p{
/*首行缩进*/
text-indent:2em;
/*行高*/
line-height:2.5 ;
/*文本居中*/
text-align: center;
/*下滑线*/
text-decoration: underline;
/*上划线*/
text-decoration: overline;
}2.4列表样式修改
ul li{
list-style-type: square;
list-style-type: disc;
list-style-type: circle;
list-style-type: none;
list-style-image:url(images/logo_03.png);
/*list-style: none;*/
}2.5背景样式修改
p{
width:500px;
height:300px;
background-color:#0ff;
/*背景颜色*/
background-image: url(images/sc_07.gif);
/*背景图片*/
background-repeat: no-repeat ;
/*background-position: 100px 30px;*/
/*背景位置*/
background-attachment: scroll;
/*background-attachment: fixed;*/
/*复合属性*/
background-size:100% 100%;
}2.6 css新增属性元素显示/转换
标签有分类——单标签、双标签
元素有分类——块元素、行内元素、行内块元素
块元素：独占一行、设置宽高生效、默认宽度占父元素100%
display: block;
行内元素：在一行之内显示、设置宽高不生效、默认宽度是内容撑开的
display: inline;
行内块元素：既在一行之内显示、宽高还生效
display: inline-block;
圆角边框
border-radius: 50% ;
border-radius: 50% 40% ;
border-radius: 50% 40% 80% ;
border-radius: 50% 40% 80% 45%;可设1-4个属性值，按照顺指针，对角线的原则
背景色渐变
background:linear-gradient(to bottom,red,orange,yellow);向底部依次呈现红色，橙色，黄色
文字阴影
text-shadow:1px 1px 2px red;
/*文字阴影 横向偏移 竖向偏移 模糊程度*/2.7动画
transition 过渡动画
只能从一个状态过渡到另一个状态
.d1{
width: 10px;
height: 150px;
overflow: hidden;
/*隐藏多余部分*/
transition: width 1s ease;
/*过渡动画*/
}
.d1:hover{
width: 1100px;
}帧动画
一帧一帧的滚动图
.zdh{
width: 300px;
height: 200px;
background-color: #fff;
/*animation:name[帧动画名称] durration[时长] timing-function[速度曲线] delay[延时]*/
/*animation:iteration-count[重复次数] direction[方向] fill-mode[开始和结尾的填充状态]*/
animation: WK 10s ease;
/*帧动画*/
}
@keyframes WK
{
0%{background-image:url(images/1.png) ;
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;}
10%{background-image:url(images/2.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100% 100%;}
20%{background-image:url(images/3.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100%100%;}
30%{background-image:url(images/4.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100%100%;}
40%{background-image:url(images/5.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100%100%;}
50%{background-image:url(images/6.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100%100%;}
60%{background-image:url(images/7.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100%100%;}
70%{background-image:url(images/8.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100%100%;}
80%{background-image:url(images/9.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100%100%;}
90%{background-image:url(images/10.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100%100%;}
100%{background-image:url(images/1.png) ;background-repeat: no-repeat;
-webkit-background-size: 100%100%;
background-size: 100%100%;}
}
3.布局
3.1 静态布局
从上往下逐一摆放
缺点：会造成空间浪费
3.2 浮动布局 float
float可以在页面中进行分页
float：left；
float：right；3.3定位布局position
| position:static; | 静态定位，没有定位，默认值 |
| position:relative; | 相对定位，相对于自身进行定位【位移时，自身原位置不消失】 |
| position:absolute; | 绝对定位，相对于body或者带有定位的父元素进行定位【位移时，自身原位置消失】 |
| position:fixed; | 固定定位，相对于浏览器窗口进行定位【滚动时也是固定的】 |
其中注意一点：因为相对定位自身位置不消失，所以一般不会使用相对定位进行位移。
我们通常采用父相子绝来进行定位处理。
位移必须配合方向词：left right top bottom，单位有px em % 等，正负值都可以。
使用定位时，盒子会产生层叠效果，可以通过z-index属性进行层叠顺序调整。
z-index属性是不带单位的数字，正负都可以，值越大越显示在上方。
扫一扫
3675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
