1.常用的HTML
标签
`h1~h6` 标题标签 独占一行 粗体 (逐渐变小)
`p` 段落标签 成段展示 独占一行
`img` 图片标签 特殊单标签
`src`--单标签的属性
功能:指定图片所在位置
`alt`--当图片加载不出来,用来描述图片的
`ul` 无序列表
`li` 列表项
`a` 链接标签
`herf`--指定你所要访问的网址
`dl`--定义列表
`dt`--定义的术语
`dd`--定义的描述
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>6级标题</h6>
01.png
`<p>hello world</p>`
02.png
<img src="[images/test.jpg](images/test.jpg)" alt="这个一个美女"> <br>
<input type="text"><button>百度一下</button> |
03.png
<ul>
<li>小米手机</li>
<li>华为手机</li>
<li>苹果手机</li>
<li>苹果手机</li>
</ul>
<a href="[https://www.jianshu.com/](https://www.jianshu.com/)">简书</a>
<div>div</div>
<dl>
<dt>HTML</dt>
<dd>负责网页的结构</dd>
</dl>
04.png
2.css
样式
`color`--文字的颜色
`line-height`--行高会文本在行高中垂直居中
`background-color`:设置背景颜色
`text-align`:设置文本的对齐方向
`font-size`:设置字体大小
`margin:0;padding:0 `样式重置 (写样式前首先要进行样式重置)
p{
background-color: pink;
height:50px;
line-height: 50px;
color:#fff;
text-align: center;
font-size: 12px;
}
<p>不下巨海无以的无上珠宝,不入污泥无以生境界莲花</p>
05.png
3.css
常用选择器
`p{} `元素选择器 慎重使用
`.+ClassName{}`
特点:
1.可以给多个标签相同的class名
2.可以给一个标签多个class名
`#+idName{}`
特点:每一个id名都是唯一的
--写样式的时候不要使用id选择器
伪类选择器
`element:hover{}`
4.盒子模型
`margin`--可以改变元素的位置
`borde`r -- 改变元素的宽度
`padding` --改变元素的`width,height`
div{
width:100px;
height:100px;
background:red;
margin-left: 100px;
margin-top: 100px;
border-width: 10px;
border-style: solid;
border-color: black;
padding-left:20px;
padding-right:20px;
padding-top: 30px;
padding-bottom: 30px;
}
06.png
5.水平居中
`margin-left: auto;`
`margin-right: auto;`
元素水平居中
div{
text-align: center;
width:200px;
height:200px;
background-color: red;
margin-left: auto;
margin-right: auto;
}
07.png
网友评论