html语义化 title,「HTML+ CSS」理解html语义化，让你的网页更好的被搜索引擎识别...

最新推荐文章于 2022-09-05 10:45:20 发布
最新推荐文章于 2022-09-05 10:45:20 发布
阅读量148 收藏
点赞数
文章标签： html语义化 title

58520ee0de05a974c93646edfa86a1ef.png

1)什么叫做标签语义化

说的通俗点就是：明白每个html标签的用法(在什么情况下使用此标签合理)比如，网页上的新闻列表可以使用列表标签，文章的标题可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 、strong等标签表示强调说明等等。

总的来说就是根据网页内容，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

1a9b15ca8c9bf231eb3c055d0426e891.png

2)为什么要标签语义化？

->有助于提升用户体验：例如合理的利用title、alt用于解释名词或解释图片信息让用户在访问浏览图片的时候可以查看到图片的主体信息；

->有利于网站的优化：良好的标签使用可以与搜索引擎建立良好沟通，有助于爬虫快速抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

->方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页，便于自动转码阅读；

->便于团队开发和维护，html标签语义化可以使更具可读性，让开发者能更快的切入重点，节省工作时间，遵循W3C标准，可以减少代码差异化，避免页面兼容性bug。

3)常见的语义化标签

16fab35a42851430e37caf9cc140d673.gif

：页面主体内容，常用于文章的标题。

：h1~h6，分级标题，

与 协调有利于搜索引擎优化。

  • ：无序列表。
  • ：有序列表。

    ：页眉通常包括网站标志、主导航、全站链接以及搜索框。

    ：标记导航，仅对文档中重要的链接群使用。

    ：定义外部的内容，其中的内容独立于文档的其余部分。

    ：定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

    ：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

    ：页脚，只有当父级是body时，才是整个页面的页脚。

    ：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

    ：和 em 标签一样，用于强调文本，但它强调的程度更强一些。

    ：将其中的文本表示为强调的内容，表现为斜体。

    ：规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。

    ：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。

    ：定义块引用，块引用拥有它们自己的空间。

    ：预格式化文本。保留文本固有的换行和空格。
    以上只是列举了一些常用的语义化标签，大家先简单了解下即可，后边的文章我们将详细介绍html每个标签的作用以及用法，大家记得关注哦。
    举报/反馈
 


                

        

        




    




    

      

        

            

              
                
                  AA优房-小毛
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
html标签之，一，标题标签

				
			

			

				

					weixin_64245908的博客
				

				

					01-07
					
					1485
					
				

			

		

		

			
				
1，标题标签

<h1>~<h6> (重要)

为了使网页更具用语义化，我们经常会在页面中用到标题标签。html提供了6个等级的网页标题，

即<h1>~~<h6>


<h1>我是一级标签</h1>
  <h2>我是二级标签</h2>
  <h3>我是三级标签</h3>
  <h4>我是四级标签</h4>
...

			
		

	



                

              
                



	

		

			

				
					
html常用标签

				
			

			

				

					m0_72313625的博客
				

				

					07-10
					
					236
					
				

			

		

		

			
				
html常用的标题标签，段落标签，换行标签，文本格式化标签

			
		

	



                


  
              

                


	

		

			

				
					
HTML的语义化（标签的含义）

				
			

			

				

					qq_53266249的博客
				

				

					06-29
					
					148
					
				

			

		

		

			
				
语义化标签存在的意义：1.方便代码的阅读和维护。2.同时让浏览器或是网络爬虫可以更好地解析，从而更好的分析其内容。3.使用语义化标签会具有更好的搜索引擎优化。       （核心：在合适的地方给一个最为合理的标签）        语义是否良好：当我们去掉css之后，网页结构·依然组织有序，并且具有良好的可读性。遵循的原则：先确定语义的HTML，再选择合适的css。——标题标签 （单词缩写：head 头部，标题）        为了使网页更具有语义化，我们经常会在网页中用到标题标签，HTML提供了6个等级的标

			
		

	





	

		

			

				
					
css.html语义化,html语义化、css的盒子模型

				
			

			

				

					weixin_30604459的博客
				

				

					06-10
					
					92
					
				

			

		

		

			
				
内容转载自：https://juejin.im/post/5b44a485e51d4519945fb6b7对HTML语义化标签的理解HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。css盒模型盒模型是页面中组装元素的矩形区域。CSS中的盒模型包括标准的W3C盒模型和IE盒模型。标准盒子模型(...

			
		

	



		

			
		



	

		

			

				
					
