A今天学到了什么
1、html和css是什么
html是结构，css是修饰
css样式是负责修饰html标签的
2、了解html标签
html标签的结构：
开始标签<body>
</body>结束表
3、常用的html标签
div：盒子标签
h1-h6:标题标签
p:段落标签；
img：图片标签
input：输入框标签；
button：按钮标签
ul:无序列表
li：列表描述
<ul>
<li><li>
<li><li>
</ul>
dl:定义标签
dt、dd：定义描述
<dl>
<dt><dt>
<dd><dd>
<dl>
4、常用的css样式
background-color：背景颜色；
color：字体颜色；
width：宽度
height：高度；
line-height：行高；
text-aline：文本对齐方向
background-image:背景图片
border-width：边框的宽度；
border-style：边框的样式；
border-color：边框的颜色；
border—radius：边框圆角
p:hover{color:blue}
//当鼠标移动到元素上时可以改变元素的css样式
5、css常用选择器
1 css元素选择器
p{}
2 class选择器
.test{}
3 id选择器
#two{}
//HTML
<p class=”one” id=”two”>hello world</p>
//css
//元素选择器
p{}
//class选择器
.test{}
//id选择器
#two{}
4伪类选择器
//p:hover
6、盒子模型
6935825-f6dc49dcd17113d3 (1).png
1元素居中：
margin-left：auto；
margin-right：auto；
//仅仅针对块元素有效
2盒子总宽度：width+padding+border
3margin和padding盒子距离
margin：10px；
//margin:上 右 下 左
margin：10px 20px
margin：上下左右
margin：10px 20px 30px
margin:上 左 右 下
margin：10px 20px 30px 40px
margin:上 右 下 左
padding：同理
7HTML标签的分类
1.1块标签
//常用的块标签
div,p,h1~h6,ul,li,dl,dt,dd
//默认的display
display:block
特点：
1.独占一行
2.能够设置width,height
1.2内联标签
//常用的内联标签
a,span,i,em,strong
//默认的display
display:inline
特点：
1.并排显示
2.不能够设置width,height
3.不能设置margin-top,margin-bottom
1.3内联块标签
//常用的内联块
img,input,button
//默认的display
display:inline-block
特点：
1.并排显示
2.能够设置width,height
B今天掌握了什么
1、html和css是什么
html是结构，css是修饰
css样式是负责修饰html标签的
2、了解html标签
html标签的结构：
开始标签<body>
</body>结束表
3、常用的html标签
div：盒子标签
h1-h6:标题标签
p:段落标签；
img：图片标签
input：输入框标签；
button：按钮标签
ul:无序列表
li：列表描述
<ul>
<li><li>
<li><li>
</ul>
dl:定义标签
dt、dd：定义描述
<dl>
<dt><dt>
<dd><dd>
<dl>
4、常用的css样式
background-color：背景颜色；
color：字体颜色；
width：宽度
height：高度；
line-height：行高；
text-aline：文本对齐方向
background-image:背景图片
border-width：边框的宽度；
border-style：边框的样式；
border-color：边框的颜色；
border—radius：边框圆角
p:hover{color:blue}
//当鼠标移动到元素上时可以改变元素的css样式
5、css常用选择器
1 css元素选择器
p{}
2 class选择器
.test{}
3 id选择器
#two{}
//HTML
<p class=”one” id=”two”>hello world</p>
//css
//元素选择器
p{}
//class选择器
.test{}
//id选择器
#two{}
4伪类选择器
//p:hover
6、盒子模型
6935825-f6dc49dcd17113d3 (1).png
1元素居中：
margin-left：auto；
margin-right：auto；
//仅仅针对块元素有效
2盒子总宽度：width+padding+border
3margin和padding盒子距离
margin：10px；
//margin:上 右 下 左
margin：10px 20px
margin：上下左右
margin：10px 20px 30px
margin:上 左 右 下
margin：10px 20px 30px 40px
margin:上 右 下 左
padding：同理
7HTML标签的分类
1.1块标签
//常用的块标签
div,p,h1~h6,ul,li,dl,dt,dd
//默认的display
display:block
特点：
1.独占一行
2.能够设置width,height
1.2内联标签
//常用的内联标签
a,span,i,em,strong
//默认的display
display:inline
特点：
1.并排显示
2.不能够设置width,height
3.不能设置margin-top,margin-bottom
1.3内联块标签
//常用的内联块
img,input,button
//默认的display
display:inline-block
特点：
1.并排显示
2.能够设置width,height
C今天没掌握什么
全部掌握了
网友评论