【前端】HTML、CSS、JavaScript

<table>:表格标签:html表格由<table>以及一个或多个<tr>、<th>或<td>标签组成。 <table>是⽗标签，相当于整个表格的容器。 <tr>标签⽤于定义⾏ <td>标签⽤于定义表格的单元格（⼀个列）<th>标签⽤于定义表头。单元格内的内容默认居中、加粗, <caption>:表格标题, <thead>表示表格的头部分 <tbody>表示表格的体部分 <tfoot>表示表格的脚部分

<frameset>:框架标签：是多个窗⼝⻚⾯整合在⼀起的⼀个集合（框架集）。每⼀个⻚⾯（框架）都是单独⽂档，需要使⽤⼦标签来确定⻚⾯的位置。<frame>:框架⼦标签

<form>:表单标签

<input>:表单项标签，⽤于获得⽤户输⼊信息。可以通过type属性值，改变元素展示的样式。

<span>:⽂本信息在⼀⾏展示，⾏内标签、内联标签。

<div>:每⼀个div占满⼀整⾏。块级标签。

2.CSS

2.1css简介、主要功能

css(Cascading Style Sheets)层叠样式表，主要⽤于设置HTML⻚⾯中的⽂本

内容（字体、⼤⼩、对⻬⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显示样式。CSS可以使HTML⻚⾯更好看，CSS⾊系的搭配可以让⽤户更舒服，CSS+DIV布局更加灵活，更容易绘制出⽤户需要的结构。

2.2.css选择器

“选择器”⽤于指定CSS样式作⽤的HTML对象，花括号内是对该对象设置的具体样式。

选择器{属性1:属性值; 属性2:属性值; …}

例：

<style>
 h2 {
 color: red;
 font-size: 100px;
 }
</style>

2.2.1.css选择器的引入方式：

1.⾏内样式：通过标签的style属性来设置元素的样式。

<!--
 ⽅式1：⾏内样式
 color：表示字体颜⾊
 font-size：表示字体⼤⼩
-->
<a style="color: #F00; font-size: 30px;">hello css</a>

2.内部样式：⼜称为内嵌式，是将CSS代码集中写在HTML⽂档的<head>头部标签体中，并且使⽤<style>标签定义。

<!--
 ⽅式2：内部样式
 background-color：表示背景⾊
-->
<style type="text/css">
 body {
 background-color: #ddd;
 }
</style>

3.外部样式：⼜称为链⼊式，是将所有的样式放在⼀个或多个以 .css 为扩展名的外部样式表⽂件中，通过<link>标签将样式连接到HTML⽂档中。

<link rel="stylesheet" type="text/css" href="style.css"/>

2.2.2.选择器类型

1.元素选择器

⽤HTML标签名称作为选择器，按标签名称分类，为⻚⾯中某⼀类标签指定统⼀的CSS 样式。优点是能快速位⻚⾯中同类型的标记统⼀样式

h1 {
 color: #F00;
 font-size: 50px;
}
<h1>hello</h1>

2.id选择器

选择具体的id属性值的元素。id名即为HTML元素的id属性值，⼤多数HTML元素都可以定义id属性，元素的id值是唯⼀的，只能对应于⽂档中某⼀个具体的元素。 id选择器优先级⾼于元素选择器

#demo1 {
 color: #0f0;
}
<h1 id="demo1">hello css</h1>

3.类选择器

类名即为HTML元素的class属性值，⼤多数HTML元素都可以定义class属性。类选择器最⼤的优势是可以为元素对象定义单独或相同的样式。

.myClass {
 font-size: 25px;
}
<h1 class="myClass">hello</h1>

还有属性选择器、后代选择器等

2.3css常用属性

详见w3school：https://www.w3school.com.cn/

3.JavaScript

3.1.JavaScript的组成

1.核心(ECMAScript) ：语法、语句

2.文档对象模型(DOM): 浏览器对象

3.浏览器对象模型（BOM）: Document Object Mode，操作⽂档中的元素和内容

