30分钟学会HTML

HTML 基本语法

HTML(HyperText Markup Language)是构成网页内容的基础。它使用一系列的标签来描述网页的结构,包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。

在线体验一下 CodePen (在线 HTML 编辑器)。

千万不要被「超文本」、「标记语言」吓到,HTML 的语法非常直观,常用的标签结构并不复杂,用于构建基础网页已经足够,稍微了解一下就能上手。

就是这些基本的标签结构,却能让人优雅地组织你的网页内容,专注于信息的呈现而不是纠结于如何显示,达到“心中有页,落笔成型”的境界。

HTML 文档结构

每个 HTML 文档都需要一个基本的结构,声明文档类型,并包含 <html><head><body> 等核心标签。

HTML 语法作用示例
<!DOCTYPE html>声明文档类型为 HTML5
<html></html>HTML 文档的根元素
<head></head>包含文档的元数据,如标题、字符编码等
<title></title>定义文档的标题,显示在浏览器标签上<title>我的网页标题</title>
<meta charset="UTF-8">定义字符编码为 UTF-8,支持多种字符集
<body></body>包含网页可见内容的主体部分
<h1></h1><h6></h6>定义不同级别的标题<h1>主标题</h1>, <h2>副标题</h2>
<p></p>定义段落<p>这是一个段落。</p>

可选语法 (实际上是不同的 HTML 版本和doctype)

虽然 <!DOCTYPE html> 是 HTML5 的标准声明,但以前的 HTML 版本有不同的doctype声明方式。现在推荐使用 HTML5 的简洁声明。

最佳实践

一个标准的 HTML 文档应该以 <!DOCTYPE html> 开头,并包含 <html><head><body> 标签,确保语义清晰和结构完整。

✅ Do this❌ Don't do this
使用 <!DOCTYPE html> 声明 HTML5忘记添加 <!DOCTYPE html> 声明
包含 <head><body> 标签缺少 <head><body> 标签

HTML 标题

HTML 提供了六级标题标签 <h1><h6>,用于表示不同级别的标题内容。

HTML 语法作用预览效果 (描述性)
<h1>一级标题</h1>定义一级标题页面中最主要的标题
<h2>二级标题</h2>定义二级标题次要的标题
<h3>三级标题</h3>定义三级标题更细分的标题
<h4>四级标题</h4>定义四级标题
<h5>五级标题</h5>定义五级标题
<h6>六级标题</h6>定义六级标题

可选语法 (无直接对应,但强调语义化)

虽然可以使用 CSS 来改变标题的显示样式,但应该根据内容的逻辑结构来选择合适的标题标签,而不是仅仅为了改变字体大小而随意使用。

最佳实践

按照内容的逻辑重要性使用标题标签,<h1> 用于最重要的标题,依次递减。

✅ Do this❌ Don't do this
使用 <h1> 作为页面主标题为了加大字体而使用 <h1>,忽略语义化
按照标题层级嵌套使用 (h2h1 下)跳跃使用标题标签 (例如 h1 后直接使用 h4)

HTML 段落

<p> 标签用于定义段落,将文本内容组织成独立的段落块。

HTML 语法作用预览效果 (描述性)
<p>这是一个段落。</p>定义一个段落文本会分段显示
<p>这是第一个句子。<br>这是第二个句子。</p>使用 <br> 换行在段落内换行显示

段落(Paragraph)用法的最佳实践

使用 <p> 标签包裹文本内容,以清晰地划分段落。使用 <br> 标签在段落内进行换行。

✅ Do this❌ Don't do this
使用 <p> 标签组织文本内容依赖换行符或空格来分隔段落
在需要换行的地方使用 <br>为了视觉效果而滥用 <br> 标签

HTML 文本格式化

HTML 提供多种标签用于格式化文本,例如加粗、斜体等。

