Web语义化

article/2025/7/15 16:26:04

什么是Web语义化?

    如今互联网已经到了web3.0时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作的网页也从当初的table表格嵌套发展到了div+css,这是进步的标志。然而我们似乎看到了一个不太好的想象:整个网页大量的使用div标签进行分隔页面内容,有的甚至整个页面只有div一种html标签存在,这种div滥用现象使得网页制作似乎就只剩下了div。时代是进化着的,所以,诞生了web语义化这个概念。包括两个方面:html语义化及css命名语义化

web语义化可以简单的理解为:用便于理解的特定语言来定义特定的事物

为什么要web语义化?

    首先,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能的对搜索引擎友好,所以就要尽可能地使标签语义化。

    以前以我对web开发的粗浅理解,觉得写一个好的符合标准的页面只需要把结构和表现分离,然后不要使用table,p等标签就行了,至于通篇都是div我也不会觉得有什么问题,因为css很强大。但是,所有的标签都是有自己的语义的,下面给出一部分标签的语义:

div语义:division(分隔)

span语义:span(范围)

ol语义:ordered list(有序列表)

ul语义:unordered list(无序列表)

li语义:list item(列表项)

…………

    如果无视标签语义和默认样式,所有标签都用div,其实也是可以写出来视觉效果很好的页面,只要你灵活运用css。但是那样的话虽然视觉上达到了要求,但是整个页面一点语义都没有,搜索引擎还是看不懂,所以,要记住:

    结构html才是重点,样式css是用来修饰结构的,所以,要先确定html,确定标签,再来选用合适的css。

    其次,SEO的时候我们经常用h1来突出标题,用strong来突出关键字,这确实就是语义化的体现。就目前的搜索引擎来说并不能像访客那样很直观的去查看网页,它只有分析源码来体现或猜测网站要表达的内容。比如我们想表达某篇文章的标题,我们或许会这样写:

<div id="title">文章的标题</div>

访客或许能理解我们的意思,但搜索引擎就要反复揣摩了,更好的讨好搜索引擎我们可以这样来写:

<h1>这是标题</h1>

注意:h1拥有最高的权值,在一个页面中最好只使用1个h1来突出你的内容,太多的h1会分散其整个页面的权重,对搜索引擎也是非常的不友好。

语义化优势:

    正如上边的小例子,语义化的代码更小,下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解我们的代码。当然语义化代码也是我们能力的体现。

怎样进行语义化?

1、html语义化

    简而言之,就是在你看到内容的时候想想用什么标签能更好的的描述它,就用什么标签。很明显Hx系列看起来更像标题,因为拥有粗体和较大的字号,<strong>,<em>用来区别与其他文字,起到了强调的作用。至于列表<ul>、<ol>等和表格<table>很明细的告诉你他们是做什么的。如:

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减,<h1>是最高的等级。

<p>段落标记,知道了<p>作为段落,我们就不会再使用<br/>来换行了,而且不要<br/><br/>来区分段落与段落。<p>中的文字会自动换行,而且换行的效果优于<br>。段落与段落之间的空隙也可以利用css来控制,很容易而且清晰的区分出段落与段落。再利用行高(line-height)很容易的定义出行间距,再定义首字下沉等效果,那就更完美了。

2、css命名语义化

    一般而言,css类名的语义化声明方式应当考虑你的页面中某个相对元素的“用意”,像left-bar,red-text,small-title……这些都属于结构化定义的例子。

让我们看看下面的这个例子:

    而现在我们想把页面中的元素调换一下位置,如果你使用的事结构化方式(1),那么你就要把所有css类重新进行定义,因为他们的位置变了。在布局(3)中,我们看到元素都倒转了:right-bar现在成了“left-bar”,而left-content成了“right-content”,如果你使用语义化方式则避免了此类问题。

    换句话说,使用语义化方式的话,你在修改网站布局的时候可以仅仅修改相关css类的属性即可,而不用修改它们的类名了,如果网站的代码很庞大,这将节省大量的时间。

参考链接:

http://blog.bingo929.com/css-coding-semantic-naming.html  CSS代码命名惯例语义化的方法

https://blog.csdn.net/yzy1840/article/details/4712166 HTML语义化

https://blog.csdn.net/li2274221/article/details/25188497 关于web语义化


http://chatgpt.dhexx.cn/article/fiKcdrjP.shtml

相关文章

使用pygame开发一个弹幕射击游戏(一)

本文作为开发过程记录用。 目前游戏画面&#xff1a; 下一个添加的功能&#xff1a;敌机可以进行射击。 弹幕类 from pygame.sprite import Sprite from pygame import transform import mathclass Barrage(Sprite):def __init__(self,raiden_settings,screen,ship,enemy,angle…

手机射击游戏中弹幕的开发

射击游戏中弹幕的开发 http://blog.vckbase.com/knight/archive/2005/03/29/4174.html 作者:牛阿牛 2005-02-28 nhf_2008hotmail.com nhf_2003hotmail.com email:nhf20021166163.com 留言:希望能给各位游戏开发一点的介绍;如有问题,请联系. 游戏射击中, boss可能是最重要…

基于C#弹幕类射击游戏的实现——(十)整合

有朋友说只看代码不爽,所以特上传EXE和一张截图,哈哈。 执行文件下载链接:http://pan.baidu.com/s/1pJ5Hg5X http://download.csdn.net/detail/unskytoo/8366523 剩下部分代码,首先是入口,MainForm public partial class MainForm : Form{public MainForm(){//// The In…

DxLib做弹幕射击游戏(二)——画一台敌机

直接看代码&#xff1a; #include "DxLib.h" int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow ) {ChangeWindowMode( TRUE ) ;if( DxLib_Init() -1 ){return -1 ;}int gh ;//图像编号int x, y;//坐标x 200;y 1…

DxLib做弹幕射击游戏(一)

DxLib是神马东西&#xff1f;看名字&#xff0c;似乎是M$的DirectX的官方库&#xff1f;NONONO&#xff0c;这货其实是日本人开发出来的一个库&#xff0c;封装了很多DirectX的函数&#xff0c;使开发更方便。这个库在日本那边很流行&#xff0c;很多同人游戏都是使用这个库开发…

【四圣龙神录】 开源仿东方 弹幕射击游戏教程 官网(译)以及国内参考翻译资料

四圣龙神录 官网地址 http://dixq.net/sr/ 引用doujin 上的帖子的介绍 http://bbs.doujinstg.net/simple/?t1478.html 开源仿东方STG&#xff0d;四圣龙神录&#xff0c;带弹幕制作教程60讲&#xff0c;使用C语言DXLib 非常不错的仿东方的STG&#xff0c;网站上面带制作…

重写弹幕射击游戏的记录

项目背景介绍 上大学之后我一直在学习游戏开发&#xff0c;最开始是直接使用Easyx这个绘图库做Dos下的游戏&#xff0c;当时学习了C和数据结构之后正巧有个数据结构课程设计&#xff0c;就心生了要做这个游戏的想法。我算是那种有想法就想着去做的人&#xff08;有时候也算是缺…

【Unity2D入门教程】简单制作战机弹幕射击游戏⑥最终回扩展其它范围的内容

制作分数和生命的UI&#xff1a; 由于我们前面没有做类似的UI所以这里教大伙一下基本思路&#xff1a; 首先我们创建一个canvas用来创建两个Text用来显示分数和生命的UI 蓝色的是分数黄色的是生命 我们创建一个scoreplay的脚本挂载在text上 using System.Collections; usi…

【Unity2D入门教程】简单制作战机弹幕射击游戏③C#编写 子弹Laser脚本

学习目标&#xff1a; 今天教大伙怎么设置子弹Laser的组件以及编写关于它的脚本 学习组件&#xff1a; 老规矩还是添加一下它的组件用capusle collider2D刚好它还是个圆柱体&#xff0c;别忘了勾选它的isTrigger Rigibody2D的Body Type调成是让它不受重力以及物理碰撞影响&a…

