web前端 - 常见页面标签和语义化标签

已于 2024-02-23 16:05:50 修改
阅读量211 收藏
点赞数 3
分类专栏： HTML 文章标签： 前端
于 2024-02-23 15:16:33 首次发布
原文链接：https://blog.csdn.net/weixin_62443409/article/details/125287029
版权

1、HTML5

（1）含义： HTML（Hypertext Markup Language）---超文本标记语言

是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素 --- 根标签定义
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="UTF-8"> 定义网页编码格式为 UTF-8 --- 属性定义
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <header> 元素包换了网页头部 --- 头部内容
  • <session> 元素包含网页模块内容
  • <footer> 元素包含网页页脚内容
（2）发展历史


HTML标签是固定的，XML标签是用户自定义的。

全球第一个网站

蒂姆·伯纳斯-李 建立（http://info.cern.ch）

（3）网页开发
  • 开发环境：sublime、vscode、hbuider、webstrom
  • 运行环境：浏览器（chrome、edge）
（4）基本语法结构
  • 网页文档声明
  • 网页属性
  • 网页内容
附：HTML文档的后缀名
  • .html
  • .htm

以上两种后缀名没有区别，都可以使用。

2、常见页面标签

根据标签在页面中的表现形式，标签分为两大类：

（1）块标签：占据一行，即便内容未满
  • div：标准块标签
  • hn：标题标签（n:1-6）
  • p：段落标签
  • table：表格标签
  • hr：分隔线标签
（2）行内标签：内容有多少，占多少
  • strong/b：加粗
  • i/em：斜体字
  • u：（underline）下划线
  • del：中划线
  • sub：(subway)下标
  • sup：上标
  • span：标准行内标签
（3）标签语义化：H5新特性 --- （正确的标签干正确的事）
  • article：文章标签
  • city：城市
  • address：地址
  • aside：边沿
  • footer：尾部
  • header：头部
  • section：正体部分
  • code：代码
  • br：换行标签

3、标签详解

（1）标题标签：hn --- （n:1-6）
  1. <h1>一级标题 </h1>
  2. <h2>二级标题 </h2>
  3. <h3>三级标题 </h3>
  4. <h4>四级标题 </h4>
  5. <h5>五级标题 </h5>
  6. <h6>六级标题 </h6>
  7. PS：无七级标题

标题标签的默认样式是自动加粗的；字体大小一级标题最大，六级最小；标题与标题之间有较大的间距，独占一行，相当于块元素。

（2）段落标签：p
<p>段落标签</p>

段落标签的默认样式是行与行之间有空行，相当于块元素。

（3）强调标签：
  • 加粗标签：strong/b
  • 斜体标签：em/i
  1. 大珠小珠 <strong>落玉盘 </strong> <!--strong：加粗-->
  2. <i>1234567 </i> <!--i:斜体-->
（4）标准块标签：div
<div>弦弦掩抑声声思，似诉平生不得志。</div><!--div:标准块标签，换行输出-->

div是用来布局的，只是一个区块，块元素。

（5）标准行内标签：span
<span class="msg">轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。</span>

span标签无语义，一般用来包裹文字，行内元素。

（6）上下标：
  • sup：上标
  • sub：下标（subway）
  1. a <sub>1 </sub>=10 <!--sub:(subway)下标-->
  2. a <sup>2 </sup>=20 <!--sup:(super)上标-->

<sup>标签定义上标文本，上标文本会显示在当前文本流字符高度一半的上方。
<sub>标签定义下标文本，下标文本会显示在当前文本流字符高度一半的下方。

（7）自结束标签：
  • br：强制换行
  • hr：分隔线标签

都属于行内元素。

（8）删除标签：del -- 中划线
`在这里插入代码片`
间关莺语<del>花底滑</del><!--del:中划线-->

4、案例

