HTML4(二)(上)

简介: HTML4(二)(上)

1 开发者文档

  • W3C官网: www.w3c.org
  • W3School: www.w3school.com.cn
  • MDN: developer.mozilla.org —— 平时用的最多。

2 基本标签

2.1 排版标签

例:标题标签

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>学习标题标签</title>
  </head>
  <body>
    <!--标题标签-->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
  </body>
</html>

例: 段落标签

<p>
    这是,第一段
</p>
<p>
    这是,第二段
</p>

例:div标签

<div>
        <p>置身移动互联时代,人们在享受智能设备带来便利的同时,也在一些场景中面临个人信息泄露风险。随着时间推移,这样的风险日益呈现出新的表现形式。</p>
        <p>一些APP声称看视频、玩游戏甚至走路都能赚钱,但用户想提现却难上加难,还容易泄露个人信息;新型不法软件图标透明、没有名称,在手机屏幕上十分隐蔽,不仅不停推送广告,还会收集并转卖用户隐私信息;个人信息安全和隐私保护话题引发关注,正说明其涉及群众切身利益,问题不容小视。</p>
     </div>

2.2 语义化标签

  • 概念:用特定的标签,去表达特定的含义。
  • 原则:标签的默认效果不重要(后期可以通过CSS 随便控制效果),语义最重要!
  • 举例:对于h1标签,效果是文字很大(不重要),语义是网页主要内容(很重要)。
  • 优势:
  • 代码结构清晰可读性强。
  • 有利于 SEO(搜索引擎优化)。
  • 方便设备解析(如屏幕阅读器、盲人阅读器等)。

2.3 行内元素与块级元素

2.4 文本标签

1、 用于包裹:词汇、短语等。

2、 通常写在排版标签里面。

3、 排版标签更宏观(大段的文字),文本标签更微观(词汇、短语)。

4、 文本标签通常都是行内元素。

例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML_常用的文本标签</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        预防电信诈骗,请安装:<em>国家反诈中心app</em>。
    </p>
    <p>
        当我们出门的时候,一定要<strong>关好门窗</strong>!
    </p>
    <p>
        前端三个框架为:<span>Angular、React、Vue</span>。
    </p>
</body>
</html>

2.5 常用标签补充

3 图片标签

例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML_图片标签</title>
</head>
<body>
    <img width="200" src="奥特曼.jpg" alt="奥特曼,你相信光吗?">
    <img width="200" src="奥特曼.jpg" alt="奥特曼,你相信光吗?">
</body>
</html>

4 超链接标签

HTML4(二)(下)+https://developer.aliyun.com/article/1556792

目录
打赏
0
0
0
0
17
分享
相关文章
kde
|
5天前
|
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
2920 7
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
544 0
Dify MCP 保姆级教程来了!
大语言模型,例如 DeepSeek,如果不能联网、不能操作外部工具,只能是聊天机器人。除了聊天没什么可做的。
800 9
2025年最新版最细致Maven安装与配置指南(任何版本都可以依据本文章配置)
本文详细介绍了Maven的项目管理工具特性、安装步骤和配置方法。主要内容包括: Maven概述:解释Maven作为基于POM的构建工具,具备依赖管理、构建生命周期和仓库管理等功能。 安装步骤: 从官网下载最新版本 解压到指定目录 创建本地仓库文件夹 关键配置: 修改settings.xml文件 配置阿里云和清华大学镜像仓库以加速依赖下载 设置本地仓库路径 附加说明:包含详细的配置示例和截图指导,适用于各种操作系统环境。 本文提供了完整的Maven安装和配置
2025年最新版最细致Maven安装与配置指南(任何版本都可以依据本文章配置)
【保姆级图文详解】大模型、Spring AI编程调用大模型
【保姆级图文详解】大模型、Spring AI编程调用大模型
332 7
【保姆级图文详解】大模型、Spring AI编程调用大模型
Excel数据治理新思路:引入智能体实现自动纠错【Python+Agent】
本文介绍如何利用智能体与Python代码批量处理Excel中的脏数据,解决人工录入导致的格式混乱、逻辑错误等问题。通过构建具备数据校验、异常标记及自动修正功能的系统,将数小时的人工核查任务缩短至分钟级,大幅提升数据一致性和办公效率。
DeepSeek R1+Open WebUI实现本地知识库的搭建和局域网访问
本文介绍了使用 DeepSeek R1 和 Open WebUI 搭建本地知识库的详细步骤与注意事项,涵盖核心组件介绍、硬件与软件准备、模型部署、知识库构建及问答功能实现等内容,适用于本地文档存储、向量化与检索增强生成(RAG)场景的应用开发。
364 0
让AI时代的卓越架构触手可及,阿里云技术解决方案开放免费试用
阿里云推出基于场景的解决方案免费试用活动,新老用户均可领取100点试用点,完成部署还可再领最高100点,相当于一年可获得最高200元云资源。覆盖AI、大数据、互联网应用开发等多个领域,支持热门场景如DeepSeek部署、模型微调等,助力企业和开发者快速验证方案并上云。
301 22
让AI时代的卓越架构触手可及,阿里云技术解决方案开放免费试用
FLUX.1 Kontext 的全生态教程来啦!AIGC专区在线试玩!
Flux.1 Kontext [dev] 开源模型大家都用上了吗?小编汇总了3个使用教程,打包送上!
404 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问