🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# HTML-CSS01-PM - 为什么要学习HTML - HTML和CSS是什么 - 常用的HTML标签 - 常用的CSS样式 - 盒子模型 ## 1.为什么要学习HTML和CSS ![](https://box.kancloud.cn/01b4c77fe3c3a4ea2a79f277664f81f5_698x513.png) 网页就是由HTML和CSS书写而成 ## 2. HTML和CSS是什么 把网页比作一个房子 ![](https://box.kancloud.cn/820ab3cc05642b8cde9af554ff0c284e_1200x801.jpg) 网页就是由一个个HTML标签组成 ![](https://box.kancloud.cn/5356d6414428c0abec7f3063c46eb99b_1080x789.jpg) CSS样式负责修饰HTML标签 ## 3.了解HTML标签 ``` //开始标签 <body> </body> //结束标签 ``` ## 4.HTML标签的特点:语义化 (https://blog.csdn.net/njcgosling/article/details/47130723 ) ## 5.常用的HTML标签 ``` h1~h6,p,img,div,a,input,button,ul,li,dl,dt,dd ``` ## 6.常用的css样式 ### 6.1 css的语法 ![](https://box.kancloud.cn/4e99bd5022914f1812c125cb6f272a6e_349x119.png) ``` selector {property: value} selector选择器通常是您需要改变样式的 HTML 元素 属性(property)是您希望设置的样式属性(style attribute) eg: //HTML <h1>hello world</h1> //css h1 {color:red; font-size:14px;} ``` ### 6.2css常用选择器 ``` <p class="one" id="two">hello world</p> p{} //元素选择器 p.one{} //class选择器 p#two{} //id选择器 ``` ### 6.3盒子模型 ``` //元素居中仅仅针对块元素有效 margin-left:auto; margin-right:auto; ``` ### 6.4样式重置 ``` *{margin:0;padding:0} ``` ### 6.5常用的css样式 ``` color:设置文字的颜色 width:设置一个元素的宽度 height:设置一个元素的高度 background-color:设置背景颜色 background-image:设置一个元素的背景图片 line-height:设置文字的行高 text-align:设置文字对其的方式 border-width:边框的宽度 border-style:边框的样式 border-color:边框的颜色 p:hover{color:blue}当鼠标移动到元素上时可以改变元素的css样式 ```