初级证书考试

HTML是什么

Html是超文本标记语言

HTML的基本结构：

<!DOCTYPE html>声明文档类型 ，doctype不区分大小写，没有5

<html>：是整个文档的根节点，它包含了两个子节点

<head>：主要描述文档设置信息，

                   比如字符集（有utf-8） ，标题title

<body>：是文档的主体，需要呈现的内容

 

<!DOCTYPE html>

<html>

       <head>

              <meta charset="utf-8">

              <title></title>

              <style></style>

              <link />

       </head>

       <body></body>

</html>

属性的写法：

  1. 在开始标签中指定，来表示标签的性质和特征
  2. 通常以“属性名”=“值”的形式表达,有时候只需要属性名
  3. 一个标签可以指定多个属性
  4. 指定多个属性是不区分顺序
    1. 网页结构层次清晰
    2. 更容易被搜索引擎收录
    3. 更容易让屏幕阅读器读出网页内容

语义化标签作用：

块级标签：

div  h1-h6 p 列表标签（ul ol li dl dt dd） form table

块级元素的特点：display：block

1、  可以设元素的，宽度，高度，行高，内外边距

2、  独占一行，每个块都是从新的一行开始

3、  如果不设置宽度，那么默认为父容器的100%

 

行内标签：

span a br i （斜体）em（强调） sub lable

行内元素的特点：display：inline

  1. 不能设置元素的，宽度，高度，内外边距
  2. 可以和其他元素在一行
  3. 宽度是由包含的内容决定的

行内块标签：img input select button textarea iframe

行内块级元素的特点：display:inline-block

  1. 和其他元素在同一行
  2. 可以设置宽高和内外边距。

超链接a：

target

target属性指定目标页面的打开方式：其值包括

_self :在当前页面打开  默认属性

_blank:在新页面打开

_parent:。。。框架中用的

_top:在整个窗口打开

title:悬停显示；alt:加载失败

跳转：

（1）       页面跳转：_blank

（2）       页内跳转：锚点：#id

（3）       其他页面页内

（4）       Html5 新增的功能

电话：tel

邮件：mailto

      短信：sms

路径：

         “..”表示上一级目录

         “.”表示当前目录

Src与href的区别：

src是指向物件的来源地址，是引入，在 img、script、iframe等元素上使用

href 是超文本的引用 指向需要连接的地方，是与页面相关联的，是引用，在link 和a等元素上使用。

表格:

Row 行

Col:列

border="1" 边框

cellspacing="0"  单元格之间 间距

cellpadding="10" 内容和 边框的距离

 

表格的组成部分：

<table>:一个表格

<caption>表格标题

<thead>表头

<tbody>表格的主体（数据）部分

<tfoot>表尾，一般显示汇总信息

<tr>行

<th><td>定义一个单元格，<th>一般用于表头，有加粗样式，<td>一般用于主体，没有加粗

行、列合并：

rowspan ：横跨多个行

colspan：横跨多个列

表单：<form>

action属性：指定提交的地址

methods属性：指定提交方式 get/post

Get和post的区别：

（1）       长度的限制，get限制为2k字符以内

（2）       安全性：get提交的数据会显示在地址上，因此有些敏感数据会容易被截取，

输入框：

文本框：type=“text”

         Maxlength：指定文本框能够接收的最大字符个数

         Size：指定文本框的大小（宽度）

         Value :指定初始值

         Id：唯一值，一般用于css或者js连用。

密码框password

单选：radio

多选：CheckBox

下来菜单:select  ->option

 

2对强调标签：

<i>倾斜</i>      <em>倾斜</em>（强调）                                 

 

<b>加粗</b>                          <strong>强壮</strong>（强调）

常见的实体符号

空格：&nbsp；

版权（copyright）： ©  &copy；

注册商标：   ®    &reg；

商标：  ™  &trade;

元（yen）：  ¥   &yen；

 

单标签 ：br(换行),hr(分割线)，img,input

双标签:p，div,h1-h6,select,button

Input的按钮和button的区别

     Input的按钮，按钮的内容，通过value属性来设置，内容比较单一，往往是文字

     <button ></button>，内容可以是任意的东西，图片，一大块的文字

