HTML(超文本标记语言)
w3c标准:
结构化标准语言(XHTML、XML)
表现标准语言:(CSS)
行为标准:(DOM、ECMScrit)
一、基本标签
块级标签:无论多少内容,在网页独占一行,前后换行 标题标签: <h1>一级标题</h1> ...... <h6>六级标题</h6> 段落标签: <p>这是一段文字哦</p> 水平线标签: <hr/> 有序列表:<ol type="A"> //type控制顺序的样式 <li>列表项1</li> <li>列表项2</li> </ol> 无序列表:<ul type="circle"> <li>列表项1</li> <li>列表项2</li> </ul> 描述列表:<dl> <dt>标题</dt> <dd>描述</dd> </dl> 表格:<table border="1"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第er行第三列</td> </tr> </table> 表单:<form> 用户名:<input type="text" /><br /> 密码:<input type="password" /> </form> 行级标签:逐个横向摆放,直至不够再换行 换行标签: <br/> 范围标签:<span> </span> 图像标签: <img src="图片路径" style="width:1px;height:1px;" alt="音乐"/> 斜体标签: <em>倾斜的</em> 加粗: <strong>我是加粗的</strong> 下划线: <u></u>
二、超链接
功能:
-实现页面的跳转
-锚链接功能:①目标a标签定义name
②点击的a标签href指定#+name
<a href="#zjl">找到周杰伦</a>
<p><a href="#" name="zjl">周杰伦</a></p>
-功能性链接 QQ MSN 电子邮件
调用QQ
<a href="tencent://message/?uin=你的qq&Site=老王&Menu=yes">qq联系我</a>
属性:
href:超链接点击后跳转的资源(网页)
target:目标窗口的打开位置
可选值:
_self:自身页面打开 默认
_blank:在空白页面打开
_top:在页面顶端打开 (不常用)
_parent:在父窗口打开(和框架集连用)
三、表格高级用法
rowspan:跨行
colspan:跨列
创建多个行和列的方法
table>(tr>td)*3
<table border="1" width="400px" align="center" style="text-align: center;"cellspacing="0" cellpadding="0" >
<!--表头-->
<caption>年终财务报表</caption>
<!--th 列的表头 居中加粗-->
<!--表格头-->
<thead style="background-color: pink;">
<tr>
<th>名称</th>
<th>金额</th>
</tr>
</thead>
<!--表格身体-->
<tbody style="background-color: lightyellow;">
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</tbody>
<!--表格尾部-->
<tfoot style="background-color: green;">
<tr>
<td>41</td>
<td>42</td>
</tr>
</tfoot>
</table>
四、表单
主要用于网页中与用户进行交互,收集信息
action:表单内容提交到的地址 服务器程序等
method:表单的提交方式 get post
表单中的各个组件称为表单元素:
input:type属性控制元素的性质
type可选值;
text:文本框
password:密码框
hidden:隐藏域 隐藏信息 但是真实存在
file:文件域
image:图片按钮 指定图片位置 带有提交功能
radio:单选按钮 name一致可以控制任选其一
checkbox:复选框,建议name都是一个
reset:重置按钮 重置当前表单数据
submit:提交按钮 提交当前表单信息
button:普通按钮
select-option:下拉框(下拉按钮)
textarea 文本域名 多行文本框
属性:
name:表单元素的名字,用于以后服务器收集信息
value:
-用在按钮上表示的按钮的文字
-用在单选、复选框上表示的是提交是真实的值
-用在输入型input中表示默认值
placeholder:模拟输入显示删除显示效果
disabled:禁用属性,本来需要属性名与值相等,hmlt5提出只要包含属性即可使用
readonly:只读属性,只能看不能改
checked:默认选中单选或复选的某个按钮
<form action="#" method="post">
用户名: <input type="text" placeholder="请输入..." disabled /><br />
密码:<input type="password" value="123" readonly /><br />
隐藏域:<input type="hidden" value="money" /><br />
文件域:<input type="file" /><br />
图片按钮:<input type="image" src="img/1.jpg" /><br />
性别:
<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="女" />女
<br />
爱好:
<input type="checkbox" name="ball" value="篮球" />篮球
<input type="checkbox" name="ball" value="足球" />足球
<input type="checkbox" name="ball" value="乒乓球" checked />乒乓球
<br />
<!--非input表单元素-->
<select>
<option>请选择地区</option>
<option>昆明</option>
<option>玉溪</option>
<option>大理</option>
</select>
<textarea></textarea>
<br /><br /><br /><br />
<input type="reset" value="取消" />
<input type="submit" value="确定" />
<input type="button" value="点我" />
</form>
<form action="#" method="get">
<input type="color" />
<input type="date" />
<input type="datetime-local"/>
<input type="week" />
<input type="range" />
<input type="search" />
<input type="email" />
<hr />
<input type="url" list="source" />
<datalist id="source">
<option label="百度" value="http://www.baidu.com"></option>
<option label="淘宝" value="http://www.taobao.com"></option>
</datalist>
</form>
<br /><br /><br /><br />
<form action="#">
<label for="username">用户名:</label>
<input type="text" id="username" /><br /><br /><br />
<!--把用户分组-->
<fieldset>
<legend>用户名信息:</legend>
<label for="username">用户名:</label>
<input type="text" id="username" />
</fieldset>
<select multiple>
<!--下拉内容分组-->
<optgroup label="本地">
<option value="昆明">昆明</option>
<option value="昭通">昭通</option>
<option value="德宏">德宏</option>
</optgroup>
<optgroup label="外地">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</optgroup>
</select>
</form>
五、实体
大于> 小于< 空格 农夫山泉® 哇哈哈™
六、框架
<iframe src="http://www.baidu.com" width="800px" frameborder="0" name="open"></iframe> <a href="http://www.baidu.com" target="open">打开百度</a>
七、音视频
<audio controls> <source src="audio/1.mp3" type="audio/ogg"> </audio> <video width="300px" controls > <source src="video/mi.mp4" type="video/mp4"></source> </video>
八、列表
列表标签
标签 | 描述 |
---|---|
<ol> | 定义有序列表。 |
<ul> | 定义无序列表。 |
<li> | 定义列表项。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义项目。 |
<dd> | 定义定义的描述。 |
CSS(层叠样式表)
选择器
/*全局选择器 选择所有元素*/ *{ /*color: red;*/ } /*标签选择器 指定标签名*/ span{ /*color: red;*/ } /*类选择器 class的值 可以有多个*/ .p1{ color: yellow; } /*id选择器*/ #box{ background-color: black; } /*并集选择器 一起选中多个内容不只是标签*/ span,h1,.p1,#box{ /*color: red;*/ } /*后代元素选择器 */ .list li{ /*color: red;*/ } /*子元素选择器*/ .list > span{ color: red; } /*相邻元素选择器*/ .box001 + p{ color: blue; } /*属性选择器 选择具有xx属性的标签*/ div[class='box001']{ color: palegreen; } /*选择某元素中的第几个*/ li:nth-child(2){ background-color: red; } /*获取元素的最后一个*/ li:last-child{ background-color: red; }
伪类(超链接)
默认情况浏览器会根据历史记录判断超链接是否点击过
伪类:在某一个状态下有某个样式
通常都是指的是超链接的伪类
:link 超链接未点击前的状态
.a2:link,.a2:visited{ color: cadetblue; }
:hover 鼠标移入超链接时的状态 适用于所有的标签
:active 鼠标单击超链接时的状态 适用于所有的标签
:visited 鼠标点击超链接后的状态
背景
background | 简写属性,作用是将背景属性设置在一个声明中。 | |
---|---|---|
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 | fixed(不滚动) scroll(默认值) |
background-color | 设置元素的背景颜色。 | |
background-image | 把图像设置为背景。 | |
background-position | 设置背景图像的起始位置。background-position: xx xx 方向:top right bottom left center | |
background-repeat | 设置背景图像是否及如何重复。 |
大小
background-size:
cover:图片比例不变,将元素填满
contain:图片比例不变,将图片在元素里面完整显示
注:background-size必须在background-position的后边使用/隔开
background: #008000 url(../../html/images/qq.png) no-repeat center center/100px 100px ;
文本
color | 设置文本颜色 | |
---|---|---|
letter-spacing | 设置字符间距 | |
line-height | 设置行高 | |
text-align | 对齐元素中的文本 | |
text-decoration | 向文本添加修饰 | |
text-indent | 缩进元素中文本的首行 | |
text-shadow | 设置文本阴影 | |
vertical-align | 设置元素的垂直对齐 | |
word-spacing | 设置字间距 |
列表
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 | |
---|---|---|
list-style-image | 将图像设置为列表项标志。 | |
list-style-position | 设置列表中列表项标志的位置。 | |
list-style-type | 设置列表项标志的类型。 |
设置列表项标志的类型。
none | 无标记。 |
---|---|
disc | 默认。标记是实心圆。 |
circle | 标记是空心圆。 |
square | 标记是实心方块。 |
decimal | 标记是数字。 |
字体
Property | 描述 | |
---|---|---|
font | 在一个声明中设置所有的字体属性 | |
font-family | 指定文本的字体系列 | |
font-size | 指定文本的字体大小 | |
font-style | 指定文本的字体样式 | italic(斜体)oblique(倾斜) |
font-variant | 以小型大写字体或者正常字体显示文本。 | |
font-weight | 指定字体的粗细。 |
盒子模型
-CSS将 页面中所有的元素都设置为一个矩形的盒子
-将元素设置为矩形的盒子后,对页面的布局就变成了不同盒子的嵌套和 摆放盒子的位置(布局)
盒子模型从里到外: -content内容区: 能够在盒子中存放内容的区域,width height -padding内边距 内容区到边框之间的填充叫内边距 -border边框 盒子外边缘的框线 内容不会超过边框 -margin外边距 盒子边框到另外一个盒子边框的距离 border-style:指定边框的样式 solid 表示实线 dashed 虚线 dotted 点状虚线 double 双实线
子元素在父元素的内容区中排列
如果子元素的大小超过了父元素 则会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
-
可选值:
visible:默认值 子元素溢出 在父元素外部显示
hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条,通过滚动条来查看完整的内容
auto 根据需要生成滚动条
margin的值
-数值
-auto:设置当前外边距为最大值
设置左右两边为auto可以让元素在父元素内居中 */
margin-left: auto; margin-right: auto;
垂直外边距重叠(折叠)
-相邻的垂直方向的外边距会发生重叠现象
1.兄弟元素:
-兄弟元素之间的相邻垂直外边距会去两者之间的最大的值(正值)
-特殊情况:
-
如果相邻的外边距一正一负 则去两者的和
-
如果是相邻的外边距都是负值,则取两者中绝对值较大的
-
2.父子元素
-
父子元素之间的相邻垂直外边距会发生重叠
-
子元素的外边距会传递给父元素
-
会影响页面布局需要处理
-
处理
-
①将子元素和父元素的垂直外边距重叠的区域隔开
-
比如设置父元素的边框(盒子的大小会加上边框)
-
②使用伪元素来解决
-
问题:内容区+边框=盒子宽度?
默认情况下,盒子可见框的大小由内容区+内边距+边框共同决定的 box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用) 可选值: content-box 默认值 宽度和高度用来设置内容区的大小 box-sizing: border-box;
行级元素的盒模型
-行级元素不支持设置高度和宽度
-行级元素可以设置padding 但是垂直方向上padding不会影响布局(水平方向正常)
-行级元素可以设置border 垂直方向的border不会影响布局(水平方向正常)-行级元素可以设置margin 垂直方向的margin不会影响布局
(水平方向正常)
将行级元素设置高宽
display 用于设置元素的显示的类型
display:inline | 默认值: 将元素设置为行级元素 行级元素默认值就是它 |
---|---|
display:block | 将元素设置为块级元素 块级元素的默认是就是它 |
display :inline-block | 将元素设置为行内块元素既可以设置高宽还可以逐个摆放 |
display :none | 元素不在页面中显示 不占位置 |
display:table | 将元素设置为一个表格 |
visibility(用来设置元素的可见状态)
hidden 元素在页面中隐藏但是依然占据页面的位置 visible 默认值 元素在页面中正常显示
全局选择器去除所有标签样式
*{ margin: 0px; padding: 0px; }
解决垂直外边距重叠
1、在父元素之前加上一个空的内容但性质为table(边框)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
margin-top: 100px;
}
/*解决垂直外边距重叠:
* 在父元素之前加上一个空的内容但性质为table(边框)
*/
/*.box1:before{
content: "";
display: table;
}*/
/*工具类*/
.clear:before{
content: ""; /*加空内容*/
display: table;
}
</style>
</head>
<body>
<div class="box1 clear">
<div class="box2"></div>
</div>
</body>
</html>
高度塌陷
在浮动布局中父元素的高度默认是被子元素撑开的 ,当子元素浮动以后会完全脱离文档流 子元素会从文档流中脱离 ,将无法撑起父元素高度 导致父元素高度丢失,父元素高度丢失以后,其下方的元素会自动上移导致页面布局混乱 ,高度塌陷是浮动布局中比较常见的问题 必须要处理
解决方案:
①在浮动元素后+一个空白的div清除两侧浮动 不推荐
②使用伪元素解决
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.outer{
width: 80%;
border:1px solid red;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
/*解决高度塌陷*/
.clear:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="outer clear">
<div class="inner"></div>
<!--<div style="clear: both;"></div>-->
</div>
55
</body>
</html>
圆角
四个值:左上 右上 右下 左下
三个值:左上 右上/左下 右下
两个值:左上/右下 右上/左下
border-radius: 10px 40px;*/
/*设置为一个圆形的话 50%*/ border-radius: 50% ;
浮动
浮动元素不会盖住文字,文字会自动环绕在浮动元素的周, 所以 我们可以利用浮动来设置文字环绕图片的效果
/*其他: 元素浮动会脱离文档流: 脱离文档流的特点: 块级元素 1.块级元素不再单独占页面的一行 2.脱离文档流以后 块元素的默认高度和宽度都被内容撑开 行级元素: 行级元素脱离文档流后会变得像块级元素 但是有些特点不一样 一旦脱离文档流以后,不需要区分块级元素和行级元素了 * */
既可以解决高度塌陷又可以解决垂直外边距重叠
.clear:after,.claear:before{
content:" ";
display:table;
clear :both;
}
定位(position)
-定位是一个更加高级布局手段
-通过定位可将将元素摆放到页面的任意位置
-使用position属性来设置定位
属性值 | 描述 |
---|---|
static | 默认值,元素是静止的没有开启定位 |
relative | 开启元素的相对定位 |
absolute | 开启元素的绝对定位 |
fixed | 开启元素的固定定位 |
sticky | 开启元素的粘滞定位 |
相对定位
-当元素position属性的值设置为relative 开启了相对定位 -相对定位的特点: 1.元素开启相对定位以后,如果不设置偏移量元素不会发生任何改变 2.相对定位是参照与原来自身在文档流中的位置进行定位的 3.相对定位会提升元素的层级 4.相对定位不会脱离文档流 5.相对定位不会改变元素的性质
-偏移量
当我们开启定义以后 可以通过偏移量来设置元素的位置
top 定位元素和定位位置上边的距离
bottom 定位元素和定位位置下边的距离
left 定位元素和定位位置左侧的距离
right 定位元素和定位位置右侧的距离
指定每个方向上的距离 默认向右 向下为+值 负值会反方向偏移
绝对定位:
* -当元素设置了position属性为absolute则开启了元素的绝对定位 * -绝对定位的特点: * 1.开启绝对定位后,元素会从文档流中脱离 下方元素上移 * 2.开启绝对定位后,如果不设置偏移量位置不会发生改变 * 3.绝对定位会是元素提升一个层级 * 4.绝对定位会改变元素的性质, 块级标签高度和宽度都是被内容撑开 行级元素变成块元素 * 5.绝对定位是相对于离他最近的开启了定位的祖先元素定位的 * 都没开启, 绝对定位相对于浏览器窗口进行定位的 /*总结: 使用绝对定位的用法:当大盒子中已经装满内容需要在放一个漂浮的元素 需要使用定位,而使用定位通常的做法是: 父元素相对定位不设置偏移量(位置不动) 子元素绝对定位(位置不动) * */
阿里图标的使用
/*阿里图标的使用: * 官网-添加需要的图标到购物车-购物车加入到项目(新建)-下载 * 1.解压 * 2.复制到项目中 * 3.引入需要的css * 4.使用: 类名+编码 * 纯类名 * 伪元素 需要将编码的&#x变成\ 如:\e600 * 5.如果需要调整样式 写一个类即可 */
<style>
/*.iconfont{
font-size: 500px !important;
color: pink;
}*/
.green{
color: green;
}
.green:hover{
color: red;
}
/*为p标签前加入内容*/
.p1:before{
content: "\e600";
font-family: 'iconfont';
font-size: 30px;
color: green;
}
.p2:before{
content: "\e602";
font-family: 'iconfont';
font-size: 10px;
color: blue;
}
.p3:before{
content: "\e605";
font-family: 'iconfont';
font-size: 20px;
color: red;
}
.test:hover{
color: pink;
}
</style>
</head>
<body>
<!--1.使用unicode编码+类iconfont-->
<i class="iconfont" ></i>
<i class="iconfont green"></i>
<i class="iconfont" ></i>
<!--2.使用纯类名-->
<i class="iconfont icon-format10"></i>
<p class="p1">小孩</p>
<p class="p2">树叶</p>
<p class="p3">卡车</p>