【HTML5系列二】：HTML标签

已于 2022-03-09 09:08:07 修改
阅读量170 收藏 1
点赞数
分类专栏： 前端设计基础 文章标签： html html5 前端
于 2022-03-08 11:26:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baridhu/article/details/123339054
版权

⭐️HTML基础⭐️

☀️列表标签

💡目标：

能够使用 无序列表、有序列表、自定义列表 标签，实现网页中列表结构的搭建

⚡️1. 列表的应用场景

♗场景：

在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

♗ 特点：

按照行的方式，整齐显示内容

♗种类：

无序列表、有序列表、自定义列表

在这里插入图片描述

⚡️2. 无序列表

♗ 场景：

在网页中表示一组无顺序之分的列表，如：新闻列表。

在这里插入图片描述

♗标签组成:
在这里插入图片描述
♗ 显示特点：

  • 列表的每一项前默认显示圆点标识

♗注意点：

  • ul标签中只允许包含li标签
  • li标签可以包含任意内容

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>
</body>
</html>

⚡️3. 有序列表

♗ 场景：

在网页中表示一组有顺序之分的列表，如：排行榜。

♗ 标签组成:
在这里插入图片描述
♗ 显示特点：

  • 列表的每一项前默认显示序号标识

♗注意点：

  • ol标签中只允许包含li标签
  • li标签可以包含任意内容

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>张三:100</li>
        <li>李四: 80</li>
    </ol>
</body>
</html>

⚡️4. 自定义列表

♗ 场景：

在网页的底部导航中通常会使用自定义列表实现。

♗ 标签组成：
在这里插入图片描述

♗显示特点：

  • dd前会默认显示缩进效果

♗ 注意点：

  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>
</body>
</html>

💻运行效果：
在这里插入图片描述

⚡️5. 列表标签-总结

无序列表最常用，有序列表偶尔用，自定义列表底部导航用。
♗ 无序列表
在这里插入图片描述

♗ 有序列表
在这里插入图片描述

♗ 自定义列
在这里插入图片描述

☀️表格标签

⚡️1. 表格的基本标签

♗ 场景：

在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
在这里插入图片描述

♗ 基本标签：
在这里插入图片描述

♗ 注意点：

  • 标签的嵌套关系：table > tr > td

⚡️2. 表格相关属性

♗ 场景：

设置表格基本展示效果

♗ 常见相关属性：
在这里插入图片描述

♗ 注意点：

  • 实际开发时针对于样式效果推荐用CSS设置

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table 包含 tr, tr包含td -->
    <table border="1" width=600 height=400>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>孩砸, 真棒啊</td>
        </tr>
        <tr>
            <td>郭德纲</td>
            <td>150分</td>
            <td>没有郭德纲相声早黄了, 有了郭德纲, 相声更黄了</td>
        </tr>
    </table>
</body>
</html>

💻运行效果：
在这里插入图片描述

⚡️3. 表格标题和表头单元格标签

♗ 场景：

在表格中表示整体大标题和一列小标题

♗ 其他标签：
在这里插入图片描述
♗ 注意点：

  • caption标签书写在table标签内部
  • th标签书写在tr标签内部（用于替换td标签）

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <!-- <td></td> -->
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100分</td>
            <td>真棒, 第一名</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99分</td>
            <td>真棒, 第二名</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>真棒, 相亲成功</td>
        </tr>
    </table>
</body>
</html>

💻运行效果：
在这里插入图片描述

⚡️4. 表格的结构标签（了解）

♗ 场景：

让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

♗ 结构标签：
在这里插入图片描述

♗ 注意点：

  • 表格结构标签内部用于包裹tr标签
  • 表格的结构标签可以省略

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                <!-- <td></td> -->
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>100分</td>
                <td>真棒, 第一名</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>99分</td>
                <td>真棒, 第二名</td>
            </tr>    
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>真棒, 相亲成功</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

⚡️5. 合并单元格

🚀5.1 合并单元格-思路
♗ 场景：

将水平或垂直多个单元格合并成一个单元格

在这里插入图片描述
♗ 合并单元格步骤：

  1. 明确合并哪几个单元格
  2. 通过左上原则，确定保留谁删除谁
    • 上下合并→只保留最上的，删除其他
    • 左右合并→只保留最左的，删除其他
  3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

♗注意点：

  • 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                <!-- <td></td> -->
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td rowspan="2">100分</td>
                <td>真棒, 第一名</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>真棒, 第二名</td>
            </tr>    
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

☀️表单标签

