标签分类
1.按照闭合:带结尾的 单闭合;
2.按照换行: 不换行为行级标签,换行为块级标9签;
各种标签
1.h标签有加粗,由大到小,自带换行作用;
<h1>html</h1>
<h2>html<h2>
<h3>html</h3>
2.b标签 格式化标签 由上到下加粗;
<b>html</b>
<b>html</b>
3.i标签 斜体 为行级标签;
<i>html</i>
4.u标签 下划线标签;
<u>html</u>
- del标签 删除线标签;
<del>$200</del>
- sup标签 上下标标签;
3<sup>2</sup>=9
H<sup>2</sup>O
- type li 标签 有序无序;
- span标签 文字标签;
<span>我的html</span>
<span>我的html</span>
<span>我的html</span>
<span>我的html</span>
- P标签 段落标签;
<p>html</p>\
<p>html</p>
- img src标签 图像标签 建议使用相对路径;
- 超级链接a链接 a href;
12.div区块框架元素 为表单元素标签;
name 名字 value 值 placeholder 提示 maxlength 最大输入长度;
13.submit 提交按钮 和form一起使用;
14.select 下拉菜单 multiple变成多选;
<select>
<option>—请选择—</option>-->
<option>—宝鸡—</option>-->
<option selected>—西安—</option>-->
<option>—延安—</option>-->
</select>-->
- 表单元素 form action 提后天的服务器路径;
- table:表格 tr: 行 td: 列;
属性 :border;
文本对齐方式:align;
合边线:cellspacing;
伪类
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* 访问之前*/
a:link{
color: deeppink;
}
/*访问过的伪类*/
a:visited{
color: yellow;
}
/*鼠标悬停伪类*/
a:hover{
color: red;
}
/*鼠标激活伪类*/
a:active{
color: green;
}
</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>
元素的水平浮动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent {
width: 200px;
border: 1px solid black;
/*height: 100px;*/
/*overflow: hidden;/!*超出部分隐藏*!/*/
}
.block {
width: 100px;
height: 100px;
border: 1px solid red;
box-sizing: border-box;
float: right;
}
</style>
</head>
<body>
<!--
<div class="parent">
<div class="block">
1
</div>
<div class="block">
2
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
元素的相对定位和固定定位搭配使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.par{
/*margin: 0 auto;*/
position: relative;
margin: auto;
width: 400px;
height: 400px;
border: 1px solid black;
}
.child{
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 200px;
background-color: red;
}
.fix{
position: fixed;
width: 30px;
height: 400px;
right: 0;
top: 0;
background-color: silver;
}
</style>
</head>
<body>
<div class="par">
<div class="child"></div>
<div class="fix"></div>
</div>
</body>
</html>
元素的转化
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.par{
font-size: 0;
}
.block{
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
font-size: 14px;
}
.block1{
display: inline-block;
width: 200px;
height: 200px;
background-color: black;
font-size: 14px;
}
span{
display:block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="par">
<div class="block">111</div>
<div class="block1">1111</div>
</div>
<span>
我是span
</span>
</body>
</html>