HTML 语法作用预览效果 (描述性)
<b>加粗文本</b>定义粗体文本文本显示为粗体
<strong>重要文本</strong>定义重要文本文本显示为粗体 (强调语义)
<i>斜体文本</i>定义斜体文本文本显示为斜体
<em>强调文本</em>定义强调文本文本显示为斜体 (强调语义)
<small>小号文本</small>定义小号文本文本显示为较小字号
<mark>标记文本</mark>定义标记文本文本背景高亮显示
<del>删除文本</del>定义删除文本文本带有删除线
<ins>插入文本</ins>定义插入文本文本带有下划线
<sub>下标文本</sub>定义下标文本文本显示为下标
<sup>上标文本</sup>定义上标文本文本显示为上标

文本格式化(Text Formatting)用法的最佳实践

根据语义选择合适的文本格式化标签。<strong><em> 更侧重于语义强调,而 <b><i> 则更多是视觉呈现。

✅ Do this❌ Don't do this
使用 <strong> 标记重要的关键词或句子仅为了加粗而使用 <b>,忽略语义化
使用 <em> 强调需要突出显示的文本使用 <i> 代替 <em> 进行强调

HTML 列表

HTML 提供了有序列表、无序列表和描述列表三种类型的列表。

HTML 语法作用预览效果 (描述性)
<ul><li>项目 1</li><li>项目 2</li></ul>定义无序列表生成带有项目符号的列表
<ol><li>项目 A</li><li>项目 B</li></ol>定义有序列表生成带有数字编号的列表
<dl><dt>术语</dt><dd>描述</dd></dl>定义描述列表生成带有术语和描述的列表
<li></li>定义列表项包含在 <ul><ol>
<dt></dt>定义描述列表中的术语包含在 <dl>
<dd></dd>定义描述列表中术语的描述包含在 <dl>

列表(List)用法的最佳实践

根据信息的组织方式选择合适的列表类型。使用嵌套列表可以清晰地表示层级关系。

✅ Do this❌ Don't do this
使用 <ul> 创建无需特定顺序的项目列表使用段落和 <br> 标签模拟列表
使用 <ol> 创建需要排序的项目列表混淆无序列表和有序列表的使用场景
使用 <dl> 创建术语及其解释的列表在无序或有序列表中尝试模拟描述列表的效果

HTML 链接

<a> 标签用于创建超链接,将用户导向其他网页、文件或同一页面的不同位置。

HTML 语法作用预览效果 (描述性)
<a href="URL">链接文本</a>创建指向 URL 的链接"链接文本"显示为可点击的链接,跳转到 URL
<a href="URL" target="_blank">链接文本</a>在新标签页打开链接点击链接将在新的浏览器标签页中打开
<a href="mailto:邮箱地址">发送邮件</a>创建邮件链接点击链接将打开用户的邮件客户端并填写收件人
<a href="#section">跳转到Section</a>创建内部链接点击链接将滚动到页面中 ID 为 "section" 的元素

链接(Link)用法的最佳实践

为链接添加清晰的链接文本,并根据需要使用 target 属性来控制链接的打开方式。

✅ Do this❌ Don't do this
使用描述性的链接文本 (例如 "了解更多")使用 "点击这里" 等模糊的链接文本
外部链接使用 target="_blank" 在新标签页打开所有链接都强制在新标签页打开,影响用户体验

HTML 图片

<img> 标签用于在网页中嵌入图片。

HTML 语法作用预览效果 (描述性)
<img src="图片URL" alt="图片描述">插入图片在指定位置显示图片
<img src="图片URL" alt="图片描述" width="宽度" height="高度">指定图片尺寸按照指定的宽度和高度显示图片

图片(Image)用法的最佳实践

<img> 标签提供 src 属性指定图片路径,并使用 alt 属性提供图片描述,这对于可访问性和 SEO 非常重要。

✅ Do this❌ Don't do this
为所有 <img> 标签添加 alt 属性忽略 alt 属性,影响可访问性
使用有意义的 alt 文本描述图片内容使用 "图片" 或空 alt 属性
尽量优化图片大小,提高网页加载速度插入过大的图片,导致网页加载缓慢

