HTML知识点！赶紧码住

.什么是HTML

HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面

二.HTML基本语法

(1)HTML标签

整个网页是从<html>这里开始的，然后到</html>结束。

(2)head标签

head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。

（3）body标签

body标签代表页面的“身”，定义网页展示内容，这些内容往往都是可见内容（在浏览器可见）。后续课程讲解的标签都是在body标签内部的各种标签。

三.HTML语法规范

HTML中不区分大小写，但是我们一般都使用小写

HTML中的注释不能嵌套、

HTML标签必须结构完整，要么成对出现，要么自结束标签

HTML标签可以嵌套，但是不能交叉嵌套

HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)

四.HTML标签使用方法

（1）HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

（2）有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。列表项使用数字来标记。

（3）段落与文字标签

（4）文本格式化标签

五.HTML表单和输入

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签来设置。

（1）文本域（Text Fields）

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

（2）密码字段

密码字段通过标签来定义:

（3）单选按钮

标签定义了表单单选框选项

（4）复选框

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

（5）提交按钮

定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

今天我们就先分享到这里，有不懂的可以私信我

（私信我有免费的IT课程可以领取哟）

释

单行注释使用双斜杠//
多行注释使用/*开始，并以*/结尾

// 这是单行注释
/* 这是
多行
注释
 */

语句结束符

JavaScript中，每一个语句的结束都应该使用分号;结尾。这是在告诉解释器每段代码的有效范围。
当然，你也可以不在代码结束的位置写上分号;，JavaScript会在每一行结束位置自动帮你添加上
有几种特别的情况必须要加上分号。当
同一行存在多条代码分别实现不同的功能时，必须用分号隔开，比如在一行中声明多个变量
如果下面的代码用圆括号放在一起了，上面的代码就必须以分号结束。否则JavaScript会突然那位上面未加分号的代码并没结束，将上下两段不想管的代码链接在一起，导致出错。

console.log('hello')
(function (arg){
	alert(arg);
})('ziawang')
// 这种情况下就会报错，js把下面匿名函数与console函数当作一段代码，导致出错

说了这么多，最后其实就是要强调的是，一定要在每段语句结束的时候加上分号。。。

变量

在JavaScript中，定义一个变量必须要对这个变量使用var关键字声明
如果声明地变量没有初始化值，那么这个变量值的类型就是undefined类型，并且该类型的值只有一个，也是undefined
格式（不需要声明变量类型）

var 变量名;			// 未初始化变量值
var 变量名 = 变量值	// 出事化变量值
var 
	变量名1 = 变量值1, 
	变量名2 = 变量值2, 
	变量名3 = 变量值3; // 声明多个变量用逗号隔开，语句以分号结束

变量提升

在ES6中，如果我们在使用var关键字初始化一个变量之前调用了这个变量，那么调用这个变量的时候并不会报错，而是会把这个变量值当作undefined来对待
举例

console.log(b)			// undefined
var b = "hello ziawang";
console.log(b);			// "hello ziawang"

这就等价于

var b;
console.log(b)		// undefined
b = "hello ziawang";
console.log(b)		// "hello ziawang"

使用let声明变量

let与var的区别
在for循环中，通过var是不能创建一个只存在于for循环代码块中的局部变量的，如果初始条件中的i变量是通过var关键字声明的，那么该变量在for循环结束之后，在for循环外部仍然可以调用，这就是常说的变量溢出。
使用let关键字解决变量溢出问题
使用let关键字可以在for循环的内存空间中创建一个局部变量，当for循环结束，其内存空间释放的同时，该变量也会被释放。这样既节省了内存空间，又防止了内存溢出

for (var i= 0; i < 5; i++){
 console.log(i);
}
console.log(i); // 得到6，变量溢出 
for (let j = 0; j < 5; j++){
 console.log(j);
}
console.log(j); // 变量不会溢出，此处会抛出ReferenceError

但是要注意