（1）代码
  1. <!DOCYTPE html>
  2. <html> <!--开始标签-->
  3. <head> <!--头部，其中内容无法显示-->
  4. <meta charset="utf-8"> <!--定义页面编码-->
  5. <title>
  6. 第一个页面
  7. </title> <!--标题，可显示-->
  8. </head>
  9. <body>
  10. <style>
  11. #box{
  12. color: red;
  13. }
  15. .msg{
  16. display: block;
  17. }
  19. </style> <!--1、让id为box的标签，显示为红色。2、将msg类的行内标签转为块标签-->
  20. <u>页面中的内容 </u>
  21. <h1>琵琶行 </h1>
  22. <!-- <h2>琵琶行</h2>
  23. <h3>琵琶行</h3>
  24. <h4>琵琶行</h4>
  25. <h5>琵琶行</h4>
  26. <h6>琵琶行</h6> -->
  28. <p style="text-indent:32px"> <!--开头缩进32个像素，浏览器默认16个像素代表一个字母-->
  29. <!--b:blod。加粗--> <b>嘈嘈 </b>切切错杂弹 <br/> <!--换行。自结束标签，无需添加</br>。/在H5中可省略--> <i>1234567 </i> <!--i:斜体-->
  30. </p> <!--段落 -->
  31. a <sub>1 </sub>=10 <!--sub:(subway)下标-->
  32. a <sup>2 </sup>=20 <!--sup:(super)上标-->
  33. <p style="text-indent:32px">
  34. 大珠小珠 <strong>落玉盘 </strong> <!--strong：加粗-->
  35. 间关莺语 <del>花底滑 </del> <!--del:中划线-->
  36. </p> <!--段落间有空行，开头无空格-->
  37. <span id="box" >间关莺语花底滑，幽咽泉流冰下难. </span> <!--span:标准行内标签-->
  38. <hr>
  39. <div>弦弦掩抑声声思，似诉平生不得志。 </div>
  40. <div>弦弦掩抑声声思，似诉平生不得志。 </div> <!--div:标准块标签，换行输出-->
  42. <span class="msg">轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。 </span>
  43. <span class="msg">轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。 </span>
  45. </body> <!--可显示的内容-->
  46. </html> <!--结束标签-->
（2）显示