【Unity2D入门教程】简单制作战机弹幕射击游戏⑦番外篇扩展一个大型敌人

布置场景&#xff1a; 我们先按CrtlD复制一个之前创建好的Enemy Prefab&#xff0c;然后更改它的Sprite&#xff0c;我们拖一张素材的图片进来并改变它的Pixel Per Unit让它大其它敌机一倍 由于体型变大了之前的Coliider就不适用了我们要重新删掉之前的再创建一个新的 同样它的…

【Unity2D入门教程】简单制作战机弹幕射击游戏④C#编写 敌人按指定路径以及敌人生成点脚本

前言&#xff1a; 我们前面忘记设置的当敌机和子弹碰到特定的位置&#xff08;指屏幕外的&#xff09;就会自动销毁 挂载的脚本Sherred如下 using System.Collections; using System.Collections.Generic; using UnityEngine;public class Shredder : MonoBehaviour {private…

【Unity2D入门教程】简单制作战机弹幕射击游戏⑤C#编写 背景滚动移动以及增加粒子特效

学习目标&#xff1a; 上期结束后我们游戏的主体就已经差不多了&#xff0c;剩下的就要给游戏的真实质感以及可玩性上下大点功夫了&#xff0c;今天我们就从背景滚动移动以及增加粒子特效上出发。 背景滚动制作&#xff1a; 为了让游戏更具真实性的就是让玩家从视觉上感受飞机…

【Unity2D入门教程】简单制作战机弹幕射击游戏② C#编写 Player和Enemy脚本

学习目标&#xff1a; 上期的水平大伙看到我已经写好了Enemy和Player的脚本了&#xff0c;现在就把脚本教给大伙&#xff0c;话不多说搞的不丑 学习内容&#xff1a; 首先是Player的脚本&#xff08;之前没发现CSDN有这个代码段的&#xff0c;我的我的&#xff09; using Sy…

【Unity2D入门教程】简单制作战机弹幕射击游戏① 导入素材

学习目标&#xff1a; 今天我们制作一款类似银河战机的游戏导入素材并给它设置一下背景&#xff0c;把素材做成预设体等等 首先先上网找到我们需要的素材 Unity Asset Store - The Best Assets for Game MakingDiscover the best assets for game making. Choose from our mas…

弹幕射击游戏中旋转矩形碰撞检测的算法描述

分离轴法是根据两个多边形的几何中心在任意矢量方向的法线上的投影存在交叉的条件来做出的方法[32]。换而言之&#xff0c;如果可以找出这样一个方向&#xff0c;将两个多边形投影在此方向的法线上的投影不交叉&#xff0c;则说明碰撞未发生&#xff0c;如图5-3所示。 图中A、B…

Cocos2d-x 简单弹幕射击游戏

开发环境 Win10, Cocos2d-x v3.16, Visual Studio 2017, Visual Studio Code 项目阐述 这个游戏是一个小型的弹幕游戏。玩家将控制pipi美&#xff0c;在躲避pop子的子弹之余&#xff0c;射杀pop子。名字打算叫“pop子的深邃黑暗幻想”。 游戏的设计主要借鉴了东方系列的弹幕游…

程序员职业规划和学习规划

程序员职业规划路线 技术体系 阿里程序员等级 学习规划

程序员职业发展规划

程序员职业生涯发展到一定的程度都会面临着职业发展方向选择的问题&#xff0c;随着年龄的增长&#xff0c;面对日新月异的代码&#xff0c;感到力不从心&#xff0c;更年轻的程序员层出不穷&#xff0c;这些都是促使程序员向另一个方向进行转型&#xff0c;那么&#xff0c;程…

程序员10年职业规划

从事Dotnet程序开发工作近10年了&#xff0c;从开始的月薪3k的小程序员菜鸟&#xff0c;到现在年薪60w的项目总经理&#xff0c;从战战兢兢的去各个公司应聘&#xff0c;到现在开始面试那些战战兢兢的小程序员&#xff0c;回想起这近十年来的经验&#xff0c;看着还是朝气蓬勃的…