CSS

网页的分工

         Html:决定网页有什么内容；结构

         CSS：决定网页效果，是否好看；样式

                   层叠样式表：妹子腿，很长，很细 –》层叠之后：又长又细

         JavaScript(JS)：行为，动画，动作

 

引入方式：

内联形式：写在标签上，优先级最高

内部样式：写在header标签中

外部样式：单独一个CSS文件，需要引入

优先级：就近原则

颜色：

（1）      十六进制形式：#ff0000

（2）      RGB: rgb(128,0,0) 等价于#800000

（3）      RGBA：在RGB颜色的基础上增加了表示透明度的分量Alpha

（4）       HSL：用色调，饱和度，明度三个分量来表示颜色

（5）       HSLA：在HSL颜色的基础上增加了表示透明度的分量Alpha

（6）       预定义颜色：red blue green

CSS单位：

  1. 绝对单位：px pt(字体单位) cm mm
  2. 相对单位：%和em（相对于他爹） rem（相对于根元素）

选择器

元素选择器：标签名{}

Id选择器：#id{}

类选择器：.classname{}

属性选择器：

选择器

描述

[attribute]

选取带有指定属性的元素

[attribute=value]

选取带有指定属性和值的元素

[attribute~=value]

选取所有属性值中包含指定词汇的元素

[attribute|=value]

选取带有以指定值开头的属性值的元素，这个值必须是整个单词

[attribute^=value]

匹配属性值以指定值开头的每个元素

[attribute$=value]

匹配属性值以指定值皆为的每个元素

[attribute*=value]（包含）

匹配属性值中包含指定值的每个元素

优先级：

就近原则，越精确优先级越高

！importrant>行内样式>id选择器>class类选择器>标签选择器

文本属性：

1， 文本颜色：color

2， 文本对齐：text-align  ：左中右

3， 文本装饰：text-decoration ：下划线、删除线、上划线

4， 首行缩进：text-indent：2em

5， 文本行高：line-height

6，  字符间距：letter-spacing

7，  文本的书写方向：direction

8，  阴影效果：text-shadow

9，文本大小写：text-transform：转大写up，小写low..

10，元素内空白：line-height 

11，单词之间距离：word-spacing

字体属性：

字体体系：font-family：宋体，

字体粗细：font-weight：加粗，bold,变细

字体大小：font-size：大写

是否倾斜：font-style：倾斜

是否大写：font-variant

背景属性：

  1. 背景颜色：background-color
  2. 背景图片：background-image ：url
  3. 背景重复：background-repeat  
  4. 背景跟随内容滚动：background-attachment
  5. 背景定位：background-position
  6. 用一条定义以上五个背景属性：background

列表属性：

List-style-image：将图像设为列表项的标志

List-style-position：设置列表中列表项标志的位置

List-style-type：设置列表项标志的类型

List-style-type：属性值：

None 无标记

Disc 默认，标记是实心圆

Circle 标记是空心圆

Square 标记是实心方块

Decimal 标记是数字

尺寸属性：

Height 高度        Width 宽度                        Max-width 最大宽度

Max-height 最大高度                  Min-width 最小宽度                Min-height 最小高度

盒子模型：

Margin：外边距

padding内边距：

border：边框

（1）和对面的一样

（2）元素占用的位置：2个外边距 + 2个边框 +2个内边距 +内容；

（3）可以通过box-sizing:设置是往里面压缩，还是往外膨胀

Border：边框

Border-width：边框宽度 px

Border-style：边框线条类型：

Border-color：边框颜色

border-radius:圆角

border:1px solid yellow;

定位：

Relative：

参照物：他自己原来位置

不脱流，会后面元素没影响

Absolute：

参照物：祖宗中设置了定位的那个；父相子绝

脱流

Fixed：

参照物：浏览器窗口

脱流

 

         浮动：

                   脱流，不能撑起父容器的高度

                  

清除浮动的方法：

（1）直接给父容器写死高度

（2）给父容器添加：overflow ：hidden

（3）给同级的子元素最后添加一个空元素（元素必须是块级），空元素设置clear：both

（4）设置伪类（元素）after，和（3）原理一样

 

