HTML学习
HTML学习
超人不会飞/
这个作者很懒,什么都没留下…
展开
-
CSS基础
1. CSS样式使用内部样式(嵌入样式)<style type="text/css"></style>要放head中间行内样式<p style="color:red;"></p>外部样式<linl href="1.css" rel="stylesheet" type="text/css"/>放head中导入式 写在style内@...原创 2020-01-26 22:54:58 · 248 阅读 · 0 评论 -
html标签大全
<!DOCTYPE> 文档类型声明 必须放html文档第一行 且不是html标签<!DOCTYPE html><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>要在head中加meta 否则中文乱码http-equiv 文档类型content=“text/htm...原创 2020-01-25 15:17:00 · 2030 阅读 · 0 评论 -
CSS预处理器
1. 什么是CSS预处理器是基于CSS的另一种语言,通过工具编译成CSS,添加了很多CSS不具备的特性,能提升CSS文件的组织性主要有less 基于node 用js写的 编译速度快 有可以在浏览器可以直接使用的版本,不需要预先编译sass 基于ruby功能嵌套 反映层级与约束变量和计算 减少重复代码extend和mixin 代码片段循环 适用于复杂的有规律的样式imp...原创 2020-01-12 15:13:27 · 254 阅读 · 0 评论 -
CSS动画
1. 补间动画transition:width 1s 1s,background 2s;transition-delay:2s;transition:all 1s;transition-timing-function:linear; - 变化的属性 动画时间 动画延迟时间 - 可以用, 表示多个属性 - 可以用all表示全部属性 - linear ease-in-ou...原创 2020-01-11 09:52:18 · 426 阅读 · 0 评论 -
效果实现
box-shadowbox-shadow: 5px 5px 10px 0 rgba(0,0,0,.2); box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2); - 左右偏移 上下偏移 模糊大小 阴影大小 颜色text-shadowtext-shadow: 0 0 2px white; - 左右偏移 左右偏移 ...原创 2020-01-10 21:36:55 · 371 阅读 · 0 评论 -
响应式布局
1. 在head中加入viewport使内容在分辨率小的设备上不会缩放<meta name="viewport" content="width=device-width, initial-scale=1.0">2. 在分辨率小的设备上隐藏一些内容@media (max-width:640px){ .left{display:none}}...原创 2020-01-10 17:20:02 · 196 阅读 · 0 评论 -
常见的主流基本页面布局方式
table表格布局特点:文字自动居中用div表现称table的形式(display和vertical-align): .table{ margin-top:20px; display: table; width:800px; height:200px; }...原创 2019-12-29 17:48:54 · 960 阅读 · 0 评论 -
checkbox的实现
CSS .checkbox input{ display: none; } .checkbox input + label{ background:url(./checkbox1.png) left center no-repeat; background-size:20px 2...原创 2019-12-29 11:53:05 · 312 阅读 · 0 评论 -
非布局样式-文字装饰 和 hack
font-weight 粗细 normal-400 bold-700 bolder lighter(bolder和lighter是根据继承的粗细来决定更粗或者更细) 100(100-900的整百,并不是所有浏览器都支持9种粗细 )front-style:itatic 斜体text-decoration 下划线cursor 指针hack可以用来解决浏览器的兼容问题.cla{width:...原创 2019-12-29 11:28:46 · 179 阅读 · 0 评论 -
非布局样式-文本折行
文本折行常用三个属性overflow-wrap:控制过长单词是否换行normal:过长单词不换行break-word:过长单词换行inherit unset initialword-break:控制过长单词拆解kepp-all:长单词和中文长句都不换行break-all:所有都要拆解,会改变单词,乱拆解break-word:长单词拆解换行,短单词不拆解nomal:长单...原创 2019-12-29 11:00:25 · 215 阅读 · 0 评论 -
非布局样式-滚动
overflow四种visible:超出区域部分仍显示scroll:超出有滚动条hidden:超人部分隐藏auto:少则无滚动条,多则有滚动条scroll与auto区别:在mac上没什么区别,但是在windows上scroll无论需不需要滚动都会有滚动条,而auto在不需要滚动的时候没有滚动条...原创 2019-12-29 10:32:43 · 134 阅读 · 0 评论 -
边框圆角 盒阴影
普通边框border:5px solid red; border-bottom:30px solid red;border-top-color: red;1. solid:实线 dotted:圆点线 dashed:虚线2. border是对四条边的3个属性(width/style/color)进行设定,也可以指定一条边边框使用图片border:30px solid tra...原创 2019-12-29 10:25:47 · 165 阅读 · 0 评论 -
非布局样式-背景
背景三种方式名字 red black十六进制 #FFF0hsla(30,100%,100%,0.3); 可以不要a(透明度)0-360的色域饱和度亮度透明度rgba(255,0,0,0.3)线性渐变-webkit-linear-gradient(left, red, green);标准写法linear-gradient(to right, red, green)...原创 2019-12-28 14:11:59 · 163 阅读 · 0 评论 -
非布局样式-行高
文本区域上面的称为“顶部”下面的成为"底部",但是字并不是对齐于“底部",而是对齐于"基线base-line"。当外层block(div/section/article)没有设置高度时,多个inline-box组成line-box,line-box的高度决定行高【外层block(div/section/article)的高度由最高的line-height确定】;外层block设置高度后若blo...原创 2019-12-28 11:41:50 · 145 阅读 · 0 评论 -
字体
字体分为具体字体名称和字体族字体组有 “serif”、“sans-serif”、“cursive”、“fantasy”、“monospace” (等宽字体)HTML使用fallback机制字体一般会设置多个,从左往右适配,当左边的字体不存在时,用右边的字体,所以一般都是从一个系统独有的字体到普遍都有的字体如下:.font{font-family:"PingFang SC", "Micr...原创 2019-12-27 23:11:33 · 136 阅读 · 0 评论 -
HTML选择器
CSS:Cascading Style Sheet 层叠样式表元素选择器 a{}伪元素选择器 ::before{}类选择器 .link{}属性选择器 [type=radio]{}伪类选择器 :hover{}ID选择器 #id{}组合选择器 [type=checkbox] + label{}否定选择器 :not(.link){}通用选择器 *{}选择器权重ID选择器 +1...原创 2019-12-27 21:55:26 · 170 阅读 · 0 评论 -
HTML元素分类与嵌套关系
原创 2019-12-27 20:30:41 · 263 阅读 · 0 评论 -
HTML5新增内容
html5新增内容新区块标签 section article nav aside(一般不在大纲中)表单增强 日期 时间 搜索 表单验证 placeholder 自动聚焦新增语义header/footer(可放在div等里面)section/articel (区域,div最宽泛,当不知道用什么时可以用div;当知道是一块文章/导航等可以用section;当知道是一篇文章时可以用arti...原创 2019-12-27 18:59:09 · 224 阅读 · 0 评论 -
HTML面试问答
问:如果用的ajax请求提交而不用表单的submit是否需要form元素?答:理论上是不需要用form的 但是建议用form1. form中submit和reset的特性可以使用2. 有form时可以用一些方法批量获取表单3. 用form可以和一些组件使用进行验证4. 对用户来说,用form可以记住密码html5新增内容新区块标签 section article nav aside...原创 2019-12-27 18:57:10 · 236 阅读 · 0 评论 -
HTML常见元素
html常见元素<meta charset="utf-8"> char:字符 set:集合charset:使用的字符集<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale-1.0, user-scalable=no">viewport:视口<...原创 2019-12-27 18:55:31 · 220 阅读 · 0 评论