⚡️1. input系列标签

🚀1.1 input系列标签的基本介绍

♗ 场景：
在网页中显示收集用户信息的表单效果，如：登录页、注册页
♗标签名：input

• input标签可以通过type属性值的不同，展示不同效果

♗ type属性值:
在这里插入图片描述
💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 写什么就显示什么 -->
    文本框: <input type="text">
    <br>
    <br>
    <!-- 书写的内容都会变成点点显示 -->
    密码框: <input type="password">

    <br>
    <br>
    单选框: <input type="radio">

    <br>
    <br>

    多选框: <input type="checkbox">

    <br>
    <br>

    上传文件: <input type="file">
</body>
</html>

💻运行效果：
在这里插入图片描述

🚀1.2 input系列标签-文本框

♗ 场景：

在网页中显示输入单行文本的表单控件

♗ type属性值：text

♗ 常用属性：
在这里插入图片描述
💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入用户名">
</body>
</html>

💻运行效果：
在这里插入图片描述

💡（拓展）value属性和name属性作用介绍
♗value属性：

用户输入的内容，提交之后会发送给后端服务器

♗ name属性：

当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

♗ 后端接收到数据的格式是：

name的属性值 = value的属性

在这里插入图片描述

🚀1.3 input系列标签-密码框

♗场景：

在网页中显示输入密码的表单控件

♗ type属性值：password

♗ 常用属性（同文本框）：
在这里插入图片描述
💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="password" placeholder="请输入密码">
</body>
</html>

💻运行效果：
在这里插入图片描述

♗ 注意点：

  • type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框

🚀1.4 input系列标签-单选框

♗ 场景：
在网页中显示多选一的单选表单控件

♗ type属性值：radio

♗ 常用属性：
在这里插入图片描述

♗ 注意点：

  • name属性对于单选框有分组功能
  • 有相同name属性值的单选框为一组，一组中只能同时有一个被选中

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别: <input type="radio" name="sex">男
          <input type="radio" name="sex" checked>女

    <input type="checkbox" checked>
</body>
</html>

💻运行效果：
在这里插入图片描述

🚀1.5 input系列标签-复选框

♗场景：

在网页中显示多选多的多选表单控件

♗ type属性值：checkbox

♗常用属性（同单选框）：
在这里插入图片描述

🚀1.6 input系列标签-文件选择

♗ 场景：

在网页中显示文件选择的表单控件

♗ type属性值：file

♗ 常用属性：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" multiple>
</body>
</html>

💻运行效果：
在这里插入图片描述

🚀1.7 input系列标签-按钮

♗ 场景：

在网页中显示不同功能的按钮表单控件

♗ type属性值：
在这里插入图片描述

♗ 注意点：

  • 如果需要实现以上按钮功能，需要配合form标签使用
  • form使用方法：用form标签把表单标签一起包裹起来即可

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        用户名: <input type="text">
        <br>
        <br>
        密码: <input type="password">
        <br>
        <br>
        <!-- 按钮 -->
        <input type="submit" value="免费注册">
        <input type="reset">
        <input type="button" value="普通按钮">
        <!-- 属性  xx="xxx" -->
    </form>
</body>
</html>

💻运行效果：
在这里插入图片描述

🚀1.8 input系列标签总结

♗ input标签的type属性值：
在这里插入图片描述

♗ 注意点：

  • 占位符：placeholder
  • 如果需要实现单选效果，需要设置相同的name属性值
  • 单选框和多选框的默认选中：checked

⚡️2. button按钮标签

♗ 场景：

在网页中显示用户点击的按钮

♗标签名：button

♗ type属性值（同input的按钮系列）：
在这里插入图片描述

♗ 注意点：

  • 谷歌浏览器中button默认是提交按钮
  • button标签是双标签，更便于包裹其他内容：文字、图片等

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>我是按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮, 没有任何功能</button>
</body>
</html>

💻运行效果：
在这里插入图片描述

⚡️3. select下拉菜单标签

♗ 场景：

在网页中提供多个选择项的下拉菜单表单控件

♗ 标签组成：

  • select标签：下拉菜单的整体
  • option标签：下拉菜单的每一项

♗ 常见属性：

  • selected：下拉菜单的默认选中

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>深圳</option>
    </select>
    
</body>
</html>

💻运行效果：
在这里插入图片描述

⚡️4. textarea文本域标签

♗ 场景：
在网页中提供可输入多行文本的表单控件

♗ 标签名：textarea