HTML+CSS 语义化+文本相关属性

				
			

			

				

					weixin_58139900的博客
				

				

					09-16
					
					144
					
				

			

		

		

			
				
目录

HTML语义化（谈谈你对HTML语义化理解-从以下两方面阐述）

什么是语义化

语义化的好处（为什么要语义化）

css字体，文本属性

学习目标

font-family

常用值：



多个字体名称

字体大小font-size

字体加粗font-weight

字体行高line-height

文本对齐text-align

垂直对齐属性(图文对齐上)vertical-align

下划线text-decoration

首行缩进text-inden



字体颜色

...

			
		

	





	

		

			

				
					
模仿vivo官网html+css.zip

				
			

			

				

					07-17
				

			

		

		

			
				
4. **布局**：`<header>`、`<main>`、`<section>`、`<article>`等语义化标签用于组织页面内容。  5. **图片展示**：`<img>`标签插入图片，`src`属性指定图片源，`alt`属性提供替代文本。  6. **表格**：`<table>`、`...

			
		

	





	

		

			

				
					
html5+css3ppt课件.ppt

				
			

			

				

					11-16
				

			

		

		

			
				
本资源摘要信息主要是关于HTML5的基本结构和语义化标签的应用，以下是从给定的文件信息中生成的相关知识点：  1. 标题hn：HTML提供了六级标题用于创建页面信息的层级关系，使用h1、h2、h3、h4、h5和h6元素对各级标题...

			
		

	





	

		

			

				
					
HTML语义化.doc

				
			

			

				

					03-31
				

			

		

		

			
				
HTML语义化是一种重要的网页设计原则，它强调在编写HTML代码时使用具有明确含义的标签，以便更好地表达页面内容的结构和意图。语义化的HTML不仅有助于人类阅读和理解，而且对搜索引擎优化（SEO）、无障碍访问以及...

			
		

	





	

		

			

				
					
html css js网页设计.docx

					
最新发布

				
			

			

				

					05-28
				

			

		

		

			
				
html css js网页设计 由于2000字的要求相当长，我将提供一个简化的... 语义化标签：使用具有语义含义的HTML标签（如、、等）可以提高网页的可访问性和可维护性。  应用示例  html <!DOCTYPE html>  <html lang="zh">

			
		

	





	

		

			

				
					
HTML+CSS(HTML语义化标签+css样式引入+选择符+css文字属性)

				
			

			

				

					qq_40409416的博客
				

				

					03-05
					
					361
					
				

			

		

		

			
				
HTML5扩展
语义化标签
在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。
不使用<div>标签来布局网页后：

<header>标签


CSS复习
CSS样式引入
内联样式（行内样式）
行内 style=“”

内部样式（嵌入样式

			
		

	





	

		

			

				
					
加深对HTML和CSS标签语义化的理解

				
			

			

				

					前端基础入门学习线路
				

				

					02-27
					
					3243
					
				

			

		

		

			
				
首先说明的一点是，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。 以前我真的没有怎么重视过搜索引擎，现在开始比较在意了，因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。

以前以我对web开发的粗浅理解，觉得写一个好的符合标准的页面只需要把结构和表现分离，然后不要使用table，font等标...

			
		

	





	

		

			

				
					
一些常见html5语义化标签

					
热门推荐

				
			

			

				

					前端笔记
				

				

					10-26
					
					5万+
					
				

			

		

		

			
				
我们知道，创建结构清晰的页面可以建立良好的语义化基础，也降低了使用css的难度，下面总结了一些常用的语义化标签，有空慢慢更新，欢迎大家补充


         语义化HTML：用最恰当的HTML元素标记的内容。
      
         优点：1 提升可访问性；
                    2 SEO；
                    3 结构清晰，利于维

			
		

	





	

		

			

				
					
html文字段落 带标题,HTML标题跟段落

				
			

			

				

					weixin_36213143的博客
				

				

					05-31
					
					367
					
				

			

		

		

			
				
HTML标题和段落HTML标题通过 -  等标签进行定义一标题二标题三标题四标题五标题六标题效果：如我们所见，标题是粗体或大号的文本，所以需要注意的是，要语义化的使用标题标签，即仅仅把标题标签用于标题文本。如果为了产生粗体或大号文本而使用它们，请使用其它标签或 CSS 代替。一标题二标题三标题四标题五标题六标题h1 用作主标题(最重要的)，其后是 h2(次重要的)，再其次是 h3，以此类推。用标题...

			
		

	





	

		

			

				
					
HTML学习笔记——常用标签的使用（语义化标签）

				
			

			

				

					Etui۹(･༥･´)و的博客
				

				

					12-26
					
					318
					
				

			

		

		

			
				
1.标题标签
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>语义化标签</title>
    </head>
    <body>
        <!--
            在网页中HTML专门用来负责网页的结构
            所以在使用HTML标签时，应

			
		

	





	

		

			

				
					
web前端学习笔记（常见HTML标签、图像和链接、语义化、CSS入门）

				
			

			

				

					weixin_46227249的博客
				

				

					04-17
					
					329
					
				

			

		

		

			
				
目录一、超链接标签1、超链接的作用2、语法3、特性4、应用二、列表标签1、无序列表2、有序列表3、自定义列表三、表格1、表格的作用2、简单表格3、表格相关属性4、单元格常用属性5、表格上的css属性6、复杂表格四、HTML语义化1、什么是语义化？2、语义化的好处五、CSS简介六、CSS的三种引入方式1、行内样式（行间样式、内联样式）2、内部样式（内嵌式）3、外部样式（外链式）七、css语法
一、超链接标签
1、超链接的作用
可以点击文字、图片或者整个模块实现页面跳转功能，可以使多个页面之间产生一定的关联
2

			
		

	





	

		

			

				
					
HTML中的语义化标签

				
			

			

				

					ct5211314的博客
				

				

					09-05
					
					6306
					
				

			

		

		

			
				
语义化标签可以理解为用于进行网页页面构建的标签，他们不会影响页面内容，只是对页面结构的规范话。

			
		

	





	

		

			

				
					
html语义标签属于css,HTML与CSS标签语义化的深入理解

				
			

			

				

					weixin_39580682的博客
				

				

					05-31
					
					81
					
				

			

		

		

			
				
首先说明的一点是，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。以前我真的没有怎么重视过搜索引擎，现在开始比较在意了，因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。以前以我对web开发的粗浅理解，觉得写一个好的符合网页标准的页面只需要把结构和表现分离，然后不要使用table，font等标签...

			
		

	





	

		

			

				
					
HTML基础-关于语法结构的学习笔记

				
			

			

				

					HLAn的博客
				

				

					09-24
					
					260
					
				

			

		

		

			
				
HTML基础学习

			
		

	





	

		

			

				
					
Web语义化(HTML5语义化标签)

				
			

			

				

					furfur-jiang的博客
				

				

					01-26
					
					446
					
				

			

		

		

			
				
转载文章：https://www.cnblogs.com/weixiao-he/p/8630084.html
做了部分补充
什么是Web语义化
Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。包含了html标签语义化，css命名语义化，URL语义化。
语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结

			
		

	





	

		

			

				
					
HTML5+CSS3.网页布局

				
			

			

				

					12-21
				

			

		

		

			
				
HTML5和CSS3是用于网页开发的两种核心技术。HTML5是一种标记语言，用于定义网页的结构和内容。CSS3是一种样式表语言，用于定义网页的外观和布局。

在网页布局方面，HTML5提供了一些新的语义化标签，如<header>、<nav>、<section>、<article>、<aside>和<footer>等，用于更好地组织网页内容。而CSS3则提供了一些新的布局属性和选择器，使得网页布局更加灵活和多样化。

以下是一个简单的HTML5+CSS3网页布局的例子：

```html
<!DOCTYPE html>
<html>
<head>
    <title>网页布局示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        
        nav {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }
        
        section {
            padding: 20px;
        }
        
        aside {
            background-color: #f1f1f1;
            padding: 10px;
        }
        
        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>网页标题</h1>
    </header>
    
    <nav>
        <a href="#">导航链接1</a>
        <a href="#">导航链接2</a>
        <a href="#">导航链接3</a>
    </nav>
    
    <section>
        <h2>内容标题</h2>
        <p>这是网页的主要内容。</p>
    </section>
    
    <aside>
        <h3>侧边栏标题</h3>
        <p>这是侧边栏的内容。</p>
    </aside>
    
    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>
```

这个例子中，使用了<header>、<nav>、<section>、<aside>和<footer>等HTML5标签来组织网页的结构。通过CSS样式，设置了不同部分的背景颜色、字体颜色和内边距等，实现了简单的网页布局效果。



			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值