HTML 代码

HTML 提供了 <code><pre> 标签用于在网页中显示代码。

HTML 语法作用预览效果 (描述性)
<code>行内代码</code>表示行内代码代码以等宽字体显示在文本中
<pre>多行代码</pre>表示预格式化的文本代码块以原始格式显示,保留空格和换行符
<pre><code>带语法的代码</code></pre>显示带语法的代码通常与 JavaScript 库一起使用以进行语法高亮

代码(Code)用法的最佳实践

使用 <code> 标签包裹行内代码,使用 <pre> 标签包裹多行代码块。结合 JavaScript 库可以实现代码语法高亮。

✅ Do this❌ Don't do this
使用 <code> 标签标记行内代码直接在文本中输入代码,导致格式不易区分
使用 <pre> 标签显示多行代码手动使用空格和换行符来模拟代码显示
考虑使用代码高亮库提升代码的可读性在技术文档中直接粘贴未格式化的代码

HTML 语义化标签

HTML5 引入了一些语义化标签,用于更清晰地描述文档的结构和内容,提高可访问性和 SEO。

HTML 语法作用示例
<article></article>表示文档、页面或应用程序中独立的、完整的、可以独立分发或复用的内容一篇博客文章、一篇新闻报道
<aside></aside>表示与周围内容相关但不属于主要内容的辅助信息侧边栏、广告、相关链接
<details></details>表示用户可以展开或收起的内容摘要常见问题解答、产品详情
<figcaption></figcaption>表示 <figure> 元素的标题图片的描述或标题
<figure></figure>表示独立的流内容(图像、图表等),通常带有标题一张图片及其标题
<footer></footer>表示文档或节的页脚版权信息、联系方式
<header></header>表示文档或节的头部网站 Logo、导航菜单
<main></main>表示文档的主要内容网页的主要信息区域
<nav></nav>表示页面的导航链接网站的导航栏
<section></section>表示文档中的一个 тематический 分组内容章节、主题分组
<summary></summary><details> 元素定义一个可见的标题常见问题解答的标题
<time></time>表示日期或时间发布日期、活动时间

语义化标签(Semantic Tags)用法的最佳实践

使用语义化标签来组织 HTML 结构,提高代码的可读性和可维护性,并提升网页的可访问性。

✅ Do this❌ Don't do this
使用 <article> 包裹独立的文章内容使用 <div> 替代所有语义化标签
使用 <nav> 包裹导航链接使用无序列表 <ul> 模拟导航,缺少语义信息
使用 <footer> 标记页脚信息将所有内容都放在 <body> 中,缺乏结构

HTML 元素和属性

HTML 文档由一系列嵌套的元素组成。元素由开始标签、内容和结束标签构成。标签可以拥有属性,提供关于元素的额外信息。

HTML 语法作用示例
<标签名>内容</标签名>定义一个 HTML 元素<p>这是一个段落。</p>
<标签名 属性名="属性值">内容</标签名>带有属性的 HTML 元素<a href="https://example.com">链接</a>
class="类名"定义元素的类名 (用于 CSS 样式)<div class="container"></div>
id="唯一ID"定义元素的唯一 ID (用于 CSS 和 JavaScript)<div id="header"></div>
style="CSS 样式"定义元素的内联样式<p style="color: red;">红色文本</p>

元素和属性(Elements and Attributes)用法的最佳实践

合理使用 HTML 元素和属性来描述网页内容。避免过度使用内联样式,推荐使用外部 CSS 文件来管理样式。

✅ Do this❌ Don't do this
使用合适的 HTML 元素来表达内容语义为了样式效果而滥用 <div><span>
使用 class 属性为元素添加类名,方便 CSS 管理大量使用 id 选择器,提高 CSS 优先级,不易维护
尽量避免使用内联样式,保持 HTML 结构的清晰将所有样式都写在 style 属性中,导致 HTML 臃肿

就是这些基本的标签结构,却能让人优雅地组织你的网页内容,专注于信息的呈现而不是纠结于如何显示,达到“心中有页,落笔成型”的境界。


