HTML / CSS大前端
前端网页开发基础教程：HTML、CSS 与 JavaScript
前端网页开发的三大核心技术：HTML、CSS 和 JavaScript。内容涵盖 HTML 基础语法、文本列表表格表单标签；CSS 选择器、盒模型、浮动定位及透明度设置；JavaScript 变量、数据类型、运算符、函数、事件及 DOM 操作。旨在帮助初学者掌握构建网页所需的基础技能，理解三者关系及各自在页面结构、样式和交互中的作用。
前端网页开发的三大核心技术：HTML、CSS 和 JavaScript。内容涵盖 HTML 基础语法、文本列表表格表单标签；CSS 选择器、盒模型、浮动定位及透明度设置；JavaScript 变量、数据类型、运算符、函数、事件及 DOM 操作。旨在帮助初学者掌握构建网页所需的基础技能，理解三者关系及各自在页面结构、样式和交互中的作用。
HTML 是 HyperText Markup Language 的缩写，即超文本标记语言。它提供了许多功能不同的标签，最终由浏览器解析并呈现。
注释：<!-- -->
基本框架结构包含文档声明、head 和 body 部分。
<h1>~<h6><a><p><img src="图片地址"/><br/><hr/><b>示例代码：
<h1>标题一</h1>
<a href="跳转链接">百度一下</a>
<p>段落标签</p>
<img src="img/lisa.jpg"/>
<br />
<hr />
<b>END</b>
<ul><ol><li>示例代码：
<ul>
<li>无序项 1</li>
<li>无序项 2</li>
<li>无序项 3</li>
</ul>
<ol>
<li>有序项 1</li>
<li>有序项 2</li>
<li>有序项 3</li>
</ol>
<table><tr><th><td>快速建表提示：在编辑器中输入 table>tr*4>td*4 并按 Tab 键可生成 4 行 4 列的表格。
示例代码：
<table width="400">
<tr>
<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>
常用属性：
注意：
<form><input> (type 属性决定样式)
示例代码：
<form>
账号:<input type="text" placeholder="请输入账号" />
<br />
密码:<input type="password" />
<br />
性别:
<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" />英语
</form>
<select> + <option><textarea> (cols, rows 属性)<input type="submit/reset/button" value="..."/>CSS 是一种样式表语言，用于修饰 HTML 标签，使页面更美观。
CSS 代码可写在 <style> 标签中或外部 .css 文件中。
注释：/* */
引入外部样式表：
<link rel="stylesheet" href=".css 文件位置" />
示例代码：
p { }
#shell { }
.content { }
* { }
通过 CSS 属性控制字体、颜色、对齐方式及背景图像等。
使用 opacity 属性定义透明度，范围 0.0 ~ 1.0。
示例代码：
#photo {
opacity: 0.5;
}
表示标签的特殊状态：
:hover: 鼠标移入:active: 被点击:focus: 获得焦点示例代码：
#photo:hover {
opacity: 1.0;
}
每个标签视为一个盒子，包含内容区、内边距、边框、外边距。
水平居中技巧：将 margin 设置为 auto。
浮动属性让标签脱离文档流。浮动后需清除浮动以防止布局错乱。
position 属性规定定位类型：
JavaScript (JS) 是为网页添加动态功能的脚本语言。
脚本写在 <script> 标签或外部 .js 文件中。
注释：
///* */变量声明：
var 声明示例代码：
var a = 10;
var b = "5";
var c = true;
var g; // undefined
alert(typeof(g));
运算符：
+, -, *, /, % (加法也用于字符串连接)==, === (全等比较值和类型), !=, !==&&, ||, !? :流程控制：if/else, for, while 等。
使用 function 关键字声明。
示例代码：
function test() {
alert("你好");
}
test();
全局函数：alert, typeof, eval, parseInt, parseFloat。
监听交互动作或状态变化：
DOM (Document Object Model) 允许 JS 操作网页标签。 获取标签对象：
var obj = document.getElementById("txt1");
操作属性：
obj.style.backgroundColor = "blue";
操作内容：
三者合称'前端三剑客'，是学习前端开发的必备基础技能。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 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