HTML —— 语义化标签

最新推荐文章于 2022-06-08 16:11:47 发布
最新推荐文章于 2022-06-08 16:11:47 发布
阅读量651 收藏
点赞数
文章标签： html 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cx330_der/article/details/124310858
版权
本文介绍了HTML中的语义化标签，包括无语义的div和span标签及其常见用途，以及HTML5中新增的有语义的布局标签在移动端网页设计中的应用。此外，还讲解了字符实体的概念，说明了如何在代码中处理多个空格、换行和缩进。
摘要由CSDN通过智能技术生成

语义化标签

没有语义的布局标签 div和span

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

div标签与span标签无任何效果，后期可通过CSS添加效果。 使用频率很高

有语义的布局标签

在HTML5中，提出的一些有语义的布局标签。

做手机端（移动端）网页时使用

标签名

语义

header

网页头部

nav

网页导航

footer

网页底部

aside

网页侧边栏

section

网页区块

article

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

字符实体

字符实体

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

常见的字符实体

显示结果

描述

实体名称

空格

 ；

小于号

<；

>

大于号

>

&

和 号

&

"

引号

"；

，

撇号

' (IE不支持)

¥

元 （yen）

¥

....

....

....

Cx330_der
关注
html div与span同行,div和span在一行 div和Span及a标签的区别
weixin_33318791的博客
06-19 4690
(一)span和div功能区别 span和div区别在于，div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。 span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。td中我想让div和span在一行显示，怎么解决td中我想让div和span在一行显示，怎么解决？5 我想让div和span在一行显示。一个DIV里面，怎么让一个S...
前端——语义化标签+字符实体+实战演练
Bingtangbgd的博客
05-15 185
前端——语义化标签+字符实体+实战演练
span强制一行
这是个什么博客
04-06 3028
因为span本身不是块元素，且自带浮动左效果 父标签添加 （注意不是span标签，是span的父标签） word-wrap:break-word; // 强制换行
html 设置span标签只在一行内显示
高安博客
07-30 7760
white-space: nowrap; /*强制span不换行*/ display: inline-block; /*将span当做块级元素对待*/ width: 260px; /*限制宽度*/ overflow: hidden; /*超出宽度部分隐藏*/ text-overflow: ellipsis; /*超出部分以点号代替*/ line-height: 0.9; /*数字与之前的文字对齐*/ ...
CSS-盒模型
qq_43681073的博客
04-19 1718
CSS盒模型1. 盒模型1.1 盒模型及计算1.2 通用属性值规则2. 行内、块级元素2.1 标准文档流2.2 块级元素、行内元素和行内块元素2.3 display设置元素类型2.4 空隙的产生 ...
css 设置span标签单行文字展示
Barret_M82A1的专栏
12-09 1281
white-space: nowrap; /*强制span不换行*/ display: inline-block; /*将span当做块级元素对待*/ width: 260px; /*限制宽度*/ overflow: hidden; /*超出宽度部分隐藏*/ text-overflow: ellipsis; /*超出部分以点号代替*/ line-height: 0.9; /*数字与之前的文字对齐*/ ...
HTML学习记录1
serendipity__i的博客
09-28 150
一，学习软件VSCode 步骤： 1.新建文件（Ctrl+N） 2.一定要先保存（Ctrl+S），要保存为.html文件 3.Ctrl+放大，Ctrl-缩小视图 4. !可以直接生成页面骨架结构 输入!按下tab键 5.运行。在扩展安装open in brower，就可以直接右键运行了 二，网页开发工具 以下三个代码vscode会自动生成，不需要重写。 1.文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页 <!DOCTYPE html> 注意：（1）&
语义化标签——HTML
01-08
语义化标签 在网页中HTML专门负责网页的结构 在使用html标签时，应关注的是标签的语义，而不是它的样式 标题标签 h1~h6(一共有六级标签) h1在网页中的重要性仅次于title，一般情况下一个页面只会有一个h1 一般情况下...
前端开发：深入理解HTML标签——语义化与常用标签
"本文主要介绍了前端开发中HTML标签的基础知识，包括语义化、body标签、p标签和hx标题标签的使用。通过学习这些基础知识，开发者可以更好地构建语义清晰、结构合理的网页，提高搜索引擎友好度。" 在前端开发中，...
HTML5新特性——新的语义化标签
weixin_47481102的博客
06-08 1548
HTML5的新增特性主要是针对于以前的不足，增勖加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是9+以上版本的浏览器才支特，如果不考虑兼容性问题，可以大量使用这些新特性。 声明： 1.新特性增加了很多，但是我们专注于开发常用的新特性 2.基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。语义 = 意义什么是语义元素?一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: 和 - 无需考虑内容.语义元素实例: , ......
html5语义化规范,html5语义化标签使用规范
weixin_39746552的博客
05-31 673
Html5添加了很多语义化标签，一个典型的html5页面结构可以如下安排一、使用案例1. 头部——header和nav标签header头部，body下的直接子元素header一般用于放页面的介绍性的信息如网站名称、logo或者导航栏nav。html5语义化标签导航章节标签标题标签使用html5的header和nav标签html5语义化标签导航章节标签标题标签传统的头部注意到上面用了两个h1标签，在...
CSS 让div内的span在一行显示
开心每天，水滴石穿。
08-24 4361
让div内的span在一行显示。因为div 是block元素，默认自动换行，需把span的style.display设置成inline-block就行了。 即：     span     {         display:inline-block;                     }
是两个span标签在同一行显示
qq_42692714的博客
07-09 1万+
就是两个span ， 我想让他们两个在同一行显示， 但是效果却是这样的， 原因在于这两个span标签 的宽度默认是100% ， 一个span就占满一行， 另一个只能去下一行， 解决方法就是边浮动边给他设置一个宽度， 两个宽度都设置成200px,, 再浮动， 就好了 就是这样 ...
html span标签 不换行（有时span带中文时候是可以自动换行的）
qq_42062941的博客
07-23 1万+
html span标签 不换行（有时span带中文时候是可以自动换行的） &lt;span&gt;你好111111111111111111111111111111111111111111111111111aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/span&gt;   不换行！ 加上样式： style="d...
html&css的简单了解
m0_50496669的博客
09-07 1310
html&css html： 常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date） 标签的分类： 单双标签：单标签没有与之对
行标签与块标签
qq_20179227的博客
08-17 3533
行标签与块标签 行标签和块标签是HTML页面标签的两种属性，都是属于css样式。 行标签：表示这种标签在页面中只占其本身大小，而在样式中对其宽和高的设置是无效的，这种标签是可以在一行中排列显示的，也叫做水平分布。 行标签包括：a、span、label、button、input。 当HTML代码这样写的时候 <a href="#">a标签</a> <sp...
div和span标签以及标签分类
407指导员
10-28 2万+
div标签 什么是div标签 作用：一般用于配合css完成网页基本布局。 span标签 什么是span标签 作用：一般用于配合css修改网页中的一一些局部信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div和span标签</title> <style> .conter {
span标签和input标签怎么设置在同一行
热门推荐
xinan_xin的博客
03-07 2万+
昨天正好碰到了这个问题，就此记录一下： 分别给span标签和input标签设置float:left，左浮；并且将span和input的height设置成一样，span的line-height也设置和height一样高，有个地方需要注意，input的width不能设置成100%，不然float：left不起作用了。 &lt;span style="float: left; height: 34...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值