好的,这次的内容就到这里啦

感谢你的阅读,欢迎点赞、关注、转发

我们,下次再见!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/42.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ECharts饼图下钻

背景 项目上需要对Echarts饼图进行功能定制&#xff0c;实现点击颜色块&#xff0c;下钻显示下一层级占比 说明 饼图实现点击下钻/面包屑返回的功能 实现 数据结构 [{name: a,value: 1,children: [...]},... ]点击下钻 // 为图表绑定点击事件&#xff08;需要在destroy…

MySQL-事务

事务特性 在关系型数据库管理系统中&#xff0c;事务必须满足 4 个特性&#xff0c;即所谓的 ACID。 原子性&#xff08;Atomicity&#xff09; 事务是一个原子操作单元&#xff0c;其对数据的修改&#xff0c;要么全都执行&#xff0c;要么全都不执行。 修改操作>修改B…

C# 元组

总目录 C# 语法总目录 C# 元组 C# 介绍元组1. 元组元素命名2. 元组的解构3. 元组的比较 总结参考链接 C# 介绍 C#主要应用于桌面应用程序开发、Web应用程序开发、移动应用程序开发、游戏开发、云和服务开发、数据库开发、科学计算、物联网&#xff08;IoT&#xff09;应用程序、…

用 Python 绘制可爱的招财猫

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​​​ ​​​​​​​​​ ​​​​ 招财猫&#xff0c;也被称为“幸运猫”&#xff0c;是一种象征财富和好运的吉祥物&#xff0c;经常…

Java多线程

一、线程的简介: 1.普通方法调用和多线程: 2.程序、进程和线程: 在操作系统中运行的程序就是进程&#xff0c;一个进程可以有多个线程 程序是指令和数据的有序集合&#xff0c;其本身没有任何运行的含义&#xff0c;是一个静态的概念&#xff1b; 进程则是执行程序的一次执…

IP 地址与蜜罐技术

基于IP的地址的蜜罐技术是一种主动防御策略&#xff0c;它能够通过在网络上布置的一些看似正常没问题的IP地址来吸引恶意者的注意&#xff0c;将恶意者引导到预先布置好的伪装的目标之中。 如何实现蜜罐技术 当恶意攻击者在网络中四处扫描&#xff0c;寻找可入侵的目标时&…

鸿蒙面试 2025-01-09

鸿蒙分布式理念&#xff1f;&#xff08;个人认为理解就好&#xff09; 鸿蒙操作系统的分布式理念主要体现在其独特的“流转”能力和相关的分布式操作上。在鸿蒙系统中&#xff0c;“流转”是指涉多端的分布式操作&#xff0c;它打破了设备之间的界限&#xff0c;实现了多设备…

GDPU Android移动应用 重点习题集

目录 程序填空 ppt摘选 题目摘选 “就这两页ppt&#xff0c;你还背不了吗” “。。。” 打开ppt后 “Sorry咯&#xff0c;还真背不了&#x1f61c;” 更新日志 考后的更新日志 没想到重点勾了一堆&#xff0c;还愣是没考到其中的内容&#xff0c;翻了一下&#xff0c;原…

Unity3d 基于Barracuda推理库和YOLO算法实现对象检测功能

前言 近年来&#xff0c;随着AI技术的发展&#xff0c;在游戏引擎中实现和运行机器学习模型的需求也逐渐显现。Unity3d引擎官方推出深度学习推理框架–Barracuda &#xff0c;旨在帮助开发者在Unity3d中轻松地实现和运行机器学习模型&#xff0c;它的主要功能是支持在 Unity 中…

【Notepad++】Notepad++如何删除包含某个字符串所在的行

Notepad如何删除包含某个字符串所在的行 一&#xff0c;简介二&#xff0c;操作方法三&#xff0c;总结 一&#xff0c;简介 在使用beyoundcompare软件进行对比的时候&#xff0c;常常会出现一些无关紧要的地方&#xff0c;且所在行的内容是变化的&#xff0c;不方便进行比较&…

