前端三件套学习

桥逗麻袋。

已于 2022-09-18 18:31:42 修改

阅读量1.3k

点赞数 2

分类专栏：前端文章标签：前端学习 css html javascript

于 2022-05-18 21:23:55 首次发布

本文链接：https://blog.csdn.net/qq_46020268/article/details/124851480

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5的基本结构和标签，包括HTML5的头部声明、元素、语义化标签、表格、表单、多媒体和样式控制。同时，探讨了CSS的基础知识，如引入样式、选择器、文字样式、布局和定位。此外，还涵盖了JavaScript中的DOM操作、事件处理和对象属性。内容旨在帮助初学者快速掌握前端开发的基础技能。

摘要由CSDN通过智能技术生成

前端三件套学习

本文使用Typora编写，用此软件，可以查看完整效果。

如果文档中有任何错误，请评论指正，互相进步。谢谢

1、HTML

1.1 关于html文件的解析

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

<!-- 申明标签 -->
<!DOCTYPE html> 
<!-- html是整个文档开始的标签 -->
<html lang="en">
<!-- 页头，我们可以在里面编写文档标签，引入相关js文件 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 页身，标签都写在这里面 -->
<body>
    
</body>
</html>

关于head标签的解析

`<head>`	说明
`<title>`	标题，会在标签页显示
`<meta>`	定义网页的基本信息（供搜索引擎）
`<style>`	定义CSS样式
`<link>`	链接外部CSS文件或脚本文件
`<script>`	定义脚本语言
`<base>`	定义页面所有链接的基础定位（用得很少）

body标签代表页面的“身体”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。

1.2 关于h5中的标签

关于标签中的样式，在css中讨论，这里只介绍标签

段落标签：

标签	语义	说明
`<h1>~<h6>`	header	标题（h1最大，依次变小）
`<p>`	paragraph	段落标签（标签内容独占一行）
`<br>`	break	在html中不支持手动换行，想要换行，需要用到这个标签
`<hr>`	horizontal rule	水平线（显示一条线）
`<div>`	division	分割（块元素）
`<span>`	span	区域（行内元素）

文本格式化标签：

标签	语义	说明
`<strong>`	strong（加强）	加粗
`<em>`	emphasized（强调）	斜体
`<cite>`	cite（引用）	斜体
`<sup>`	superscripted（上标）	上标
`<sub>`	subscripted（下标）	下标

网页特殊符号：“ ” 一个空格，不需要记忆，可以查特殊符号表

特殊符号	说明	代码
`"`	双引号（英文）	`"`
`‘`	左单引号	`‘`
`’`	右单引号	`’`
`×`	乘号	`×`
`÷`	除号	`÷`
`>`	大于号	`>`
`<`	小于号	`<`
`&`	“与”符号	`&`
`—`	长破折号	`—`
\|	竖线	\|
`§`	分节符	`§`
`©`	版权符	`©`
`®`	注册商标	`®`
`™`	商标	`™`
`€`	欧元	`€`
`£`	英镑	`£`
`¥`	日元	`¥`
`°`	度	`°`

块、行元素：

块元素：

1. 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；

2. 块元素内部可以容纳其他块元素或行元素；

行元素：

1. 可以与其他行内元素位于同一行；

2. 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

div和span区别如下：

div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。

div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。

1.3 标签与标签代表的意思

标签	英文	含义
div	division	分割（独占一行）
span	span	区域
p	paragraph	段落
ol	ordered list	有序列表
ul	list item	列表项
dl	definition list	定义列表
dt	definition term	定义术语
dd	definition description	定义描述
h1~h6	header1 ~header6	标题1~标题6
hr	horizontal rule	水平线
a	anchor	超链接
strong	strong	强调（加粗）
em	emphasized	强调（斜体）
sup	superscripted	上标
sub	subscripted	下标
br	break	换行
fieldset	fieldset	域集
legend	legend	图例
caption	caption	标题（表格、图像等）
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格
td	td	表身单元格

列表标签：

标签	语义	说明
ol	ordered list	有序列表
ul	unordered list	无序列表
dl	definition list	定义列表

1.4 有序列表

<ol>
    <li>抽烟</li>
    <li>喝酒</li>
    <li>烫头</li>
</ol>

1显示效果

抽烟
喝酒
烫头

1.5 无序列表

