HTML
HTML 基本概念
HTML (Hyper Text Markup Language),超文本标记语言。 :比文本更强大,可以表示图片、音频、视频等。 通过进行控制,这些标签都是定义好的。
系统讲解了前端开发的核心技术栈,包括 HTML 基础标签与结构、CSS 样式表引入及选择器用法、JavaScript 语言特性与对象操作,以及 jQuery 库的基本应用。文中通过表格、表单及猜数字游戏等实例演示了代码编写方法,旨在帮助初学者快速掌握网页构建与交互实现的基础流程。

HTML (Hyper Text Markup Language),超文本标记语言。 :比文本更强大,可以表示图片、音频、视频等。 通过进行控制,这些标签都是定义好的。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
这里的 h1、h2 和 h3 就是标签。
标签名 body 放到<>中。
<!-- 标签是成对出现的 -->
<h1>开始标签</h1>
<h1>结束标签</h1>
开始和结束标签中存放的是此时这个标签的内容。开始标签中可能会带有"属性",并且有的标签也可能是单个标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body> hello world </body>
</html>
结构之间的关系构成一个DOM 树。
建议使用现代代码编辑器(如 VS Code)进行开发,功能丰富且支持多平台。
原本内容不会自动换行,可以使用 p 进行换行。
<p>这是一个段落</p>
<p>这是一个段落</p>
br 是一个单标签,间隙没有 p 标签大。
换行标签<br/>
<p>这是一个段落</p>
<p>这是一个段落</p>
p 是段落标签,换行以后每一段之间有一行间距;br 换行标签,所以行之间没有间距隔开。
<img src="../xingye.jpg" alt="这是一个人物" width="500px" height="500px" style="border: 2px solid black;">
src 表示图片路径,alt 表示图片未正常显示时显示的内容。
可以使用绝对路径或相对路径(../ 表示上一级目录)。以 html 所在位置为基准查找图片。
href:点击后跳转哪个页面。
target:打开方式。默认是 _self。如果是 _blank 则用新标签页打开。
外部链接:
<a href="https://wap.baidu.com/">百度</a>
内部连接:网站内部之间的链接,写相对路径即可。
<a href="demo1.html" target="_blank">点击后会跳转到 demo1.html</a>
空链接:使用 # 在 href 中占位。
<a href="#">空链接</a>
table 标签:表示整个表格。 tr:表示表格的一行。 td:表示一个单元格。 thead:表格的头部区域。 tbody:表格的主体区域。
align:表格对齐方式。 border:边框。 cellpadding:内容距离边框的距离。 cellspacing:单元格之间的距离。 width/height:设置尺寸。 rowspan:占据多少行。 colspan:占据多少列。
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="500">
<tr><td>名字</td><td>性别</td><td>年龄</td></tr>
<tr><td>张三</td><td>男</td><td rowspan="2">18</td></tr>
<tr><td>李四</td><td>女</td></tr>
<tr><td colspan="2">李四</td></tr>
</table>
<form action="test.html">
<!-- form 内容 -->
</form>
各种输入控制,文本框,按钮,单选框,复选框。 type:text, button, checkbox, file, radio 等。 name:给 input 起个名字,尤其是单选按钮,必须有相同名字才可以是单选。 value:input 中的默认值。 checked:默认被选中,用于单选和复选按钮中。
<form action="test.html">
账号:<input type="text" name="Users" id="">
密码:<input type="password" name="password" id="">
性别:
<input type="radio" name="sex" id="male" value="0"><label for="male">男</label>
<input type="radio" name="sex" id="female" value="1"><label for="female">女</label>
</form>
复选框。
<input type="checkbox" name="chec">吃饭
<input type="checkbox" name="chec">睡觉
<input type="checkbox" name="chec">打游戏
<select name="sel" id="">
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected="selected">高中及以上</option>
</select>
文本域和按钮。
简介:<textarea rows="10" cols="100"></textarea>
注册:<input type="button" value="注册">
<input type="submit" value="注册">
button 按钮没有提交功能,submit 会提交。
<h1>用户注册</h1>
<table>
<tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr>
<tr><td>手机号</td><td><input type="number" placeholder="请输入手机号"></td></tr>
<tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr>
</table>
<div>
<input type="submit" value="注册">
<span>已有账号?</span>
<a href="#">登录</a>
</div>
CSS (Cascading Style Sheet),层叠样式表,用于控制页面的样式。 CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果。能够做到页面的样式和结构分离。
选择器 + { 声明 }。选择器确定修改谁,声明决定修改成啥。
通常放到 head 中。
<style>
p{color: red}
div{color: rgb(180, 220, 22)}
span{color: blue}
</style>
将 style 放到一个 css 文件中,然后引用。
<link rel="stylesheet" href="demo.css">
在标签里面进行样式控制。
<p style="color: red;">一个段落</p>
a{color: red;}
div{color: green;}
.red{color: red;}
.blue{color: blue;}
使用 class 调用。
#div1{font-size: 32px;}
*{color: #ff0000;}
ul a{color: red;} /* 子孙 */
li > a{color: red;} /* 直接子元素 */
.text{color: red;}
.text{font-size: 32px;}
border-width:设置边框粗细。 border-style:设置边框类型(dotted, solid, double, dashed)。 border-color:设置边框颜色。
div{border: red solid 1px;}
只有块级元素(h1-h6, p, div 等)独占一行,才可以设置宽高。 行内元素(a, span)不独占一行,不可以设置宽高。
span{display: block;}
可以将行内元素修改为块级元素。
设置内容和边框之间的距离。
外边距,设置元素和元素之间的距离。
JavaScript (简称 JS),是一个脚本语言,解释型或即时编译型的编程语言。 HTML:网页的结构 (骨)。 CSS:网页的表现 (皮)。 JavaScript:网页的行为 (魂)。
命名规则:组成字符可以是任何字母、数字、下划线 (_) 或美元符号 ($)。 数字不能开头,建议使用大驼峰。 JavaScript 是一门动态弱类型语言,var 类型可以放不同类型的值。
var name = 'zhangsan';
console.log(typeof name);
name = 12;
console.log(typeof name);
== 比较相等,会进行隐式类型转化。 === 比较相等,不会进行隐式类型转化。
var arr = new Array();
var arr2 = [];
var arr3 = [1, 2, 'hello', true];
增删查改:
// 查找
arr3.length
// 增
arr3[4] = 123;
// 改
arr3[3] = false;
// 删
arr3.splice(3, 1);
function hello(){
console.log('hello');
}
hello();
参数匹配问题:参数少会出现未定义,参数多会截取。
var student = {
name: '张三',
age: 18,
sayHello: function(){
console.log("hello");
}
};
JQuery 是一个快速、简洁且功能丰富的 JavaScript 框架,提供了选择器和 DOM 操作。
<script src="jquery-3.7.1.js"></script>
$( ) 是 JQuery 提供的一个全局函数,用于选择和操作 HTML 元素。
$(document).ready(function() {
$('button').click(function() {
$(this).hide();
});
});
以$开头,可以通过标签、class、id 进行选择。
事件组成:事件源、事件类型、事件处理程序。
获取和修改元素内容:
$('#div').html(); // 获取/设置 HTML
$('#input').val(); // 获取/设置表单值
$('#div').text(); // 获取/设置文本
获取/设置元素属性:
$('#jd').attr("href");
$('#jd').attr("href", "https://www.baidu.com/");
获取/设置 CSS 属性:
$('div').css('color');
$('div').css('color', 'blue');
append():尾部插入。 prepend():头部插入。 after():之后插入。 before():之前插入。
remove():删除被选元素及其子元素。 empty():删除被选元素的子元素。
每次要输入猜的数字,点击猜这个按钮,就会猜的次数++,结果显示猜大了还是猜小了。 点击重新开始就会重新生成 1~100 之间的数字,猜的次数重置为 0。
逻辑:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<script src="jquery-3.7.1.js"></script>
</head>
<body>
<div style="margin: 0 auto; width: 500px;">
<button id="reset">从新开始游戏</button><br/>
请输入要猜的数字:<input type="number" id="inputNum"><br/>
<button id="guess">猜</button><br/>
已经猜的次数:<span id="count"> 0 </span><br/>
结果:<span id="result"></span>
</div>
<script>
let randNum = Math.floor(Math.random()*100)+1;
let count = 0;
$('#guess').click(function(){
count++;
$('#count').text(count);
let inputNum = $('#inputNum').val();
if(inputNum < randNum){
$('#result').text("猜小了");
$('#result').css('color','red');
} else if(inputNum > randNum){
$('#result').text("猜大了");
$('#result').css('color','red');
} else {
$('#result').text("猜对了");
$('#result').css('color','green');
}
});
$('#reset').click(function(){
count = 0;
randNum = Math.floor(Math.random()*100)+;
$().();
$().(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