前端阿坤
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端-仿牛客答题板子.zip
11-06
需要遵循语义化标签原则，提高可读性和可访问性。 2. CSS 设计：利用CSS实现答题板的视觉样式，包括布局（如流式布局、网格布局）、颜色、字体、边距等，以及响应式设计，确保在不同设备上都有良好的用户体验。 3....
WEB前端涉及的布局、结构化和标准化
09-27
总的来说，掌握WEB前端的布局、结构化和标准化是成为一名优秀前端开发者的关键，这不仅能提升网页的性能和用户体验，还能为企业节省资源，增强在线竞争力。因此，不断学习和实践这些知识是每个前端开发者职业生涯中...
页面中所有的div标签，设置其背景为红色(用jQuery实现 )？
weixin_45651609的博客
08-13 1644
页面中所有的div标签，设置其背景为红色(用jQuery实现 )？
IDEA 使用thymeleaf模板 前端HTML代码中标签有红色下划线
David_jiahuan的博客
09-23 3732
看着很难受，虽然不会影响程序正常运行，但是还是想把这个红线去掉； 看了网上的方法，大致有下面几种： 1、修改idea针对thymeleaf表达式的报错提醒级别： 选择File->Settings->Editor->Inspections，然后搜索thymeleaf，修改Severity的级别不是Error就好： 2、在HTML页面中的 <!doctype ...
【全网最全】HTML标签详解大全-第一篇{建议收藏}
2401_84094029的博客
04-13 825
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-4M52DT6H-1712998889654)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
CSS（红色标记：待练习效果）
DH2264664169的博客
01-02 3456
一、CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到&lt;styl...
CSS 实现必填项前/后添加红色星号
热门推荐
BlueKitty的博客
05-21 3万+
1 . 常规写法 <label><span style="color:red;">* </span>用户名 : </label> <input type="text" value=""/> 2 . CSS写法(更简洁方便 , 而且便于统一调整样式) <style> label.xrequired:before...
html红色星号怎么做_码农的插花艺术：HTML（一）
weixin_35621029的博客
11-28 1780
这是笔者学习html的过程中的小小心得和体会，由于笔者也是前端初学者，能力有限难免出错，恳请各位读者看到有错误的地方多多包涵，也欢迎各位在评论区积极讨论。严格来讲html并不算一种“语言”。html的文档可以以txt的形式保存，当使用浏览器打开时便自动转化为一个网页。html以各种tag组成，在我看来，就如在一个花盆（文件）内插花。html的语法总的来说是由标签组成，格式是<element ...
常见的web前端面试题（四）
11-01
- HTML5和CSS3引入了许多新功能，如语义化标签、音频/视频播放、表单控件、CSS动画和过渡等。 10. 个人项目和开源贡献： - 个人或开源项目能体现面试者的自主学习能力和实际动手能力，也是展示技术实力的好机会。...
web前端工程师-高频面试题
10-24
3. H5理解：HTML5引入了许多新特性，如语义化标签、离线存储、拖放功能、媒体元素、canvas和svg等，提升了网页交互性和表现力。 4. 浏览器解析过程：输入URL后，浏览器进行DNS解析、建立TCP连接、发送HTTP请求、接收...
最常见web前端开发面试题（二）
11-01
在Web前端开发领域，面试中经常涉及到许多核心知识点，包括HTML、CSS和JavaScript的基础以及它们在构建网页时的作用。下面将详细解析这些知识点。 1. **Div+CSS布局的优势**： - **表现与内容的分离**：使用Div+...
前端怎么实现搜索内容关键字标红
朱宏的博客
07-15 6392
思路：我们可以利用js的正则表达式来匹配搜索的关键字，匹配的文字变红之后的文字在写入网页。 js正则表达式： var re1 = /ABC\-001/; var re2 = new RegExp('ABC\\-001'); re1; // /ABC\-001/ re2; // /ABC\-001/ 注意，如果使用第二种写法，因为字符串的转义问题，字符串的两个\\实际上是一个\。 js实现： brightenKeyword(val, keyword) { const Reg
转了 转了什么叫div!什么叫css哈哈 知道了?
ququsky的专栏
04-11 1434
简单的说就是一个标签我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！Cascading St
前端实现文字上面的小红点或者hot字样
qq_45623597的博客
04-20 1788
1.文字上面加小红点最终实现效果如下： HTML实现代码 <template lang="pug"> .message 消息 span.dot </template> CSS样式代码 <style lang="scss"> .message { font-size: 16px; text-align: center; .dot { display: inline-block; background: red; width
Node多版本管理器NVM安装使用
最新发布
GongWeiBuQi的博客
07-11 131
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 821
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 722
模糊搜索功能 每个网站都要用得到
Haproxy搭建Web群集
wkysdhr的博客
07-08 932
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
JS混淆基本类型和原理
朴拙科技的博客
07-06 740
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
web前端开发中级考试理论题和答案
06-09
以下是一些可能会出现在Web前端开发中级考试中的理论题以及对应的答案： 1. 请简要解释一下什么是 MVC 架构？ MVC 架构是一种软件设计模式，它将一个应用程序分为三个部分：模型（Model）、视图（View）和控制器（Controller）。模型负责处理数据和业务逻辑，视图负责将数据呈现给用户，控制器负责协调模型和视图之间的交互。 2. 请简单介绍一下HTML5新特性。 HTML5是HTML的最新版本，它引入了很多新的特性，例如：语义化标签、视频和音频支持、地理定位、Web存储、Web Workers等。 3. 请列举一些CSS3中新增的特性。 CSS3引入了很多新的特性，例如：圆角、阴影、渐变、动画、多列布局、媒体查询等。 4. 请简要说明JavaScript中的几种数据类型。 JavaScript中的数据类型包括：基本类型和引用类型。基本类型包括：字符串、数字、布尔值、undefined和null。引用类型包括：对象、数组、函数等。 5. 请简述 Ajax 的工作原理。 Ajax的工作原理是通过XMLHttpRequest对象向服务器异步发送请求，获取服务器返回的数据，然后通过JavaScript动态更新页面内容，从而实现局部刷新，提高用户体验。 6. 请简单介绍一下 HTTP 协议的几个常见方法。 HTTP协议定义了很多请求方法，其中常见的有：GET、POST、PUT、DELETE、HEAD等。GET用于获取资源，POST用于提交数据，PUT用于更新资源，DELETE用于删除资源，HEAD用于获取资源的元数据。 7. 请简述一下浏览器缓存的工作原理。 浏览器缓存是指浏览器将已经获取的资源存储在本地，下次访问同一资源时直接从本地获取，从而提高访问速度和用户体验。浏览器缓存的工作原理是通过HTTP协议中的响应头来控制缓存行为，例如：Cache-Control、Expires、Last-Modified、ETag等。 8. 请简单介绍一下 Web 安全相关的知识。 Web安全涉及到很多方面，包括：XSS攻击、CSRF攻击、SQL注入、文件上传漏洞、密码安全等。开发者需要采取一系列措施来保障Web应用的安全，例如：输入验证、输出转义、密码加密、HTTPS协议等。 9. 请简述一下前端性能优化的几个方面。 前端性能优化可以从多个方面入手，例如：减少HTTP请求、压缩和合并JavaScript和CSS文件、优化图片、使用CDN、减少DOM操作、使用缓存等。 10. 请简述一下现代前端框架的特点和优势。 现代前端框架的特点和优势包括：提供了一整套解决方案，可以快速构建Web应用；采用组件化的开发方式，可以提高代码的可重用性和可维护性；提供了丰富的工具和插件，可以提高开发效率和代码质量；支持自动化构建和测试，可以提高开发效率和代码质量。常见的现代前端框架包括：React、Vue、Angular等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值