<ul>
    <li>抽烟</li>
    <li>喝酒</li>
    <li>烫头</li>
</ul>

显示效果

抽烟
喝酒
烫头

1.6 定义列表

<dl>
    <dt>抽烟（定义名词）</dt>
    <dd>用嘴巴抽（定义描述）</dd>
</dl>

显示效果

抽烟（定义名词）

用嘴巴抽（定义描述）

1.7 表格

标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格

示例

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

显示效果

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

关于表格的完整性：

<table>
    <caption>标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <!-- 表头的单元格 -->
            <th>单元格1</th>
            <th>单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <!-- 表脚单元格 -->
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
    </tfoot>

显示效果

标题
单元格1	单元格2
单元格1	单元格2
单元格1	单元格2
单元格1	单元格2

合并单元格

<table>
    <!--第1行-->
    <tr>
        <td>姓名:</td>
        <td>小明</td>

    </tr>

    <!--第2行-->
    <tr>
        <!-- 合并单元格 -->
        <td rowspan="2">喜欢水果:</td>
        <td>苹果</td>
    </tr>
    <!--第3行-->
    <tr>
        <td>香蕉</td>
    </tr>
</table>

显示效果

姓名:	小明
喜欢水果:	苹果
喜欢水果:	香蕉

合并列：

<table>
    <!--第1行-->
    <tr>
        <td colspan="2" >信息</td>
    </tr>
    <tr> 
        <td >姓名:</td>
        <td>小明</td>
    </tr>
    <!--第2行-->
    <tr>
        <!-- 合并单元格 -->
        <td rowspan="2">喜欢水果:</td>
        <td>苹果</td>
    </tr>
    <!--第3行-->
    <tr>
        <td>香蕉</td>
    </tr>
</table>

显示效果

信息
姓名:	小明
喜欢水果:	苹果
	香蕉

1.8 图片标签

<img src="" alt="">

关于img标签我们需要掌握以下三个属性

属性	说明
src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

1.9 超链接

超链接根据链接对象的不同分为：

1.外部链接

2.内部链接：(1)内部页面链接；(2)锚点链接；(锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分)

<a href="" target=""></a>

关于target属性

target属性值	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

1.10 表单

表单标签共有4个：、、和。其中和是配合使用的

input标签，主要根据type来区别不同的input标签

<input type="text" >

type	说明
text	单行文本框
password	密码文本框
button	按钮
reset	重置按钮
image	图像形式的提交按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏字段
file	文件上传

多行文本框

<textarea name="" id="" cols="30" rows="10"></textarea>

显示效果

下拉框：

<form action="">
    <select name="city">
        <option value="fuzhou">福州</option>
        <option value="xiamen">厦门市</option>
        <option value="quanzhou">泉州</option>
        <option value="zhangzhou">漳州</option>
    </select>
</form>

显示效果

福州厦门市泉州漳州

1.11 多媒体

多媒体文件地址可以是相对地址，也可以是绝对地址。

<embed src="多媒体文件地址" width="100px" height="100px"></embed>

背景音乐：loop=“2” 重复2次，loop=“infinite” 无限次循环播放，也可以使用loop="-1"表示无限次循环播放。

<bgsound src="背景音乐的地址"/>

浮动窗口：

<div>
    <iframe src="地址" width="400px" height="300px"></iframe>
</div>

设置浮动框架是否显示滚动条scrolling

scrolling属性值	说明
auto	默认值，整个表格在浏览器页面中左对齐
yes	总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
no	在任何情况下都不显示滚动条

1.12 id和class

id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫，不知道什么时候用id,什么时候用class,甚至随便使用。

id:

id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对于页面关键的结构或者大结构，我们才使用

id。所谓的关键结构，指的是诸如LOGO、导航、主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。

我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此 id属性不要轻易使用。此外，id的命名也十

分关键，特别是对搜索引擎优化而言。对于id和 class的命名，我们在CSS进阶部分会详细介绍。

class属性:

class,顾名思义，就是“类”。它釆用的思想跟C、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设

置相同的class,然后使得相同class的元素具有相同的CSS样式。

如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以减少大量的重复代码。

注意，对于一个元素而言，我们可以定义多个classo 一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后

用另外一个class定义单独样式。

总结：对于id和class,我们总结一下：对于页面关键结构，建议使用id；对于小地方，建议使用class。就算我们不需要对关键结构进

