关于前端更多知识请关注官网：w3school 在线教程全球最大的中文 Web 技术教程。https://www.w3school.com.cn/
1.HTML
HTML(HyperText Markup Language)：超文本标记语言
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言：由标签构成的语言
W3C是万维网联盟，这个组织是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：
结构：对应的是 HTML 语言
表现：对应的是 CSS 语言
行为：对应的是 JavaScript 语言
HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来。
1.基础标签：
~：定义标题，h1最大，h6最小
：定义文本的字体，字体尺寸颜色，注意这个标签已经被摒弃了，要改变文字字体，大小，颜色可以使用 CSS 进行设置
：定义粗体文本
：定义斜体文本
：定义文本下划线
：定义段落
：换行
：定义水平线
2.图片、音频、视频标签
示例：注意src中url路径（绝对路径与相对路径）
<img src="../img/a.jpg" width="300" height="400">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>
3.超链接标签
<a href="https://www.baidu.com" target="_self">这是一个测试</a>
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开
4.列表标签
- :有序列表
- 列表项
示例：type可以省略，即默认格式
<ol type="A"> <li>张三</li> <li>李四</li> <li>王五</li> </ol> <ul type="circle"> <li>张三</li> <li>李四</li> <li>王五</li> </ul>5.表格标签
table ：定义表格
border：规定表格边框的宽度
width ：规定表格的宽度
cellspacing：规定单元格之间的空白
tr ：定义行
align：定义表格行的内容对齐方式
td ：定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
th：定义表头单元格
示例：
<table border="1" cellspacing="0" width="500"> <tr> <th>姓名</th> <th>头像</th> <th>性别</th> <th>身高</th> </tr> <tr align="center"> <td>张三</td> <td><img src="../img/张三.png" width="60" height="50"></td> <td>男</td> <td>170</td> </tr> <tr align="center"> <td>李四</td> <td><img src="../img/李四.png" width="60" height="50"></td> <td>男</td> <td>180</td> </tr> <tr align="center"> <td>王五</td> <td><img src="../img/王五.png" width="60" height="50"></td> <td>女</td> <td>160</td> </tr> </table>6.布局标签
:定义HTML文档中的一个区域部分，经常与cSS一起使用，用来布局网页:用于组合行内元素
div 标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果
示例：
<body> <div>我是div</div> <div>我是div</div> <span>我是span</span> <span>我是span</span> </body>
7.表单标签
表单：在网页中主要负责数据采集功能
<form>:定义表单<input>:定义表单项，通过type属性控制输入形式
<label>:为表单项定义标注
<select>:定义下拉列表
<option>:定义下拉列表的下拉项 <textarea>:定义文本域 示例： ``` <body> <form action="#" method="post"> <input type="hidden" name="id" value="123"> <label for="username">用户名：</label> <input type="text" name="username" id="username">
<label for="password">密码：</label> <input type="password" name="password" id="password">
性别： <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
爱好： <input type="checkbox" name="hobby" value="1"> 旅游 <input type="checkbox" name="hobby" value="2"> 电影 <input type="checkbox" name="hobby" value="3"> 游戏
头像： <input type="file">
城市: <select name="city"> <option>成都</option> <option value="shanghai">重庆</option> <option>西安</option> </select>
个人描述： <textarea cols="20" rows="5" name="desc"></textarea>
<input type="submit" value="免费注册"> <input type="reset" value="重置"> <input type="button" value="一个按钮"> </form> </body> ```2.CSS
CSS：Cascading Style Sheet（层叠样式表）
1.CSS 导入 HTML有三种方式：
1内联样式：在标签内部使用style属性，属性值是css属性键值对（不推荐）
<div style="color: red">Hello world</div>2.内部样式：定义<style>标签，在标签内部定义css样式
<style type="text/css"> div{ color: red; } </style>3.外部样式：定义link标签，引入外部的css文件
<link rel="stylesheet" href="demo.css"> demo.css: div{ color: red; }2.CSS选择器
1.元素选择器
元素名称{color: red;} div{color: red;}2.id选择器
#id属性值{color: red;} #name{color: red;} <div id="name">hello world</div>3.类选择器
.class属性值{color: red;} .cls{color: red;} <div class="cls">hello css3</div>3.JavaScript基础
关于前端更多知识请关注官网：https://www.w3school.com.cn/
一、****JavaScript基础语法
1.书写语法
与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的。每行结尾的分号可有可无，如果一行上写多个语句时，必须加分号用来区分多个语句。
注释：
单行注释：// 注释内容
多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
大括号表示代码块：
if (count == 3) { alert(“hello world000”); }2.**** 输出语句 ****
使用 window.alert() 写入警告框 使用 document.write() 写入 HTML 输出 使用 console.log() 写入浏览器控制台3****.****变量
格式 var 变量名 = 数据值;在JavaScript 是一门弱类型语言，变量可以存放不同类型的值。JavaScript 中 var 关键字的作用域是全局，定义的变量是全局变量，且可以是重复定义的。针对这个问题，新增了 let 关键字来定义变量。它的用法类似于 var ，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
4.数据类型
JavaScript 中提供了两类数据类型：原始类型 和 引用类型。使用 typeof 运算符可以获取数据类型alert(typeof age); 以弹框的形式将 age 变量的数据类型输出。
原始数据类型：
number：数字（整数、小数、NaN(Not a Number)）
string：字符、字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
5.运算符
一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value
关于==和===区别：
==：
判断类型是否一样，如果不一样，则进行类型转换
再去比较其值
===：js 中的全等于
判断类型是否一样，如果不一样，直接返回false
再去比较其值
var A = 2; var B = "2"; alert(A == B);// true alert(A === B);// false关于类型转换：
其他类型转为number：
string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN 。将 string 转换为 number 有两种方式：
使用 + 正号运算符：
var str = +"2"; alert(str + 1) //3 使用 parseInt() 函数(方法)： var str = "2"; alert(parseInt(str) + 1);boolean 转换为 number 类型：true 转为1，false转为0
其他类型转为boolean
number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
null类型转换为 boolean 类型是 false
undefined 转换为 boolean 类型是 false
6.函数
函数定义格式有两种：
function 函数名(参数1,参数2..){ 要执行的代码 } var 函数名 = function (参数列表){ 要执行的代码 }
- 无序列表
版权归原作者 crazy_xieyi 所有， 如有侵权，请联系我们删除。