前端 HTML + CSS + JavaScript
HTML 决定网页的框架 文本、图片、表单、按钮
CSS 显示网页中控件的样式外观 颜色、大小、间距、排版
JS 表示处理逻辑 点击按钮发生什么、表单怎么校验、数据怎么变化
HTML
HTML 文件基本结构
使用 ! + Tab 快捷生成。
HTML 常见标签
-
标题标签 h1-h6
HTML、CSS 和 JavaScript 是构建现代网页的三大核心技术。本文系统介绍了 HTML 文件结构、常用标签及表单处理;讲解了 CSS 引入方式、选择器分类及盒模型属性;涵盖了 JavaScript 变量定义、数据类型、运算符、数组函数对象语法,以及 jQuery 库的基础用法。最后通过一个猜数字游戏示例,演示了 DOM 操作与事件绑定的实际应用。
HTML 决定网页的框架 文本、图片、表单、按钮
CSS 显示网页中控件的样式外观 颜色、大小、间距、排版
JS 表示处理逻辑 点击按钮发生什么、表单怎么校验、数据怎么变化
使用 ! + Tab 快捷生成。
标题标签 h1-h6
段落标签 p 在 HTML 中,段落、换行符、空格都会失效。如果需要分成段落,需要使用专门的标签。
换行标签 br / 分割线 hr
<br/> 是规范写法,不建议写成 <br>。
图片标签 img
src 表示图片的路径
./ ../(以 html 文件为基准)D:/rose.jpg 网络 https://img2.baidu.comwidth / height 用来控制元素(尤其是图片)的宽度和高度。超链接 a
<a href="http://www.baidu.com" target="_blank">百度</a>
href: 跳到哪个链接target: 打开方式
_self: 当前页面打开(默认)_blank: 新标签页打开# 在 href 中占位 <a href="#">空链接</a>表格标签 table
table 表示表格,tr 表示行,td 表示单元格。
表单标签 form 提交
action: 提交到哪个页面(或接口)表单标签 input 输入 属性:
type: 决定输入框的类型name: 输入框名字value: 输入框默认值checked: 是否默认选中eg.
name 相同 → 多选一;checked → 默认选中select 标签(下拉菜单)
select 用来创建'下拉选择框',option 用来定义下拉里的每一项。
<option selected>日本</option>
打开页面时:默认选中'日本'
textarea 标签(多行文本域)
textarea 用来让用户输入'多行文本',比如留言、评论、简介。
rows: 显示几行(高度)cols: 每行大约多少字符(宽度)textarea 没有 value 属性,默认内容写在标签中间。无语义标签 div & span
div 和 span 都是无语义标签,用于布局。
div 是块级元素,独占一行。span 是行内元素,不独占一行。p { /* 选择器(找谁) */ color: red; /* 声明(属性:值) */ font-size: 30px; /* 声明 */ }
: 分开,用 ; 结束<div style="color: green;">绿色</div>
style 的值就是 CSS 属性键值对<style>
/* CSS 写在 HTML 文件里 */
</style>
<head> 中<link rel="stylesheet" href="style.css">
style.css 这个样式文件,引入到当前 HTML 页面中使用。.css 文件中,HTML 只负责结构。rel="stylesheet" 是什么意思?
rel = relationship(关系)stylesheet = 样式表选中页面中所有 div 标签,颜色改为绿色。
每个标签中可以定义类名,class="g1 g2 g3" 可以定义多个类名,用空格隔开,起到分组的作用。
.g1 的元素# 选择 id选中页面里的'所有元素'。
选择 ul 的后代 li 的后代 a。选择多个用 , 隔开。
| 选择器 | 写法 | 选中谁 |
|---|---|---|
| 标签 | div | 所有 div |
| 类 | .box | class=box |
| ID | #id | id=id |
| 通配符 | * | 所有元素 |
| 复合 | ul li a | ul 里的 li 里的 a |
color: red; /* 英文单词 */
color: rgb(255, 0, 0); /* RGB */
color: #ff0000; /* 十六进制 */
border 是复合属性,包含 3 个维度:
solid: 实线(最常用)dashed: 虚线dotted: 点状double: 双线div, p, h1 ~ h6span, apadding-toppadding-bottompadding-leftpadding-rightmargin-topmargin-bottommargin-leftmargin-rightJavaScript 是一种用来控制网页行为和交互的脚本语言。
onclick: 点击事件引号里的内容:JS 代码(进行弹窗操作)<script> 标签中写 JavaScript<script> 告诉浏览器:里面是 JS<script> 要写在最后面,要等元素生成后,才能对元素绑定操作。<script>
document.getElementById("btn").onclick = function () {
alert("点到我了");
};
</script>
document: 当前网页(整个 HTML 页面)getElementById: 通过 id 查找元素<script src="script.js" defer></script>
defer 的意思是:让 JavaScript 延后执行,等 HTML 全部解析完成之后再执行。defer 就要这句放在最后面 </body> 上面。var name = 'zhangsan';
let name = 'zhangsan';
letconst name = 'zhangsan';
let age = 18; let msg = "我今年" + age + "岁"; (msg 为字符串 "我今年 18 岁")alert("第一行\n第二行");let a = 10; let b = 3.14;let s1 = "hello"; let s2 = 'world';let flag1 = true; let flag2 = false;let d; (变量声明了,但没赋值,只有一个值:undefined)let e = null;console.log(typeof d); // "undefined"== vs ===
== 只比较'值',会进行隐式类型转换 20 == "20" // true=== 同时比较'值 + 类型',不会转换 20 === "20" // false===var arr = [1, 'abc', true, null];arr.splice(4, 1);
{} 表示一个对象: 分隔键和值 , 分隔多个属性jQuery 是一个 JavaScript 前端库。
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
$(selector).action()
$(): jQuery 提供的全局函数,用来'选元素'selector(选择器): 用来查找 HTML 元素(和 CSS 选择器一样)action()(操作): 对选中的元素做事情(改内容、绑定事件、改样式等)document 表示整个页面.ready(): 等页面加载出来(等 btn 控件加载出来才行,不然绑定失败)$("#btn"): 绑定 id=btn 的控件.click(): 触发点击时执行该函数$(this): 选择当前元素$(document): 选择整个网页$("CSS 选择器")
$(""): 选择页面中的所有元素$('.class'): 选择 class 组的所有元素$("") 是'全选内容',$(document) 是'选网页本身'(selector): 哪个控件event: 什么事件function(){}: 执行什么操作html()、text()、val() 在不传参数时用于获取内容,在传参数时用于设置内容,并返回 jQuery 对象。html(): 标签会生效;text(): 标签当普通文字。color、font-size、width、height 都是 CSS 样式empty(): 只删除子元素remove(): 删除整个元素猜数字游戏示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div>
输入数字:
<input type="text">
<button id="btn2">确定</button>
<br/>
已经猜的次数:
<span id="count">0</span>
<br/>
结果:
<span id="result"></span>
</div>
<button id="btn">重新开始</button>
<script>
$(document).ready(function(){
let target;
let count;
// 初始化
target = Math.floor(Math.random() * 100) + 1;
count = 0;
// 猜数字
$("#btn2").click(function(){
let re = parseInt($("input").val());
if (isNaN(re)) {
$("#result").text("请输入数字");
return;
}
count++;
$("#count").text(count);
if (re > target) {
$("#result").text("大了");
$("#result").css("color","red");
} else if (re < target) {
$("#result").text("小了");
$("#result").css("color","red");
} else {
$("#result").text("对了!");
$("#result").css(,);
}
});
$().((){
target = .(.() * ) + ;
count = ;
$().();
$().();
$().();
});
});
</script>
</body>
</html>

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 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