一.html的结构,标签
1.1常用标签
<p></p>
段落标签
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
标题标签
<ul>
<li>(文本)</li>
.....
<li> </li>
</ul>
ul 是无列表项
li 是列表项
1.2 链接标签
<a href="https://www. .com/">(链接名称)</a>
a 是链接标签
href 是指定你所访问的网址
1.3
<dl>
<dt> </dt>
<dd> </dd>
</dl>
dl 定义列表
dt 定义的术语
dd 定义的描述
2.1.css样式
在<head></head>中书写“style”样式,即
<head>
<style>
</style>
</head>
2.2.css样式中的标签结构
color:
line-height:
text-align:
......
color -- 文字的颜色
line-height -- 行高 文本在行高中垂直居中
text-align 文本的状态样式(居中,偏左,偏右)
p{} 元素选择器
.+className{}
eg:
p{
background-color:red;
height:50px;
line-height:50px;
color:#fff;
text-align:center;
font-size:12px;
}
{ #+idName{ } 特点 每个id名都是唯一的--写样式时不要用id选择器}
二.标签作用
1.1.水平居中
<style>
div{
width:100px;
height:100px;
text-align:center;
margin-left: auto;
margin-right: auto;
color:red;
background-color: black
}
</style>
margin-left: 水平向左移动
margin-right: 水平向右移动
#######1.2样式重置
<style>
/* 样式重置
写样式之前首先要进行样式重置
*/
*{margin:0;padding:0}
</style>
1.3.盒子模型
div{
width:100px;
height:100px;
background:rgb(226, 47, 47);
margin-left: 100px;
border-width:10px;
border-style:solid;
border-color:black;
padding-left:20px;
padding-right:20px;
padding-top:30px;
padding-bottom:30px; }
/* margin
功能:可以改变元素的位置
border -- 改变元素的宽度
padding --改变元素的width,heigh