HTML的高频标签

【高频考点精讲】HTML5 新增的语义化标签及其作用 🧑‍🏫:全栈老李📅:2025 年 6 月🧑‍💻:前端初学者、进阶开发者🚀:本文由全栈老李原创,转载请注明出处。今天咱们聊聊HTML5那些事儿。作为前端开发,你一定遇到过这样的场景:接手一个老项目,打开一看全是<div>套<div>,类名起得五花八门,想改个布局得先花半小时理清结构。这时候就特别怀念HTML5带来的语义化标签——它们就像给网页装上了GPS导航,让代码结构一目了然。(全栈老李提醒:语义化标签用得好,团队协作没烦恼) 阅读详情

​

 

 

常用写法

<!DOCTYPE> 

定义文档类型,写在html文件顶部

<!DOCTYPE html>

 

<html>

定义 HTML 文档。

<html>

<head>

  <title>文档的标题</title>

</head>

<body>

  文档的内容... ...

</body>

</html>

<head>

定义关于文档的信息。

<head>

  <title>文档的标题</title>

</head>

<meta>

定义关于 HTML 文档的元信息。

<!-- 设置编码格式 -->

<meta charset="UTF-8">

<title>

定义文档的标题。

<title>文档的标题</title>

<style>

定义文档的样式信息。

<!-- 在html文件内的head头部中定义样式 -->

<style type="text/css">

    h1 {color:red}

    p {color:blue}

</style>

<link>

定义文档与外部资源的关系。

<!-- 链接css文件(theme.css) -->

<link rel="stylesheet" type="text/css" href="theme.css" />

<body>

定义文档的主体。

<body>

  文档的内容... ...

</body>

<h1> to <h6>

定义 HTML 标题。

<h1>这是标题 1</h1>

<h2>这是标题 2</h2>

<p>

定义段落。

<p>这是段落</p>

<a>

定义锚。(超链接)

<a href="http://www.w3school.com.cn">W3School</a>

<img>

定义图像。

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

<table>

定义表格。

<table border="1">

    <tr>

      <th>Month</th>

      <th>Savings</th>

    </tr>

    <tr>

      <td>January</td>

      <td>$100</td>

    </tr>

  </table>

<caption>

定义表格标题。

<caption>Monthly savings</caption>

<thead>

定义表格中的表头内容。

<thead>

      <tr>

        <th>Month</th>

        <th>Savings</th>

      </tr>

</thead>

<th>

定义表格中的表头单元格。

<th>Savings</th>

<tbody>

定义表格中的主体内容。

<tbody>

      <tr>

        <td>January</td>

        <td>$100</td>

      </tr>

</tbody>

<tr>

定义表格中的行。

<tr>

        <td>January</td>

        <td>$100</td>

</tr>

<td>

定义表格中的单元。

<td>$180</td>

<tfoot>

定义表格中的表注内容(脚注)。

<tfoot>

      <tr>

        <td>Sum</td>

        <td>$180</td>

      </tr>

</tfoot>

<form>

定义供用户输入的 HTML 表单。

<form action="form_action.asp" method="get">

    <p>First name: <input type="text" name="fname" /></p>

    <p>Last name: <input type="text" name="lname" /></p>

    <input type="submit" value="Submit" />

</form>

<ol>

定义有序列表。

<ol>

    <li>Coffee</li>

    <li>Tea</li>

    <li>Milk</li>

  </ol>

<li>

定义列表的项目。

<li>Milk</li>

<ul>

定义无序列表。

<ul>

    <li>Coffee</li>

    <li>Tea</li>

    <li>Milk</li>

  </ul>

<dl>

定义定义列表。

<dl>

    <dt>计算机</dt>

    <dd>用来计算的仪器 ... ...</dd>

    <dt>显示器</dt>

    <dd>以视觉方式显示信息的装置 ... ...</dd>

 </dl>

<dt>

定义定义列表中的项目。

<dt>计算机</dt>

<dd>用来计算的仪器 ... ...</dd>

<dd>

定义定义列表中项目的描述。

<dt>计算机</dt>