设置浮动之后，元素默认默认编程行内块

IE盒模型和标准盒模型切换：

Box-sizing：border-box（往里面挤压）/content-box（往外扩展）

visibility和display区别

display:none；none没了，什么都没了，位置和内容都没有了

         visibility: hidden;仅仅是内容没了，位置还在

         hidden属性：什么都没了

 

 

HTML5

HTML5 和HTML4的区别

  1. 某些元素可以省略结束标签（<p> <li><dt><dd>）不推荐
  2. 没有结束标签的元素（<br/>）等
  3. 属性值可以不用引号括起来
  4. 标签不在区分大写
  5. 某些标签的属性可以省略属性值，通常为boolean类型。

文档结构元素：

header（头）

footer（脚）

article（文章）

section（段落）

nav（导航）

aside（侧边栏）

figure元素与figurecation元素

hgroup（标题组，group组）

文本格式化元素：

mark （高亮）

time （时间）

页面增强元素：

meter （计量）

progress （进度条）

Cite元素《》（显示效果是斜体文字）

Small 元素 小

Details （详情）元素与summary（概述）元素

多媒体元素：

音频Audio

视频video

自动播放：autoplay，

Controls：控制器（显示进度条、暂停/播放、声音等按钮）

Loop:循环播放

 

新增表单元素：

url（url地址）类型

number（数字）类型

search（搜索）类型

Tel（电话）类型

Email（邮箱）类型

Date（日期）类型

Datetime（日期时间）类型

Datetime-local（日期时间）类型

Week（周）类型

Month（月）类型

range（滑块）类型

Color（颜色）类型

新增表单元素属性

Placeholder（文本框提示）：输入框空的时候显示

Requried（必填的）

Maxlength（允许输入最长字符数）

Label标签for属性：一般和input一起使用

Select中optgroup（选项组），multiple（多选）

Form属性

autofocus（自动获取焦点）

autocomplete（自动填充）

Hidden（隐藏）：和（display：none）效果一样

 

Novalidate（validate校验）

pattern（指定格式校验）

spellcheck（拼写检查）

CSS3

新增网络字体

（1）先注册

@font-face

{

    font-family: myFont;

    src: url(sansation_light.woff);

}

（2）在使用

新增文本相关属性

内容比较长的时候，使用省略号（…）

       #p2{

              overflow:hidden;  超出部分隐藏

              white-space:nowrap;  不换行

              width: 200px;   固定宽度

              text-overflow: ellipsis;  超出使用省略号

       }

 

新增背景属性

Background-clip       背景的绘制区域

Background-origin   背景图片的定位区域

Background-size      背景图片的尺寸

 

 

新增盒子模型属性

Border-radius  边框圆角半径

Box-shadow     阴影

resize       调整尺寸

 

 

变形属性transform

Translate：位移

Rotate：旋转

Scale：缩放

Skew：倾斜

 

3D变形属性

rotateX:沿X轴旋转

rotateY:沿Y轴旋转

rotateZ:沿Z轴旋转

兄弟选择器

选择器

描述

E  F（下一级）

选择E元素的后代元素F

E > F （下一级）

选择元素的直接后代元素F

E+F （同级）

选择E元素的第一个弟元素F

E~F

选择E元素的所有弟元素F

属性选择器

选择器

描述

[attribute]

选取带有指定属性的元素

[attribute=value]

选取带有指定属性和值的元素

[attribute~=value]

选取所有属性值中包含指定词汇的元素

[attribute|=value]

选取带有以指定值开头的属性值的元素，这个值必须是整个单词

[attribute^=value]

匹配属性值以指定值开头的每个元素

[attribute$=value]

匹配属性值以指定值皆为的每个元素

[attribute*=value]

匹配属性值中包含指定值的每个元素

伪类选择器

伪类名

描述

:first-child

父元素的第一个子元素

:last-child

父元素的最后一个子元素

:nth-child(n)

父元素的第n个子元素

:first-of-type

父元素的第一个指定类型的子元素

:last-of-type

 

:nth-of-type(n)

 

伪元素选择器

/* 默认 */

