--- title: 前端三件套 author: TianZD top: true cover: true toc: true mathjax: false summary: HTML、css\javascript前端三件套学习笔记，粗略学了一下，没有参考价值 tags: - 前端 - HTML - CSS - JavaScript - 学习笔记 categories: - 前端 reprintPolicy: cc_by abbrlink: 2b2244cb date: 2022-04-29 10:46:40 coverImg: img: password: --- [toc] # 前端 ## 页面组成 * 内容（结构）：在页面中看到的数据，一般内容采用html技术 * 表现：内容在页面上的展示形式，一般用CSS技术 * 行为：页面中的元素与输入设备交互的响应，一般使用JavaScript技术 ## HTML > HTML：超文本标记语言，通过标签来标记要显示的网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，告诉浏览器如何显示其中的内容 ```html 标题 tianzhendong ``` ### HTML标签介绍 ```html <标签名>封装的数据 ``` * 标签名不区分大小写 * 标签拥有自己的属性 * 基本属性：bgcolor = “red” 可以修改简单的样式效果 * 事件属性：onclick= “alert(‘你好!’);” 可以设置事件响应后的代码 * 单双标签 * 单标签：<标签名 /> br表示换行，hr表示水平线 * 双标签：<标签名>封装的数据 ```html 标题 tianzhendong

``` ### 常用标签 #### 字体font ```html 我是字体标签 ``` #### 字符实体& 一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。 ![image-20210728211011236](https://gitee.com/tianzhendong/img/raw/master//images/202202111342240.png) #### 标题标签h1 支持h1-h6，align为对其属性 ```html

标题1

``` #### 超链接a * href属性：设置连接的地址 * target属性：设置哪个目标进行跳转 * _self：默认值，当前页面 * _blank：打开新页面进行跳转 ```html 百度百度百度 ``` #### 列表标签ul/ol * 无序列表始于<**ul**> 标签，每个列表项始于 <**li**> * 有序列表始于<**ol**>标签，每个列表始于<**li**> * 属性：type=”none“，取消前面的标号或者小圆点 ```html

``` #### 图像标签img * src属性：src=“url”，url为图像的位置 * alt属性：设置替代的文本属性 * width属性：设置宽度 * height属性：设置高度 * border属性：设置边框宽度 ```html

``` #### 表格标签table 表格由 <**table**> 标签来定义。每个表格均有若干行（由 <**tr**>标签定义），每行被分割为若干单元格（由 <**td**> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <**th**> 标签进行定义。 * <**th**>：表头 * <**tr**>：行 * <**td**>：列 ```html

表头1
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

``` #### 内嵌窗口iframe 在页面上开辟一个小区域，显示一个单独的页面 iframe和a标签组合使用： * 在iframe标签中使用name属性定义一个名称 * 在a标签的target属性上设置iframe的name属性值 ```html

