网页前端开发之HTML标签语义(web前端开发网页代码)

HTML标签的设计都是有语义考虑的，下表是部分标签的全称和中文翻译。
 

标签名	英文全拼	中文翻译
div	division	分隔
span	span	范围
ol	ordered list	排序列表
ul	unordered list	不排序列表
li	list item	列表项目
dl	definition list	定义列表
dt	definition term	定义术语
dd	definitiion description	定义描述
del	deleted	删除
ins	inserted	插入
h1~h6	header 1 to header 6	标题1到标题6
p	paragraph	段落
hr	horizontal rule	水平尺
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
var	variable	变量
pre	preformatted	预定义格式
blockquote	block quotation	区块引用语
strong	strong	加重
em	emphasized	加重
b	bold	粗体
i	italic	斜体
big	big	变大
small	small	变小
sup	superscripted	上标
sub	subscripted	下标
br	break	换行
center	center	居中
font	font	字体
u	underlined	下划线
s	strikethrough	删除线
fieldset	fieldset	城集
legend	legend	图标
caption	caption	标题

 
其中，div和soan其实是没有语义的，它们只是分别用作块级元素和行内元素的区域分隔符。
 
如何确定你的标签是否语义良好
 
判断网页标签语义是否良好的一个简单方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。   语义良好的网页去掉样式后结构依然很清晰。
同样的设计图，不同的HTML标签可以通过不同的CSS实现同样的页面，但语义不好的CSS布局和语义良好的CSS布局在去样式后的表现却可能截然不同。
如果选用的标签几乎全是不带语义的，那么在去样式后网页中几乎看不到任何结构信息，可读性非常差；如果选用的都是语义适合的标签，去样式后网页依然具有非常好的可读性。
 
所以我们的开发过程中，不要拿到一个任务后就马上开始写代码，在拿到设计稿后不要急于马上进行开发，而是先根据页面结构进行分析，先考虑好框架，适用的标签等，会让整个开发过程更有规划、更顺畅，是一个先慢后快的过程。反之就可能出现先快后慢的局面，越到后期开发速度越慢，反复修改bug、打补丁。
以上就是关于网页前端开发之HTML标签语义(web前端开发网页代码)，希望对你有帮助，更多内容关注蓝港网络。