多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[TOC] ## 1.常用的HTML标签 ### 1.1 h1~h6 表示字体大小依次递减的标题 其中h1最大 表示方法<h1>内容</h1> ### 1.2 p p--段落标签 表示方法<p>内容</p> ### 1.3 img img 图片标签 特殊:单标签 用法:<img src="images/test.jpg" alt="这个一个美女"> <br> ### 1.4 src src--标签的属性 功能:指定图片所在的位置 用法: <img src="images/test.jpg" alt="这个一个美女"> <br> ### 1.5 alt alt--当图片加载不出来,用来描述图片的 用法: <img src="images/test.jpg" alt="这个一个美女"> <br> ### 1.6 < br> 换行 ### 1.7 end 可以快速的切换到标签的末尾 shift+alt+↓ -- 快速复制 ### 1.8 ul li 标签 ul 无序列表 li 列表项 用法: <ul> <li>小米手机</li> <li>华为手机</li> <li>苹果手机</li> <li>苹果手机</li> </ul> ### 1.9 a a 链接标签 ### 1.10 href href--指定你所要访问的网址 <a href="https://www.jianshu.com/">简书</a> ### 1.11 dl dt dd dl -- 定义列表 dt -- 定义的术语 dd -- 定义的描述 <dl> <dt>HTML</dt> <dd>负责网页的结构</dd> </dl> ## 2. css样式 ### 2.1 css属性 color--文字的颜色 line-height--行高会文本在行高中垂直居中 background-color:设置背景颜色 text-align:设置文本的对齐方向 font-size:设置字体大小 用法: p{ background-color: pink; height:50px; line-height: 50px; color:#fff; text-align: center; font-size: 12px; } cursor: pointer; 表示鼠标经过时变成手的形状 h4:hover{opacity:.5;} 表示鼠标经过时改变的透明度 background-image: url("img/timg2.jpg");背景图片表示方法 border: 1px solid springgreen; 大小 样式 颜色 ## 3.css选择器 ### 3.1使用方法 1. p{} 元素选择器 慎重使用 2. .+ClassName{} 特点: 1.可以给多个标签相同的class名 2.可以给一个标签多个class名 3. #+idName{ } 特点:每一个id名都是唯一的 --写样式的时候不要使用id选择器 4.伪类选择器 element:hover{} 用法: h1:hover{ color:green; } ## 4.盒子模型 ### 4.1使用方法 margin 功能:可以改变元素的位置 border -- 改变元素的宽度 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; } ## 5.水平居中 ### 5.1使用方法 div{ text-align: center; width:200px; height:200px; background-color: red; /* 元素水平居中 */ margin-left: auto; margin-right: auto; } ## 6.样式重置 ### 6.1使用方法 写样式之前首先要进行样式重置 用法: *{margin:0;padding:0}