HTML+CSS重难点总结(pc端)

学习目标:

能够独立将psd效果图转换为静态代码页面,为以后学习打下基础。


学习内容:

1.html常用标签与html5新增标签

2.css语法,css3新增特性。


重难点:

1.html常用标签与html5新增标签,

很多人说学习html就是学习标签,

其实是有一定道理的,

因为在html中标签占了很大比重。

  • 标题------<h1></h1>~<h6></h6>
  • 段落------<p></p>
  • 换行------<br/>
  • 加粗------<strong></strong> 或 <b></b>
  • 倾斜------<em></em> 或 <i></i>
  • 删除线------<del></del> 或 <s></s>
  • 下划线------<ins></ins> 或 <u></u>

 

  • 盒子------div(division 分割)  <div></div>
  • 盒子------span   <span></span>

 

  • 插入图片------<img></img>          

属性:src:图片路径

           alt:图片不能显示时代替图片的文字

           title:鼠标划入时的提示文字

           width:图片宽度

           height:图片高度

           border:图片边框

 

  • 链接------<a></a>    (anchor 锚)

属性:href:链接地址

           target:_blank(新窗口)&_self(当前窗口)

 

  • 无序列表------<ul></ul>       li
  • 有序列表------<ol></ol>       li
  • 自定义列表------<dl></dl>   dt dd

 

表单:<form></form>

  • 输入框------<input></input>

       属性:type:text  (文本)   password(密码输入框)    radio(单选框) checkbox(复选框)    reset(重置) submit(提交数据) button(按钮) file(文件域,上传文件)

                  name: 用于区别表单元素

                  value:  默认提示信息

                  checked:默认选中

  • 标注标签,解释说明,提高用户体验------<label></label>
  • 下拉表单------<select></select>      option(选项)   selected (默认选项)
  • 文本域------<textarea></textarea>.

HTML5新增标签:

  • 视频------<video></video>

       属性:controls(显示控件)

                  src(资源路径)

                  loop(循环)

                  autoplay(加载后自动播放)

  • 音频-----<audio></audio>

       属性:controls(显示控件)

                  src(资源路径)

                  loop(循环)

                  autoplay(加载后自动播放)

  • 常用语义化标签:<header></header>------<footer></footer>------<nav></nav>-----<artical></artical>------<section></section>-------<aside></aside>

 

  • 表单:type:email------url------number------search-------autofocus------datalist------progress(进度条)-----meter(进度条会变色)

                 

2.css语法,css3新增特性。

主要包括css选择器、样式、布局(盒子模型、浮动、定位)。

  • 基础选择器

       id选择器     类选择器      标签选择器      通配符选择器

  • 复合选择器

       后代选择器    子选择器    并集选择器       链接伪类选择器(link----visited----hover----active)                    

 

  • 文本属性:

                       color:文本颜色

                       text-align:文本水平对齐方式

                       text-indent:文本缩进      

                       text-decoration:文本修饰(下划线)

                       line-height:行高(行于行之间的距离)

  • 元素显示模式:
  •  

  • 文字垂直居中:行高等于盒子高

 

 

  • 背景:background         颜色  图片路径   平铺方式   位置       (背景图方便控制位置)
  • css特性:层叠行------继承性------优先级

     

  • 盒子模型                      --内容       --内边距(边框与内容之间的距离)       -- 边框            --外边距
  • 浮动(体现层叠样式原理)

               特性:脱标

                          具有行内块元素的特性

               清除浮动:额外标签法

                                 父级添加overflow:

                                                             auto

                                                             hidden

                                 父级添加after伪元素

.clearfix:after{
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix{
  *zoom:1;
}

                                  父级添加双伪元素

  

.clearfix:before,clearfix:after{
  content:"";
  display:table;
}
.clearfix:after{[
  clear:both;
}
.clearfix{
  *zoom:1;
}
  • 定位  position

                relative(未脱标)相对自身移动

                absolute(脱标)相对父盒子移动

                fixed(脱标)相对浏览器窗口移动

  • 精灵技术:利用背景图片移动到确定位置

                         利用切片工具测量xy值

  • 字体图标:

                          线下使用:

                                         1.下载图标

                                         2.解压缩,重命名文件夹

                                         3.将文件夹放到与HTML文件同级,

                                         4.引入css图标样式表,添加具体样式

                          线下使用:

                                         1.选中图标添加到项目

                                         2.选中font class 添加链接到新页面

                                         3.引入css样式表,添加具体样式

  • 边框做三角   :

                         盒子无宽高,利用边框宽度撑开盒子,四个边框分别对应四个三角。

  • 鼠标指针样式:cursor

  • 垂直对齐方式:vertical-align         (只对行内元素,行内块元素)

                                 baseline:默认 基线对齐

                                 top:顶端对齐

                                 middle:据中对齐

                                 bottom:底端对齐

css3新增特性:

  • border-radius
  • box-shadow           左右      上下       模糊度       颜色
  • border-image
  • background-size
  • background-origin   属性规定背景图片的定位区域

 

  • 新增选择器

                          属性选择器:标签名+属性名

                          结构伪类选择器:     :nth-child(n)   全部先排序号再匹配标签

                                                            :nth-of-type(n) 先匹配标签再分配序号

 

  • 盒子模型               box-sizing:content-box--------border-box

 

  • 过渡(谁过渡加给谁,搭配hover使用)             transition       ----变换属性   -----花费时间   (----运动曲线   -----何时开始)

 

  • 转换(23D,不影响其他盒子)     transform

                                                                        translate(x,y,z)  ----以%为单位以盒子自身为基准

                                                                        rorate(deg)      

                                                                        scale(x,y,z)

                                                                       3D呈现:transform-style

 

  • 动画                animation   :   动画名称,持续时间,运动曲线,何时开始,播放次数
  •  

                   定义动画    

                               

 

 

 

 

已标记关键词 清除标记
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前和后的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前到后再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页