HTML 元素、标签、格式、实体详解
1. HTML 元素(Element)
(1)概念
-
HTML 元素是构成网页的基本构建块,用于定义网页的内容和结构。
-
每个 HTML 元素都有特定的语义,用于表示不同类型的内容(如标题、段落、链接、图片等)。
(2)分类
-
块级元素(Block-level Element):
-
占据整个一行,通常用于表示较大的内容块。
-
示例:
<div>
、<p>
、<h1>
-<h6>
、<ul>
、<ol>
、<table>
等。
-
-
行内元素(Inline Element):
-
不会独占一行,多个行内元素可以在同一行显示。
-
示例:
<span>
、<a>
、<img>
、<strong>
、<em>
等。
-
-
行内块元素(Inline-block Element):
-
结合了行内元素和块级元素的特点,可以设置宽度和高度,但不会独占一行。
-
示例:
<button>
、<input>
等。
-
(3)结构
-
HTML 元素通常由开始标签、内容和结束标签组成,例如:
-
<p>这是一个段落。</p>
-
其中,
<p>
是开始标签,</p>
是结束标签,这是一个段落。
是内容。
-
-
有些元素是自闭合的(空元素),不需要结束标签,例如:
-
<img src="image.jpg" alt="图片描述">
-
<br>
(换行) -
<input type="text">
-
2. HTML 标签(Tag)
(1)概念
-
HTML 标签用于定义元素的类型和属性,是 HTML 元素的“外壳”。
-
标签分为开始标签和结束标签,用于包裹内容。
(2)类型
-
单标签(Single Tag):
-
自闭合标签,不需要结束标签。
-
示例:
<br>
、<hr>
、<img>
、<input>
。
-
-
双标签(Paired Tag):
-
包含开始标签和结束标签。
-
示例:
<p>...</p>
、<div>...</div>
、<h1>...</h1>
。
-
(3)属性
-
HTML 标签可以包含属性,用于定义元素的额外信息。
-
属性以键值对的形式出现,例如:
-
<a href="https://example.com">这是一个链接</a>
(href
是属性名,https://example.com
是属性值) -
<img src="image.jpg" alt="图片描述">
(src
和alt
是属性名)
-
3. HTML 格式(Formatting)
(1)文档结构
-
HTML 文档的结构通常包括以下几个部分:
-
<!DOCTYPE html>
:声明文档类型,告诉浏览器这是一个 HTML5 文档。 -
<html>
:根元素,包含整个 HTML 文档的内容。 -
<head>
:头部元素,包含元数据(如标题、字符集、样式链接等)。 -
<body>
:主体元素,包含用户可见的内容(如文本、图片、链接等)。
-
(2)基本格式
HTML复制
<!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>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<a href="https://example.com">访问示例网站</a>
<img src="image.jpg" alt="图片描述">
</body>
</html>
预览
(3)语义化标签
-
HTML5 引入了许多语义化标签,用于更清晰地表示内容的结构和语义。
-
示例:
-
<header>
:页面头部。 -
<nav>
:导航栏。 -
<main>
:主要内容区域。 -
<section>
:独立的章节或部分。 -
<article>
:独立的文章或内容块。 -
<footer>
:页面底部。
-
4. HTML 实体(Entity)
(1)概念
-
HTML 实体用于在 HTML 文档中表示特殊字符或符号,这些字符可能在 HTML 中有特殊含义(如
<
、>
、&
等)。 -
使用实体可以避免这些字符被浏览器误解为 HTML 标签的一部分。
(2)类型
-
字符实体:
-
使用字符名称表示,例如:
-
<
表示<
-
>
表示>
-
&
表示&
-
"
表示"
-
'
表示'
-
-
-
数字实体:
-
使用字符的 Unicode 编码表示,例如:
-
<
表示<
(60
是<
的 Unicode 编码) -
>
表示>
-
&
表示&
-
-
-
符号实体:
-
用于表示一些特殊符号,例如:
-
©
表示 ©(版权符号) -
®
表示 ®(注册商标符号) -
™
表示 ™(商标符号) -
表示 空格(非断行空格)
-
-
(3)使用场景
-
在 HTML 文档中,当需要插入特殊字符(如
<
、>
、&
等)时,应使用实体。 -
示例:
-
<p>这是一个小于号:<</p>
-
<p>这是一个大于号:></p>
-
<p>这是一个版权符号:©</p>
-
总结
-
HTML 元素是网页的基本构建块,用于定义内容和结构。
-
HTML 标签是元素的“外壳”,用于定义元素的类型和属性。
-
HTML 格式规定了文档的结构和语义化标签的使用,使网页内容更清晰、易读。
-
HTML 实体用于表示特殊字符或符号,避免与 HTML 标签冲突。
html链接、框架、表格、列表、表单、图使用
1. HTML 链接(Hyperlinks)
(1)基本链接
-
语法:
HTML复制
<a href="URL">链接文本</a>
预览
-
示例:
HTML复制
<a href="https://www.example.com">访问示例网站</a>
预览
(2)链接到页面内的锚点
-
语法:
HTML复制
<a href="#anchor">链接文本</a> ... <a id="anchor">锚点位置</a>
预览
-
示例:
HTML复制
<a href="#section1">跳转到第一部分</a> ... <h2 id="section1">第一部分</h2>
预览
(3)下载链接
-
语法:
HTML复制
<a href="URL" download>链接文本</a>
预览
-
示例:
HTML复制
<a href="file.zip" download>下载文件</a>
预览
(4)电子邮件链接
-
语法:
HTML复制
<a href="mailto:email@example.com">发送邮件</a>
预览
-
示例:
HTML复制
<a href="mailto:support@example.com">联系我们</a>
预览
2. HTML 框架(Frames)
(1)基本框架
-
语法:
HTML复制
<frameset rows="行高, 行高"> <frame src="页面URL" /> <frame src="页面URL" /> </frameset>
预览
-
示例:
HTML复制
<frameset rows="100px, *"> <frame src="header.html" /> <frame src="main.html" /> </frameset>
预览
(2)列框架
-
语法:
HTML复制
<frameset cols="列宽, 列宽"> <frame src="页面URL" /> <frame src="页面URL" /> </frameset>
预览
-
示例:
HTML复制
<frameset cols="200px, *"> <frame src="sidebar.html" /> <frame src="main.html" /> </frameset>
预览
(3)嵌套框架
-
语法:
HTML复制
<frameset rows="行高, 行高"> <frame src="页面URL" /> <frameset cols="列宽, 列宽"> <frame src="页面URL" /> <frame src="页面URL" /> </frameset> </frameset>
预览
-
示例:
HTML复制
<frameset rows="100px, *"> <frame src="header.html" /> <frameset cols="200px, *"> <frame src="sidebar.html" /> <frame src="main.html" /> </frameset> </frameset>
预览
(4)<iframe>
(内联框架)
-
语法:
HTML复制
<iframe src="页面URL" width="宽度" height="高度"></iframe>
预览
-
示例:
HTML复制
<iframe src="https://www.example.com" width="600" height="400"></iframe>
预览
3. HTML 表格(Tables)
(1)基本表格
-
语法:
HTML复制
<table> <tr> <td>单元格内容</td> <td>单元格内容</td> </tr> <tr> <td>单元格内容</td> <td>单元格内容</td> </tr> </table>
预览
-
示例:
HTML复制
<table border="1"> <tr> <td>行1,列1</td> <td>行1,列2</td> </tr> <tr> <td>行2,列1</td> <td>行2,列2</td> </tr> </table>
预览
(2)表头
-
语法:
HTML复制
<table> <thead> <tr> <th>表头内容</th> <th>表头内容</th> </tr> </thead> <tbody> <tr> <td>单元格内容</td> <td>单元格内容</td> </tr> </tbody> </table>
预览
-
示例:
HTML复制
<table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </tbody> </table>
预览
(3)跨行和跨列
-
跨行(
rowspan
):HTML复制
<table border="1"> <tr> <td rowspan="2">跨2行</td> <td>行1,列2</td> </tr> <tr> <td>行2,列2</td> </tr> </table>
预览
-
跨列(
colspan
):HTML复制
<table border="1"> <tr> <td colspan="2">跨2列</td> </tr> <tr> <td>行2,列1</td> <td>行2,列2</td> </tr> </table>
预览
4. HTML 列表(Lists)
(1)无序列表(Unordered List)
-
语法:
HTML复制
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
预览
-
示例:
HTML复制
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
预览
(2)有序列表(Ordered List)
-
语法:
HTML复制
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
预览
-
示例:
HTML复制
<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol>
预览
(3)自定义列表(Description List)
-
语法:
HTML复制
<dl> <dt>术语</dt> <dd>描述</dd> <dt>术语</dt> <dd>描述</dd> </dl>
预览
-
示例:
HTML复制
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表</dd> </dl>
预览
5. HTML 表单(Forms)
(1)基本表单
-
语法:
HTML复制
<form action="处理表单的URL" method="提交方法"> <label for="输入框ID">标签文本:</label> <input type="text" id="输入框ID" name="输入框名称"> <button type="submit">提交</button> </form>
预览
-
示例:
HTML复制
<form action="submit.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <label for="password">密码:</label> <input type="password" id="password" name="password"> <button type="submit">登录</button> </form>
预览
(2)表单控件类型
-
文本输入框:
HTML复制
<input type="text" name="username">
预览
-
密码输入框:
HTML复制
<input type="password" name="password">
预览
-
单选按钮:
HTML复制
<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female">
JavaScript语法、数据类型、变量
JavaScript 是一种动态、弱类型、基于原型的脚本语言,广泛用于网页交互和服务器端开发。以下是 JavaScript 的语法、数据类型和变量的详细介绍。
1. JavaScript 语法
(1)基本语法
-
注释:
-
单行注释:
// 这是单行注释
-
多行注释:
/* 这是多行注释 */
-
-
语句分隔:
-
使用分号(
;
)分隔语句,但在大多数情况下,分号可以省略(不推荐)。
JavaScript复制
let x = 10; // 推荐 let y = 20 // 不推荐,但可以工作
-
-
大小写敏感:
-
JavaScript 是大小写敏感的语言,
Variable
和variable
是不同的变量。
-
-
代码块:
-
使用花括号
{}
包裹代码块。
JavaScript复制
{ let x = 10; console.log(x); }
-
(2)函数定义
-
函数声明:
JavaScript复制
function add(a, b) { return a + b; }
-
函数表达式:
JavaScript复制
const add = function(a, b) { return a + b; };
-
箭头函数(ES6):
JavaScript复制
const add = (a, b) => a + b;
(3)条件语句
-
if 语句:
JavaScript复制
if (x > 0) { console.log("x 是正数"); }
-
else if 和 else:
JavaScript复制
if (x > 0) { console.log("x 是正数"); } else if (x < 0) { console.log("x 是负数"); } else { console.log("x 是零"); }
-
switch 语句:
JavaScript复制
switch (x) { case 1: console.log("x 是 1"); break; case 2: console.log("x 是 2"); break; default: console.log("x 不是 1 或 2"); }
(4)循环语句
-
for 循环:
JavaScript复制
for (let i = 0; i < 5; i++) { console.log(i); }
-
while 循环:
JavaScript复制
let i = 0; while (i < 5) { console.log(i); i++; }
-
do...while 循环:
JavaScript复制
let i = 0; do { console.log(i); i++; } while (i < 5);
2. JavaScript 数据类型
JavaScript 是一种弱类型语言,变量的数据类型在运行时自动确定。JavaScript 中的数据类型分为两大类:原始类型(Primitive Types)和引用类型(Reference Types)。
(1)原始类型
-
Number:数字类型。
JavaScript复制
let age = 25;
-
String:字符串类型。
JavaScript复制
let name = "John Doe";
-
Boolean:布尔类型。
JavaScript复制
let isApproved = true;
-
Undefined:未定义类型。
JavaScript复制
let x; console.log(x); // 输出 undefined
-
Null:空值类型。
JavaScript复制
let y = null;
-
Symbol(ES6):唯一且不可变的数据类型。
JavaScript复制
let mySymbol = Symbol("mySymbol");
-
BigInt(ES2020):用于表示大于
2^53 - 1
的整数。JavaScript复制
let bigNumber = BigInt(1234567890123456789012345678901234567890n);
(2)引用类型
-
Object:对象类型。
JavaScript复制
let person = { name: "John", age: 30 };
-
Array:数组类型。
JavaScript复制
let fruits = ["apple", "banana", "orange"];
-
Function:函数类型。
JavaScript复制
let sayHello = function() { console.log("Hello!"); };
-
Date:日期类型。
JavaScript复制
let today = new Date();
-
RegExp:正则表达式类型。
JavaScript复制
let regex = /pattern/;
3. JavaScript 变量
(1)变量声明
-
var
:-
声明的变量具有函数作用域或全局作用域。
-
可以重复声明同一个变量。
JavaScript复制
var x = 10;
-
-
let
(ES6):-
声明的变量具有块级作用域。
-
不允许重复声明同一个变量。
JavaScript复制
let y = 20;
-
-
const
(ES6):-
声明的变量具有块级作用域。
-
不允许重复声明同一个变量。
-
声明后不能重新赋值。
JavaScript复制
const PI = 3.14;
-
(2)变量提升(Hoisting)
-
使用
var
声明的变量会被提升到函数或全局作用域的顶部,但赋值不会提升。JavaScript复制
console.log(x); // 输出 undefined var x = 10;
-
使用
let
和const
声明的变量不会被提升,访问未声明的变量会抛出ReferenceError
。JavaScript复制
console.log(y); // 抛出 ReferenceError let y = 20;
(3)解构赋值(Destructuring)(ES6)
-
数组解构:
JavaScript复制
let [a, b] = [1, 2]; console.log(a); // 输出 1 console.log(b); // 输出 2
-
对象解构:
JavaScript复制
let { name, age } = { name: "John", age: 30 }; console.log(name); // 输出 John console.log(age); // 输出 30
总结
-
语法:JavaScript 的语法包括注释、语句分隔、大小写敏感、代码块、函数定义、条件语句和循环语句。
-
数据类型:JavaScript 的数据类型分为原始类型(如
Number
、String
、Boolean
等)和引用类型(如Object
、Array
、Function
等)。 -
变量:变量可以通过
var
、let
和const
声明,具有不同的作用域规则和特性。
JavaScript运算符,流程控制、字符串对象、事件等
1. JavaScript 运算符
JavaScript 提供了多种运算符,用于执行数学运算、比较、逻辑操作等。
(1)算术运算符
运算符 | 描述 | 示例 | 结果 |
---|---|---|---|
+ | 加法 | a + b | 5 + 3 = 8 |
- | 减法 | a - b | 5 - 3 = 2 |
* | 乘法 | a * b | 5 * 3 = 15 |
/ | 除法 | a / b | 5 / 3 = 1.67 |
% | 求余 | a % b | 5 % 3 = 2 |
++ | 自增 | a++ 或 ++a | a = a + 1 |
-- | 自减 | a-- 或 --a | a = a - 1 |
(2)比较运算符
运算符 | 描述 | 示例 | 结果 |
---|---|---|---|
== | 等于(值相等) | a == b | 5 == "5" 是 true |
=== | 严格等于(值和类型都相等) | a === b | 5 === "5" 是 false |
!= | 不等于 | a != b | 5 != "5" 是 false |
!== | 严格不等于 | a !== b | 5 !== "5" 是 true |
> | 大于 | a > b | 5 > 3 是 true |
< | 小于 | a < b | 5 < 3 是 false |
>= | 大于等于 | a >= b | 5 >= 3 是 true |
<= | 小于等于 | a <= b | 5 <= 3 是 false |
(3)逻辑运算符
运算符 | 描述 | 示例 | 结果 | ||||||
---|---|---|---|---|---|---|---|---|---|
&& | 逻辑与(AND) | a && b | true && false 是 false | ||||||
` | ` | 逻辑或(OR) | `a | b` | `true | false是 true` | |||
! | 逻辑非(NOT) | !a | !true 是 false |
(4)赋值运算符
运算符 | 描述 | 示例 | 结果 |
---|---|---|---|
= | 赋值 | a = b | a = 5 |
+= | 加法赋值 | a += b | a = a + b |
-= | 减法赋值 | a -= b | a = a - b |
*= | 乘法赋值 | a *= b | a = a * b |
/= | 除法赋值 | a /= b | a = a / b |
%= | 求余赋值 | a %= b | a = a % b |
2. 流程控制
流程控制语句用于控制代码的执行流程,包括条件语句和循环语句。
(1)条件语句
-
if
语句:JavaScript复制
if (condition) { // 如果条件为 true,则执行这里的代码 }
-
else if
和else
:JavaScript复制
if (condition1) { // 如果条件1为 true,则执行这里的代码 } else if (condition2) { // 如果条件1为 false 且条件2为 true,则执行这里的代码 } else { // 如果所有条件都不满足,则执行这里的代码 }
-
switch
语句:JavaScript复制
switch (expression) { case value1: // 如果 expression 等于 value1,则执行这里的代码 break; case value2: // 如果 expression 等于 value2,则执行这里的代码 break; default: // 如果 expression 不等于任何 case,则执行这里的代码 }
(2)循环语句
-
for
循环:JavaScript复制
for (let i = 0; i < 5; i++) { console.log(i); }
-
while
循环:JavaScript复制
let i = 0; while (i < 5) { console.log(i); i++; }
-
do...while
循环:JavaScript复制
let i = 0; do { console.log(i); i++; } while (i < 5);
-
for...of
循环(ES6):JavaScript复制
let fruits = ["apple", "banana", "orange"]; for (let fruit of fruits) { console.log(fruit); }
-
for...in
循环:JavaScript复制
let person = { name: "John", age: 30 }; for (let key in person) { console.log(key, person[key]); }
3. 字符串对象
字符串是 JavaScript 中的基本数据类型之一,但也可以通过 String
对象来操作字符串。
(1)字符串的创建
-
字符串字面量:
JavaScript复制
let str = "Hello, World!";
-
String
对象:JavaScript复制
let str = new String("Hello, World!");
(2)字符串方法
-
获取字符串长度:
JavaScript复制
let str = "Hello, World!"; console.log(str.length); // 输出 13
-
访问字符串中的字符:
JavaScript复制
let str = "Hello, World!"; console.log(str[0]); // 输出 "H" console.log(str.charAt(0)); // 输出 "H"
-
字符串拼接:
JavaScript复制
let str1 = "Hello"; let str2 = "World"; let result = str1 + " " + str2; // "Hello World"
-
查找子字符串:
JavaScript复制
let str = "Hello, World!"; console.log(str.indexOf("World")); // 输出 7 console.log(str.lastIndexOf("o")); // 输出 8
-
截取字符串:
JavaScript复制
let str = "Hello, World!"; console.log(str.slice(0, 5)); // 输出 "Hello" console.log(str.substring(0, 5)); // 输出 "Hello" console.log(str.substr(0, 5)); // 输出 "Hello"
-
替换字符串:
JavaScript复制
let str = "Hello, World!"; console.log(str.replace("World", "JavaScript")); // 输出 "Hello, JavaScript!"
-
转换大小写:
JavaScript复制
let str = "Hello, World!"; console.log(str.toUpperCase()); // 输出 "HELLO, WORLD!" console.log(str.toLowerCase()); // 输出 "hello, world!"
-
分割字符串:
JavaScript复制
let str = "apple,banana,orange"; console.log(str.split(",")); // 输出 ["apple", "banana", "orange"]
4. 事件
事件是用户与网页交互时发生的动作,例如点击按钮、鼠标移动、键盘输入等。JavaScript 提供了丰富的事件处理机制,用于响应用户的操作。
(1)事件监听器
-
addEventListener
方法:JavaScript复制
document.getElementById("myButton").addEventListener("click", function() { alert("按钮被点击了!"); });
-
removeEventListener
方法:JavaScript复制
function handleClick() { alert("按钮被点击了!"); } document.getElementById("myButton").addEventListener("click", handleClick); document.getElementById("my