h5c3

Alanhie
389 阅读5分钟

HHTM + CSS

一、学习点：

  • 1、选择器
  • 2、伪类与伪元素
  • 3、边框圆角
  • 4、盒阴影
  • 5、背景设置
  • 6、渐变-线性&径向
  • 7、过渡动画
  • 8、2D/3D变换
  • 9、动画-animation
  • 10、语义化标签
  • 11、多媒体-audio、video
  • 12、iconfont的使用
  • 13、伸缩盒模型-flex
  • 14、网格布局-grid
  • 15、多列布局-column
  • 16、webWokers

1019更新……

  • 写出水平垂直居中的四种方法
  • 文本阴影及后边值的含义
  • 盒子阴影、文本阴影及后边值的含义
  • web的标准构成
  • 如何解决网页乱码
  • html5中新的 结构性标签 及相应的含义
  • 常见的浏览器内核及前缀
  • 浏览器渲染流程
  • 什么是css Sprites
  • 重绘、重排、回流
  • BFC是什么？如何触发BFC？
  • 怪异盒模型
  • css画一个三角形

二、练习demo：

⚠️ 注：

  1. 分别commit至你的仓库
  2. 使用less
  • 1、尺子练习

image.png

  • 2、圆角边框
  • 3、文本阴影 web的标准构成

image.png

  • 4、风车转动
  • 5、文本溢出生成省略号
  • 6、img不换行及幽灵空白
  • 7、img滤镜设置-filter
  • 8、地板砖

image.png

  • 9、文字裁剪及颜色渐变

image.png

  • 10、光斑移动动画
  • 11、一个元素做同心圆

image.png

  • 不定期补充……

三、小结：

Ø 每个HTML文件里开头都有个很重的东西, Doctype.知道这是干什么的吗？

版本声明，告诉浏览器应该是按照html5的规范来解析当前页面

Ø web的标准构成：

结构(html)、样式(css)、行为(JavaScript)

Ø 如何解决网页乱码

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Ø 简述一下src与href的区别

Src是指向外部资源的位置而href是指向网络资源所在位置。
Href建立和当前元素锚点或者链接，用于超链接<a
Src在请求资源的时候返回将其指向的资源下载并应用到文档内<img
Url<background(https://www.cnblogs.com/wyw0304-/p/7693181.html)

Ø a标签的用法：

a标签主要用来做跳转
a标签就是超链接，可以创建通向其他文件，或者是位置地址，创建邮件，电话，短信
属性：
  href:用来书写链接地址
  title:当鼠标悬停在a标签上的时候，对当前链接信息的一个提示，是一个弹窗显示
  target：控制当前窗口跳转还是新标签页打开，值是_blank:在标签页打开，值是_self:在当前窗口跳转(默认)
a标签的锚链接：给a标签设置href属性 #+(对应跳转元素的id属性的值) 给相对应的跳转元素 一个id属性，然后对id属性的值进行自定义名字

Ø img标签title和alt的用法

title:鼠标悬停的时候，对图片的介绍 
alt:当图片加载不出来的时候对图片的解释

Ø 图片格式 及 应用场景

jpg:当图片不是透明或者动图的时候用jpg，占用小 
png:透明图 
gif:动态图

Ø 简单介绍什么是HTML语义化

让代码更具有可读性，便于开发和维护
没有css的情况下，网页也能清晰的展示出内容和代码结构
关于seo(Search Engine Optimization 搜索引擎优化)，搜索引擎能理解网页中各个部分之间的关系，更加准确的搜索到信息（有利于SEO更加准确的搜索到信息）

Ø label标签的用法

label标签包含住标注文本，让label元素的for属性的值=相对应表单的id属性的值 
label包含住整个标注和表单，此时label不允许再有for属性

Ø button和input按钮的区别 :button可以设置文本和图像而input不可以

Ø 写出html5中新的 结构性标签 及相应的含义

header:头部、nav:导航、section:内容块、article独立块、aside侧边栏、footer:底部

Ø 常见的浏览器内核及前缀(5)

Browser	内核	前缀prefix
Chrome	Blink	-webkit-
Safari	Blink	-webkit-
Opera	Blink	-o-
Firefox	Gecko壁虎	-moz-
Edge	EdgeHTML	-ms-
IE	Trident三叉戟	-ms-

Ø input的新属性及解析8

placeholder: 	提示文字；
autocomplete: 	自动完成；
autofocus: 	自动获取焦点；
required: 	表单必填，如果表单没有内容则不会提交；
disabled: 	禁用全部操作；
readonly: 	仅读不能修改，可提交；
checked: 	选中；
form: 	提交外部表单(令属性form=外部表单的id)；

Ø input的新type类型及解释

color:颜色、date:日期、week:周、email:邮件、number:数字

Ø 浏览器渲染流程

器开始解析html，执行的顺序从上至下 
html解析器会将html结构转换成dom树
css解析器会将css解析为cssom
cssom树和dom树结合构成渲染树
计算渲染树上各个元素的位置信息，也就是布局阶段
将拥有布局信息的渲染树显示在浏览器上

Ø @import和link的区别

ink是书写在head标签中，而@import是书写在css中
页面在加载的时候link会同时加载，而@import引入的只有等页面全部加载完才能加载 
link全兼容而@import低版本不兼容

Ø 颜色设置的4种写法： rgba,rgb,#fff,red

Ø rgba和opacity的区别：rgba只是单单是一个颜色，只能对颜色进行透明，而opacity是属性，是整个元素都透明

Ø display：none与visibility：hidden的区别：

display:不占空间，不继承，隐藏的元素js无法获取 
visibility:占空间，会继承给子元素，隐藏的元素js可获取

Ø display常见的值及解释

none(隐藏)、block(显示)、inlne-block(行内块)、block(块)、inlne(行)、flex(伸缩块)

Ø 如何引入外部字体包

@font-face{ 
font-family="给个名字"; 
src=url("给个相对路径");
}

Ø 为什么垂直方向margin auto不起作用

块级元素在垂直方向没有满屏属性margin默认在上下的值都是0

Ø css画一个三角形：宽高都为0;四边的最下边设置边框为可见

Ø 盒子阴影及后边值的含义

.box{
Box-shadow:insert(是否为内阴影，默认外阴影) 1px(X轴) 1px(Y轴)
10px(模糊程度) 10px(外延)  red;
}

Ø 文本阴影及后边值的含义：

text-shadow：px（X轴） px（Y轴） px（模糊程度） color;
avatar
文章
阅读
粉丝