行CSS操作或者JavaScript操作，也建议加上id.以便搜索引擎识别页面结构。

1.13 图片语义化

img标签有两个重要属性：alt和title。

alt属性用于图片描述，这个描述文字是给捜索引擎看的。并且当图片无法显示时，页面会显示alt中的文字。

title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片上时，会显示title中的内容。

语法：

<img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">

<img src="" alt=""/>
<figcaption>111</figcaption>

1.14 表格语义化

font-weight属性值	说明
normal	默认值,正常体
lighter	较细
bold	较粗
bolder	很粗（效果跟bold差不多）

1.15 音视频标签

audio：支持Ogg Vorbis MP3 Wav

 <audio controls>
    <source src="文件路径" type="audio/mpeg" />
  </audio>

属性	值	说明
autoplay	autoplay	自动播放
controls	controls	显示控件，比如播放按钮
loop	loop	结束之后，重新播放
src	url	要播放的文件地址

video：视频标签目前支持Ogg、MPEG 4、webm

<video src="文件地址 " controls="controls"></video>

参数：

属性	值	说明
autoplay	autoplay	自动播放
controls	controls	显示控件，比如播放按钮
width	100px	播放器的宽度
height	100px	播放器的高度
loop	loop	循环播放
preload	auto预加载none不应加载	是否预先加载视频
src	url	路径
poster	imgurl	等待的时候加载的画面图片
muted	muted	静音播放

1.16 新增input标签属性

type属性	说明
email	输入类型为邮件
url	输入类型为url
date	输入类型为日期类型
time	输入类型为时间类型
month	输入类型为月类型
week	输入类型为周类型
number	输入类型为数字类型
tel	输入类型为手机号类型
search	搜索框
color	颜色选择

1.17 新增表单属性

属性	值	说明
required	required	必填，不能为空
placeholder	提示文本	表单的提示信息
autofocus	autofocus	自动聚焦，页面加载完自动聚焦在表单上
autocomplete	off/on	自动填充之前键入的值，需要放在表单内同时加上name属性，同时成功提交
multiple	multiple	多选文件提交

1.18 H5舍弃的标签

标签	说明
basefont	定义页面文本的默认字体、颜色或尺寸
big	定义大字号文本
center	定义文本居中
font	定义文本的字体样式
strike	定义删除线文本
s	定义删除线文本
表2 HTML5舍弃的标签(很少使用或者已被新标签代替)
u	定义下划线文本
dir	定义目录列表，应该用ul代替
acronym	定义首字母缩写，应该用abbr代替
applet	定义嵌入的applet,应该用object代替
isindex	定义与文档相关的可搜索索引
frame	定义frameset中的一个特定的框架
frameset	定义一个框架集
noframes	为那些不支持框架的浏览器显示文本

2、 CSS

CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。

2.1 引入css样式

<!-- 1.引入外部js文件 -->
<link rel="stylesheet" href="index.js" type="text/css">
<!-- 2.内部编写，需要在style标签中，而style需要放在head中 -->
<style>
    p{
        color:red;
    }
</style>
<!-- 3.写在标签内的样式 -->
<p style="color:Red; ">写在标签内的样式</p>

2.2 CSS样式选择器

元素选择器（直接用元素标签名作为标识）

p{
    background-color: red;
}

id选择器：（id选择器前面需要加上#）

#test {
    color: red;
}

class选择器（需要在类名前面加上.）

.test{
    color: red;
}

子类选择器：（#fatherName childName）

#test div{
	color: red;
}

#test #test2{
	color: red;
}
.test .test2{
	color: red;
}

群组选择器：（name1,name2,name3）

div,p,h1{
    color: rebeccapurple;
}

2.3 CSS中的文字样式

属性	说明	值
font-family	字体类型	微软雅黑
font-size	字体大小	100px
font-weight	字体粗细	bold、normal
font-style	字体斜体	normal:正常 italic：斜体 oblique：将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique
color	颜色

2.4 CSS中的段落属性

属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	文本大小写
font-varient	将英文文本转换为“小型”大写字母
text-indent	段落首行缩进
text-align	文本水平对齐方式
line-height	行高
letter-spacing	字距
word-spacing	词距

详细介绍

关于text-decoration

