HTML与CSS 开发常用语义化命名

channg 发布于2019-08-01 18:31 / 420人阅读

摘要：一布局头部页眉首页索引标志导航子导航横幅广告主体内容容器包裹类似于菜单子菜单二级菜单列表分区分块类似于文章侧边栏广告页脚底部标题副标题新闻热点产品公司信息消息广告小图标图片版权联系我们友情链接联系电话地址二样式层叠样式表背景位置定位相对定位

一、布局❤️

header 头部/页眉；
index 首页/索引；
logo 标志；
nav/sub_nav 导航/子导航；
banner 横幅广告；
main/content 主体/内容；
container/con 容器；
wrapper/wrap 包裹（类似于container）；
menu 菜单；
sub_menu/second_menu 子菜单/二级菜单；
list 列表；
section 分区/分块（类似于div）;
article 文章；
aside 侧边栏/广告；
footer 页脚/底部；
title/sub_title 标题/副标题；
news 新闻；
hot 热点；
pro 产品（product）；
company 公司；
msg/info 信息（message）/消息；
ads 广告（advertisements）;
icon 小图标；
img 图片（image）；
copyright 版权；
contact_us 联系我们；
friend_link 友情链接；
tel 联系电话（telephone）；
address 地址；

二、CSS样式（style）❤️

CSS 层叠样式表 (Cascading Style Sheets) ；
background 背景；
position 位置/定位；
relative/absolute/fixed 相对定位/绝对定位/固定定位；
float 浮动；
clear 清除；
vertical-align: middle/top/bottom; 垂直居中/上/下；
line-height 行高；
margin 外边距；
padding 内边距；
border 边框；
solid/dashed/dotted 实线/线虚线/点虚线；
border-radius 圆角；
shadow 阴影；
display 展示；
hidden 隐藏；
block/inline-block 块元素/行内块；
overflow 溢出；
cursor 光标；
animation 动画；
css sprites 雪碧图/图片精灵；
column 分列；
flex 弹性（布局）；

三、表单（form）与表格（table）❤️

form 表单；
action 行为；
method 方式/方法；
input 输入框；
label 标签；
password 密码；
radio 单选框；
checkbox 复选框；
btn 按钮（button）；
submit/reset 提交/重置；
textarea 文本域；
select/option 选择框/选择项；
placeholder 占位符（起提示作用）；
search 搜索；
icon 小图标；
autofocus 自动聚焦；
disabled 禁用；
checked 选中（单选框/复选框）；
selected 默认选择项（下拉选择框）；
required 必填项；
readonly 只读；
table 表格；
thead/tbody/tfoot 表格标题/主体/底部；
colspan 跨列；
rowspan 跨行；
cellspacing 单元格间距（类似于margin）；
cellpadding 单元格边距（类似于padding）；
border-collapse: collapse; 边框合并（用于table上）；

GPU云服务器云服务器 html 标签语义化语义化标签语义化 css与html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51787.html

HTML与CSS 开发常用语义化命名

摘要：一布局头部页眉首页索引标志导航子导航横幅广告主体内容容器包裹类似于菜单子菜单二级菜单列表分区分块类似于文章侧边栏广告页脚底部标题副标题新闻热点产品公司信息消息广告小图标图片版权联系我们友情链接联系电话地址二样式层叠样式表背景位置定位相对定位一、布局❤️ header 头部/页眉；index 首页/索引；logo 标志；nav/sub_nav 导航/子导航；banner 横幅广告；ma...

Java_oldboy 2019-08-30 13:53 评论0 收藏0
我眼中的Web 语义化

摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...

zhichangterry 2019-08-30 15:52 评论0 收藏0
我眼中的Web 语义化

摘要：语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。我眼中的Web 语义化 web语义化是什么？ Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的...

ChanceWong 2019-08-01 16:23 评论0 收藏0