<dd>用来计算的仪器 ... ...</dd>

<input>

定义输入控件。

<input type="submit" value="Submit" />

<br>

定义简单的折行。

<br />

<del>

定义被删除文本。

a dozen is <del>20</del> 12 pieces

<div>

定义文档中的节。

<div style="color:#00FF00">

    <h3>This is a header</h3>

    <p>This is a paragraph.</p>

  </div>

<span>

定义文档中的节。

 

<strong>

定义强调文本。文本粗体

 

<em>

定义强调文本。文本斜体

 

<i>

定义斜体字。

 

<b>

定义粗体字。

 

<hr>

定义水平线。

 

<select>

定义选择列表(下拉列表)。

 

<option>

定义选择列表中的选项。

 

<textarea>

定义多行的文本输入控件。

 

 

 

 

 

 

 

​

【高频考点精讲】HTML语义化标签到底怎么用?10分钟彻底搞懂header、footer、article等标签的正确用法 🧑‍🏫:全栈老李📅:2025 年 5 月🧑‍💻:前端初学者、进阶开发者🚀:本文由全栈老李原创,转载请注明出处。大家好,我是全栈老李。今天咱们来聊聊前端开发中一个看似简单但很多人用不对的东西——HTML语义化标签。每次Code Review看到同事用<div>包一切的时候,我都想冲上去说:"兄弟,咱能不能用点有意义的标签? 阅读详情

相关推荐

【高频考点精讲】HTML template标签详解:如何高效复用DOM结构?

🧑‍🏫:全栈老李📅:2025 年 5 月🧑‍💻:前端初学者、进阶开发者🚀:本文由全栈老李原创,转载请注明出处。今天咱们聊聊HTML里那个低调但超级实用的<template>标签。很多同学可能只在Vue/React里见过它,其实原生HTML早就内置了这个神器!(全栈老李友情提示:看完这篇,你的代码复用能力至少提升30%)

全栈老李的博客 811

HTML高频面试题

1.div+css的布局较table布局有什么优点? 分离方便改版快清晰简洁seo 1).改版的时候更方便只要改css文件。 2).页面加载速度更快、结构化清晰、页面显示简洁。 3).表现与结构相分离。 4).易于优化(seo)搜索引擎更友好,排名更容易靠前。 2.html常见兼容性问题? 1).双边距BUGfloat引起的,解决办法:使用display解决 2).3像素问题使用float引起的,解决办法:使用dislpay:inline-3...

lms1231的博客 245

【高频考点精讲】HTML中的meta标签详解:提升网页性能与SEO优化

🧑‍🏫:全栈老李📅:2025 年 5 月🧑‍💻:前端初学者、进阶开发者🚀:本文由全栈老李原创,转载请注明出处。今天咱们聊聊HTML中那个看似不起眼却极其重要的标签——<meta>。作为全栈老李,我见过太多开发者忽视这个小标签的威力,结果在性能优化和SEO上吃了大亏。别小看它,这个标签可是能直接影响你的网页在搜索引擎中的排名和用户体验的关键因素。

全栈老李的博客 1234

html整理,常用标签

  &lt;!DOCTYPE html&gt;    //指定文档的类型,为html类型 &lt;html&gt;        //开始标签,对应结束标签 &lt;head&gt;     //html必备标签,表示头部 &lt;title&gt;     //设置网页标题,最后显示在浏览器的头部 &lt;/title&gt; &lt;meta charset="utf-8" /&amp

chen983234416的博客 6431

【高频考点精讲】HTML meta标签全解析:这些SEO和移动端适配的配置你都知道吗?

🧑‍🏫:全栈老李📅:2025 年 5 月🧑‍💻:前端初学者、进阶开发者🚀:本文由全栈老李原创,转载请注明出处。大家好,我是全栈老李。今天咱们来聊聊HTML中那个看似不起眼却至关重要的meta标签。这玩意儿就像是你网站的"身份证"和"使用说明书",搜索引擎和浏览器都得靠它来了解你的网站。

全栈老李的博客 1427