text-decoration属性值	说明
text-decoration	下划线、删除线、顶划线
none	默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline	下划线
line-through	删除线
overline	顶划线

text-transform

text-transform属性值	说明
none	默认值，无转换发生
uppercase	转换成大写
lowercase	转换成小写
capitalize	将每个英文单词的首字母转换成大写，其余无转换发生

font-variant

font-variant属性值	说明
normal	默认值，正常效果
small-caps	小型大写字母的字体

text-indent:100px

text-align

text-align属性	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

line-height:100px

letter-spacing:100px

word-spacing:100px

2.5 边框样式

属性	说明	值
border-width	边框的宽度	100px
border-style	边框的外观（不经常用）
border-color	边框的颜色	颜色值 red

关于边框属性简写的方法

/*简写前*/
border-width:1px;
border-style:solid;
border-color:Red;
/*简写*/
border:1px solid gray;

我们还可以分别对上下左右进行单独或组合重写（简写方式）

border-top:1px solid red;
border-bottom:1px solid orange;
border-left:1px solid blue;
border-right:1px solid red;

2.5 背景样式

属性	说明
background-image	背景图像的路径，这样图片才能显示嘛
background-repeat	背景图像显示方式，例如纵向平铺、横向平铺
background-position	背景图像在元素哪个位置
background-attachment	背景图像是否随内容而滚动
background-color	背景颜色

color和ackground-color有什么区别？一个是只内容的颜色，一个是内容的背景颜色呀！

2.6 背景图像

属性	说明
background-image	定义背景图像的路径，这样图片才能显示嘛
background-repeat	定义背景图像显示方式，例如纵向平铺、横向平铺
background-position	定义背景图像在元素哪个位置
background-attachment	定义背景图像是否随内容而滚动

background-repeat取值：

属性值	说明
no-repeat	表示不平铺
repeat	默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺
repeat-x	表示在水平方向（x轴）平铺
repeat-y	表示在垂直方向（y轴）平铺

background-position取值：

设置值	说明
x（数值）	设置网页的横向位置，单位为px
y（数值）	设置网页的纵向位置，单位为px

background-position取值：

属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

background-attachment取值：scroll/fixed

scroll表示背景图像随对象滚动而滚动，是默认选项

fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。

2.7 超链接

定义这四个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定

义顺序不能改变！

属性	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过显示的样式
a:active	定义鼠标单击激活时的样式

hover伪类：鼠标经过时的样式！很强大的，可以为任何一个元素定义鼠标经过时的样式！

img:hover{border:1px solid red;}

cursor属性：定义鼠标样式，很多不用记，用到的时候可以在网上百度以下

2.8 图片样式

属性	说明	值
width	宽	100px
height	高	100px
border-width	边框的宽度	100px
border-style	边框样式	属性值 solid
border-color	颜色	颜色值 red

2.9 文本/图片对齐

text-align只对文本和图片生效哟（水平）

text-align属性值	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

垂直对齐

vertical-align属性取值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

2.10 文字环绕效果

在CSS中，使用浮动属性float可以设置文字在某个元素的周围，它能应用于所有的元素。

float属性值	说明
left	元素向左浮动
right	元素向右浮动

2.11 间距设置

margin属性值	说明	值
margin-top	顶部间距	100px
margin-bottom	下边距	100px
margin-left	左外边距	100px
margin-right	右外边距	100px

2.12 列表样式

有序列表

<ol type="属性值">
    <li>1123</li>
    <li>123</li>
    <li>123</li>
</ol>

type属性值	列表项的序号类型
1	数字1、2、3……
a	小写英文字母a、b、c……
A	大写英文字母A、B、C……
i	小写罗马数字i、ii、iii……
I	大写罗马数字I、II、III……

无序列表

<ul type="属性值">
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>

type属性值	列表项的序号类型
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

CSS中定义列表项符号：

有序

list-style-type属性值	说明
decimal	默认值，数字1、2、3……
lower-roman	小写罗马数字i、ii、iii……
upper-roman	大写罗马数字I、II、III……
lower-alpha	小写英文字母a、b、c……
upper-alpha	大写英文字母A、B、C……

无序：

list-style-type属性值	说明
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

去除列表符号

list-style-type取值	说明
none	去除列表项符号

自定义列表符号：list-style-image:url

2.13 表格样式

