HTML
将 HTML 理解成 Markdown 好啦。Markdown 是用来排版一份文本的,同样地,HTML 是用来排版一个网页的。
html
├── head
│ ├── title
│ ├── meta
│ └── link
└── body
├── header
│ ├── h1
│ └── nav
│ └── ul
│ ├── li
│ ├── li
│ └── li
├── main
│ ├── section
│ │ ├── h2
│ │ ├── p
│ │ └── p
│ └── section
│ ├── h2
│ ├── p
│ └── p
└── footer
└── p
上面的树状结构展示了一个 HTML 文件的组成:
- 根元素:<html>
- 头部:<head>
头部包含了网页的元数据,例如页面标题(title)、字符编码(meta)和样式表(link)。
页面的导航通常在页眉部分(nav)中提供,它包含了一个或多个链接(a)。 - 主体:<body>
主体包含了网页的主要内容,例如页眉(header)、主要内容区域(main)和页脚(footer)。
主体通常包含一个或多个区域(section),每个区域通常都有一个标题(heading)和一些段落(p)。
一个元素的形式可能如下:
<a href="#">Home</a>
<a> 表示该元素是一个锚点(anchor),“href” 是该元素的一个属性表示跳转链接,“Home” 则是元素的具体内容。“#” 在此处未指定 “id” 则默认回到页面顶部,如果使用了 <base> 元素来指定基准 URL,那么 “#” 符号会被解析为基准 URL。
<p class="tip"><span>提示:</span>... ... ...</p>
p.tip span {
font-weight:bold;
color:#ff9955;
}
“提示” 使用了 span 元素,然后对这个 span 元素的父元素,即 p 元素应用 class,这样就可以对这个类的子元素 span 应用相应的样式了。
<h1 onclick="changetext(this)">点击文本!</h1>
这里的 this 指代 h1 元素本身,它可以传递参数给 JavaScript 脚本以完成特定事件。
一份具体的实例可能如下:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hi, my name is Arcy and I'm a web developer. I love building websites and learning new technologies.</p>
<p>When I'm not coding, I enjoy music and playing piano.</p>
</section>
<section>
<h2>My Projects</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2023 Arcy</p>
</footer>
</body>
</html>
HTML 中 <div> 和 <span> 可以提高代码的可读性,<div> 用于一个代码块为 “块级元素”,可通过添加 “class” 或 “id” 属性加以指定,<span> 则生效于一行之中为 “内联元素”,可包裹短小的文本。
<img> 和 <table> 用于图表,<form> 用于表单,<input> 等则决定表单中每个元素的作用,<label> 可为元素添加标注。
<style> 可用于内部层叠样式表,多数情况位于 <head> 中,<script> 可用于内部或外部引用 JavaScript 脚本,多数情况位于 <body> 中。
<,> 等被称为字符实体,它们用来表示一些特殊字符或无法直接输入的字符。
对于不是空元素的元素,请不要忘记加上结束标签。
CSS
HTML 标签被设计为用于定义文档内容,样式表则用于定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。
CSS 规则由两个主要的部分构成:选择器和声明。选择器是需要改变样式的 HTML 元素,声明分为属性和值,如
p {color:red;text-align:center;}
在这里选择器是 p,声明是 {color:red;text-align:center;}。
选择器分为元素选择器、id 选择器、class 选择器、后代选择器、伪类选择器等,“#” 选择一个 id,“.” 选择一个 class。
CSS 中常设置的属性包括背景属性、文本属性、字体属性、列表属性、表格属性等。一些属性可以简写,简写属性的顺序不可更改。
对于链接,共有四种伪类状态:
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
其中 a:hover 必须跟在 a:link 和 a:visited 后面,a:active 必须跟在 a:hover 后面。
所有 HTML 元素可以看作盒子,在CSS中,“box model” 这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,自外向内包括:外边距(margin)、边框(border)、内边距(padding)和内容(content)。当指定一个 CSS 元素的宽度和高度属性时,只是设置内容区域的宽度和高度,一个完整大小的元素还必须添加内边距、边框和外边距。
Float 会使元素向左或向右移动,其周围的元素也会重新排列。Float 往往是用于图像,但它在布局时一样非常有用。
下面是一个水平导航栏的实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Webpage</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
CSS 可用 @keyframes 创建动画。对于旧版本的浏览器,可添加前缀 -webkit-。
下面是一个动画的实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Webpage</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS 中的 @media 允许根据设备屏幕的尺寸、方向、分辨率或其他一些条件来修改 CSS 样式,例如
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
它仅适用于宽度小于 600 像素的屏幕。
JavaScript
JavaScript 服务于网页的动作,如下面的代码能在点击 button 后获取 id 为 “demo” 的 HTML 元素并改变其内容
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
下面的两种语法
x=document.getElementById("demo");
var x=document.getElementById("demo").value;
第一行获取了名为 “demo” 的引用,它并没有创建变量,只能在当前函数中生效。第二行创建了名为 x 的对象,赋值等于 “demo” 的值,添加 var 声明其为该函数的局部变量,不添加 var 则为全局变量。如果使用 let 代替 var,则只能在当前代码块而不是整个函数生效。
JavaScript 有四种输出方式: 使用 window.alert() 弹出警告框,使用 document.write() 方法将内容写到 HTML 文档中,使用 innerHTML 写入到 HTML 元素,使用 console.log() 写入到浏览器的控制台。
JavaScript 分为若干数据类型:
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
创建对象可以使用 new 方法,这将会调用对象的构造函数即关键字 constructor 函数。
对象中可以创建方法,如
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
可通过 person.fullName() 调用它。上述代码中的 fullName : function() 也可简写为 fullName() 。
正则表达式可验证输入的字符串是否符合某个特定的格式,例如邮箱地址
function validate() {
var email = document.getElementById("email").value;
var regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (regex.test(email)) {
document.getElementById("result").innerHTML = "邮箱格式正确";
} else {
document.getElementById("result").innerHTML = "邮箱格式不正确";
}
}
test 方法可用于检查字符串是否包含符合某个模式的子串,search、replace、match 可进行搜索、替换、提取等。
添加事件监听方法 addEventListener() 用于向指定元素添加事件句柄
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown")。
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的,默认情况下浏览器使用冒泡方式触发事件,但可以使用 addEventListener 方法的第三个参数来指定使用捕获方式。
事件的传递分为冒泡和捕获两种方式。冒泡是指事件从最具体的元素开始,逐级向上触发,直到触发事件的最外层元素。如果一个子元素触发了某个事件,它的父元素也会触发该事件。捕获是指事件从最外层元素开始,逐级向下触发,直到触发事件的最具体的元素。如果一个父元素触发了某个事件,它的子元素也会依次触发该事件。
Promise 和 then 可以很好地处理异步编程和处理异步操作返回的结果,如
fetch('https://api.example.com/data')
.then(response => response.json()) // 处理成功返回结果
.then(data => console.log(data)) // 输出成功结果
.catch(error => console.error(error)); // 处理错误信息
箭头指的是箭头函数,左侧为形参,右侧为函数体,response => response.json() 是一个回调函数。上述代码中 fetch 函数向服务器发起一个异步请求,第一个 .then() 方法将服务器返回的响应对象转换成一个 JSON 对象,第二个.then() 方法将 JSON 对象输出到控制台上,如果失败则执行 .catch()。
Promise 是一个表示异步操作的对象,有三种状态:pending(等待中)、fulfilled(已完成)和 rejected(已拒绝)。Fetch 返回的 promise 对象解析后的值就是下一行 .then 中的 response。.then() 方法会返回一个新的 promise 对象,这个新的 promise 对象的状态和值取决于前一个 promise 对象的状态和回调函数的返回值。
jQuery 是一种 JavaScript 库,它提供了一组易于使用的 API,$ 符号 (选择器符号) 是 jQuery 的快捷方式,它可以快速选取元素、执行操作、绑定事件等,如
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction(){
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>