前端（html&CSS&JavaScript）基础

关于前端更多知识请关注官网：w3school 在线教程全球最大的中文 Web 技术教程。https://www.w3school.com.cn/

1.HTML

HTML(HyperText Markup Language)：超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

标记语言：由标签构成的语言

W3C是万维网联盟，这个组织是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：

结构：对应的是 HTML 语言

表现：对应的是 CSS 语言

行为：对应的是 JavaScript 语言

HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来。

1.基础标签：

<h1>~<h6>：定义标题，h1最大，h6最小

<font>：定义文本的字体，字体尺寸颜色，注意这个标签已经被摒弃了，要改变文字字体，大小，颜色可以使用 CSS 进行设置

<b>：定义粗体文本

<i>：定义斜体文本

<u>：定义文本下划线

<center>：定义文本居中

<p>：定义段落

<br>：换行

<hr>：定义水平线

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.列表标签

<ol>:有序列表

<ul>无序列表

<li>列表项

示例：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.布局标签

<div>:定义HTML文档中的一个区域部分，经常与cSS一起使用，用来布局网页

<span>:用于组合行内元素

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"><br> 
<label for="password">密码：</label> 
<input type="password" name="password" id="password"><br> 
性别： 
<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>
<br> 
爱好： 
<input type="checkbox" name="hobby" value="1"> 旅游 
<input type="checkbox" name="hobby" value="2"> 电影 
<input type="checkbox" name="hobby" value="3"> 游戏 
<br> 
头像： 
<input type="file">
<br> 
城市: 
<select name="city"> 
<option>成都</option> 
<option value="shanghai">重庆</option> 
<option>西安</option> 
</select> 
<br> 
个人描述： 
<textarea cols="20" rows="5" name="desc"></textarea> 
<br> 
<br> 
<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

关于==和===区别：

==：

1. 判断类型是否一样，如果不一样，则进行类型转换

2. 再去比较其值

===：js 中的全等于

1. 判断类型是否一样，如果不一样，直接返回false

2. 再去比较其值

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 (参数列表){ 
要执行的代码 
}

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/94540.html

前端（html&CSS&JavaScript）基础

1.HTML

2.CSS

3.JavaScript基础

相关推荐