border-collapse：普通的表格，每一个单元格都会有边框，那么这时候，两个单元格之间只想显示一条边框，那么需要使用这个属性

border-collapse属性值	说明
separate	默认值，边框分开，不合并
collapse	边框合并，如果相邻，则共用一个边框

border-spacing:100px 150px 表格边框之间的间距(两个属性，分别代表着，水平和垂直)

caption-side：表格标题的位置

caption-side属性值	说明
top	默认值，标题在顶部
bottom	标题在底部

2.14 CSS盒子模型

请先了解关于块元素和行内元素

在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。

每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

属性	说明
border	（边框）元素边框
margin	（外边距）用于定义页面中元素与元素之间的距离
padding	（内边距）用于定义内容与边框之间的距离
content	（内容）可以是文字或图片

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。

内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区而言，并不包括padding部分。当内容信息太多时，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。

内边距：指的是内容区和边框之间的空间，可以被看做是内容区的背景区域。

关于内边距的属性有5种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离

边框：

在CSS盒子模型中，边框跟我们之前学过的边框是一样的。

边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。

其中border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。

“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。

外边距：

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。

外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。

外边距的属性也有5种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。

同时，CSS允许给外边距属性指定负数值，当指定负外边距值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果。这就是传说中的“负margin技术”，我们将会在“CSS进阶教程”中给读者详细讲解这一个高大上的技术喔。

2.15 定位布局

当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。

“position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

固定定位

属性	值	说明
position	fixed	位置元素，当设置为fixed时吗，这个元素就被固定了，不会因为滚动条变化而改变位置
top	100px	顶
bottom	100px	底
left	100px	左
right	100px	右

相对定位

相对定位的元素的top和left属性是相对于该元素原始位置而言的，这一点跟固定定位的元素完全不一样的。

属性	值	说明
position	relative	采用相对定位的元素，其位置是相对于它的原始位置计算而来的。相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。采用相对定位的元素会获得相应的空间。
top	100px	顶
bottom	100px	底
left	100px	左
right	100px	右

绝对定位

一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。

属性	值	说明
position	absolute	当元素的position属性值为absolute时，这个元素就变成了绝对定位元素。绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地把元素移动到任意你想要的位置。
top	100px	顶
bottom	100px	底
left	100px	左
right	100px	右

3、JavaScript

基础直接跳过了，需要的请自行查阅相关文档

函数相关介绍：

函数也是一个对象

函数中可以封装一些功能

3.1 DOM操作

这里有3个节点。id="wrapper"属性节点 111 文字节点整个是元素节点

<div id="wrapper">111</div>

想要操作这个元素节点，就要获取到这个节点的信息，获取节点信息的方法有：（严格区分大小写）

（1）getElementById() 根据id查询元素节点
（2）getElementsByTagName() 根据标签名来获取节点元素，会返回页面上所有对应标签的节点
（3）getElementsByClassName() 根据类命获取节点元素，返回也是一个数组类
（4）querySelector()和querySelectorAll() 类型css的选择器，#id、.类名写法和css完全一样
（5）getElementsByName() 根据name属性来获取节点，只用于表单元素，一般只用于单选按钮和复选框。
（6）document.title和document.body 由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门为我们提供了两个非常方便的方法：document.title和document.body。

操作DOM创建元素：

<body>
    <script>
        function text() {
            // 根据id获取元素
            const app = document.getElementById("app");
            // 创建元素为h1
            const text = document.createElement("h1");
            // 创建文本节点
            const value = ddocument.createTextNode("啦啦啦啦");
            // 将文本内容写进元素
            text.appendChild(value);
            // 将元素内容，写进的对应的元素中
            app.appendChild(text);
        }
        window.onload = () => text();
    </script>
    <div id="app"></div>
</body>

如何创建带有属性的复杂的元素节点呢？

<body>
    <script>
        window.onload = () => {
            // 获取元素
            const app = document.getElementById("app");
            // 创建input元素
            const oInput = document.createElement("input");
            oInput.id = "input1";
            oInput.type = "button";
            oInput.value = "submit";
            app.appendChild(oInput);
        }
    </script>
    <div id="app"></div>
</body>

appendChild方法

在JavaScript中，我们可以使用appendChild()把一个新元素插入到父元素的内部子元素的末尾。