let声明得到的变量不存在变量提升。也就是说，如果一个变量在其使用let关键字声明之前调用，那么就会报错
let初始化得到的变量，不能再重复定义。意思是，你如果已经在代码中使用let声明了一个变量x，那么当你再次使用let声明一个相同名称的变量x的时候，就会抛出错误

解构变量

解构变量使用起来类似python的闭包

使用注意

前后一定要一致
如果等号右边是一个数组，那么等号的左边也必须使用一个数组来接收，并且用于接收该数组的元素数量不能比数组右边的对象元素个数多（可以少于右边元素的个数）
如果等号的右边是一个对象，在结构的时候左边也必须是一个对象并且需要使用该对象的属性作为解构变量接收对象的value。并且左侧对象中属性的位置可以随意

<script>
 let arr = [1, 2, 3, 4];
 let [a, b, c] = arr;
 console.log(a);
 console.log(b);
 console.log(c);
 let [a1, b1, [c1]] =[1, 2, [4]];
 console.log(a1);
 console.log(b1);
 console.log(c1);
 let {age, name} = {"name":"ziawang", age:23}
 console.log(name); // 解构乱序也可以，只要key正确
 console.log(age)
</script>

全局变量

当声明变量时，如果不用var关键字，那么得到的变量就是一个全局变量
在JavaScript中，应该尽量使用局部变量代替全局变量
因为全局变量在调用过程中会降低js代码运行的效率。
理由：待补充

常量

在JavaScript中可以使用关键字const来定义常量，该关键字定义的常量具有块级作用域
所谓块级作用域，其实可以简单理解为局部作用域，比如使用for循环时，如果在for循环内通过const创建了一个常量，那么这个常量的有效范围即是该for循环代码块，当for循环运行结束的时候，该常量会随着for循环内存空间的释放而释放

for (let i = 0; i < 5; i++){
 const PI = 3.141592653;
 console.log(PI);
}
console.log(PI); // 抛出ReferenceError错误

标识符

大部分编程语言的表示符规范基本都是一样的
JavaScript表示符规范如下

标识符由数字、字母、下划线、$组成
标识符不能以数字开头
标识符的名称要与要表达的对象相符
标识符不能与JavaScript内置的关键字（js中称为保留字）相同

关于布尔值

在JavaScript中，null undefined 0 NAN 空字符串空数据对象（空列表、空Map的等）视为false

在开篇

html的内容，想要改变它的样式？比如颜色、字体、布局，等等，怎么破？CSS代码带你起飞！

css语法

css的语法非常简单，如下：

选择器 {属性: 值;属性:值}

例如：

h2 {color: cornflowerblue;font-size: 60px;}

上面的h2是元素选择器，属性color，它的值是cornflowerblue。属性font-size，它的值是60px。

使用css的3种方式

有3种css的使用方式：

外部 CSS
内部 CSS
行内 CSS

虽然有3种，但笔者只讲外部css，在实际开发中，内容必须和样式分离，大有好处，慢慢体会吧！

那么如何使用外部的css？需要在html的head中通过link来引入，如下：

<head>
    <link rel="stylesheet" href="./test.css">
</head>

css代码中如何写注释

在写代码的过程中，注释很重要。但不要盲目的注释，对关键的、重要的逻辑做简单明了的注释即可，不然写的代码看起来跟一坨屎没什么区别。那么在css代码中，也是可以做注释的。当然了，该注释的时候就注释，不该注释的时候就别注释。那到底要不要加注释？算了，随你吧！不！我还是啰嗦一下，对简单明了、见名知意的代码就没必要注释了，要尽量让我们的代码看起来简洁、优雅。笔者曾经接手过一个项目，看了别人写的代码之后，就是一坨屎。我看个屁啊！直接重写，看都不想看了。

回到正题，解锁3种注释姿势。

姿势1：