js的引入：

1. 内嵌式，在HTML⽂档中，通过<script>标签引入

<script type="text/javascript">
 // 此处为JavaScript代码
</script>

2.外联式，在HTML⽂档中，通过<script src="">标签引入.js文件

<script src="1.js" type="text/javascript" charset="UTF-8"></script>

3.2基本语法

3.2.1.变量

在使⽤JavaScript时，需要遵循以下命名规范：

1.必须以字⺟或下划线开头，中间可以是数字、字符或下划线 2.变量名不能包含空格等符号 3.不能使⽤JavaScript关键字作为变量名，如：function 4.JavaScript严格区分⼤⼩写

3.2.2.数据类型（ECMAScript）

一.基本类型

1.Undefined，Undefined类型只有⼀个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined。

2.Null，只有⼀个专⽤值null，表示空，⼀个占位符。值undefined实际上是从值null派⽣来的，因此ECMAScript把他们定义为相等的。

3.Boolean，有两个值true和false

4.Number，表示任意数字

5.String，字符串由双引号（"）或单引号（'）声明的。JavaScript没有字符类型

二.引⽤类型

1.引⽤类型通常叫做类（class），也就是说，遇到引⽤值，所处理的就是对象。

2.JavaScript是基于对象⽽不是⾯向对象。对象类型的默认值是null。

3.JavaScript提供众多预定义引⽤类型（内置对象）。

3.2.3.基本操作

1.alert()：向⻚⾯中弹出⼀个提示框

2.innerHTML：向⻚⾯的某个元素中写⼀段内容，将原有的东⻄覆盖

3.document.write()：向⻚⾯中写内容

4.window.setInterval(code, millisec) ：按照指定的周期（间隔）来执⾏函数或代码⽚段。clearInterval() ：取消由setInterval() 设置的timeout。

5.setTimeout(code, millisec) ：在指定的毫秒数后调⽤函数或执⾏代码⽚段。clearTimeout() ：取消由setTimeout() 设置的timeout。

3.3.DOM

3.3.1dom对象：

img

input

button

form
document.getElementById(id)
document.getElementsByClassName(class)

3.3.2dom属性：

src value innerHTML innerText style.cssXX

Document   文档
   获得 getElementById(id)
       getElementsByClassName(class值)
       getElementsByTagName(标签名)
       getElementsByName(name属性的值)
   创建 createElement(标签名)

Element 标签
   追加父节点.appendChild(子节点)
       子节点.insertBefore(另一个子节点)
   属性 innerText innerHTML
   属性   标签自带属性 src style href value checked....
   操作属性   setAttribute(属性名, 属性值)
getAttribute(属性名)

3.4.BOM

3.4.1.BOM对象:

    window
   alert()
   setInterval() clearInterval()
   setTimeout() clearTimeout()

3.4.2.BOM事件：

onclick onmouseover onmouseout onsubmit onblur...

弹窗
       alert()   显示带有一段消息和一个确认按钮的警告框。
       confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框。
       prompt()   显示可提示用户输入的对话框。

计时器
       setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。
       setTimeout()   在指定的毫秒数后调用函数或计算表达式。
       clearInterval()   取消由 setInterval() 设置的 timeout。
       clearTimeout()   取消由 setTimeout() 方法设置的 timeout。

窗口开关
       open()   打开一个新的浏览器窗口或查找一个已命名的窗口。
       close()   关闭浏览器窗口。

事件对象
   preventDefault()   通知浏览器不要执行与事件关联的默认动作。
   stopPropagation()   不再派发事件。

全局函数
   decodeURI()   解码某个编码的 URI。
   encodeURI()   把字符串编码为 URI。

   eval()   计算 JavaScript 字符串，并把它作为脚本代码来执行。

   isNaN()   检查某个值是否是数字。

   parseFloat()   解析一个字符串并返回一个浮点数。
   parseInt()   解析一个字符串并返回一个整数。