window.onload = () => {
    // 获取元素
    const app = document.getElementById("app");
    // 创建input元素
    const oInput = document.createElement("input");
    oInput.id = "input1";
    oInput.type = "button";
    oInput.value = "submit";
    // 定义事件要用函数的写法
    oInput.onclick = ()=>{
        alert("1234");
    };
    app.appendChild(oInput);
}

想要插入到第一个元素之前

<body>
    <script>
        window.onload = () => {
            // 获取元素
            const app = document.getElementById("app");
            // 创建input元素
            const oInput = document.createElement("input");
            oInput.id = "input1";
            oInput.type = "button";
            oInput.value = "submit";
            // 定义事件要用函数的写法
            oInput.onclick = ()=>{
                alert("1234");
            };
            app.appendChild(oInput);
            // 将input插入在第一个元素之前
            app.insertBefore(oInput,app.firstElementChild)
        }
    </script>
    <div id="app">
        <h1 id="demo">hello</h1>
    </div>
</body>

删除一个元素：

<body>
    <script>
        window.onload = () => {
            // 获取元素
            const app = document.getElementById("app");
            // 创建input元素
            const oInput = document.createElement("input");
            oInput.id = "input1";
            oInput.type = "button";
            oInput.value = "submit";
            // 定义事件要用函数的写法
            oInput.onclick = ()=>{
                // 删除第一个元素
                app.removeChild(app.firstElementChild);
            };
            app.appendChild(oInput);
            // 将input插入在第一个元素之前
            app.insertBefore(oInput,app.firstElementChild)

        }
      
    </script>
    <div id="app">
        <h1 id="demo">hello</h1>
    </div>
</body>

在JavaScript中，我们可以使用cloneNode()方法来实现复制元素。

注意：想要复制哪个元素，就调用哪个元素的cloneNode方法，而不是赋值那个元素调用

// 获取元素
const app = document.getElementById("app");
// 创建input元素
const oInput = document.createElement("input");
oInput.onclick = ()=>{
    // 想复制input到 app中，则需要用input元素调用cloneNode方法，然后再用app的appenChild方法加入
    let o2 = oInput.cloneNode(1);
    app.appendChild(o2);
};

替换元素replaceChild：

这个替换需要找到对应的元素，而且是已经存在的元素

// 定义事件要用函数的写法
const oH = document.getElementById("ceshi");
oInput.onclick = ()=>{
    document.body.replaceChild(oInput, oH);
};

在JavaScript中，我们可以使用getAttribute()方法来获取元素的某个属性的值。（用户自定义的属性，用这个方法来获取）

const oInput = document.createElement("input");
// 它两是一样的
oInput.id = "input1";
oInput.getAttribute("id")

在JavaScript中，我们可以使用setAttribute()方法来设置元素的某个属性的值。

obj.setAttribute("attr","值")

在JavaScript中，我们可以使用removeAttribute()方法来删除元素的某个属性。

obj.removeAttribute("attr")

在JavaScript中，我们可以使用hasAttribute()方法来判断元素是否含有某个属性。

obj.hasAttribute("attr")

在JavaScript中，我们可以使用getComputedStyle()方法来获取一个CSS属性的取值。attr标识其属性名

obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。

obj.style.attr等价于obj.style[“attr”]，例如oDiv.style.width等价于oDiv.style[“width”];

getComputedStyle(obj).attr

使用style对象来设置一个CSS属性的值，其实就是在元素的style属性来添加样式，这个设置的是“行内样式”。

obj.style.attr = "值";

对于复合属性（如border、font等）来说，操作方式也是一样的，例如：

oBox.style.border = "2px solid blue";

在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性来添加的。（不应该使用驼峰制）

obj.style.cssText = "width:100px;height:100px;border:1px solid gray;";

3.2 DOM遍历

查找父元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = () => {
            const tdName = document.getElementsByTagName("td");
            for (var i = 0; i < tdName.length; i++) {
                tdName[i].onclick = function (){
                    console.log("1111")
                    // 获得当前td的父元素
                    var oNode = this.parentNode;
                    oNode.style.color = "white";
                    oNode.style.backgroundColor = "red";
                }
            }
        }
    </script>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

查找子元素：

在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。

window.onload = () => {
    const tdName = document.getElementById("app");
    // 所有子节点，包括文本节点等
    var childLength = tdName.childNodes.length;
    console.log(childLength);
    // 子元素节点
    var childL = tdName.children.length;
    console.log(childL);
}

