learn-css
文章目录
- learn-css
- 一 简介
- 二 HTML
- 三 CSS
- 四 CSS布局
- 五 CSS效果
- 六 CSS动画
- 七 预处理器
- 八 Bootstrap
- 九 CSS 工程化
- 补充知识
一 简介
pass
二 HTML
前端三大件
- HTML结构
- CSS样式
- Javascript 行为
- HTML常见元素和理解
- HTML版本
- HTML元素分类
- HTML元素嵌套关系
- HTML元素默认样式和定制化
- HTML面试真题解答
一 HTML常见元素
chapter2html-ele.html
1. head 中
-
meta
-
-
meta 标签 charset: 表示页面使用什么字符集(使用什么编码:默认utf-8) ,防止出现编码问题
<meta charset="utf-8">
-
-
-
viewport视口(适配移动端必备)
使用该meta标签时，在content中写属性，用逗号隔开
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
-
-
-
title
-
style
-
link
-
script
-
base:
-
- 标签为页面上的所有链接规定默认地址或默认目标
<base target="_blank" />
- 标签为页面上的所有链接规定默认地址或默认目标
-
-
指定基础路径, 指定之后所有的链接都是以这个路径为基础进行计算的
如果
<a href="a" />链接到 a如果
<base href="123/" />,<a href="a" />, 链接到 123/a<base href="/" />
-
-
+ div/section/article/aside/header/footer
+ p
+ span/em/strong: 行内 em斜体 strong 粗体
+ table/thead/th/tbody/tr/td
+ ul/ol/li/dl/dd: 列表相关 ul无序,ol有序, dl:标题, dd : 内容
+ a: 链接标签, 体现页面关联跳转 web灵魂
+ form/input/select/textarea/button
二 HTML重要属性
chapter2/html-ele.html
a[href, target]: target: “_self” 默认为当前页面打开, “_blank”
img[src, alt]: alt:(alternate) 没有图片时候的替代文字
table td[colspan, rowspan]
form[target, method, enctype]:
target 提交地址, method, 表单提交的方法(get ,post), enctype: 指定post提交时候的编码, urlencode, formData(数据编码后上传, 上传文件(使用formData)) application/x-www-form-urlencoded multipart/form-data text/plain 指定将表单数据提交到服务器时应如何编码（仅用于method =“ post”）input[type, value]
<input type="text">(default value)<input type="button"><input type="checkbox"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="image"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="time"><input type="url">button[type]
select > option[value]
label[for]
与表单项关联, 当点击label 时候, 相当于点击表单项本身, 单选框说明, (点文字进行选择)
textarea
Attribute Value Description cols number Specifies the visible width of a text area disabled disabled Specifies that a text area should be disabled maxlength number Specifies the maximum number of characters allowed in the text area placeholder text Specifies a short hint that describes the expected value of a text area readonly readonly Specifies that a text area should be read-only required required Specifies that a text area is required/must be filled out rows number Specifies the visible number of lines in a text area 右下角有小图标: resize: none;
<textarea id="w3review" name="w3review" rows="4" cols="50">
Form与Ajax提交表单的区别
submit提交和ajax提交的区别submit会刷新页面，ajax不会刷新页面form表单内有button的type为submit的按钮可以点击按钮提交表单，
触发submit事件form表单内即使没有button的type为submit的按钮,也可以在输入框内回车来提交，
触发submit事件在submit事件中，阻止默认事件或返回false，可停止提交表单，例如表单校验但是如果你的数据需要处理，就需要在submit中阻止原生提交，自定义用ajax来提交
- 建议有提交输入时候, 放上form元素, 通过jq 的 series 方法做序列化, 利于表单校验
三 如何理解HTML
http://man.hubwiz.com/docset/HTML.docset/Contents/Resources/Documents/developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines.html
-
HTML "文档"
-
描述文档的"结构"
-
有区块和大纲
<section> <h1>Forest elephants</h1> <section> <h1>Introduction</h1> <p>In this section, we discuss the lesser known forest elephants.</p> </section> <section> <h1>Habitat</h1> <p>Forest elephants do not live in trees but among them.</p> </section> <aside> <p>advertising block</p> </aside> </section> <footer> <p>(c) 2010 The Example company</p> </footer>这导致了以下概述：
1. Forest elephants 1.1 Introduction 1.2 Habitat
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bUM0hPA1-1622962358223)(learn-css.assets/image-20210504140109099.png)]
-
工具:
https://h5o.github.io
大纲
h5o, 基于w3c 的 大纲算法工具, web语义化 优化, 帮助分析html 结构是否合理,
放置一个标签含义是什么, 整体的结构是什么
避免结构混乱, 使页面有语义, 知道那些块是干什么的.不同标签的含义
四 HTML版本
-
HTML4/4.01(SGML)
Standard Generalized Markup Language
-
XHTML(XML)
-
HTML5
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IpCV5DIW-1622962358230)(learn-css.assets/image-20210504143411060.png)]
工具:
https://validator.w3.org/#validate_by_upload
w3c , 校验html 文档的编码的合法性
在之前的时代中, 写完html 文件都需要验证 html 文件的合法性, https://validator.w3.org/#validate_by_upload
五 HTML5新增内容
-
新区块标签
- section: 区块, 出现在大纲中
- article:区块, 出现在大纲中
- nav:导航, 出现在大纲中
- aside:
-
表单增强
-
日期, 时间, 搜索,search
-
表单验证, , url, tel, email
-
min, max
-
required :在submit表单之前必须填写。可用的元素是：input, select和textarea（例外： type类型为hidden, image或类似submit的input元素）。
如果在select上使用required属性，那就得设置一个带有空值的占位符option。
<label>Color: <select name="color" required> <option value="">Choose one <option>Red <option>Green <option>Blue </select></label> -
disabled
-
input下的新属性(autocomplete, min, max, multiple, pattern, step)
<input name="clublet" required pattern="[A-Za-z]+"></label></p>
-
-
placeholder
-
autofocus 自动聚焦: 定义当页面 load以后，焦点自动作用于当前元素上。
-
style: scoped属性, 用来启用限定作用范围的样式表。
style 元素有了一个新的 scoped 属性，用来启用限定作用范围的样式表。
在一个这样的 style 元素里的样式规则只应用到当前style元素的父元素根下的子树，即兄弟树。
<!-- 这个article正常使用head里声明的style --> <article> <h1>Blah Title Blah</h1> <p>Blah blah article blah blah.</p></article><article> <!-- 这里声明的style只能让该article以及子元素使用 --> <style scoped> h1 { color: hotpink; } article { border: solid 1px hotpink; } </style> <h1>Blah Title Blah</h1> <p>Blah blah article blah blah.</p></article>
-
六 HTML5新增语义
-
header / footer 头尾
-
section / article 区域
-
nav 导航
-
aside : 侧边栏 / 不重要内容
-
em /strong 强调(文档, 语义化标签) 斜体/粗体
之前写法
- i , italics 斜体(样式元素)
- b, bold 粗体(样式元素)
-
i: icon : 通常做图标
<i> 标签显示斜体文本效果。, 与<em> 标签类似通常做图标
七 HTML元素分类
https://blog.csdn.net/weixin_44663399/article/details/102492236
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fIWJNQtm-1622962358234)(learn-css.assets/image-20210504154537664.png)]
1. 按默认样式分
-
按默认样式分
-
块级block**(可设置宽高)**
-
- 方块
-
- 占据整行, 不给其他元素留出空间, 每个块级元素都会从新的一行开始，从上到下排布；
-
- 可以设置宽高、内、外边距值；
-
- 若不设置宽度和高度 ，则宽度默认为父级元素的宽度（100%），高度根据内容大小自动填充；
-
- 块级元素大多都可以容纳行内元素（内联元素 ）和其他块级元素；
常见块级:
div/section/article/aside
-
-
非块级
- 行内(或内联) inline (在一行中的某一个地方)–-(不可设置宽高)
-
- 不一定是方形的
-
- 不独占一行, 和谐的与其他元素挤在一起
-
- 对其设置宽、高、垂直方向的padding、margin值无效，但水平方向设置padding、margin值有效；
-
- 默认宽度是本身内容的宽度；
-
- 行内元素只能容纳文本或者其他行内元素***（a特殊，链接中不可再放链接），不可在其中嵌套其他块级元素；***
-
常见inline:与文本相关的
span/em/strong …
-
inline-block**(可设置宽高)**
- **对外表现:**为 inline 元素, **与其他元素和谐共处,**与其他元素挤在一起, 不会占据一整行
- 对内表现:为block元素, 有形状,有尺寸, 是一个方块形状, 是block元素
- 默认宽度是本身内容的宽度
- 可以设置宽高、内、外边距值；
<body> <div>DIV元素</div> <p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p> <p><select><option>下拉框</option></select><span>你猜左边是什么元素</span></p></body>
常见inline-block
img, 表单输入: input /select 下拉…
- 行内(或内联) inline (在一行中的某一个地方)–-(不可设置宽高)
-
2. 按内容分
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5JyIUFS9-1622962358237)(learn-css.assets/image-20210504160015338.png)]
分为很多类, contentModel 内容模型
Flow: 文档流中, 有影响的元素, 大部分可视元素, 都是flow元素
metadata: header 中的元素 : title/base/script/style/link … , 引入的一些信息,不占据文档流
heading:标题元素 h1-h6, hgroup.
section: 分区元素, <article>, <aside>, <nav> and <section>.
Interactive: 交互元素, 为用户交互而特别设计的元素.<a>，<button>，<details>，<embed>，<iframe>， <keygen>，<label>，<select> 和 <textarea>。
Phrasing: 短语元素, 一句话中不完整的词汇, <span>, 某些文字需要强调<b>, <storng>, 倾斜:<em> , 等.
<del>: 删除线
Embedded: 嵌入元素, 嵌入的其他资源, 嵌入的音频, 图片, 视频, iframe等, <audio>, <canvas>, <iframe>, <img>,<svg>, <video>.
八 HTML元素嵌套关系
https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html
https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html
https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-p-element
html 元素的嵌套关系, 那些元素是可以出现在那些地方
-
块级元素可以包含行内元素
- div 包含 a / span
-
块级元素不一定能包含块级元素
- div包含div, section 包含div
- p(段落), 不应包含 div 块级元素
-
行内元素一般不能包含块级元素
- span 不能包含div
-
但是… 什么叫一般,什么时候行内元素可以包含块级元素?:
- html5 中 a 元素可以包含块级元素
为什么a (包含) div 是合法的?
不一定, 取决于父级元素, 因为a 是嵌套 transparent , 计算时候, 将a 拿掉, 所以, 取决于外层元素
工具: https://validator.w3.org/#validate_by_upload. 校验html 文档的编码的合法性
看被嵌套元素, 属不属于 嵌套元素的 content Model , 属于 就是合法, 否则不合法
<body> <div><a href="#">DIV > A</a></div> <a href="#"><div>A > DIV</div></a> <p><a href="#"><div>P > A > DIV</div></a></p></body>
p 嵌套div 不合法
<p><a href="#"><div>P > A > DIV</div></a></p>
<span><a href="#"><div>P > A > DIV</div></a></p>
span 嵌套div 不合法
透明元素的内容模型是从其父元素的内容模型派生而来的：
内容模型的“透明”部分所需的元素与元素的父元素的内容模型部分所需的元素相同。
a 属于透明元素, 判断嵌套关系时候不看, 应为 p 嵌套 div, 查看文档, p 的内容模型中没有div , 不合法
改为
<p><a href="#">P A DIV</a></p>
九 HTML 元素的默认样式
什么样式都不加, 元素的默认样式, 表现
-
1. 默认样式的意义
-
2. 默认样式带来的问题 : 表单元素的美化, 各浏览器默认样式不一致
-
3. CSS Reset: 解决方案, 人们在实践中总结
-
样式归0
-
解决各个浏览器版本, 样式不同问题
-
最佳解决: normalize.css
https://necolas.github.io/normalize.css
既然样式不同, 那么就把他变为一致, 认为浏览器样式有意义的
-
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>default style</title> <style> *{ /*为所有元素设置, 带来性能问题,一般不考虑性能*/ margin:0; padding:0; } ul{ list-style-type: decimal; list-style-position: inside;/*设置点的位置, 在li 元素之中*/ padding: 0; } </style></head><body> <div>DIV元素</div> <ul> <li>LI元素</li> <li>LI元素</li> </ul></body></html>
十 HTML 面试真题
1. doctype的意义是什么?
- 让浏览器以标准模式渲染
- 让浏览器知道元素的合法性
2. HTML XHTML HTML5的关系?
- HTML属于SGML
- XHTML 属于XML, 是HTML进行XML严格化的结果
- HTML5不属于SGML或XML, 比XHTML宽松
3. HTML5有什么变化?
- 新的语义化元素
- 表单增强, 表单校验等
- 新的API(离线cache manifest, service worker , 音视频audio, video, 之前(flash), 图形 canvas ,svg, 之前(flash), 实时通信(websocket), 本地存储(localStorage/sessionStorage , IndexedDB, Web Sql), 设备能力(定位, 获取加速器, 获取陀螺仪状态等, 摇一摇, 地图定位 ))
- 分类和嵌套变更
- a元素的嵌套
4. em和i有什么区别?
共同:
都是斜体
不同:
- em是语义化的标签, 表强调
- i是纯样式的标签, 表斜体
- HTML5中i不推荐使用, 一般用作图标, 代表icon含义
5.语义化的意义是什么?
-
开发者容易理解
-
机器容易理解结构(搜索, 读屏软件)
-
有助于SEO 搜索结果
-
semantic microdata(语义微数据)
方便搜索
6. 哪些元素可以自闭合?
- 表单元素 input
- 图片 img
- br/hr
- meta link
7. HTML和DOM的关系?
-
HTML是"死"的, 是字符串
-
DOM是浏览器由HTML解析而来, 是活的, 是一个树
-
JS可以维护DOM, 操作DOM
innerHTML, 通过在body 中加入html字符串, 经过dom解析器解析, 看到的页面
实际上还是在操作DOM
8.property和attribute的区别?
- property: :DOM中的属性, 是"活"的 ，是JavaScript里的对象；
- attribute :特性, 是"死"的，它的值只能够是字符串；
假如用户在输入框中输入'John'，
那么Input.value的返回值是John， // 取property , 是实际输入的值
而Input.getAttribute('value')的返回值是Name:。// 取 attribute 的是字符串
<input type="text" value="Name:">
<input id="the-input" type="text" value="Name:">
**如果你需要知道当前输入框的内容，就直接读取DOM节点对象的value属性(property)；, Input.value **
**如果你想知道输入框的初始值是什么，就直接读取HTML标签元素的value属性(attribute)，getAttribute(‘value’) **
设置初始化特性值, setAttribute
或者使用DOM节点对象的defaultValue属性，它与HTML标签上的value属性(attribute)是纯映射关系：
Input.value // returns "John"Input.getAttribute('value') // returns "Name:"Input.defaultValue // returns "Name:"
9.form的作用有那些?
-
直接提交表单
-
使用submit/reset 按钮
-
便于浏览器保存表单
-
第三方库可以整体提取值, var serializeUrl = $("#test_form").serialize();
function testJquerySerializeUrl() { var serializeUrl = $("#test_form").serialize(); alert("序列化为url格式为："+serializeUrl); }function testJquerySerializeJson() { var serializeJson = $("#test_form").serializeArray(); alert("序列化为json格式为："+JSON.stringify(serializeJson)); //JSON.stringify(json对象) 将json对象转化为json字符串 } -
第三方库可以进行表单验证
推荐涉及表单的 , 使用form
三 CSS
-
Cascading Style Sheet(层叠样式表)
.\chapter3\css-basic.html
<style> body{ padding: 10px; font-size: 14px; background:red; } body.body{ font-size: 20px; background: red; } #body{ background: blue; } </style><body class="body" id="body"> Hello CSS!</body>
一 基本规则
选择器 { 属性: 值; 属性: 值; ...}
1. 选择器
-
选择器
- 用于匹配HTML元素
- 有不同的匹配规则
- 多个选择器可叠加
-
用于匹配HTML元素
-
分类和权重
-
解析方式和性能
浏览器解析css, 从右往左解析,
目的: 加快浏览器对css的解析速度, 更快速的匹配, 那些元素是
-
值得关注的选择器
2. 选择器的分类(9种)
- 元素选择器 a{}
- 伪元素选择器 ::before{}, :: 双冒号 伪元素是页面中真实存在的一个元素
- 类选择器 .link{}
- 属性选择器 [type=radio]{}
- 伪类选择器 :hover{}, : 单冒号, 伪类是状态, 行为
- ID选择器 #id{}, html 中唯一
- 组合选择器[type=checkbox] + label{}, + 兄弟元素, 后面的元素
- 否定选择器 :not(.link){}
- 通用选择器 *{}: 所有的元素都匹配
3. 选择器权重(4种)
-
ID选择器 #id{} +100
-
类 属性 伪类 + 10
-
元素 伪元素 + 1
-
其他选择器 + 0: * 号, 通用选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hv6oZAVP-1622962358242)(learn-css.assets/image-20210504202905779.png)]
权重越高, 优先级越高, 优先生效谁.
-
!important 优先级最高
-
元素属性 (定义在元素上的style样式) 优先级高
-
相同权重 后写的生效
权重计算的数字, 不会进位!!!
选择器权重判断1:
\chapter3\selector-priority.html
选择器权重判断2:
\chapter3\selector-priority2.html
-
二 非布局样式
与布局无关的样式,
- 字体, 字重, 颜色 , 大小,行高
- 背景, 边框
- 滚动, 换行
- 粗体, 斜体,下划线
- 其他
一 非布局样式(字体)
chapter3\fonts.html
1. 字体族
https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family
族: 一堆
字体族: 一堆字体
serif: 衬线字体. 笔画末端有叫做衬线的小细节的额外装饰. 如 :宋体, 仿宋
sans-serif: 非衬线字体. 末端无额外修饰. 如: 黑体
monospace: 等宽字体. 字母字体宽度相同的字体，写代码常用的字体。
cursive:草体，手写体。 如: 草体, 手写体
fantasy: 花体, 梦幻体. 如:主要用于艺术字
2. 多字体fallback
多字体 fallback 机制：当指定的字体找不到（或者某些文字不支持这个字体）时，那就接着往后找。比如：
.div1{ font-family: "PingFang SC", "Microsoft Yahei", monospace;}
上方 CSS 代码的意思是：
让指定标签元素中的文字，
在 Mac & iOS 平台用苹方字体，
在 Win 平台用微软雅黑字体，
如果这两个字体都没有，就随便找一个等宽的字体进行渲染。
注意：
（1）写 CSS 代码时，字体族不需要带引号。
（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 CSS 代码时，如果写成 "Microsoft Yahei", "PingFang SC"这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。
3. 网络字体, 自定义字体
4. iconfont 字体图标
chapter3\icon-font-file.zip
本地字体
远程字体: 引用需要注意, 跨域问题, 字体对方服务器网站是否为cors 头
二 非布局样式（行高）
-
行高的构成
chapter3\line.html
- 由 line-box 决定, line-box 由 inline-box 组成, inline-box 高度决定行高的高度
-
行高相关的现象和方案
chapter3\line-height.html
为 span 设置line-height: xxx; 可以起到 垂直居中的目的
 全角的空格, 一个中文字的宽度<div style="border:solid 1px red;"> <span style="background:blue;color:#fff;font-size:20px;line-height:60px;"> 居中xfg            </span></div>文字默认基线对齐 , vertical-align: 0px;