``` #### 表单标签form html页面中用来收集用户信息的所有元素集合，表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 ```html ``` 一般把表单放在一个表格table中 ## CSS CSS：层叠样式菜单，用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 ### 语法规则 * 选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签） * 属性：要改变的样式名，并且每个属性有一个值，属性和值由：分开，并且由花括号包围 * 值 ```html body {color: blue} ``` 将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。注意： * 如果值为若干单词，则要给值加引号 ```html p {font-family: "sans serif";} ``` * 如果要定义不止一个声明，则需要用分号将每个声明分开 ```html p { text-align: center; color: black; font-family: arial; } ``` ### CSS和HTML结合方式 #### 方法1 ```html CSS-HTML tianzhendong ``` 缺点： * 只能在同一页面内复用代码，不能再多个页面中复用CSS代码 * 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中修改，工作量太大 #### 方法2 把CSS样式写成一个单独的CSS文件，通过link标签引入即可复用 ```css font{ border : 1px solid red; } ``` ```html CSS-HTML tianzhendong ``` ### 常用选择器 #### 标签名选择器可以决定哪些标签被动的使用这个样式格式： ```css 标签名{ 属性：值； } ``` ```html CSS-HTML tianzhendong
tianzhendong
``` #### id选择器可以通过id属性选择性的去使用这个样式 ```html #id属性值{ 属性：值； } ``` ```html CSS-HTML tianzhendong
tianzhendong
``` id不能为数字，需要字母开头 #### Class（类）选择器 ```html .class属性值{ 属性：值； } ``` ```html CSS-HTML tianzhendong
tianzhendong
``` #### 组合选择器 ```html 选择器1，选择器2，选择器n{ 属性：值； } ``` ### 常用样式 ```html color: red; /*修改字体颜色*/ width: 300px; /*宽度*/ height: 300px; /*高度*/ background-color: aqua; /*背景颜色*/ font-size: 400px; /*字体大小*/ border: 1px solid red; /*红色的1像素的边框*/ margin-left: auto; /*DIV居中*/ margin-right: auto; /*DIV居中*/ text-align: center; /*文本居中*/ text-decoration: none; /*超链接去下划线*/ /*表格细线*/ border: 1px solid black; /*设置边框*/ border-collapse: collapse;/*将边框合并*/ list-style: none;/*列表去除修饰*/ ``` ## JavaScript ### 概述主要用于完成页面的数据验证，运行在客户端，需要运行浏览器来解析执行JavaScript代码 > **JS是弱类型（类型可变），java是强类型（定义变量时类型已定，不能改变）** **特点：** * 交互性（它可以做的就是信息的动态交互） * 安全性（不允许直接访问本地硬盘） * 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关） ### JavaScript和html结合的方式 #### 方式1 在head标签中或者在body标签中，使用script标签来书写JavaScript代码 ```html JavascriptDemo ``` #### 方式2 使用Script标签引入单独的JavaScript代码文件 ```js alert("hello"); ``` ```html JavascriptDemo ``` ### 变量 | 变量类型 | 表达式 | | :--------: | -------- | | 数值类型 | number | | 字符串类型 | string | | 对象类型 | object | | 布尔类型 | boolean | | 函数类型 | function | 特殊的值 * undefined：未定义，所有js变量未赋值时，都是undefined * null：空值 * NAN：not a number 非数字 ```html JavascriptDemo ``` ### 关系运算 * 等于：==，简单的字面值比较 * 全等于：===，除了字面值比较外，还会做类型比较 ```html JavascriptDemo ``` ### 逻辑运算 * 且运算：&& * 当表达式全为真，返回最后一个表达式的值 * 当表达式中有一个为假，返回第一个为假的表达式的值 * 或运算：|| * 表达式全为假，返回最后要给表达式的值 * 有一个表达式为真，返回第一个为真的表达式的值 * 取反运算：！在JavaScript中，所有的变量，都可以作为一个boolean类型的变量去使用，0、null、undefined、‘’‘’(空串)都可以认为是false ```html JavascriptDemo ``` ### 数组 ```js var 数组名 =[];//空数组 var 数组名 =[1,'a',true]//定义数组同时赋值元素 ``` JavaScript中数组会自动扩容 ```html JavascriptDemo ``` ### 函数 js中函数重载会覆盖上面的定义，不允许重载函数 #### 方式1：使用function关键字定义 ```html JavascriptDemo ``` #### 方式2：var fun=function(){} ```html JavascriptDemo ``` #### 隐形参数 ```html JavascriptDemo ``` ### js中的事件 > 事件是由电脑输入设备与页面进行交互的响应 #### 常用事件： | 事件名称 | 功能 | | ------------------------ | -------------------------------------------- | | onload加载完成事件 | 页面加载完成后，常用于做页面js代码初始化操作 | | onclick单机事件 | 用于按钮的点击响应事件 | | onblur失去焦点事件 | 用于输入框失去焦点后验证其输入内容是否合法 | | onchange内容发生改变事件 | 用于下拉列表和输入框内容发生改变后操作 | | onsubmint表单提交事件 | 用于表单提交前，验证所有表单项是否合法 | #### 注册事件 > 告诉浏览器，事件响应后要执行哪些操作代码，叫事件注册或事件绑定 * 静态注册:通过html标签的事件属性直接赋予事件响应后的代码 * 动态注册:先通过js代码得到标签的dom对象，再通过dom对象.事件名 = function(){}形式赋予事件响应后的代码.动态注册基本步骤： * 获取标签对象 * 标签对象.事件名= function(){} ##### onload事件注册 onload加载完成事件：页面加载完成后，常用于做页面js代码初始化操作 ```html JavascriptDemo ``` ```HTML JavascriptDemo ``` ##### onclick事件注册 onclick单机事件：用于按钮的点击响应事件 ```html JavascriptDemo ``` ##### onblur事件注册 onblur失去焦点事件：用于输入框失去焦点后验证其输入内容是否合法 ```html JavascriptDemo

用户注册
用户名：
密码：

``` ##### onchange事件注册 onchange内容发生改变事件：用于下拉列表和输入框内容发生改变后操作 ```html JavascriptDemo

用户注册
选择1：
选择2：

``` ##### onsubmit事件注册 onsubmint表单提交事件：用于表单提交前，验证所有表单项是否合法 ```html JavascriptDemo

``` ### DOM模型 Document Object Model文档对象模型：把文档中的标签、属性、文本转化为对象进行管理 ![image-20210730210623985](https://gitee.com/tianzhendong/img/raw/master//images/202202111342448.png) ##### 方法 | close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 | | ---------------------- | ------------------------------------------------------------ | | getElementById() | 返回对拥有指定 id 的第一个对象的引用。 | | getElementsByName() | 返回带有指定名称的对象集合。 | | getElementsByTagName() | 返回带有指定标签名的对象集合。 | | open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 | | write() | 向文档写 HTML 表达式或 JavaScript 代码。 | | writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 | 三种查询方法： * 优先使用getElementById() * 其次getElementsByName() * 最后getElementsByTagName() 越往后，查询范围越大 ##### getElementById() 返回对拥有指定 id 的第一个对象的引用。 ```html JavascriptDemo 密码：
``` ![image-20210730221657830](https://gitee.com/tianzhendong/img/raw/master//images/202202111342399.png) ##### getElementsByName() 返回带有指定名称的对象集合 ```html JavascriptDemo 兴趣爱好： C; Java; Python;
``` ##### getElementsByTagName() 返回带有指定标签名的对象集合。和getElementsByName() 类似，不过是使用标签名进行查询 #### 节点（标签对象）的常用属性和方法节点就是标签对象 ##### 方法 | 方法 | 功能 | | ------------------------- | -------------------------------- | | getElementsByTagName() | 获取当前节点的指定标签名孩子节点 | | appendChild（oChildNode） | 添加一个子节点 | ##### 属性 | 属性 | 功能 | | --------------- | ------------------------------------------ | | childNodes | 获取当前节点的**所有子节点** | | firstChild | 获取当前节点的**第一个**子节点 | | lastChild | 获取当前节点的**最后一个**子节点 | | parentNode | 获取当前节点的父节点 | | nextSibling | **下一个**节点 | | previousSibling | **上一个**节点 | | className | 用于获取或者设置标签的**class属性值** | | innerHTML | 获取或者设置起始标签和结束标签**中的内容** | | innerText | 获取或者设置起始标签和结束标签**中的文本** |

标题1

用户注册