HTML / CSS大前端
前端网页开发基础：HTML、CSS 与 JavaScript 入门指南
系统介绍了前端网页开发的三大基础技术：HTML、CSS 和 JavaScript。内容涵盖 HTML 标签语法、列表表格表单结构；CSS 选择器、盒子模型、浮动定位及样式修饰；JavaScript 变量、数据类型、运算符、函数、事件及 DOM 操作。旨在帮助初学者掌握构建静态页面与实现交互逻辑的核心技能，理解三者在前端开发中的协同关系。
系统介绍了前端网页开发的三大基础技术：HTML、CSS 和 JavaScript。内容涵盖 HTML 标签语法、列表表格表单结构；CSS 选择器、盒子模型、浮动定位及样式修饰；JavaScript 变量、数据类型、运算符、函数、事件及 DOM 操作。旨在帮助初学者掌握构建静态页面与实现交互逻辑的核心技能，理解三者在前端开发中的协同关系。
HTML 是 HyperText Markup Language 的缩写，即超文本标记语言。它为我们提供了许多功能不同的标签，最终运行时由浏览器对标签进行解析，呈现出不同标签的样子。
注释：<!-- -->（Ctrl + /）
<body> <!-- html 注释 --> </body>
基本框架解读：
➱ 标题标签 <h1></h1>...<h6></h6>
➱ 超链接 <a></a>
➱ 段落标签 <p></p>
➱ 图片标签 <img src="图片地址"/>
➱ 换行 <br/> 标尺线 <hr/> 加粗 <b></b>
<h1>标题一</h1> <a href="跳转链接">百度一下</a> <p>段落标签</p> <img src="img/lisa.jpg"/> <br /> <hr /> <b>END</b>
➱ 无序列表 <ul></ul>
➱ 有序列表 <ol></ol>
➱ 列表项 <li></li>
<ul> <li>无序项 1</li> <li>无序项 2</li> <li>无序项 3</li> </ul> <ol> <li>有序项 1</li> <li>有序项 2</li> <li>有序项 3</li> </ol>
➱ 表格标签 <table></table>
➱ 表格中的行 <tr></tr>
➱ 表格的表头 <th></th>
➱ 表格的单元格 <td></td>
快速建表：table>tr*4>td*4 按 Tab 键（生成一个 4 行 4 列的表）
<!-- table 表格标签 --> <!-- cellspacing 设置单元格与单元格之间的距离 (外边距) -->
<table width="400">
<!-- tr 表格中的行 -->
<tr>
<!-- th 表头单元格 居中加粗-->
<th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th>
</tr>
<tr> <td >张三</td> <td>84</td> <td>87</td> <td>94</td> </tr>
<tr> <td>李四</td> <td>79</td> <td>88</td> <td>92</td> </tr>
<tr> <td>小王</td> <td>79</td> <td>88</td> <td>92</td> </tr>
</table>
绘制表格时的一些常用属性: border: 边框 height: 高度 width: 宽度 align: 内容水平方向的位置 (left, center, right) valign: 内容垂直方向的位置 (top, middle, bottom) cellspacing: 设置单元格与单元格之间的距离 (外边距) cellpadding: 设置单元格内容到边框的距离 (内边距) bgcolor: 背景颜色 colspan: 跨多列合并 (从哪个合并就在哪个单元格添加并删除多余的单元格) rowspan: 跨多行合并 (合并完成后需要删除其他行多余的单元格) • th 表头单元格中的内容是居中加粗的，td 普通单元格就没有此效果 • 表格中的内容只能放在单元格中. • 绘制表格时必须要添加 border 边框属性，否则表格不会显示出来
➱ 表单区域 <form></form>
➱ 单行输入框 <input/>
<input/> 标签中提供了 type 属性，我们可以通过设置 type 的属性值来改变单行输入框的样式，如：
<!-- form 标签 表示一个表单区域 -->
<form>
账号:<input type="text" placeholder="请输入账号" />
<br />
密码:<input type="password" />
<br />
<!-- 注意：多选框和单选框的多个选项的 name 必须相同才能互斥 -->
性别:<input type="radio" name="gender" />男 <input type="radio" name="gender" />女
<br />
课程:<input type="checkbox" name="course" />政治 <input type="checkbox" name="course" />语文 <input type="checkbox" name="course" />数学 <input type="checkbox" name="course" />英语
<br />
</form>
➱ 下拉选择框 <select></select> 选项内容 <option></option>
籍贯<select>
<!-- 选择性组件必须要给默认的 value -->
<option value="101">陕西</option>
<option value="102">四川</option>
<option value="103">浙江</option>
<option value="104">湖南</option>
</select>
➱ 多行文本域 <textarea></textarea>
<!-- 可设置文本域的大小 (列和行) -->
<textarea cols="30" rows="10"></textarea>
➱ 按钮 按钮依然写在 <input/> 标签中，只不过不同按钮的 type 属性不同
<!-- 提交按钮，触发表单的提交动作 -->
<input type="submit" value="提交"/>
<!-- 重置按钮 -->
<input type="reset" value="重置"/>
<!-- 普通按钮，用来绑定事件 (在 JavaScript 中会详细介绍) -->
<input type="button" value="触发"/>
css 是一种样式表语言，它提供了许多属性来对 Html 标签进行修饰，使我们的页面更加美观。
我们把对文本样式进行定义和修饰的 CSS 代码写在 <style></style> 中。
注释：/* */（Ctrl + /）
<style> /* CSS 注释 */ </style>
CSS 样式表分为：行内样式表、内嵌样式表、外部样式表。
简单来说就是 css 代码写的位置不同而已，如果标签只出现一次可以考虑使用行内样式写法。若有多组标签且样式需求一致可以使用内嵌样式写法。一般在大的项目 css 代码很多情况下才使用外部样式写法，也就是将 css 代码单独写在一个.css 文件中，再在 html 文件中通过 <link/> 导入即可。
<!-- href=".css 文件位置" -->
<link rel="stylesheet" href="style.css" />
选择器是将样式表和标签进行匹配的，常用选择器有 4 种： ➱ 标签选择器：匹配页面中所有的指定标签 ➱ id 选择器：匹配 id 值唯一的一个标签 ➱ 类选择器：匹配 class 属性相同的一组标签 ➱ 通配选择器：匹配页面中所有标签
<style>
/* 标签选择器 */ p{ }
/* id 选择器 */ #shell{ }
/* 类选择器 */ .content{ }
/* 通配选择器 */ *{ }
</style>
<body>
<p></p>
<div></div>
<div></div>
<div></div>
<h1></h1>
</body>
CSS 中 opacity 属性是用来定义透明度的，并且规定范围是从 0.0 ~ 1.0 (完全透明 ~ 完全不透明 )
<style>
#photo{ opacity: 0.5; /*完全透明 0.0 ~~ 1.0 完全不透明*/ }
</style>
<body>
<!-- 原图 -->
<img src="img/lisa.jpg" />
<!-- 设置半透明 -->
<img src="img/lisa.jpg"/>
</body>
效果如下：
CSS 伪类专门用来表示标签的一种的特殊的状态，常用的伪类有： :hover 表示鼠标移入的状态 :active 表示被点击的状态 :focus 向拥有键盘输入焦点 (例如输入框) 的标签添加样式
<style>
#photo{ opacity: 0.5; }
#photo:hover{ opacity: 1.0; }
</style>
<body>
<img src="img/lisa.jpg"/>
</body>
此段代码表示当鼠标移入图片时，图片的样式从原本的半透明转变为完全不透明
CSS 处理网页时，它认为每个标签都包含在一个不可见的盒子里，如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子，只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。 一个盒子分为 4 个部分：内容区、内边距、边框、外边距
标签大小 = 内容区大小 + 内边距大小 + 边框
content：内容区指盒子中放标签内容的区域，子标签都存在于内容区中。width 和 height 两个属性就是设置内容区大小的。如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小一致。 padding：内边距指标签内容区到边框以内的区域。内边距会影响整个盒子的大小 (涉及计算问题) border：边框是标签可见框的最外部，也会算在标签大小中。边框的三要素有：宽度 width、颜色 color、样式 style，三者缺一不可。 margin：外边距指标签边框与周围其他标签相距的区域，外边距不影响盒子的整体大小，但是会影响盒子的位置。 若想使标签位置水平居中可以将 margin 设置为 auto，这样浏览器会将左右外边距设置为相等，但要注意：若把标签上下外边距设置为 auto，不会使标签垂直居中，外边距依然为 0，上下外边距需要给具体的值。
由于网页默认是一个二维平面，当我们在网页中一行行摆放标签时，块标签会独占一行，行标签则只占自身大小，这种情况下要实现网页布局就很麻烦，所以我们就需要通过一些方法来改变这种默认的布局方式。
CSS 中的浮动属性可以让标签脱离原来的文档流，也就是二维平面，浮动后的标签默认是内容的大小，且可以为其设置宽和高。
但是浮动后的标签不占用原来文档流的空间，下面的标签就会向上移动，会影响后面的网页布局，所以我们通常在浮动的标签后使用清除浮动属性，自动让父级标签撑开
position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）
➱ position: static; （默认）
HTML 元素默认情况下的定位方式为 static（静态），静态定位的元素不受 top、bottom、left 和 right 属性的影响，不会以任何特殊方式定位，它始终根据页面的正常流进行定位。
➱ 固定定位 position: fixed;
固定定位的元素是相对于视口定位的，即使滚动页面，它也始终位于同一位置。top、right、bottom 和 left 属性用于定位此元素。
➱ 相对定位 position: relative; (相对定位和绝对定位是我们常用的)
元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
➱ 绝对定位 position: absolute;
元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed），如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
JavaScript 简称 JS，是为网页添加各式各样的动态功能的一种前端脚本语言，也就是网页的行为。 JS 是前端脚本语言，Java 是后端高级语言，不要因名字相似而混为一谈，二者并无联系
JavaScript 的脚本写在一个 <script></script> 标签中，如果在代码量很多的情况下可以写在外部 js 文件中，再在 html 文件中导入外部 js 文件即可。
一旦标签导入其他的 js 文件，<script> 标签内部就不能写脚本了 !
JavaScript 中的注释分为两种，分别是单行注释 // 和多行注释 /* */
<script>
// 单行注释
/* 多行注释 */
</script>
单行注释
//快捷键：Ctrl + /多行注释/* */快捷键：Ctrl + Shift + /
• JavaScript 属于弱类型语言，即变量是没有类型的，给它什么类型的值就是什么类型. • 我们通过关键字 var 声明一个变量.
var a = 10; var b = "5"; var c = true;
• 数值型 number：包含整数和浮点数 • 字符串型 string：单引号或双引号都可以表示字符串 • 布尔型 boolean：返回 true / false • undefined 类型：声明了变量但没有赋值
var g; //此时 g 就属于 undefined 类型
alert(typeof(g)); //typeof() 函数用于获取数据类型
• Object 类型：编译器本身 (自带) 为我们提供的一些类，如日期类 Date
var date = new Date();
alert(date.getFullYear); //获取年
alert(date.getMonth() + 1); //获取月
alert(date.getDate); //获取日
JavaScript 中的运算符和 Java 中的运算符几乎没有差别，但也有特殊所在！不过大致也可分为：算术运算符、比较运算符、赋值运算符、逻辑运算符、条件运算符。在此我主要给大家详细介绍下不同之处和特殊所在。
算数运算符：
特殊点：
'+' 不仅表示加法运算，也表示字符串的连接.
var a = 10; var b = 5; var c = "5"; var d = "d";
alert(a+b);// 15 (加法运算)
alert(a+c);// 105 (连接作用)
alert(a+d);// 10d (连接作用)
'-' 减法运算中：字符串 - 数值 = 数值. JavaScript 中会把表达式中数字字符尝试类型转换，"5" — 5 但要注意这里的字符串必须是数字，若不是数字无法类型转换进行运算，返回 NaN(not a number)
var a = 10; var b = 5; var c = "5"; var d = "d";
alert(a-b);// 5 (减法运算)
alert(a-c);// 5 (减法运算，将数字字符转化为数值)
alert(a-d);// NaN (Not a Number)
NaN 并不是报错，它只是为我们返回了 NaN 结果，并不是程序错误！
比较运算符：
特殊点：
'===' 表示全等，在此之前我们很少见到三个等号，它比较的是值和类型，而 '==' 只比较值.
var a = 5; var b = 5; var c = "5";
alert(a==c);// true (只比较值)
alert(a===c);// false (比较值和类型)
赋值运算符：
逻辑运算符：
条件运算符：
这三者并无无特殊点
JavaScript 中的流程控制语法和 Java 中的相同，例如选择结构中的 if / if else，循序结构中的 for 循环、while 循环...这些基本的语法在这里我就不详细介绍了，用法和 Java 相同 !
函数的声明和调用：在 JavaScript 中我们使用关键字 function 来声明一个函数。
//声明函数
function test() {
alert("你好");
}
//调用函数
test();
常用的全局函数： • alert 弹出框 • typeof 返回参数数据类型 • eval 将某个字符串当做 js 脚本运行 • parseInt 将参数转为整数 • parseFloat 将参数转为浮点数
事件指的是在网页上发生的交互动作或状态变化，例如用户点击按钮、输入文本、滚动页面等。通过监听这些事件，可以在特定的情况下执行相应的操作或函数，实现交互和动态效果。 Javascript 中的常用事件有：
• onclick：鼠标单击事件 • dblclick：鼠标双击事件 • onblur：标签失去焦点 • onfocus：标签获得焦点 • onmouseover：鼠标移到某标签上 • onmouseout：鼠标从某标签上移开 • onkeydown：用户按下键盘按键 • onload：网页加载完毕后触发相应的事件处理程序 • onchange：当前标签失去焦点并且标签的内容发生改变时触发事件处理程序
通过 JS 我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，这种也称之为计时事件. setTimeout 表示延迟 "指定时间" 后调用 "指定函数"，且只调用一次. clearTimeout 关闭 setTimeout 定时器 setInterval 表示每隔 "指定时间" 就调用一次 "指定函数"，只要不关闭定时器就会一直调用. clearInterval 关闭 setInterval 定时器
JS HTML DOM 是我们学习 JavaScript 过程中非常重要的内容，它可以解决：如何在 JavaScript 中操作网页中的标签？这个问题。 Dom 是 document Object Model (文档对象模型) 的缩写，JavaScript 认为网页中的每个标签都是一个对象，在 js 中把这一类标签对象称为 html_dom 对象，既然我们要操作网页中的标签，那么第一步肯定是先拿到标签对象，那么第一个问题来了： 如何在 js 中获得网页中的标签对象？ 在网页加载完毕后，在 js 中生成一个 document 对象 (表示整个 html 文档) 里面提供了一个方法：getElementById()
//通过标签 id 获得网页中的标签对象
var obj1 = document.getElementById("txt1");
var obj2 = document.getElementById("txt2");
拿到网页中的标签对象后就可以通过 dom 对象操作标签的属性了 (包括 css 属性).
<style>
#box{ width: 300px; height: 300px; }
</style>
<script>
function test(){
var obj = document.getElementById("box");
obj.style.backgroundColor="blue";
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="蓝色"/>
<div></div>
</body>
除此之外我们还可以操作标签体中的内容： innerText 把标签内部值拿到，获得标签体中的文本内容 innerHTML 获得标签内的所有内容 (包括子标签)
HTML、CSS 和 JS 是构建网页不可或缺的技术组成部分，它们各自扮演不同的角色：
HTML（超文本标记语言）：它是网页内容的骨架，负责创建页面的基本结构和内容布局。HTML 元素是构成网页的最基本的块状单位，如段落、标题、图像等。
CSS（层叠样式表）：它负责为 HTML 元素提供样式描述，包括颜色、字体大小、边距、布局等。CSS 使得网页在不同设备和屏幕尺寸下都能保持一致性和美观性。
JS（JavaScript）：它是一种动态脚本语言，允许开发者向用户提供交互式体验，如动画、滑动效果、表单验证等。JavaScript 还可以改变和更新网页的内容和样式，使网页具有响应式行为。
因此 HTML、CSS、JavaScript 也被称为前端三剑客，是学习前端网页开发的必备的基础技能。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online