vertical-align: middle;
vertical-align: 5px; 向上移5px(尽量不用数字对齐,适应性差, 文字大小改变又会对不齐)
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
-
行高的调整
图片 与 文字间隙问题?
图片 在行内, 与文字也是基线对齐, 基线与底线有距离, 与文字大小有关, 12px 字体, 默认是3px距离
修改方式:
方式1:设置图片样式:
vertical-align: bottom;方式2: （块状元素不存在基线对齐）
设置图片为样式为block:
.img{ display:block; /*图片会独占一行*/ }方式3: 设置图片的浮动属性，
原理：创造一个BFC环境（由于浮动元素没有高度，为解决高度塌陷问题，一般配合overflow:hiddren使用）
.img{ float: left; }.img_box{ background-color: red; border:1px solid black; overflow:hidden; //父级设定超出部分隐藏，可以解决高度塌陷问题 }方式4:行高足够小，使基线上移
.img_box{ line-height: 0px;}方式5:设置父对象的文字大小为0px;（缺点：父对象不能有文字，且无实际意义）
.img_box{ font-size: 0px;}
注意: 如果把一个元素 设置为 inline-block 水平排列, 常用的布局
三 非布局样式（背景）
背景: 容器底层的铺垫, 不影响容器文字排布
chapter3\background.html
1. 背景颜色, 纯色背景
16位表示 , #FF0000, rgb色系
hsl(), 色相饱和度 : hsl(0, 100%, 50%), 色相0-360角度,饱和度 0-100%, 亮度: 0-100%
hsla(),hsla(0, 100%, 50%, .3 ) 0.3的透明度, 半透明的
rgb(): rgb(255, 0 , 0 ) 16 进制转10进制结果
rgba():rgb(255, 0 , 0 , .3) 0.3的透明度, 半透明的
背景充满整个屏幕:(background-size: 100% 100%