a:link {color: #FF0000;text-decoration: underline;}

 

/* ed，过去式，点击过之后的 */

a:visited {color: #00FF00; text-decoration: none;}

 

/* hover 上面*/

a:hover {color: #000000; text-decoration: none;}

 

/* 活跃，鼠标左键点击了，还没放开 */

a:active {color: #FFFFFF; text-decoration: none; }

 

伪元素名

描述

:enable

当前处于可用状态的元素

:disable

当前处于不可用状态的元素

:checked

当前处于选中状态的元素

:selection

当前选择的内容

 

过渡（transition）、动画（Animation）

过渡（transition）：

通过transition的属性设置元素的，让元素的变化 有一个过程，而不是直接看到结果。只能设置开始和结束。

transition的优点在于简单易用，但是它有几个很大的局限。 

（1）transition需要事件触发，所以没法在网页加载时自动发生。 

（2）transition是一次性的，不能重复发生，除非一再触发。 

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 

属性

描述

Transition-property

指定过渡的CSS属性

Transition-duration

动画花费的时间

Transition-timing-function

指定过度函数（匀速、先加速在减速、）

Transition-delay

延迟时间（多久之后开始）

动画（animation）

CSS3的animation制作动画效果主要包括两部分：

（1）用关键帧（@keyframes）声明一个动画，

（2）在animation调用关键帧声明的的动画。

 

只要设置了该属性，元素就能动起来。那么怎么设置该属性呢，

（a）直接写死在CSS中.

（b）通过JS动态添加，这是一般将动画相关的属性单独定义个class,然后给该元素加上。

 

 

过渡和动画的区别

Transition：

对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。

Animation：

对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键贞。

Transition与Animation:

transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

 

 

 

JavaScript

JS是什么

HTML：结构

CSS：样式，

JS:行为，动作。

解释性语言：假设写了100行代码，第99行有错误，前面98行正常运行。

Javascirpt

方式一：<script >  script在里面写  </script>

方式二：<script src="jQuery/jquery3.4.1.js"></script>

变量的定义（用var定义）

变量：字母，数字，特殊字符组成；不能使用数字开头；不能使用关键字（if,var）

运算符

（1） /有小数

（2）===：值和类型都一样结果才是true

（3）++n,n++,就看++在前面还是后面

（4）&&：碰到一个false不会再往下执行，同时

（5）||:碰到一个true，不会再往下执行，或者，

选择结构

              if(){

                    

              }else if(){

                    

              }else{

                    

             

循环结构

While,for,do..while

         While和do…while有区别，

         Do…while至少执行一次循环，for和while可能一次都不执行。

循环的控制关键字：break，continue

         Break：整个循环都没了

         Continue:只是本次循环没了

数组

         数组可以存储很多个元素，每个元素给一个房间号（下标）；

         数学里面：A1 + A2 + A3 + AN =   =》A[1]

         在计算机中，程序计数是0 开始，下标是从0 开始

特别注意：

（1）数组和循环的结合，看清楚下标

（2）push(尾添加)   pop(尾删除)

（2）unshift(头添加)  shift(头删除)

（3）concat(连接)  join（数组转成字符串）

（4）sort(升序排序)    reverse（翻转）

字符串

字符串的本质是数组

（1）length长度

（2）charAt（）获取某个字符

（3）indexOf从头开始找下标；lastIndexOf从后头开始找下标

（4）split（）,分割变成数组

（5）trim()：去除2端空格，仅仅是2端

（6）replace（原始的，新的）替换

（7）substr(开始下标，长度)；substring(开始下标，接收下标)   截取

（8）转大小写a.toUpperCase() //转大写；a.toLowerCase()

    函数

（1）使用function关键字进行声明；直接使用函数名进行调用

（2）函数必须调用才会被执行。不调用不执行

（3）函数的参数 也是 可以是 参数

（5）如果全局变量和局部变量 同名：就近原则；在局部中window.a，a自动变成全局变量。

（6）return可以返回多个值？？对？？多个值放到数组中。

 

 

事件

什么是事件

先安装监控（监听），小偷偷东西了（事件源），警察抓他（行为处理）

常见事件

当什么：on

鼠标(mouse)事件

         单击（click）、双击(double click)、移动(move)、按下(down)、弹起(up)、进入(enter)、离开(leave)

键盘(key)事件

         按下、弹起

         建码：每个键都有一个码，为了区分

其他事件

         焦点（focus）

         获得焦点：onfocus

         失去焦点：onblur,光标离开输入框，去检验输入的格式对不对。

         当内容改变：onchange

         表单提交：onsubmit

事件写法

方式一：<input type="button" onclick="click_()" value="点击">

方式二：var div1 = document.getElementById("div1");

                   div1.onclick = function(){

                            alert("aaa");

                   }

方式三：div2.addEventListener("click",function(){

                            alert("警察逮住2")

                   })

事件名称问题:有时候有on,有时候没有on;可以通过测试得到，

在程序中写上on,如果报错就把on去掉。。

 

捕获和冒泡

冒泡：从子元素 到 父元素。。。  ；默认是冒泡

捕获：从父元素 到 子元素
阻止冒泡：     e.stopPropagation();

小鱼吐泡泡：从底下开始的：冒泡

DOM元素（操作HTML）

（1）获取元素

（1）getElementById

（2）getElementsByTagName（标签名）

（3）getElementsByClassName（class属性）

（4）getElementsByName(name属性)

总结：获取元素可以根据标签名获取、也可以根据id、name、class属性来获取。根据id属性获取的结果是一个元素，而其它的获取的是一个集合（数组）。

（2）修改和获取

         （1）值的获取与设置

普通标签： innerText(文本)、innerHTML（文本和标签）

input标签： value

 

（2）修改样式

a. xxx.style.yyy

b. xxx.classname = "……"（相当于修改了class属性）

BOM

概念：BOM browser object model

浏览器提供了一些对象，这些对象有一些方法（函数），一个函数一个功能，浏览器给你提供了很多的功能

常用对象

Window:窗口，浏览器的窗口

Open： 打开窗口

close: 关闭一个窗口。

location：地址

http://127.0.0.1:8848/JS/aaa.html

协议：//主机：端口/路径

location.reload():刷新，重新加载

location.href = http://www.baidu.com 设置URL地址，可以实现跳转

history:历史记录

记录当前窗口的历史，可以进行页面的转换。

back:返回上一页

forward:进入下一页

go（2）：进入确定的哪一页（-1时为回到上一页）

弹窗

alert()：警告提示框。

prompt(“提示的信息”,”默认值”)：信息提示输入框

confirm(“提示的信息”)确认框。确认是否删除

cookie

cookie的作用：在本地浏览器存储数据。常用于记住账号等

一次只能存储一个

document.cookie ="名字=值;"+"expires="+date;

如果过期时间不写，浏览器关闭，数据丢失

定时器和延时器

setInterval(“函数”,“毫秒数”);不断执行，

clearInterval(计时器);//停止一个计时器。

setTimeout(“函数名”,”毫秒数”)；只执行一次

JQuery

3组动画

显示（show）、隐藏（hide）、toggle（显示或隐藏）

淡入（fadeIn）、淡出（fadeOut）、fadeTo

上卷（slideUp）、下拉（slideDown）、slideToggle

动画animate

$("div").animate({

              width:'100px'

       },2000,function(){

              alert("动画执行完成");

       })

获取与设置值

 

text() 获取（设置）文本；   html()获取（设置）文本或HTML

val()：获取（设置）input输入框的内容

attr()：属性 获取 或 设置

 

操作css类（class）只写名字不需要点（.）

1、addClass("classname"):添加CSS 类class样式

2、removeClass() :删除

3、toggleClass() : 如果不存在则添加类，如果已设置则删除之

元素的添加

append：成为最后一个 儿子 ：下一级

prepend：成为最前面 一个 儿子：下一级

after：成为的弟弟：同级

before成为他大哥：同级

remove：把自己删除

empty：把孩子删除，自己还在

导航

parent()：父元素，他爹

find()：找后代

siblings()：所有的兄弟

next()：下一个弟弟

prev()：上一个哥哥

webapp

利用meta标签对viewport进行控制

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

 

Flex

弹性布局

老爹：容器

儿子：项目

posted @ 2021-06-16 21:29  小闫爱前端  阅读(135)  评论(0)    收藏  举报