第一章 EMMET语法
1. syntax 快捷键介绍
- Child : >
- 相当于创建子标签
- nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>- Subling ： +
- 相当于创建平级标签
- div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>- Climb-up : ^
- 相当于创建了与父标签同级的标签
- div+div>p>span+em^bq
<div></div>
<div>
<p><sapn><em></em></sapn></p>
<blockquote></blockquote>
</div>- div+div>p>span+em^^bq
<div></div>
<div>
<p><sapn><em></em></sapn></p>
</div>
<blockquote></blockquote>- Group: ()
- div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>- (div>dl>(dt+dd))+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>- Item number： $
- *ul>li.item$2
<ul>
<li class="item1"></li>
<li class="item2"></li>
</ul><!--h$[title=item$]{Header $}*3-->
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>- *ul>li.item$$$2
<ul>
<li class="item001"></li>
<li class="item002"></li>
</ul>- *ul>li.item$@-2
<!--倒序的-->
<ul>
<li class="item2"></li>
<li class="item1"></li>
</ul>- ul>li.item$@3*2
<!--从三开始数两个数-->
<ul>
<li class="item3"></li>
<li class="item4"></li>
</ul>- ID and Class attributes
- #header
<div id=“#header”></div>- .title
<div class="title"></div>- form#search.wide
<form id="#search" class="wide"></form>- p.class1.class2.class3
<p class="class1 class2 class3"></p>- Custom attributes
- p[title=“Hi”]
<p title="Hi"></p>- td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>- [a=‘value1’ b=“value2”]
<div a="value1" b="value2"></div>- Text
- a{Click me}
<a href=""> Cilck me</a>- p>{Click }+a{here}+{to continue}
<p>
Click <a href="">here</a> to continue
</p>第二章 HTML简介
浏览器内核
浏览器 | 内核 | CSS前缀 |
IE / Edge | Trident | -ms- |
FireFox | Gecko | -moz- |
safar | Webkit | -webkit- |
Chrome | Chromium/Blink | |
Opera（最新版的Opera使用Blink内核） | Presto | -o- |
1. 注释
<!--
此为html的注释书写方式
html文件以.html和.htm为后缀，全文不区分大小写
具有较高的容错性，浏览器具有一个标签解析器和脚本解析器，从上往下解析
用户书写的html页面，如果出现严重的错误，则无法显示相应的结构和样式
在html页面上主要存在以下三种
结构（html） 页面上有什么 一个人身高 体型 素颜
样式（css html*） 页面有的这个东西是什么样子的 打扮化妆以后的样子
动作（js） 页面上能够具有什么操作 这个人的谈吐举止
在1996年css出现之前html也能够渲染页面样式，之后样式被css取代
以下第一句为DTD信息，规定了整个页面使用的是第几版的html规范，可以使用
哪些标签，哪些标签不能使用，此处使用的是html5，从第五版开始，dtd不再
发生改变，如果不书写DTD，则默认使用4.01版本
-->2.根标签
- 的根标签，在html和xml中都有且仅有一个根标签，嵌套在最外层
- lang 属性可选，用来描述当前页面是何种语言的网页
- en 为英文网页，此处比对我们的操作系统的地区，如果不一致，则google翻译提示是否进行翻译
3. 一级子元素
1. head
head:一级子元素，也可以称之为html标签的子元素，用来设置
页面的头信息，例如标签，编码，引入的js css等
注意书写规范为，子标签必须在父标签向右一个制表符
- meta
meta:此标签可以设置页面的编码，关键字，描述等；此处为设置编码，如果不指明编码则可能会导致页面的乱码
编码集 | 用途 |
iso-8859-1 | 此编码为最早的编码，不支持中文，部分开发工具和浏览器默认使用此编码 |
gb2312 | 国标码测试版，在iso-8859-1的基础上修改而来，支持中文但是存在2000多个无法识别的中文生僻字 |
gbk | 国标码，完全支持所有中文，国内大部分中文网站采用windows系统默认使用此编码 |
utf-8 | 互联网安全编码，支持中文，国外大部分网站多使用此编码很多开发工具默认使用此编码，OS系统默认为此编码 |
- title
用来设置页面的标题，支持中文
2.footer
h5新增标签，表示页脚，用来放置作者信息 网站版权 法律合作信息等
- address
用来存地址等信息
4.其他元素
- header
h5新增标签，表示页眉，一般放置页面的标题，搜索栏导航栏等元素
- section
h5新增标签，表示整个页面中主体部分，放置完整的文章等
- form
表单元素，此元素可以通过嵌套在内部的各种表单项元素以键值对的形式收集用户填写的信息，例如用户名 密码 等等；当表单提交时，最终将信息提交到action设置的目的地
action:属性表示表单提交到的目的地
method:提交表单的方式，存在get和post两种方式
- label
用来设置表单项外的文本，for属性对应表单项中的id属性
- input
属性 | 含义 |
type=“text” | 单行输入框 |
type=“password” | 密码输入框 |
type=“radio” | 单选框 |
type=“checkbox” | 多选框 |
type=“submit” | 提交按钮 |
type=“reset” | 重置 |
name | 表示键值对的键，可以随意书写不能不写 |
id | 对应label中的for属性，使之连为一体 |
required | 表示必填项 |
minlength/maxlength | 最小长度/最大长度 |
placeholder | 提示文本，用户输入时消失 |
value | 此属性一般不书写，就表示键值对的值，用户在此单行文本输入框中输入的值就是value值 |
autocomplete | 设置为off，则关闭自动完成功能 |
5. HTML部分标签列表
- 因为有Typroa支持部分的HTML标签，因此部分显示不出来的标签会在前边加上空格，让大纲显示该标签
- 以下仅仅是个人学习是学到的标签及标签内的部分属性，全部标签请移步W3C https://www.w3school.com.cn/tags/tag_doctype.asp
- HTML注释
<!--这是一段注释，注释不会再浏览器中显示-->- DTD信息
规定了整个页面使用的是第几版的html规范，可以使用哪些标签，哪些标签不能使用，此处使用的是html5，从第五版开始，DTD不再发生改变，如果不书写DTD，则默认使用4.01版本
< a>
- 超链接
属性 | 值 | 描述 |
href | URL | 必填属性表示链接提交到的目的地 后面可以书写相对路径或者绝对路径 |
target | _self _blank | 默认为_self ,目标页面取代当前页面 _blank为目标页面与当前页面同时存在 |
< address>
- 用来书写地址等信息
< body>
- 页面的正文，所有的结构样式都写在body元素中
< br>换行
< center>
- 包含的内容强制居中，建议使用CSS代替
< div>
- div : 此元素相当于一个容器，div元素结束后自动换行
- 最外层的 div 一般设置一个id=“container”,表示容器
< footer>
- html5新增标签，表示页脚，通常用来放置作者信息，网站版权，法律合作信息等
< form>
- 表单元素，通过巧挑在内部的各种表单元素以键值对的形式手机用户填写的信息，例如用户名，密码等
属性 | 值 | 描述 |
action | URL | 表示表单提交到的目的地 |
GET POST | 声明表单提交的方式，有get和post两种方式 |
表单提交时 GET 和 POST两种提交方式的不同
GET ： get 提交表单的速度较快。安全性低，通过浏览器的地址栏进行传输
格式：目的地 ?key=value&key2=value2&keyN=valueN
最多传递256个字符，不支持中文仅仅支持字符串
如果使用链接提交则肯定为GET
POST ： post 提交速度慢，安全性高，不通过浏览器的地址栏传递，无法从地址栏发现用户书写的内容，通过消息体传递值，格式与get一致，同样不支持中文，但是没有大小限制，如果进行上传操作必须使用post，链接提交无法使用post，必须用get
< h1> - < h6>
- 标题，h1字体最大，h6最小，和typora的大纲标题一个样
< head>
- 用来设置页面的头部信息，例如标签，编码，引入等
- 可以包含的标签有 ,,
< header>
- html5新增的标签表示页眉，一般放置页面的标题，搜索框导航栏等
< hr>
- 分割线，一般是一条线可以设置宽度的颜色
- width有设置像素值和百分比两种形式，建议用css代替
< html>
- html的根标签，在html和xml中都有且只有一个根标签，嵌套在最外层
属性 | 值 | 描述 |
lang | 可选，用来描述当前是哪种语言的页面，en为英文网页，会对比操作系统的地区，如果不一致个谷歌翻译提示是否进行翻译，中文为 zh-CN |
< label>
- 用来设置表单项外的文本，for属性对象表单项中的id属性
< input>
属性 | 值 | 描述 |
autocomplete | off | 关闭自动完成 |
autofoucs | 自动获得焦点，兼容性较差，有时需要手动实现 | |
id | 对应label的for属性 | |
minlegth/maxlength | 填写内容的最小长度和最大长度 | |
name | 表示键值对的键，遵循命名规范 | |
required | 表示该项不能不填，必填项 | |
value | 一般不填写，用户填写的内容就是value的值 | |
表示该行是单行文本输入框 | ||
单行密码输入框 | ||
单选框checked表示默认选中，单选框的name属性必须一样 | ||
复选框 | ||
上传文件，必须将method设置为post的表单项 | ||
隐藏域，用户无法从页面查看的文本域，一般是开发者放在表单中的元素，当表单提交是，一键值对的形式在用户不知情的情况下提交到服务器端，多使用在分页，修改场合 | ||
必须填写合法的邮箱名，否则无法验证通过 | ||
tel | 必须填写合法的电话，pattern属性就对应正则表达式 | |
date | 输入合法的日期按照yyyy-MM-dd格式输出 | |
number | 输入数字 | |
submit | 提交按钮，不写name只写value值表示按钮上的文字，点击此按钮之后，如果没有违反验证规则，则表单提交到action设置的目的地 | |
reset | 点击此按钮后，所有填写的数据全部清空 |
< meter>
- 进度条兼容性较差
< option>
- 下拉框的选项，selected选项代表默认选中
- 需要个标签配合使用
< select>
- 下拉框，需要个标签配合使用
<label for="locationid">归属地</label>
<select name="location" id="locationid">
<option value="huibei">湖北</option>
<option value="sichuan">四川</option>
</select>< textarea>
- 多行文本输入框
属性 | 值 | 描述 |
cols | 表示一行可以输入多少个字符 | |
表示最多可以输入多少行 |
6.特殊字符
特殊符号 | 转义字符[点击查看] |
> | > |
< | < |
& | & |
" | " |
‘ | ' |
xml中无法使用 |
第三章 XML
1. XML规范
- xml 的 API 开发文档与HTML 文档一致
- 头信息之前不能书写任何字符
- 全文小写，无容错性
- 在HTML中，首行为一个DTD信息，这个DTD规范了全文为那种版本的html，可以使用那些标签，出现多少次，不能使使用哪些标签，如果不写则默认4.01DTD
- xml默认不存在DTD，如果用户不写DTD，则全文无DTD，标签可以随意书写，支持中文
2. XML标签
1. CDATA[]
<![CDATA[ 在嵌套在此格式之后，用户书写的空格，换行，特殊字符 都可以被正确的识别，不需要转义字符进行转义 CDATA一般嵌套SQL语句，当封装SQL语句时， 如果空格换行特殊字符不能正确识别，则可能会出现错误 ]]>
<我是根元素>
<student id="et001" name="elena">
<hobby>购物</hobby>
<hobby>跑步</hobby>
<location>济南</location>
<info>
来自济南的
elena
非常喜欢
购物和跑步
">><'"&
</info>
</student>
<student id="et002" name="penny">
<hobby>睡觉</hobby>
<hobby>吃饭</hobby>
<location>青岛</location>
<info>
<![CDATA[
来自青岛的
penny
非常喜欢
吃饭
><'"&
> < ' " &
]]>
</info>
</student>
</我是根元素>2. 内部DTD
2.1 元素
- 将DTD文件和xml文件书写在一些，用来约束全文可以使用哪些标签，不能使用那些标签
*:表示此元素可以出现任意多个，也可以不出现
如果元素后面没有书写任何标识符，则表示元素只能书写一次，也不能不出现
元素,元素,元素:注意这里严格区分先后顺序，必须按照逗号的分割排列元素
(元素1|元素2|元素N):枚举写法，表示其中任选其一
?:可以出现0个或者1个
+:至少一个上不封顶
(#PCDATA):表示元素中可以书写任意字符串，不再嵌套子元素
ANY:元素中可以是任意字符串，也可以再有子元素
(#PCDATA|元素名)*:表示元素中可以是任意字符串，也可以再次嵌套
特定元素，也可以两者同时存在
EMPTY:表示空元素，元素中不能存在子元素，也没有字符串
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE 学生信息[
<!ELEMENT 学生信息 (student*)>
<!ELEMENT student (name,age,(location|home),hobby*,gf?,teacher+,job*,
criminal)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT location (#PCDATA)>
<!ELEMENT home (#PCDATA)>
<!ELEMENT hobby ANY>
<!ELEMENT gf (#PCDATA)>
<!ELEMENT teacher (#PCDATA)>
<!ELEMENT job (#PCDATA|secondJob)*>
<!ELEMENT secondJob (#PCDATA)>
<!ELEMENT criminal EMPTY>
]>
<学生信息>
<student>
<name>elena</name>
<age>23</age>
<location>济南</location>
<hobby>游戏</hobby>
<hobby>购物</hobby>
<gf>damon</gf>
<teacher>aleric</teacher>
<teacher>tom</teacher>
<job>
软件工程师
<secondJob>特工</secondJob>
</job>
<criminal />
</student>
</学生信息>2.1 属性
使用内部DTD来约束元素的属性
<!ATTLIST 依附元素名 属性名 属性值类型 默认值类型>
ID:表示这个属性全文唯一，不能重复，不能以数字开头
CDATA:表示属性值可以是任意字符串
(数据1|数据2|数据N):表示默认值任选其一
#REQUIRED:表示默认值必须书写不能不写
#IMPLIED:表示默认值爱写不写
#FIXED:属性值固定，为后面的默认值，不得更改，存在浏览器差异性
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE 学生信息 [
<!ELEMENT 学生信息 (student*)>
<!ELEMENT student (name,age)>
<!ATTLIST student sid ID #REQUIRED>
<!ATTLIST student home CDATA #IMPLIED>
<!ATTLIST student salary (10k|12k|14k) "12k">
<!ATTLIST student job CDATA #FIXED "软件工程师">
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
]>
<学生信息>
<student sid="et001" home="济南" salary="12k"
job="软件工程师">
<name>elena</name>
<age>23</age>
</student>
</学生信息>3. 外部DTD
- 拓展名为.dtd,是一个独立的文件，不需要书写<!DOCTYPE>标签
<?xml version="1.0" encoding="utf-8" ?>
<!ELEMENT student (name,age)>
<!ELEMENT name (#PCDATA)>
<!ATTLIST name id ID #REQUIRED>
<!ELEMENT age (#PCDATA)>- 引入DTD存在以下两种方式
- 本地方式：
- 网络方式：
<?xml version="1.0" encoding="UTF-8" ?>
<!--本地方式导入DTD文件-->
<!DOCTYPE student SYSTEM "outterDTD4.dtd">
<student>
<name id="et001">penny</name>
<age>23</age>
</student>第四章 CSS
1. CSS简介
- CSS(Cascading style Sheet) 层叠样式表
- CSS注释与java多行注释一样都为 /**/
1. 三种引入css的方式
- 内嵌式
直接将css代码写在head标签内，是一种优缺点都不是很明显的书写方式，在 style 标签内只能书写 css 代码，不能写html标签
<style>
*{margin:0;}
</style>- 外链式
通过 link 标签引入一个独立的css文件到本页面，rel表示引入的是一个样式表，href表示引入的css文件路径，这种方式被普遍使用
<link rel="stylesheet" href="./css/style.css">- 行内式
在标签内直接书写css，这种方式严重违背了解耦结构和样式的原则； 将结构和样式再次耦合在一起，但是由于其优先级极高，所以使用较多
<div style="background-color:red"></div>- 三种引入方式的优先级
- 行内式 > 外链式和内嵌式谁放在后边，就会覆盖之前出现冲突的样式
2. CSS继承性和层叠性
- 继承性
在 CSS中，没有任何冲突的前提下，字标签会完全继承父标签的所有css渲染设置，如果存在冲突则以字标签为准。继承特性
- 层叠性
当多种基本选择器出现冲突时，浏览器渲染的优先级情况：
id选择器>类别选择器>标记选择器
注意以上优先级与顺序无关，如果存在行内式，则一切以行内式为准
2. CSS选择器
- css选择器写的越详细越好
当多种基本选择器出现冲突时，浏览器渲染的优先级情况
id选择器>类别选择器>标记选择器
注意以上优先级与顺序无关。如果存在行内式，则一切以行内式为准
- 基本选择器
/*标记选择器*/
tagName{
使用标签名作为选择元素的依据，一般极少单独使用，非常容易引起误操作
}
p{color:red;}- 类选择器
/*类选择器*/
.className{
根据.class属性值精确选取元素，class全文不唯一，可以随意使用
}
.test{color:red;}- id选择器
/*id选择器*/
#idName{
使用#id值来拿去元素，id全文唯一不可以出现重复
}- 交集选择器
/*由一个标签后边紧跟类别或者#id，必须同时满足两个条件才可以成功选取*/
tagName.className{}
tagName#idName{}- 并集选择器
/*有多个基本或者符合选择器用都好隔开，只要返祖其中任意一个就可以成功选取*/
sel1,sel2,sel3,selN{}- 后代选择器
在 CSS中，没有任何冲突的前提下，字标签会完全继承父标签的所有css渲染设置，如果存在冲突则以字标签为准。继承特性
sel1 sel2 sel3 sel4{
根据左祖先右后代的继承原则，可以精确的拿取具有层级关系的子元素，没有个数限制
}- 全选选择器
*{
拿取页面的全部元素
}- 其他选择器
选择器 | 含义 |
p[title = “val”] | 匹配 属性有title且值为val 的p元素 |
p[titlt ^= “v”] | 匹配 属性有title且值以v开头的p元素 |
p[titlt $= “v”] | 匹配 属性有title且值以v结尾 的p元素 |
p[title *=“v”] | 匹配 属性有title且值包含v 的p元素 |
3. CSS常见元素类型
- 块元素(block)
eg: div p h1-h6 ul li img*
这些元素结束之后自带换行，易航智能存在一个元素 ，无法横向排列，设置这写盒子的盒子模型有效，文本对齐方式无效
- 内联元素(inline)
eg:a label sapn img*
这些元素结束之后没有换行，一行可以存在多个，从左往右排列，设置这些元素的盒子模型很多参数无效，设置文本对齐方式无效
img (inline-block内联块元素)
是一种内联元素（不换行），但是具备所有块元素的特性，可以设置盒子模型等*
- 空元素(empty)
eg: br hr meta
这种元素一般用来设置参数或者特定的结构或者样式
通过设置display属性可以用来修改元素的类型
属性 | 元素类型 |
display:block | 设置元素为块元素 |
display:inline | 设置元素为内联元素 |
display:flex | 设置元素为flex布局 |
display:none | 设置元素为隐藏 |
4. 盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gRxISLMm-1594440727422)(D:\Study\Yitu\前端\盒子模型.png)]
1.标准文本流
在css中所有的元素在没有设置任何定位 浮动等参数的前提下，从上到下一次排列的顺序称之为标准文本流，由于大部分的元素都是块元素，所以基本上所有的元素易航智能存在一个从上往下排列
**在制作页面的时候，一般先写好html呈现标准文本流的状态，然后统一书写css，而不是html和css同时书写 **
2.盒子模型
在css中将所有的元素看作是一个具有四个边框的盒子，这些盒子按照标准文本流的形态从上往下排列，盒子的四个边框分别为 外边距margin 内边距padding 边框border，通过设置border属性可以显示元素的边框
- border
border:边框类型 边框粗细 边框颜色
solid单实线 double双实线 dotted点状线
- margin
margin有四个属性margin-top,margin-right,margin-bottom,margin-left
/*margin的简略写法*/
/*
--四个参数--
margin: 上 右 下 左;
--三个参数--
margin: 上 (右下) 左;
--两个参数--
margin: (上下) (右左);
--一个参数--
margin: (上右下左);
*/
/*最简单的网页居中方法*/
margin:0 auto;- padding
padding同样遵循上述的简略写法；
不同的浏览器都设置了元素边框之间存在默认的缝隙
为了统一距离一般都要设置 *{margin:0;padding:0;}
5. 背景图和浮动
1. 背景图
/*设置背景图*/
backgroud-image:url("");
/*只允许从左往右排列一次*/
background-repeat:repeat-x;
/*设置背景图位置*/
background-position:bottom;
/*去除立标的标记*/
ul{
list-style-type:none;
}2. 浮动
- 块元素在不设置情况下会自动占满父元素的宽度
- 默认块元素会占满父元素的宽度，设置浮动之后按照设置的浮动方向进行缩小，缩小到内部的内容宽度为准，之后漂浮在页面上，原来的位置被后边的元素占据
/*左右浮动*/
float:left;
/*设置元素不受到其他元素浮动的影响*/
clear:left;/*不受左浮动影响*/
clear:right;/*不受右浮动影响*/
clear:both;/*不受两侧浮动影响*/6. 定位
1. 相对定位
元素根据原先所在位置的左上角进行定位，定位之后元素依然保持原来的类型，原来的位置也依旧被占用。偏移量 top 和 bottom 只能写一个。left 和 right 也只能写一个
/*设置为相对定位*/
position:relative;
/*向下偏移量300像素 距离顶部300px*/
top:300px;
/*向右偏移量300像素 距离左端300px*/
left:300px;2.绝对定位
元素根据其距离最近的定位过的父元素的左上角进行定位，如果元素的祖先元素都没有被定位过，则根据body也就是浏览器的左上角进行定位(这样可能会出现问题)
元素定位之后，不再保留原先的类型，不在沾满一行，漂浮在页面上，原有的位置被之后的元素占据，每对偏移量同样只能书写一个
position:absolute;
top:300px;
left:300px;7.布局
1. 圣杯布局
- 在html4.01等之前的版本中html并没有专门的布局元素而是统一使用div进行布局
- html5出现了布局元素，通常是采用圣杯布局包含 header(页眉)，nav(导航栏)，section(网页的主体)，aside(侧边栏)，footer(页脚)，article(放置完整的文章)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dzoOst1I-1594440727426)(D:\Study\Yitu\前端\css\CssDayOfficial\attachment\html5布局.jpg)]
常用属性
属性 | 含义 | 其他 |
font-family | 字体种类 | 多种字体用 , 分开 |
color:red | 字体颜色 | 可以用颜色名或者rgb |
font-size | 字体大小 | 可以用px也可以用em |
font-weight:bolder | 字体加粗 | |
text-decoration:none | 去掉下划线 | underline下划线 overline上划线 line-through贯穿线 blink闪烁 |
line-height20px | 行高 | |
a:hover | 鼠标悬停的样式 | visited被点击后的样式 |
display:block | 设置为块元素 | inline内联元素 flex设置为Flex布局 |
border:solid 2px red; | 设置边框为2px红色实线 | double双实线 dotted虚线 |
box-shadow:15px 15 px 15px gray | 设置阴影 |
2. FLex布局
采用lex布局的元素，被称为Flex容器（Flex container），简称容器，子元素自动成为容器成员，成为Flex项目（Flex item），简称项目
容器默认存在两根主轴，水平方向主轴（main axis）垂直方向交叉轴（cross axis）默认项目按照主轴排列
- main start/main end : 主轴开始、结束位置
- cross start/cross start : 交叉轴开始、结束位置
- main size/cross size ：单个项目占据主轴、交叉轴的空间
属性 | 描述 |
flex-direction | 决定排列方向 |
flex-wrap | 一行排不下时如何换行 |
flex-flow | 前两种的简写格式 |
justify-content | 在x轴对齐方式 |
align-items | 在y轴如何对齐 |
align-content |
- flex-direction
决定项目的排列方向
属性 | 含义 |
row[默认] | 主轴水平方向，起点在左端 |
row-reverse | 主轴水平方向，起点在右端 |
column | 主轴垂直方向，起点在上边沿 |
column-reverse | 主轴垂直方向，起点在下边沿 |
- flex-wrap
定义换行情况
属性 | 含义 |
nowrap[默认] | 不换行 |
wrap | 换行，第一行在上 |
wrap-reverse | 换行，第一行在下 |
- flex-flow
flex-direction 和 flex-wrap的简写
属性 | 含义 |
flex-flow:row nowrap | 第一个参数为flex-direction第二个参数为flex-wrap |
- justify-content
定义项目与在主轴上的对齐方式
属性 | 含义 |
flex-start | 左对齐 |
flex-end | 右对齐 |
center | 居中对齐 |
space-between | 项目两端对齐边缘，项目之间空隙相同 |
space-around | 项目之间的间隙相同，为两端到边缘的两倍 |
- align-items
定义在垂直方向上的对齐方式
属性 | 含义 |
flex-start | 对齐上边沿 |
flex-end | 对齐下边沿 |
center | 居中对齐 |
baseline | 项目的第一行文字基线对齐 |
stretch[默认] | 如果未设置高度或高度为auto，将沾满整个容器的高度 |
- align-content
定义多条轴线的对齐方式，如果项目只有一根轴线，该属性不起作用，所以必须设置flex-wrap:wrap;
属性 | 含义 |
flex-start | 与交叉轴起点对齐 |
flex-end | 与交叉轴终点对齐 |
center | 居中对齐 |
stretch[默认值] | 占满整个交叉轴 |
space-around | 项目上下之间距离相等，上边沿与下边沿有空隙，大小为项目间的一半 |
space-between | 上边沿与下边沿无空隙，项目上下间距离相等 |
如果不给项目设置高度，但是给容器设置align-content不为stretch时，同一轴线上的项目高度都会变为该轴线上高度最高的项目的高度。
项目属性
- order
定义项目排列顺序
item{
order:integer;
}
/*数值越小，排列的越靠前，默认为零，可以使付负数*/- flex-grow
定义项目的放大比例，默认为0，如果空间有剩余，项目也不放大，也可以是小数，按照比例占据剩余空间，数值相同则等分空间，设置为2，则占据值为1的项目空间的2倍
item{
flex-grow:<数字>;
}- flex-shrink
定义项目缩小比例默认值为1，如果看空间不足则等比例缩小。设置为0，则不进行缩小。如果设置了一个值为0，其他项目都为1，则当空间不足时，该项目不缩小
如果都设置为0，则当空间不足，都不缩小，项目撑破容器溢出
设置为不为0的非负数，则效果等同设置为1
item{
flex-shrink:<非负整数>;
}- flex-basis
定义在分配多余空间之前，项目占据的主轴空间，如果空间充足，则设置了数值的项目占据设定的空间；如果空间不足，则该项目也会缩小，小于设定值
- flex
flex是flex-grow，flex-shrink，flex-basis的简写
属性 | 含义 |
flex: 0 1 auto | 项目不放大，等比例缩小。第一个必填，其他选填 |
flex:auto; | 相当于 flex: 1 1 auto; |
flex:none; | 相当于 flex: 0 0 auto; |
- align-self
默认为auto，表示继承父元素的align-items属性，可以单独设置align-items属性
第五章 JavaScript
1. JS简介
js => JavaScript页面脚本语言，前段三大基础之一，用来负责页面的动作
相关类库 prototype YUI Dojo Extjs ajax jQuery easyUI等
1.基本数据类型
String ，number，boolean，null，undefined
2.复合数据类型
Array，Object
3.赋值
- ES5规范
var i = 3;
var j = 1.1;
var x = true;
var y = 'etoak'
/*由于js没有默认值，如果没有声明初始值，则会变成undefined，即未定义类型*/
var a;- ES6规范
var赋值存在许多bug，如越级bug等。
ES6新规范中使用 let 赋值变量 const复制常量，同时不书写分号
let i = 3
i++
/*字符串赋值 " 和 ' 都可以用推荐用'*/
let y = 'etoak'
const PI = 3.142. BOM七对象
BOM
window
document
location
history
screen
navigator
frame
- 在JS中，将浏览器的页面分为七大对象，每个对象存在自己的属性和激发事件
- BOM是browser object model的缩写，简称浏览器对象模型
- BOM提供了独立于内容与浏览器窗口进行交互的对象，BOM主要用于管理窗口与窗口之间的通讯，因此这个和新对象是window
对象 | 含义 |
window | 七对象的父对象，也是其他六个的顶层对象，是一个全局变量，表示整个页面的所有要素 |
document | 页面的正文 |
location | 页面的地址栏信息，同时负责页面的跳转 |
history | 负责封装页面的缓存和历史记录 |
screen | 封装用户显示器信息 |
navigator | 读取用户当前的浏览器信息 |
frame | 页面的一个框架，目前已淘汰 |
BOM和DOM的区别
Document Object Model（文档对象模型），就是把「文档」当做一个「对象」来看待。
Browser Object Model（浏览器对象模型）,即把「浏览器」当做一个「对象」来看待。
区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。在 DOM 中，文档中的各个组件（component），可以通过 object.attribute 这种形式来访问。一个 DOM 会有一个根对象，这个对象通常就是 document。而 BOM 除了可以访问文档中的组件之外，还可以访问浏览器的组件，比如问题描述中的 navigator（导航条）、history（历史记录）等等。在这种 「XOM」的模型中，最应该理解的就是 Object Model。Object Model 就表示你可以通过像操作对象一样，来操作这个 X。再解释一下什么是对象（Object）。在编程领域中，对象就是指的一种拥有具体数据（Data）并且具有（并不总是）特定行为（Behavior）的东西。例如，一个人 ，就可以看做一个对象。人的年龄、性别、身高、体重就是上文说的具体「数据」，通常将对象拥有的具体数据称作对象的「属性（Attribute）」；而人吃饭，睡觉，行走等能力，就是上文所说的「行为」，通常，我们把对象的行为称作对象的「方法（Method）」。另外，对象是可以嵌套的，也就是是说，一个对象的属性也可以是对象。上文所说的「像操作对象一样」，最主要就是指访问对象的属性和调用对象的方法。对象的属性可以通过 object.attribute 这种形式来访问，对象的方法可以通过 object.method(arguments) 这种形式来调用。对应到 DOM 中，document 这个根对象就有很多属性，例如 title 就是 document 的一个属性，可以通过 document.title 访问；document 对象也有很多方法，例如 getElementById，可以通过 document.getElementById(nodeId) 调用。
- DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
- BOM 是 各个浏览器厂商根据 DOM
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]- window 是 BOM 对象，而非 js 对象；
3. DOM的使用
/*
* Html
* |
* DOM (文档对象模型:将正文上下文看做一个对象，全部封装在文档节点document中，
* html和xml都只有一个文档节点，也就是html)
* |
* Javascript
*
* Javascript不能直接修改页面的结构和样式
* 而必须通过文档对象模型来修改页面的结构和样式
*
* 浏览器内置两个解析器，一个是标签解析器，一个是脚本解析器，从上往下解析，如果出现解析异常则停止解析
* 通过控制台报错，如果解析无误，则将整个html文档节点封装进document中，全文只有一个文档节点
* 根据这个节点中的结构样式，创建一个文档对象模型格式如下:
*
* document
* |
* html
* |
* |
* ---------------------------------------
* | |
* | |
* head body
* | |
* ---------- ----------------------
* | | | |
* title meta button table
* |
* tr
* |
* td
* Js中的的方法可以对这个模型进行增删查改，修改之后，文档对象模型与页面实际结构和样式
* 不再统一，浏览器根据这个模型重新刷新页面，使之保持一致
* 我们这里去掉了window.onload之后那么浏览器从上往下解析，首先解析到的就是
* let domBtn = document.getElementById(‘btn’)
* 从模型中根据btn这个id拿取元素节点，可是注意window.onload前提被删除了，
* 整个页面还没有解析，模型未被创建，所以根本无法从模型中根据id拿取元素，所以报错
* 那么是不是必须书写window.onload来保证模型创建完整呢？
* 不是必须书写，通常将js脚本书写在页面body闭合标签标签之前，保证最后执行js脚本
* 优先加载html和css 并且保证模型创建完毕
1. JS实例一
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>1)如何绑定一个js函数</title>
<!--
类似css的style标签，在此标签内书写Js脚本
-->
<script>
/*
onload:激发事件之一，激发事件有很多种，此处表示页面载入无误
此处和BOM内置对象一起使用表示当前窗口载入无误，那么执行一个叫做etoak的函数
*/
window.onload = etoak
/*
function:固定写法表示是一个函数
注意不书写返回值，也不书写void，函数名推荐使用驼峰命名
括号内为实参，可选
*/
function etoak(){
//弹出一个对话框
/*
由于window是全局变量，所以所有的对象都是window的子对象
所以window可以省略
*/
alert('青山一道同云雨，明月何曾是两乡')
/*
根据id属性值从全文拿取唯一节点（Node）
*/
let domBtn = document.getElementById('btn')
/*
onclick:表示单击
给拿取的btn节点绑定单击事件，后面可以绑定一个有名的函数，也可以直接
绑定一个匿名函数
*/
domBtn.onclick = function(){
/*
innerText:属性，拿取节点中嵌套的值，不支持标签
*/
alert('button元素中的文本是'+domBtn.innerText)
}
}
</script>
</head>
<body>
<button id="btn">点我试试！！</button>
</body>
</html>2.JS原理
HTML》DOM文档对象模型：将正文全文看做一个对象，全部封装在文档节点document中，html和xml都只有一个文档节点，也就是html
JavaScript**不能直接修改**页面的样式和结构而必须通过文档对象模型来修改页面的结构和样式，浏览器内置两个解析器，一个是标签解析器，一个是脚本解析器，从上往下解析，如果出现解析异常则停止解析，通过控制台报错；如果解析无误，则将整个html文档节点封装进document中，全文只有一个文档节点。根据这个节点中的结构样式
document
html
head
body
title
meta
button
table
tr
td
Js中的的方法可以对这个模型进行增删查改，修改之后，文档对象模型与页面实际结构和样式不再统一，浏览器根据这个模型重新刷新页面，使之保持一致。我们这里去掉了window.onload之后那么浏览器从上往下解析，首先解析到的就是let domBtn = document.getElementById(‘btn’)从模型中根据btn这个id拿取元素节点，可是注意window.onload前提被删除了，整个页面还没有解析，模型未被创建，所以根本无法从模型中根据id拿取元素，所以报错。
那么是不是必须书写window.onload来保证模型创建完整呢？
不是必须书写，通常将js脚本书写在页面body闭合标签标签之前，保证最后执行js脚本。优先加载html和css 并且保证模型创建完毕。
3.JS实例二
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2)文档对象模型</title>
<style>
table{
width:200px;
border-collapse: collapse;
}
table,tr,td{
border:solid 2px red;
}
</style>
<script>
//窗口加载无误，执行此匿名方法
window.onload = function(){
//根据id从全文拿取一个元素节点
let domBtn = document.getElementById('btn')
//当按钮单击时，执行此匿名方法
domBtn.onclick = function(){
//根据table标签名拿取一个元素节点列表NodeList，这个NodeList封装了所有匹配table的元素
//也就是将所有标签名为table的元素，装到一个“数组”中
let domTb = document.getElementsByTagName('table')[0]
//控制台打印
//console.log(domTb)
//创建一个tr元素节点<tr></tr>
let domTr = document.createElement('tr')
/*
* 修改这个元素的节点，向内部添加文本或者超文本
* innerText:向元素节点中添加文本
* innerHTML:向元素节点中添加超文本
* 添加前:<tr></tr>
* 添加后:<tr><td style="color:coral">我是添加的一列</td></tr>
* 不管是innerHTML还是innerText如果元素节点中存在节点值不管是文本还是子元素则全部被覆盖
*/
domTr.innerHTML = '<td style="color:coral">我是添加的一列</td>'
/*
* 将组装好的tr追加到table中作为子元素，不影响原先的子元素
*
* 元素节点.appendChild(子元素)
* 元素节点中原先的子元素不受影响，追加到原先子元素之后
*/
domTb.appendChild(domTr)
//通过修改style属性来间接修改页面的样式
/*
* Math:计算内置对象，专门用来进行数学运算
* Math.floor():返回小于或者等于一个给定数字的最大整数
* Math.random():返回介于 0(包含) ~ 1(不包含)之间的数
* */
let r = Math.floor(Math.random()*255)
let g = Math.floor(Math.random()*255)
let b = Math.floor(Math.random()*255)
/*
* 节点.style.样式名 = 样式值
* 注意这里的样式名与CSS的样式名书写略有出入，不能出现- 必须 使用驼峰书写格式
* css:background-color
* js:backgroundColor
* font-size ==> fontSize
*
*/
//domTb.style.backgroundColor = 'rgb('+r+','+g+','+b+')'
/*
使用ES6提供的模板字符串来避免进行字符串的拼接
`${要输出的值}`
* */
domTb.style.backgroundColor = `rgb(${r},${g},${b})`
}
}
</script>
</head>
<body>
<button id="btn">添加一行</button>
<table>
<tr>
<td>我是默认存在的一列</td>
</tr>
</table>
<script>
/*
* js如果放置在此处，则不需要每次都添加window.onload
* 页面的加载顺序应该是
* html ==> css ==>js
* */
</script>
</body>
</html>4.DOM节点
- DOM中共有12种节点，最为常用的试以下五种，根据节点的不同NodeType，NodeValue，NodeName三个属性也不同
节点类型 | 描述 | NodeType | NodeValue | NodeName |
文档节点 | document,一个文档只能有一个文档元素，在html中就是html，xml中就是根元素 | 9 | 不可用 | 永远叫做#document |
元素节点 | 页面中的各种元素，例如 div p table，通过getElementById(‘idName’)等可以拿取，可以使用 innerHTML和innerText修改元素内的结构 | 1 | 不可用 | 标签名字 |
属性节点 | 一般是元素中的 class、id、src、href都属于属性 | 2 | 属性值 | 属性名 |
文本节点 | 就是嵌套在标签中的内容 | 3 | 嵌套的文本 | 永远是#text |
注释节点 | 8 | 不可用 |
5.节点相关方法及常用选择器
- 节点相关方法
方法 | 含义 |
firstChild | 获取元素的首个节点 |
lastChild | 获取元素的最后一个节点 |
childNodes | 获取元素的节点列表 |
appendChild | 在元素后边添加节点 |
parentNode | 获取父节点 |
- 常用选择器
类型 | 方法 | 描述 |
Node | document.getElementById(‘idName’) | 根据唯一的id属性拿取一个元素节点 |
NodeList | document.getElementsByTagName(‘tagName’) | 根据标签名拿取类数组，里边封装了所有附条件的元素节点 |
NodeList | document.getElementsByName(‘name’) | 根据name属性拿取类数组，里边封装了所有附条件的元素节点 |
NodeList | document.getElementsByClassName(‘classname’) | 根据class属性拿取类数组，里边封装了所有附条件的元素节点 |
使用JS打印九九乘法表
<script>
let str = ''
for(let a = 1;a<=9;a++){
for(let b = 1;b<=a;b++){
str += `${b}*${a}=${b*a}\t`
}
str += '<br />'
}
document.write(str)
</script>4.JS引用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>5)外部引入js文件</title>
</head>
<body>
<!--
onblur:失去焦点
此处函数传递的是实参
-->
测试1: <input type="text" name="test1"
onblur="func3('测试',true,100)"/>
<!-- 引入独立的js文件到本页面，类似css的外链式 -->
<script src="./script/myjs1.js"></script>
<!--
注意引入js文件的script标签中src表示源，后面是独立js文件的路径
script标签要么引入js文件要么直接书写，不允许同时引入和书写js
-->
<script src="./script/myjs2.js"></script>
</body>
</html>5.使用对象字面量和构造方法创建对象
1. 对象字面量
/*
对象字面量
let 对象名 = {
属性名:属性值,
属性名:属性值,
方法名:function(){
}
上变得是ES5的写法，简称为钩子函数
ES6简化为 方法名(){}
}
*/
let stu = {
name:'赵信',
age=10,
hobby:['吃饭','睡觉','打豆豆'],
run(){
console.log(`今年${this.age}岁的${this.name}非常喜欢${this.hobby[1]}`)
}
}- 拿取属性值
属性值 = 对象名.属性名- 调用方法
对象名.方法名()- 删除属性
delete 对象名.属性名
/*注意此处删除的是属性，而不是属性的值*/2. 使用构造方法创建灵活的对象
/*
使用构造方法创建灵活的对象
function 对象名(args1,args2){
this.args1 = args1
this.args2 = args2
this.方法名 = function(){
}
}
*/
function person(name,age,hobby){
this.name = name
this.age = age
this.hobby = hobby
this.run = function(){
if(age > 18){
console.log(`欢迎您回来${this.name}`)
}esle{
console.log(`年龄在18岁以下，禁止访问本页面`)
}
}
}
let oneperson = new person('尚朝晖',20,['游戏','学习'])
console.log(`${oneperson.name}\n${oneperson.hobby[0]}`)
oneperson.run()6.数组
1. 如何创建数组
/*括号里的数字是数组的长度*/
/*JS中所有的length都是属性*/
let arr = new Array(4)
arr[0] = 100
arr[1] = true
arr[2] = 'etoak'
arr[3] = null2. 如何遍历数组
- for循环遍历
for(let i = 0;i < arr.length;i++){
console.log(`数组元素值是${ar[i]}`)
}- for in循环**[ES5]**
/*
for(let key in arr){
如果是单值类型集合，那么这个key就是索引值
如果是键值对，则是属性名
}
*/
for(let key in arr){
console.log(`数组索引值是${key}`)
console.log(`数组元素值是${ar[key]}`)
}- for of循环**[ES6]**
/*
for(let val of arr){
这个val就是值
}
此循环不能用来迭代自己创建的js对象，因为自己创建的对象底层没有迭代器
*/
for(let val of arr){
console.log(`数组元素值是${value}`)
}- forEach
/*
arr.forEach(function(被遍历的对象,索引值){
注意被遍历的对象和索引值位置不能变
})
*/
arr.forEach(ar =>{
//...
})
arr.forEach(function(val.index){
console.log(`索引值是${index}`)
console.log(`数组元素值是${value}`)
})3. 向数组添加一个元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>8)小练习</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<div id="container">
<fieldset>
<legend>添加用户</legend>
<label for="nameid">姓名: <input type="text" name="name" id="nameid"
placeholder="请输入姓名" minlength="4" maxlength="8"></label>
<label for="emailid">邮箱: <input type="text" name="email" id="emailid"
placeholder="请输入邮箱"></label>
<label for="ageid">年龄: <input type="number" max="65" min="18" placeholder="岁" id="ageid"></label>
<button style="border-radius:18px;background-color:lightblue;">添加用户</button>
</fieldset>
<hr>
<div id="show"></div>
</div>
<script>
/*
* 创建一个数组
* */
const items = [
//注意level字段'1'为管理员 '0'为普通用户
{id:1,name:'elena',email:'et01@etoak.com',age:20,level:'0'},
{id:2,name:'penny',email:'et02@etoak.com',age:20,level:'0'},
{id:3,name:'matt',email:'et03@etoak.com',age:30,level:'0'},
{id:4,name:'damon',email:'et04@etoak.com',age:40,level:'0'},
{id:5,name:'admin',email:'et05@etoak.com',age:50,level:'1'},
{id:6,name:'stefan',email:'et06@etoak.com',age:55,level:'0'},
{id:7,name:'aleric',email:'et07@etoak.com',age:30,level:'0'},
{id:8,name:'damon',email:'et08@etoak.com',age:40,level:'0'},
{id:9,name:'jack',email:'et09@etoak.com',age:20,level:'0'}
]
//向数组中添加一个元素
/*
* 数组.push(追加的元素)
*
* 注意在Js中基本数据类型，在定义const常量之后划分内存地址，不能再次进行任何变动，
* 但是在数组，对象中，虽然也划分了内存地址，但是在数组和元素中可以进行任意的增删
* */
items.push({
id:10,name:'boonie',email:'et10@etoak.com',age:23,level:'0'
})
onload = ()=>{
//显示默认数据
show()
//拿取button按钮
let domBtn = document.getElementsByTagName('button')[0]
domBtn.onclick = ()=>{
//console.log('~~~~')
/*
* 点击添加按钮之后，表格中多出一行
* id:为现有数组的长度+1
* name:用户填写数据
* age:用户填写数据
* email:用户填写数据
* level:全都是'0'
* */
let domInputs = document.getElementsByTagName('input')
let name = domInputs[0].value
let email = domInputs[1].value
let age = domInputs[2].value
let item = {
id:items.length+1,
/*
* ES6:新特性
* 如果属性名和属性值重名，则直接书写即可不需要书写名值对形式
* */
name,
email,
age,
level:'0'
}
items.push(item)
//添加之后重新遍历数组
show()
}
}
//此函数用来拿取数据
function show(){
let table =
'<table id="tb"><thead><tr><th>ID</th><th>姓名</th><th>邮箱</th><th>年龄</th><th>权限</th><th>操作</th></tr></thead><tbody>'
items.forEach(item=>{
//tis:表示当前行的span元素节点
//this.parentNode:表示span的父节点，这里就是td元素节点
//this.parentNode.parentNode:表示tr元素节点
table +=
`<tr><td>${item.id}</td><td>${item.name}</td><td>${item.email}</td><td>${item.age}</td>
<td>${item.level=='0'?'普通用户':'管理员'}</td><td><span οnclick="del(this.parentNode.parentNode)">删除</span></td></tr>`
})
table += '</tbody></table>'
//将组装好的table放置进div中
document.getElementById('show').innerHTML = table
}
//此函数用来删除数据
function del(tr){
/*
* 这里拿取了tbody，之后调用removeChild来删除子元素传递过来的子元素tr
* */
document.getElementsByTagName('tbody')[0].removeChild(tr)
//tr.remove()
}
</script>
</body>
</html>JS比较
- 在JS中字符串比较没有equals()方法，一般用不同数量的等号进行比较
运算符 | 含义 |
= | 赋值 |
== | 两者如果是同一种数据类型则直接比较 否则转换成同一种数据类型进行比较 |
=== | 两者如果不是同一种数据类型，立刻返回false 是同一种数据类型，则进行比较 |
ES6新特性，箭头函数
在ES6中，匿名函数可以省略为箭头函数，类似于lambda表达式,匿名函数去掉function，在参数后添加 => 如果之后一个参数，则括号省略
上述forEach可以简略为
arr.forEach(val => console.log(`数组元素值是${value}`))
/*如果大括号内直接就是return语句，则大括号省略，return省略*/7.JS常用20个字符串方法
- 蓝色的与Java中用法一致，红色为JS新的
- charAt()
/*返回对应下标的字符*/
let str = '01234'
alert(str.charAt(0)) //0- charCodeAt()
/*返回对应下边字符的 Unicode 编码*/
let str = 'AaBb'
alert(str.charCodeAt(0)) //65- concat()
/*拼接字符串，不会改变现有的字符串，返回新的字符串*/
let str = 'Hello'
let newStr = str.concat('World ','JavaScript')
alert(newStr) // HelloWorld JavaScript- fromCharCode
/*从Unicode编码转换成字符*/
alert(String.frmCharCode(72,69,76,76,79))//HELLO- indexOf
/*查找指定字符串的第一次出现的下标，如果不存在返回-1*/
let str = 'HelloWorld'
alert(str.indexOf('l'))//2
/*从下边指定下标开始查找的方式，后边的参数是可选的*/
alert(str.indexOf('l',3))//3- lastIndexOf
/*查找指定字符串最后一次出现的位置*/
let str = 'HelloWorld'
console.log(str.lastIndexOf('l'))//8
/*指定开始搜索的位置*/
console.log(str.lastIndexOf('h',5))//-1- match
/*根据正则表达式在字符串中搜索匹配项，如果没有则返回null或者信息数组*/
let intRegex = /[0-9 -()+]+$/
let str1 = '999'
let str2 = '999 JS Coders'
//'999',index:0,input:'999'group:undefined
console.log(str1.match(intRegex))
//null
console.log(str2.match(intRegex))- replace
/*在字符串中用一些字符替换另外一些字符串，或者替换一个与正则表达式匹配的字符串*/
let myString = '999 JavaScript Code'
//999 Jqyery Code
console.log(myString.replace(/JavaScript/i,'Jquery'))
//The Jquery Code
console.log(myString.replace(new RegExp('999','gi'),'The'))- search
8. JS函数常见书写方式
- 直接在标签上绑定
<tagName 事件="函数1(实参)"></tagName>
<script>
function 函数1(形参){}
</script>- 直接在script书写，绑定匿名
<tagName>XXX</tagName>
<scrript>
onload = function(){
let arg = 拿去元素节点
arg.事件 = function(){}
}
</scrript>- 直接在script中书写，绑定有名函数
<tagName>XXXX</tagName>
<script>
onload = function(){
let args = 拿取元素节点
args..事件 = 函数名(实参)
}
function 函数名(形参){}
</script>- 直接调用函数
<tagName></tagName>
<script>
function 函数名(形参){}
函数名(实参)
</script>9.手动轮播图和验证
1.手动轮播图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10)简易相册</title>
<style>
body{
background-color: black;
}
div#container{
width:830px;
height:900px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="container">
<table>
<caption><img src="./image/logo.png"></caption>
<tr>
<!--
type="image"
引入一张图片，这张图片可以点击，如果放置在form表单内，则可以提交表单
-->
<td><input type="image" src="image/left.gif"
onclick="change('left')"></td>
<td><img src="image/1.jpg" id="mypic"></td>
<td><input type="image" src="image/right.gif"
onclick="change('right')"></td>
</tr>
</table>
</div>
<script>
let currentPage = 1
function change(flag){
//拿取img元素
let domImg = document.getElementById('mypic')
if(flag=='left'){
if(currentPage>1){
currentPage--
}else{
alert('已经是首页了')
}
}
if(flag=='right'){
if(currentPage<6){
currentPage++
}else{
alert('已经是末页了')
}
}
domImg.src = `image/${currentPage}.jpg`
}
</script>
</body>
</html>2. 表单验证
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>11)表单验证</title>
</head>
<body>
<!--
对表单项进行验证
onsubmit:表单提交时，如果return后面的函数返回false，则表单无法提交
否则表单可以提交
-->
<form action="wow10.html" method="get"
onsubmit="return checkAll()">
<!--
1)单行文本输入框
要求用户输入在4到8位之间
-->
<label for="nameid">用户姓名:</label>
<input type="text" name="name" id="nameid" required placeholder="请输入用户姓名"
autocomplete="off" onblur="checkName()" />
<span id="name_msg"></span>
<br>
<label for="passid">用户密码:</label>
<!--
this:书写在哪里就表示本元素
-->
<input type="password" name="pass" id="passid" required placeholder="请输入用户密码"
autocomplete="off" onblur="checkPass(this.value)" />
<span id="pass_msg"></span>
<br>
<input type="submit" value="提交">
<input type="reset" value="取消">
</form>
<script>
let flagName = false
let flagPass = false
function checkName(){
//拿取span
let domSp = document.getElementById('name_msg')
//拿取单行文本输入框
let domInput = document.getElementById('nameid')
if(domInput.value.length<4||domInput.value.length>8){
//添加错误提示
domSp.innerHTML='<img src="image/wrong.png">用户姓名不能小于4位或者大于8位'
//文字设置为红色
domSp.style.color = 'red'
flagName = false
return
}
domSp.innerHTML='<img src="image/right.png">用户姓名符合要求'
domSp.style.color = 'green'
flagName = true
}
function checkPass(d){
//拿取span
let domSp = document.getElementById('pass_msg')
if(d.length<4||d.length>8){
domSp.innerHTML='<img src="image/wrong.png">用户密码不能小于4位或者大于8位'
domSp.style.color = 'red'
flagPass = false
return
}
domSp.innerHTML='<img src="image/right.png">用户密码符合要求'
domSp.style.color = 'green'
flagPass = true
}
function checkAll(){
return flagName&&flagPass
}
</script>
</body>
</html>10 过滤器⚠️
<input type="checkbox" name="hobby" value="soccer">足球
<input type="checkbox" name="hobby" value="travel">旅行
<input type="checkbox" name="hobby" value="running">跑步
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="shopping">购物
<input type="checkbox" name="hobby" value="read">阅读
<span id="hobby_msg"></span>
<script>
let domInputsArray = Array.from(domInputs)
//使用过滤方法拿取已经被选中的
/*
* 需要被过滤的数组.filter(function(需要被过滤数组中的每个元素) {
* return 过滤条件
* })
* 使用箭头函数
*
* 需要被过滤的数组.filter(需要被过滤数组中的每个元素=>过滤条件)
* */
let domInputsChecked = domInputsArray.filter( domInputArray => domInputArray.checked )
if(domInputsChecked.length<3){
domSp.innerHTML = '爱好不能少于3个'
domSp.style.color = 'red'
}else{
domSp.innerHTML = '爱好广泛'
domSp.style.color = 'green'
}
</script>ES6新特性
第六章 dom4j
1. 创建lib目录
FIle -> Project Structure -> Modules -> Dependencies
点击 加号 选择 1.JARs or directory 选择 JAR directory
2. 使用Dom4j读取xml文件
- 创建扫描仪
SAXReader sax = new SAXReader();- 创建文档对象模型
//这个对象模型就是要读取的文件
DOcument doc = sax.read(new File("test.xml"));- 获取根元素
Element root = doc.getRootElement();- 获取一级子元素并遍历
List<Element> firstList = root.elements();
for(Element firstEle : firstList){}- 获取每个以及子元素的属性和值
List<Attribute> firstAttrs = firstEle.attribute();
for(Attribute firstAtt : firstAttrs){
sout(firstAtt.getName());
sout(firstAtt.getValue());
}xml文件如下
<?xml version="1.0" encoding="utf-8" ?>
<root>
<student id="et01" name="elena">
<email>et01@etoak.com</email>
<phone>1111111</phone>
</student>
<student id="et02" name="stefan">
<email>et02@etoak.com</email>
<phone>222222</phone>
</student>
<student id="et03" name="damon">
<email>et03@etoak.com</email>
<phone>3333333</phone>
</student>
<student id="et04" name="tom">
<email>et04@etoak.com</email>
<phone>4444444</phone>
</student>
</root>java代码如下
package com.etoak.test;
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import java.io.File;
import java.util.List;
/**
* Created by eleven on 2020/3/17.
*/
public class Readxml {
public static void main(String[] args) {
try{
//1.拿取Xml解析器，类似Scanner
SAXReader sax = new SAXReader();
/*
2.使用SAXReader对象对xml文件进行解析
如果解析无误则返回一个文档对象模型，
这个文档对象模型与xml完全相同的结构
*/
Document doc = sax.read(new File("etoak.xml"));
//3.拿取根元素
Element root = doc.getRootElement();
System.out.println("根元素名字是：" + root.getName());
//4.拿取任意一个一级子元素
List<Element> firstList = root.elements();
for (Element firstEle : firstList){
System.out.println("一级子元素的元素名是:" + firstEle.getName());
//拿取一级子元素的属性
List<Attribute> firstAttrList = firstEle.attributes();
for(Attribute fisrtAttr : firstAttrList){
System.out.println("属性名是：" + fisrtAttr.getName());
System.out.println("属性值是：" + fisrtAttr.getValue());
}
//拿取二级子元素
List<Element> secondList = firstEle.elements();
for (Element secondEle : secondList) {
System.out.println("二级子元素名字是：" + secondEle.getName());
System.out.println("二级子元素内嵌套的值是：" + secondEle.getText());
}
}
}catch(Exception e){
e.printStackTrace();
}
}
}3.使用Dom4j创建xml文件
- 创建文档对象模型
//这个对象模型是空的
Document doc = DocumentHelper.createDocument();- 添加节点
//添加根节点
Element root = doc.addElement("root");
//添加一级子节点
Element one = root.addElement("one");
//添加二级子节点
Element two = one.addElement("two");
//给一级子节点添加属性和值 第一个参数为属性名，第二个为属性值
one.addAttribute("id","01");
//给二级子元素内赋值
two.setText("two");- 创建流
OutputStream os = new FileOutStream("test.xml");- 规定输出格式
//有缩进，跟自己写的格式一致
OutputFormat format = OutputFormat.createPrettyPrint();
//规定输出编码
format.setEncoding("utf-8");- 输出
//第一个参数为要输出文件的路径，第二个为输出的格式
XMLWriter xw = new XMLWriter(os,format);
//把文档对象模型输出
xw.write(doc);
//关闭输出
xw.close();package com.etoak.test;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;
import java.io.FileOutputStream;
import java.io.OutputStream;
public class WriteXml {
public static void main(String[] args) {
try {
/*
* 使用Java代码利用DOM4j技术来创建一个XML
* */
//1)创建一个文档对象模型
Document doc = DocumentHelper.createDocument();
//2)创建一个根元素
/*
* <root>
* </root>
* */
Element root = doc.addElement("root");
//3)创建一级子元素
/*
* <root>
* <student></student>
* </root>
* */
Element student = root.addElement("student");
//给一级子元素添加属性
/*
* <root>
* <student id="et001" name="elena"></student>
* </root>
* */
student.addAttribute("id","et001");
student.addAttribute("name","elena");
//4)创建二级子元素
/*
* <root>
* <student id="et001" name="elena">
* <email>XXXX</email>
* <phone>XXXX</phone>
* </student>
* </root>
*
* */
Element email = student.addElement("email");
email.setText("et01@etoak.com");
Element phone = student.addElement("phone");
phone.setText("111111");
//再次添加一个一级子元素
/*
* <root>
* <student id="et001" name="elena">
* <email>XXXX</email>
* <phone>XXXX</phone>
* </student>
* <person>XXXX</person>
* </root>
*
* */
Element person = root.addElement("person");
person.setText("我是Person中的值");
//设置一个流，参数表示生成的xml叫什么输出到哪里
OutputStream os = new FileOutputStream("etoak2.xml");
//设置xml的格式
//此处设置为标准格式，自带换行，与我们书写习惯相同，否则输出的xml从左往右不换行
OutputFormat format = OutputFormat.createPrettyPrint();
//设置xml文件的编码
format.setEncoding("utf-8");
//输出xml文件
//括号内传递两个参数，第一个表示输出到哪里叫什么，第二个是格式和编码是什么
XMLWriter xw = new XMLWriter(os,format);
//根据拼装好的文档对象模型进行输出
xw.write(doc);
xw.close();
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