♗ 常见属性：

  • cols：规定了文本域内可见宽度
  • rows：规定了文本域内可见行数

♗ 注意点：

  • 右下角可以拖拽改变大小
  • 实际开发时针对于样式效果推荐用CSS设置

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea cols="60" rows="30"></textarea>
</body>
</html>

⚡️5. label标签

♗ 场景：

常用于绑定内容与表单标签的关系

♗标签名：label

♗使用方法①：

  1. 使用label标签把内容（如：文本）包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别: 
    <!--使用方法1：-->
    <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
</body>
</html>

♗ 使用方法②：

  1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
  2. 需要把label标签的for属性删除即可

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别: 
    <!--使用方法1：-->
    <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <!--使用方法2：-->
    <label><input type="radio" name="sex"> 女</label>
</body>
</html>

💻运行效果：
在这里插入图片描述

⚡️6. 表单标签-总结

♗ ① input标签不同形态
在这里插入图片描述
♗ ② button按钮标签：
在这里插入图片描述
♗ ③ select下拉菜单标签：
在这里插入图片描述
♗ ④ textarea文本域标签：
在这里插入图片描述
♗ ⑤ label标签：
在这里插入图片描述

☀️语义化标签

⚡️1. 没有语义的布局标签

🚀1.1 没有语义的布局标签-div和span
♗ 场景：

实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

♗ div标签：

一行只显示一个（独占一行）

♗ span标签：

一行可以显示多个

💻代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    普通文字
    <div>这是div标签</div>
    <div>这是div标签</div>

    <span>这是span标签</span>
    <span>这是span标签</span>
</body>
</html>

💻运行效果：

普通文字
这是div标签
这是div标签
这是span标签 这是span标签

⚡️2. 有语义的布局标签（了解）

♗ 场景：

在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

♗ 标签：
在这里插入图片描述

♗ 注意点：

  • 以上标签显示特点和div一致，但是比div多了不同的语义

☀️字符实体

⚡️1. HTML中的空格合并现象

♗场景：

如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

在这里插入图片描述

⚡️2. 常见字符实体

♗ 场景：在网页中展示特殊符号效果时，需要使用字符实体替代

♗ 结构：
在这里插入图片描述

♗ 常见字符实体：
在这里插入图片描述

