主页/ 电商学院/网站开发/网页前端开发之HTML标签语义

网页前端开发之HTML标签语义

归类:网站开发
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、打补丁。
网站声明:以上文章内容为优加的原创文章,如需转载,请注明出处,谢谢合作!
0 喜欢
376 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解
咨询更详细需求
提交信息后我们会第一时间与你取得联系,请大致把需求填写在"咨询内容"里。
姓名
手机
咨询内容
立即提交