今天学到了什么
1常用的标签
- 标题标签//h1~h6(大小不一)
-段落标签//<p>一大段</p>
-快捷键 end
可以快速的切换到标签的末尾
shift+alt+↓ -- 快速复制
-img 图片标签
特殊:单标签
src--标签的属性
功能:指定图片所在的位置
图片加载不出来,用来描述图片的//<img src="images/test.jpg" alt="这个一个美女"> <br>//换行
-input 输入框
button 按钮//<input type="text"><button>百度一下</button>
-ul 无序列表
li 列表项(例: <ul>
<li>小米手机</li>
<ul>)
-a 链接标签
href--指定你所要访问的网址//
<a href="https://www.jianshu.com/">简书</a>
-div //创建一 盒子
-dl -- 定义列表
dt -- 定义的术语
dd -- 定义的描述//1 <dl>
<dt>HTML</dt>
<dd>负责网页的结构</dd>
</dl>
2<dl>
<dt>尼采说:</dt>
<dd>
对待生命你不妨大胆点,因为它终将离你远去
</dd>
</dl>
2常用css
- color--文字的颜色
line-height--行高会文本在行高中垂直居中
background-color:设置背景颜色//如果插入背景图 background-color:url(图片地址//一般不用根地址 除非图片文件夹和某.html不在同一大文件夹中)
text-align:设置文本的对齐方向
font-size:设置字体大小
3常用盒子选择器
-p,li,h1,.content,{
color:yellow;(其它css都能用)
} 元素选择器
.+ClassName{}
特点:
1.可以给多个标签相同的class名
2.可以给一个标签多个class名//先在body中定义<p class="one">hello world</p>
再在style中运用.one{
color:pink;
}
-伪类选择器
element(h1,p 都行):hover{}
h1:hover{
color:green;
cursor: pointer;//指针鼠标变手
}
- #+idName{
}
特点:每一个id名都是唯一的
--写样式的时候不要使用id选择器//例:
<style>
#three{
color:yellow;
}
</style>
<p id="three">hello world</p>
盒子模型
- margin()
功能:可以改变元素的位置
border -- 改变元素的宽度
padding --改变元素的width,height//top bottom left right
-元素居中 //margin-left: auto;
margin-right: auto;(一般情况直接一个大盒子<div> </div>)
样式重置
写样式之前首先要进行样式重置//
*{margin:0;padding:0}//
*代表所有标签
一个小技巧
//如何微操作盒子内或者说html中你想要的部分调整一些有关数字的css样式