机器学习笔记合集

大家好&#xff0c;这里是好评笔记&#xff0c;公主 号&#xff1a;Goodnote。本笔记的任务是解读机器学习实践/面试过程中可能会用到的知识点&#xff0c;内容通俗易懂&#xff0c;入门、实习和校招轻松搞定。 笔记介绍 本笔记的任务是解读机器学习实践/面试过程中可能会用到…

OCR文字识别—基于PP-OCR模型实现ONNX C++推理部署

概述 PaddleOCR 是一款基于 PaddlePaddle 深度学习平台的开源 OCR 工具。PP-OCR是PaddleOCR自研的实用的超轻量OCR系统。它是一个两阶段的OCR系统&#xff0c;其中文本检测算法选用DB&#xff0c;文本识别算法选用CRNN&#xff0c;并在检测和识别模块之间添加文本方向分类器&a…

湘潭大学人机交互复习

老师没给题型也没划重点&#xff0c;随便看看复习了 什么是人机交互 人机交互&#xff08;Human-Computer Interaction&#xff0c;HCI&#xff09;是关于设计、评价和实现供人们使用的交互式计算机系统&#xff0c;并围绕相关的主要现象进行研究的学科。 人机交互研究内容 …

离线录制激光雷达数据进行建图

目前有一个2D激光雷达&#xff0c;自己控制小车运行一段时间&#xff0c;离线获取到激光雷达数据后运行如下代码进行离线建图。 roslaunch cartographer_ros demo_revo_lds.launch bag_filename:/home/firefly/AutoCar/data/rplidar_s2/2025-01-08-02-08-33.bag实际效果如下 d…

通信与网络安全管理之ISO七层模型与TCP/IP模型

一.ISO参考模型 OSI七层模型一般指开放系统互连参考模型 (Open System Interconnect 简称OSI&#xff09;是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型&#xff0c;为开放式互连信息系统提供了一种功能结构的框架。 它从低到高分别是…

Linux权限

目录 一.Linux权限的概念 二.Linux权限管理 1.文件访问者的分类 2.文件类型和访问权限 1.文件类型 2.基本权限 3.文件权限的表示方法 1.字符表示法 2.八进制表示法 4.文件权限的相关访问方法 1.chmod 2.chown 3.chgrp 4.粘滞位 三.权限总结 一.Linux权限的概念 …

UML系列之Rational Rose笔记三:活动图(泳道图)

一、新建活动图&#xff08;泳道图&#xff09; 依旧在用例视图里面&#xff0c;新建一个activity diagram&#xff1b;新建好之后&#xff0c;就可以绘制活动图了&#xff1a; 正常每个活动需要一个开始&#xff0c;点击黑点&#xff0c;然后在图中某个位置安放&#xff0c;接…

react-quill 富文本组件编写和应用

index.tsx文件 import React, { useRef, useState } from react; import { Modal, Button } from antd; import RichEditor from ./RichEditor;const AnchorTouchHistory: React.FC () > {const editorRef useRef<any>(null);const [isModalVisible, setIsModalVis…

基于mybatis-plus历史背景下的多租户平台改造

前言 别误会&#xff0c;本篇【并不是】 要用mybatis-plus自身的多租户方案&#xff1a;在表中加一个tenant_id字段来区分不同的租户数据。并不是的&#xff01; 而是在假设业务系统已经使用mybatis-plus多数据源的前提下&#xff0c;如何实现业务数据库隔开的多租户系统。 这…

大数据技术实训:Hadoop完全分布式运行模式配置

准备&#xff1a; 1&#xff09;准备3台客户机&#xff08;关闭防火墙、静态ip、主机名称&#xff09; 2&#xff09;安装JDK 3&#xff09;配置环境变量 4&#xff09;安装Hadoop 5&#xff09;配置环境变量 6&#xff09;配置集群 7&#xff09;单点启动 8&#xff09;配置ss…