Baridhu
关注
专栏目录
HTML5系列代码：标签中对齐属性的应用
BLOG域名:programb.blog.csdn.net
06-26 1813
text-align 属性规定元素中的文本的水平对齐方式。 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值justify；不同用户代理可能会得到不同的结果。 默认值： 如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。 继承性： yes 版本： CSS1 JavaScript 语法： object.style.textAlign=“right” .
HTML5在a标签内放置块级元素示例代码
01-21
对比起XHTML来说，HTML5通过更简单的元素引起了一系列的思考，坦诚地讲,这真的是急需的简化。这些简化之一就是能够通过标签包装像div,h标签(h1…h6),和段落标记P 这些块级元素。你没看错:用一个A标签包裹块级元素...
HTML基础知识点汇总
12-04
HTML基本标签汇总讲义。虽然只有短短几页但基本包含了html所有标签。对初学者是必不可少的资料。
HTML基础知识点总结
qq_44827002的博客
11-06 1580
目录 1.中文名：超文本标记语言 2..HTML骨架结构 3.标签结构 4.标题属性 5.html标签之间的关系 6.标题类型 1.标题标签 2.段落标签 3.换行标签 4.水平线标签 5.文本格式化标签 1.普通语气 2.强烈语气 6.图片标签 7.路径介绍 1.绝对路径 2.相对路径 8.音频标签 9.视频标签 10.链接...
HTML 知识点总结
姜皓的博客
05-11 984
HTML 常见元素1.&lt;meta charset = "utf-8'&gt;表示页面使用的那种字符集（编码字符），一般为 utf-8，囊括所有英文和中文（放在第1行）2.&lt;meta  name ="viewport" content="width=decive-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"&gt;...
HTML5新元素标签系列:使用HTML5设计自己的博客
03-04
但是还有很多新的元素标签，你可以把它们用在你的Web1.0网页上。我们要对它们做一些研究，让我们一起做一个博客吧。首先，我们要使用header，footer和nav元素先搭建页面结构。接着通过使用新的数据类型和HTML浏览器...
HTML教程:收集的常用的HTML标签(6)
12-13
本文主要介绍了一些常用的HTML标签，但需要注意的是，其中某些标签并不完全符合XHTML规范，因此在实际开发中需要选择性使用。 1. 基本TAG元素： - `<HTML>` 和 `</HTML>`：代表整个HTML文档的开始和结束。 - `...
Html基础知识点总结！
行到水穷处，坐看云起时！
09-06 1064
HTML知识点 1、第一批六个 1<h1>~<h6> 标题标记，用于表示文档内容的标题内容，以及标题内容的级别 2<div></div> 块级元素，总是在新行上开始，占据一行 1.3 <p></p> 段落标记，用于表示内容是一个段落 1.4 <span></span> 行内元素，和其他元素都在一行上 1.5 <hr/> ...
HTML 知识点总结
01-02
HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
HTML基础知识点总结 .doc
11-21
思沃普智能会议管理系统，是一个集智能控制，会议预约，会议管理，设备运维，音视频会议于一体的智能化会议系统。是未来企业办公以及联合办公空间发展趋势所在。如果贵公司觉得我们的建议对您有所帮助，请与我联系。思沃普，邀您共享智能会议：http://www.smartwork.link/Saas.html
【HTML】HTML基础知识总结
空空
10-24 1239
1.HTML概念 HTML，全称HyperTextMarkupLanguage，超文本标记语言，是一种描述网页的语言，而非编程语言，HTML使用标记标签来描述网页。 2.HTML常用标签 html文档：&amp;lt;html&amp;gt;&amp;lt;/html&amp;gt; 文档头部：&amp;lt;head&amp;gt;&amp;lt;/head&amp;gt; 文档主体: &amp;lt;body&amp;gt;
Html基础知识点梳理
fxforevernow的博客
02-04 1323
* 网络编程 (Socket + IO) * 单机程序 -> 网络程序 * C/S ，B/S * C/S * 客户端和服务端程序 * 由2个子程序配合完成应用 * QQ客户端 + QQ服务端 * B/S * 浏览器和web服务器程序 * 由3个子程序配合完成应用 * IE浏览器 + tomcat服务器 + 如淘宝程序，京东程序 (业务程序) * 交互...
HTML知识点总结
weixin_45239190的博客
08-05 294
HTML学习前置知识 1.前后端分离 目前企业级项目都是基于前后端分离的项目 java ssh ssm jsp（前端页面） 前端：页面的重构（HTML、CSS、JS）+数据交互（使用工具和后台服务交互） 后端工程师：java =>接口 2.B/S架构（ Browser/Server，浏览器/服务器模式） 基于：浏览器 = 服务器 校园官网：浏览器 = 学校服务器 学生管理系统：浏览器 = 公司服务器 ...
html知识点总结
mhc20201554114的博客
08-13 350
而对于标记语言，百科里给的解释是指将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码，我有点不是很理解，但是结合以前写页面的经历，感觉是指将页面的结构和样式通过标签和文本结合的方式展现出来。就是定义了支持汉字的编码格式，如果没有在页面上加这句，浏览器没有按照指定的格式解析，就会出现"锟斤拷烫烫烫"这样的乱码。全局属性是指可以与所有html元素一起使用的属性，即所有的html元素如div,p,button等元素都可以使用的属性。出现乱码代表编码的方式和解码的方式不一样，...
HTML基础知识点总结。
weixin_42174516的博客
01-10 273
HTML基础知识总结： HTML结构： HTML文档有.html或者.htm结尾 所有的HTML代码都由标签组成： 1、单标签：<标签名 属性名=“属性值” > 2、双标签：<标签名 属性名=“属性值”>内容</标签名> 相同属性值： 1、name="" 给标签起一个名字 2、id="" 给标签设置一个ID，整个HTML文档只能有一个ID值。不能出现重复ID。 ...
HTML基础知识总结
weixin_43786395的博客
11-09 421
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1.实体2.meta标签3.语义化标签4.列表5.超链接6.图片标签7.内联框架8.音视频总结 前言 这篇文章主要总结一下html相关的基础知识 提示：以下是本篇文章正文内容 1.实体 在页面中编写的多个空格会被浏览器解析为一个空格。 html中不能直接书写一些特殊符号，如：字母两侧的大于号和小于号，如果我们需要在页面中书写这些特殊符号，需要使用HTML中的实体，也就是转义字符。 实体的语法： &实体的名字 以下是一
HTML5新旧标签详解：section、video等
"HTML5是超文本标记语言的最新版本，它引入了一系列新的标签和废除了部分旧的标签，以增强网页的结构化和语义化。这些改变旨在提高网页的可读性，同时简化开发过程，使得内容更加易于理解和处理。本文将详细探讨...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值