/* 注释内容 */
h2,h3,p{
    text-align: center;
    color: cornflowerblue;
    font-size: 60px;
}

姿势2：

/* 注释内容，注释内容，
注释内容。
*/
h2,h3,p{
    text-align: center;
    color: cornflowerblue;
    font-size: 60px;
}

姿势3：

h2,h3,p{
    text-align: center;
    color: cornflowerblue; /* 注释内容 */
    font-size: 60px;
}

css选择器

css的选择器很重要，所以笔者单独拿出来讲了。下面我们剖析一下5种选择

1. 元素选择器

元素选择器就是通过元素来进行选择，并设置css样式，看下面小栗子。

创建home.html文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全栈运维学习</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p>面向运维编程</p>
    <p>面向运维编程</p>
</body>
</html>

创建test.css文件

p {
    text-align: center;
    color: red;
}

2. id选择器

通过id选择器，来选择元素，前提条件是元素需要设置了id，看下面的小栗子。

创建home.html文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全栈运维学习</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p id="a1">面向运维编程</p>
    <p id="a2">面向运维编程</p>
</body>
</html>

创建test.css文件

#a1 {
    text-align: center;
    color: blue;
    font-size: 100px;
}

id选择器的语法是，前面需要加#号，然后跟着是id的名字，这样就能选择到元素了，如这个例子只选择了#a1，#a2并没有设置任何样式，效果见下图。

效果图如下：

3. 类选择器

类选择器的语法是通过一个点（“.”）来进行选择，前提是要给元素设置一个类名字，请看下面案例。

创建home.html文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全栈运维学习</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p class="c1">彩虹运维技术栈社区</p>
    <p class="c1">面向运维编程</p>
</body>
</html>

创建test.css文件

.c1 {
    text-align: center;
    color: red;
    font-size: 60px;
}

上面的例子中，类名均为c1的，设置的css样式都会生效，那如果想针对性的设置属性怎么做？请继续往下看小栗子。

前端代码保持不变，修改一些css的代码，请细品：

h2.c1 {
    text-align: center;
    color: red;
    font-size: 80px;
}

p.c1 {
    color: green;
    font-size: 60px;
}

效果图如下：

4. 通用选择器

通用选择器最大特点就是“一锅端”，不管你给元素设置了id也好还是class也好，都直接将所有元素都应用css的样式。它是用“*”符号来作为选择，请看下面例子。

html代码分别设置了有class和id，以及啥都没有设置的最后一个p元素

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全栈运维学习</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h2 class="cls_1">彩虹运维技术栈社区</h2>
    <p id="id_1">持续分享运维领域技能</p>
    <p>持续分享运维开发技能</p>
</body>
</html>

下面是css的代码

* {
    text-align: center;
    color: darkmagenta;
    font-size: 60px;
}

来看看“一锅端”的效果：

5. 分组选择器

分组选择器的最大好处就是可以减少css代码量，如果部分元素需要设置一样的样式，那么可以将它进行分组，选择器用逗号分隔。

对html代码进行改造改造，如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全栈运维学习</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h2>彩虹运维技术栈社区</h2>
    <h3>持续分享运维领域技能</h3>
    <p>持续分享运维开发技能</p>
</body>
</html>

h2、h3、p为一组，均应用了同样的css样式，css代码如下：

h2,h3,p{
    text-align: center;
    color: cornflowerblue;
    font-size: 60px;
}

效果如下图：

写在最后

本次分享的到此结束，感谢阅读。望多多关注我们，点赞、收藏、转发。

本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/K0LjEs0F3KyY0wNuQ_MPzw

在线咨询

上一篇：HTML 编辑器
下一篇：零基础入门 HTML 的 8 分钟极简教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML知识点！赶紧码住

在开篇

css语法

使用css的3种方式

css代码中如何写注释

css选择器

1. 元素选择器

2. id选择器

3. 类选择器

4. 通用选择器

5. 分组选择器

写在最后

您的项目需求