GD32F303串口DMA发送数据避坑指南:为什么你的发送函数会卡住?

本文深入解析GD32F303单片机串口DMA发送数据时常见的卡死问题,提供详细的避坑指南。从DMA传输完成中断时序、发送状态管理到双通道DMA的特别注意事项,全面剖析问题根源并给出解决方案,帮助开发者构建健壮的DMA发送机制。

weixin_27038245的博客 294

用TEC B-SX5T打印高频RFID标签

条码应用市场的不断发展膨胀、RFID市场随着近几年的培育、物联网等新概念的推广,RFID的应用也悄悄地开始在各个行业试水。 目前现有的一些通用的标签打印设计软件基本不能打印出高频的RFID标签,因此需要根据客户需求定制一个RFID标签打印系统。 系统硬件采用: TEC B-SX5T 条码打印机 上海华申 M01高频读写器 系统打印功能: 标签...

weixin_30763397的博客 243

嵌入式Web:HTML高频标签实战指南

本文总结了HTML开发中的高频标签及其用法。文章从语义化、功能和场景三个维度,详细讲解了基础结构标签(如<!DOCTYPE>、<html>、<head>)、元数据标签(<meta>、<link>)、文本内容标签(<h1>-<h6>、<p>)、链接与导航标签(<a>、<nav>)、媒体标签(<img>、<video>)、表单标签(<form>、<in

上市公司前技术负责人,20 年软硬件深耕 + 百人研发团队管理经验,名校理工科背景加持。从技术攻坚到团队掌舵,沉淀海量项目实战与管理心得,专注分享软硬件干货、疑难问题解决方案,既是靠谱知识传播者,也盼链接优质项目共成长。 845

o型圈沟槽设计_O型密封圈——详细选型过程及步骤

一、密封圈常用材料二、密封圈常用密封形式密封圈分为活塞密封,活塞杆密封,端面密封,旋转密封。三、O型密封圈的选型规则O型密封圈的尺寸图径向安装O型圈选型(静态和动态运动)活塞杆密封选择适当规格的O形圈时,应该保证其外径(d1+2*d2)至少等于或者大于沟槽外径d6;当选择的O形圈直径d1大于250 mm时, O形圈外径将不能超过沟槽外径的3%;当选择的O形圈直径d1小于250mm时, O形圈外径将...

weixin_39856630的博客 2万+

PID算法(位置式pid算法和增量式pid算法)

PID 算法是闭环控制系统中常用的算法,PID 分别是 Proportion(比例)、Integral(积分)、Differential(微分)的首字母缩写。它是一种结合比例、积分和微分三个环节于一体的闭环控。

m0_57678852的博客 2万+

3.2 HTML中级 - 常用标签(上) | html5教程,html高频常用标签,html教程,html css,html5,html模板

html5教程,html高频常用标签,html教程,html css,html5,html模板

qq_32371095的博客 486

告别黑窗口!用VSCode+Native Debug调试C/C++程序,比GDB命令行舒服多了

本文介绍了如何使用VSCode配合Native Debug扩展来调试C/C++程序,替代传统的GDB命令行方式。通过可视化调试环境,开发者可以更高效地管理断点、查看变量和调用栈,大幅提升调试效率。文章详细讲解了环境配置、核心调试功能及高级技巧,帮助开发者快速上手这一现代调试工具。

weixin_26833139的博客 250

HTML标签速查指南:格式规范与核心用法

遇到问题欢迎在评论区交流!

2501_92904750的博客 500

从零到一:基于K375S主控的机械键盘优联无线化改造实战

本文详细记录了基于罗技K375S主控进行机械键盘优联无线化改造的全过程。从改造动机、核心原理与物料准备,到电路设计、PCB打样、焊接调试,逐步拆解了将优联技术集成到自定义机械键盘中的实战步骤。项目最终实现了低延迟、高稳定性且支持多设备连接的优联无线机械键盘,为DIY爱好者提供了高性价比的改造方案。

h0i1j2k3l的博客 601

MATLAB 控制 E4438C 信号源的研究

通过 MATLAB,我们可以实现对 E4438C 的远程控制,从而实现更高的自动化和可编程性。总结起来,通过使用 MATLAB 和 Instrument Control Toolbox,我们可以轻松地控制 E4438C 信号源并生成各种类型的信号。需要注意的是,以上代码仅为示例,实际应用中可能需要根据具体情况进行更详细的配置和错误处理。此外,MATLAB 还提供了一系列函数和命令,可用于控制 E4438C 信号源的其他功能,如频率调谐、功率设置、调制设置等。您可以根据自己的需求进行相应的配置和控制。

RswtPerl的博客 1013

HTML相关 | 面试高频问题(一)| 语义化、标签、空格、meta、readonly和disable、audio和video

1.语义化,标签化的作用(★) HTMl标签语义化,简单来说,就是让标签有含义,给某块内容用上一个最恰当最合适的标签,使页面有良好的结构,页面元素有含义,不论是谁都能够看懂这块内容是什么,并且有利于搜索引擎。 标签语义化的好处: 1. HTML结构清晰 2. 代码可读性较好 3. 无障碍阅读 4. 搜索引擎可以根据标签的语言确定上下文和权重问题 5. 移动设备能够更完美的展现网页(对css支持较弱的设备) 6. 便于团队维护和开发 2.说说你常用的标签以及对应的作用(★★★) 配合项目说

qq_43248263的博客 436

【GlobalMapper精品教程】070:专题地图制作完整操作教程

与其它GIS软件一样,Globalmapper也可以制作出漂亮的地图,本文讲解专题地图制作完整操作流程。

智慧空间实验室 3751

【30天-从前端入门到前端开发工程师Day2】前端小白速学!HTML 常用文本标签全解,90% 静态页面都在用(实战代码 + 高频面试题)

在上一篇Day1的学习中,我们彻底掌握了HTML5标准页面骨架架构,清楚了DOCTYPE、html、head、body的核心分工,能够独立创建一个完整的空白网页。今天开启Day2进阶学习,聚焦前端静态页面使用频率最高的文本标签体系!网页中90%的内容展示(新闻、文章、介绍、导航文字、超链接跳转),全部依赖文本标签实现。很多小白入门容易只会堆砌标签,不懂语义规范、使用场景、开发禁忌,导致写出来的代码杂乱无章、不符合企业开发标准,面试频频踩坑。

m0_58693200的博客 432

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

高频前端面试题汇总之HTML篇

不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式(可通过document.compatMode获取,比如,语雀官网的文档类型是。

weixin_59855825的博客 1102

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

【前端高频面试题】-HTML篇

回答:语义化核心就是“用有明确含义的标签描述内容”,比如用<nav>表示导航栏,不是用这种没意义的容器。好维护:团队看代码时,这些标签一看就知道是啥结构,不用猜class名;助SEO:搜索引擎爬虫能通过语义标签识别重点内容,比如<article>里的文章、<h1>的标题,能提升页面排名;无障碍:屏幕阅读器会读标签含义,比如读到<aside>会提示“侧边辅助区”,视障用户更容易操作;简代码:不用额外加class标记结构,比如直接用<footer>,少写冗余代码。

2301_76761656的博客 1136

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

零基础入门HTML(上)

HTML作为前端三剑客之一,主要是负责搭建我们整个网页的结构和布局。拿盖房子举例子,盖房子第一步要打好地基。HTML做的工作正是如此。刚入门的同学学习HTML的时候应该是没有什么压力。大家大可不必为此感到焦虑。最后,学习HTML就是学习标签的语义和用法。

白的夜的博客 246

web前端面试高频考点——HTML & CSS 篇

web前端面试高频考点 —— HTML & CSS 篇(重点内容,值得深读)

HuoZhiyan 的博客 3716

前端高频面试题1:HTML/CSS

前端核心高频面试题,HTML/CSS模块内容,含大厂面试真题

Me_Rui的博客 2182
上一篇: 搭建初始前端操作环境
下一篇: IDEA上生成序列化版本号
Chery6721
博客等级 码龄17年 1粉丝 3原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值