查找兄弟元素：

在JavaScript中，我们可以使用以下2组方式来获得兄弟元素。

previousSibling查找前一个兄弟节点，nextSibling查找后一个兄弟节点。previousElementSibling查找前一个兄弟元素节点，nextElementSibling查找后一个兄弟元素节点。

window.onload = function () {
    var oBtn = document.getElementById("btn");
    var oUl = document.getElementById("list");
    oBtn.onclick = function () 
    {
        var preElement = oUl.children[2].previousElementSibling;
        oUl.removeChild(preElement);
    };
}

3.3 innerHTML和innerText

在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。

innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。

3.4 事件

鼠标事件：

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

键盘事件：

事件	说明
onkeydown	键盘按下
onkeyup	键盘松开

表单事件：

事件	说明
onfocus	获取焦点时触发的事件
focus	聚焦事件
onblur	失去焦点时触发的事件
onselect	选中“单行文本框”或“多行文本框”中的内容
select	选择事件
onchange	具有多个选项的表单元素，单选框选择某一项时触发，复选框选择某一项时触发，下拉列表选择某一项时触发。

编辑事件：

事件	说明
oncopy	防止页面内容被复制
onselectstart	防止页面内容被选取
oncontextmenu	禁止鼠标右键

页面事件：

事件	说明
onload	文档加载完成后再执行的一个事件
onbeforeunload	离开页面之前触发的一个事件

3.5 事件监听器

在JavaScript中，想要给元素添加一个事件，其实我们有以下2种方式。

事件处理器

事件监听器

事件处理器：事件处理器是没办法为一个元素添加多个相同事件的。

oBtn.onclick = function(){……};

事件监听器：指的是使用addEventListener()方法来为一个元素添加事件，我们又称之为“绑定事件”。

type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的

fn是一个函数名，或者一个匿名函数

false表示事件冒泡阶段调用。

obj.addEventListener(type , fn , false);
obj.addEventListener("click", alertMes, false);

解绑事件：

obj.removeEventListener(type , fn , false);

3.6 event对象

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function (e) 
            {
                alert(e.type);
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮" />
</body>
</html>

在JavaScript中，我们可以使用event对象的type属性来获取事件的类型。

在JavaScript中，如果我们想要获取按下了键盘中的哪个键，可以使用event对象的keyCode属性来获取。event.keyCode返回的是一个数值，常用的按键及对应的键码如表所示。

3.7 this

在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

3.8 window对象

在JavaScript中，一个浏览器窗口就是一个window对象（这句话很重要）。有3个窗口，也就是3个不同的window对象。

window对象下的子对象

子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览器版本信息
history	历史对象，用于操作浏览历史
screen	屏幕对象，用于操作屏幕宽度高度

常用方法

方法	说明
alert()	提示对话框
confirm()	判断对话框
prompt()	输入对话框
open()	打开窗口
close()	关闭窗口
setTimeout()	开启“一次性”定时器
clearTimeout()	关闭“一次性”定时器
setInterval()	开启“重复性”定时器
clearInterval()	关闭“重复性”定时器

在JavaScript中，我们可以使用window对象的open()方法来打开一个新窗口

window.open(url, target)

定时器：参数：函数，时间

obj = setTimeout(function () {
    alert("欢迎来到绿叶学习网");
}, 2000);

在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()。

//方式1
setInterval(function(){…}, 2000)
//方式2
setInterval(alertMes, 2000)
//方式3
setInterval("alertMes()", 2000)

3.9 document对象

属性	说明
document.title	获取文档的title
document.body	获取文档的body
document.forms	获取所有form元素
document.images	获取所有img元素
document.links	获取所有a元素
document.cookie	文档的cookie
document.URL	当前文档的URL
document.referrer	返回使浏览者到达当前文档的URL

方法：

方法	说明
document.getElementById()	通过id获取元素
document.getElementsByTagName()	通过标签名获取元素
document.getElementsByClassName()	通过class获取元素
document.getElementsByName()	通过name获取元素
document.querySelector()	通过选择器获取元素，只获取第1个
document.querySelectorAll()	通过选择器获取元素，获取所有
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.write()	输出内容
document.writeln()	输出内容并换行