自学前端最基础知识小笔记

图片格式：jpg,png,gif,

<p>：定义段落文本。
<ul>、<ol>、<li>等：定义信息列表、导航列表、榜单结构等。
<table>、<tr>、<td>等：定义表格结构。
<form>、<input>、<textarea>等：定义表单结构。
<span>：定义行内包含框。

• div表示区块（division）的意思，通过将指定结构内容包围在div中，并分配id或class，就可以在文档中添加有意义的结构
  与div不同，span元素可以用来对行内元素进行分组。
  与id不同，同一个class可以应用于页面上任意数量的元素，因此class非常适合标识样式相同的对象。

feedback
n. 反馈的意见(或信息); (电器的) 反馈噪音;

section表示区块，用于标识文档中的节，在页面上多对内容进行分区。例如，章节、页眉、页脚或文档中的其他部分。

**article：表示独立的内容，内容强调独立性、完整性，section内容强调相关性。
article、section是用来划分区域

div的用处就是用来布局网页，划分大的区域，所以我们习惯性地把div当成了一个容器

不要将section元素当作设置样式的结构容器，对于此类操作应该使用div元素实现。

如果article、aside或nav元素更符合语义使用条件，不要首选使用section元素。
不要为没有标题的内容区块使用section元素。

nav表示导航条，用来标识页面导航的链接组

注意：不要用menu元素代替nav元素。menu主要用在一系列交互命令的菜单上，如快捷菜单。

cite：斜体划
dfn：术语
address：定义文档或者作者的联系信息（默认的大斜体）
魑魅魍魉
ruby,rt,rp元素，相互搭配使用
<ruby><rt></ruby>
bdo元素：ltr=left to right
rtl=right to left
dir属性
strong元素：（重要的语义）加粗的形式   b元素：没语义有
em元素：强调的语义  i元素：表斜体，没有强调的语义
del和ins元素：旧的不去，新的不来，删除线
s元素：表示错误的内容
u元素：定义的是拼写错误的单词或者专有名词
mark元素：标记文本的作用（默认的是黄色颜色）
sup和sub元素：定义公式或者化学方程式
small元素：指定的文本变小

无序列表——ul元素，文本li元素包裹起来
有序列表——ol元素，每个项用li元素包裹起来（属性）
定义（n）列表：dl元素，dt（项目内容）,dd（描述）

两个常用的CSS属性：list-style-type（设置列表的标志）
list-style-image设置列表指定的 标记，用url写链接

列表嵌套

&表格制作（可嵌套）——语义与实现分离（讲究）
table定义表格
tr=table row定义行
th=table header cell定义表头单元格（加粗居中）
td元素定义数据单元格 table data cell

rowspan:跨行
colgroup,col

表单的实现:
reset:清空边框里面的内容
button元素可以覆盖某些属性

• 自动填充——autocomplete属性（默认on）设置为off（为关闭） 指定目标显示位置 设置默认值 自动聚焦，提高交互体验，
  禁用元素，禁止修改（会提交但不可被修改） label元素：（隐式关联） fieldset元素（皇帝）（分组）浏览器会用边框将其抱起来
  legend（小太监）作为fieldset第一个子元素
• & section元素携手option元素： 制作一个下拉选项框
• optgroup（分组） 按钮：：submit，button，reset
• 单选框：radio checkbox：实现复选（有些麻烦） 时间和日期：time,date,month,datatime

Percent-encording百分号编码 search——搜索框 颜色选择框：color 图像按钮：image
将input元素隐藏起来：hidden 上传文件：file

enctype属性规定了在发送到服务器之前，应该如何对表单的数据进行编码，只有正确编码的数据，才能完整地传递给服务器&&传递文件，应设置 enctype="multipart/from-data"
首先：指定上传的问价类型

