网络安全基础

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="图片描述">srcalt 是属性名)

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)类型

  • 字符实体

    • 使用字符名称表示,例如:

      • &lt; 表示 <

      • &gt; 表示 >

      • &amp; 表示 &

      • &quot; 表示 "

      • &apos; 表示 '

  • 数字实体

    • 使用字符的 Unicode 编码表示,例如:

      • &#60; 表示 <60< 的 Unicode 编码)

      • &#62; 表示 >

      • &#38; 表示 &

  • 符号实体

    • 用于表示一些特殊符号,例如:

      • &copy; 表示 ©(版权符号)

      • &reg; 表示 ®(注册商标符号)

      • &trade; 表示 ™(商标符号)

      • &nbsp; 表示 空格(非断行空格)

(3)使用场景

  • 在 HTML 文档中,当需要插入特殊字符(如 <>& 等)时,应使用实体。

  • 示例:

    • <p>这是一个小于号:&lt;</p>

    • <p>这是一个大于号:&gt;</p>

    • <p>这是一个版权符号:&copy;</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 是大小写敏感的语言,Variablevariable 是不同的变量。

  • 代码块

    • 使用花括号 {} 包裹代码块。

    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;
  • 使用 letconst 声明的变量不会被提升,访问未声明的变量会抛出 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 的数据类型分为原始类型(如 NumberStringBoolean 等)和引用类型(如 ObjectArrayFunction 等)。

  • 变量:变量可以通过 varletconst 声明,具有不同的作用域规则和特性。

JavaScript运算符,流程控制、字符串对象、事件等 

1. JavaScript 运算符

JavaScript 提供了多种运算符,用于执行数学运算、比较、逻辑操作等。

(1)算术运算符

运算符描述示例结果
+加法a + b5 + 3 = 8
-减法a - b5 - 3 = 2
*乘法a * b5 * 3 = 15
/除法a / b5 / 3 = 1.67
%求余a % b5 % 3 = 2
++自增a++ 或 ++aa = a + 1
--自减a-- 或 --aa = a - 1

(2)比较运算符

运算符描述示例结果
==等于(值相等)a == b5 == "5" 是 true
===严格等于(值和类型都相等)a === b5 === "5" 是 false
!=不等于a != b5 != "5" 是 false
!==严格不等于a !== b5 !== "5" 是 true
>大于a > b5 > 3 是 true
<小于a < b5 < 3 是 false
>=大于等于a >= b5 >= 3 是 true
<=小于等于a <= b5 <= 3 是 false

(3)逻辑运算符

运算符描述示例结果
&&逻辑与(AND)a && btrue && false 是 false
``逻辑或(OR)`ab``truefalsetrue`
!逻辑非(NOT)!a!true 是 false

(4)赋值运算符

运算符描述示例结果
=赋值a = ba = 5
+=加法赋值a += ba = a + b
-=减法赋值a -= ba = a - b
*=乘法赋值a *= ba = a * b
/=除法赋值a /= ba = a / b
%=求余赋值a %= ba = a % b
2. 流程控制

流程控制语句用于控制代码的执行流程,包括条件语句和循环语句。

(1)条件语句

  • if 语句

    JavaScript复制

    if (condition) {
        // 如果条件为 true,则执行这里的代码
    }
  • else ifelse

    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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值