HTML / CSS大前端
前端网页开发基础：HTML、CSS 与 JavaScript 入门教程
系统讲解了前端网页开发的基础知识，包括 HTML 结构标签、CSS 样式修饰及 JavaScript 交互逻辑。内容涵盖文本列表表格表单、选择器盒子模型浮动定位、变量函数事件 DOM 操作等核心概念。旨在帮助初学者掌握前端三剑客的基本用法，构建静态页面并实现动态效果。
系统讲解了前端网页开发的基础知识，包括 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" />
选择器是将样式表和标签进行匹配的，常用选择器有 4 种：
<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 个部分：内容区、内边距、边框、外边距
标签大小 = 内容区大小 + 内边距大小 + 边框
若想使标签位置水平居中可以将 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 + /
var a = 10;
var b = "5";
var c = true;
var g; //此时 g 就属于 undefined 类型
alert(typeof(g)); //typeof() 函数用于获取数据类型
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();
常用的全局函数：
事件指的是在网页上发生的交互动作或状态变化，例如用户点击按钮、输入文本、滚动页面等。通过监听这些事件，可以在特定的情况下执行相应的操作或函数，实现交互和动态效果。 Javascript 中的常用事件有：
通过 JS 我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，这种也称之为计时事件。
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>
除此之外我们还可以操作标签体中的内容：
HTML、CSS 和 JS 是构建网页不可或缺的技术组成部分，它们各自扮演不同的角色：
因此 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