限定输入字数：number(input的type属性） 限定数字输入范围:min,max,step 数值滚动条：range
邮箱，电话，网址：email，tel，url（为常见的输入数据把关） patton属性（门槛较高）正则表达式&&

placeholder暂未提示信
required属性（布尔类型不需填写，不能轻易绕过浏览器）

size属性：设置输入框的长度
maxlength属性：设置允许用户输入的最大字符个数
list属性+datalist元素（提供备胎选项）
&&input元素很重要

output：输出计算结果
textarea：接收多行文本输入（表单元素）（默认等宽字体）——rows，cols设置框的长宽度
wrap：处理文本的自动换行

————————
网页的架构
HTML语义化

details+open属性（默认展开的状态）（定义详情区域）和summary（总结）

map（映射）：在图片上建立映射，和area元素：

picture和source元素
figure和figcaption元素（插图）

在网页中嵌入视频
备胎

controls控件播放 autoplay自动播放+muted属性（在不同浏览器可以自动播放） 视频预加载preload
poster属（封面 ）loop属性（循环）
track元素：（src指定文件路径以及文件名），label指定文件语言，kind指定字幕类型，default指定默认，为音轨添加文本（字幕）WebVVT（格式）
iframe：嵌入一个网页 sandbox=""——*别的限制：使用沙盒保护网页 meter——一个范围内的值 progress：进度条

&&&&css部分
1.内联样式（Inline Style）>2.内部样式表（Internal Style Sheet）>3.外部样式表（External Style Sheet）
CSS不限制空格的使用，对字母大小写不敏感（通常）

**CSS选择器：基本选择器，复合选择器，伪类选择器，微元素选择器，属性选择器

---

**

通用选择器：（*）

**
元素选择器：比如p,h2,span,
类选择器：class=""在名字前面加上点 .
id选择器：使用属性，全局属性，定位到的是单个元素

复合选择器：交集选择器，并集（分组）（群组）选择器，后代（包含）选择器，子元素选择器，相邻元素选择器
交集选择器：元素选择器.类选择器||元素选择器#id选择器{}
并集选择器：选择器1，选择器2，选择器3……{}
后代选择器：选择器1 选择器2 选择器3……{}
子元素选择器：选择器1>选择器2{}
相邻兄弟选择器：选择器1+选择器2{}
通用兄弟选择器：范围更宽广，位置不需要紧挨
选择器1~选择器2{}

伪选择器：伪元素选择器，伪类选择器
::first-line选择器：只对块级元素第一行内容有效，对于像a元素这类行内元素，不起作用
::first-letter选择器：设置文本第一个字符的样式
::before和::after：插入文本
content属性（文本），url（图片相对路径）
::section：设置用户选中的部分文本样式

伪类选择器： UI选择器： 结构伪类选择器： 其他伪类选择器：
动态伪类选器器：:link,:visited,:hover,:active,:focus（元素获得焦点时被选中）
LOVE&HATE——爱有多深，恨就有多深 link visited hover active 之间的顺序不能变
判断元素是否被被**，就是鼠标的点击

UI伪类选择器：
:enabled和:disabled选择器
：checked设置选项
被选中时的样式
:required和:optional选择器：用于选择必选或可选的元素
:default选择器：设置默认元素的样式

**当input元素的type属性设置为“number”时，可另外指定min和max属性来设置数值的范围 :in-range和:out-of-range伪类选择器分别设置用户输入不同内容时的样式
:read-only和:read-write只读，可读可写

&&结构伪类选择器：
:root（根元素）选择器（最没用的^o）总是匹配HTML元素
:empty选择器：匹配没有任何定义的元素
其他伪类选择器：
:target（为页面内锚点设置样式）,:lang（匹配元素）,:not(selector)（取仿选择器）——故意仿着来的
&&伪类用于当已有元素处于的某个状态时，为其添加样式，伪元素用于创建一些不在文档树的元素，为其添加样式

——————
属性选择器：基于元素进行匹配和筛选
RGB,HSL,HEX,RGBA,HSAL

色相（Hue）
饱和度（Saturation）
亮度（Lightness）

使用内嵌方式来定义文字的背景图，浏览器会用背景图像去覆盖背景颜色

margin:外边距
border:边框
padding；内边距
content:内容
background可以合并里面的内容
盒子模型：
border-style上右下左（顺时针）
图像边框
内边距：上 右 下 左（顺时针）
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右 同一个值

&&祖传技能：条件：1.对象必须是块级元素
2.必须指定元素的宽度
使用auto实现文本居中
————————
神操作：当纵向相邻的两个块元素，如果同时设置了外边距时，外边距会发生塌陷，这种行为称之为：边距折叠（以最大的为标准）
嵌套也会导致塌陷
————————————
box-sizing
设置元素的最小和最大尺寸min-width,max-width
溢出：overflow(auto……）
outline（轮廓）->轮廓并不属于元素尺寸的一部分，不会影响到原有页面布局，轮廓不会变成弧形
style，color，outline-offset（设置距离偏离量）
为轮廓添加阴影
每一个HTML元素都有一个默认的display属性（最强大，无之一）

display属性决定一个元素的显示角色（霸道），

—

——————————————————

input标签：必填项name
type=“text”文本输入框
type=“password”密码输入框
type=“checkbox”复选按钮
type=“radio”单选按钮 将type=“radio”和type=“checkbox”看成同一组信息，需要指定相同name属性
type=“date”（h5特效：日期组件）
type=“email”（h5里的email组件：符合邮箱格式）
type=“hidden”：隐藏域（没有效果，但是会携带参数到后台）
type=“file”上传文件（web：文件上传：后台commos-io/commons-fileupload）
type=“button”普通按钮（必须要指定默认值value）
type=“rest”重置按钮
type=“”

下拉菜单select
option：下拉选项
应用场景：省市联动
文本域：textarea
rows：文本域中指定行数
cols：指定行中的字符数
按钮相关的 button：按钮组件（h5）
表单标签注册场景：注册、登录

2020.9.6
JavaScript（10天被发明出来）

运行在客户端的脚本语言，不需要编译，由引擎编译

作用：表单动态校验、网页特效、服务端开发、桌面程序、APP、控制硬件——物联网、游戏开发
是什么

和HTML与CSS的关系，描述性语言和编程语言

发展历史
浏览器执行的原理：渲染引擎俗称内核、JS引擎称为JS解释器。JS引擎逐行解释执行转换为机器语言（脚本语言）

**哪三部分组成：ECMAscript（语法）、DOM（页面文档对象模型）、BOM-操作浏览器窗口，**可以进行互动的对象结构（浏览器对象模型）
三个输入输出语句
行内式、内嵌式、外部JS文件（适合代码量大的情况）

注释

变量——————————
使用、语法扩展、命名规范、变量案例
变量是内存的空间var（variable）

变量命名规范：大小写区分、不同于关键字（var）、不同于保留字、要有意义、首字母小写，后面首字母大写、不能以数字开头、尽量不用name，一个是&一个是_才可以，不可以有空格，

数据类型
JS属于弱类型语言
JS的变量数据类型根据所定义的值来确定。数据类型可以变化，JS是动态语言
简答数据类型，JS中，数字前面加0表示八进制，十六进制前面家0x

JS最好用单引号，一定要加引号。字符串引号嵌套————外双内单，外单内双
转义符都以\开头，需要写进引号里面。\(),\t(缩进），\b（空格），’(’),"(")

字符串相拼接：数值相加，字符相连
变量不要写到字符串里面，和字符串相连来实现

——————变量和字符串相连： 引引加加（变量不能加引号）

短路运算：