找回密码
 加入怎通
查看: 422|回复: 7

[站长八卦] 学网页设计难吗HTML标签10个最容易犯的错误

[复制链接]
谭晓笑 发表于 2015-10-12 13:50:25 | 显示全部楼层 |阅读模式
保持良好的代码风格是每个Coder必学的课程,同样在HTML设计的时候也要特别注意代码的规范性,虽然说不规范的代码不会直接造成严重的后果,但很有可能对用户体验造成一定的干扰,同时也会降低搜索引擎对网站的好感度.这份列表包含了10个最容易犯的HTML标签错误,记下他们,能够让我们避免犯此常见错误,让我们的HTML标签符合语义,和标准的要求.
) z4 \- D7 \: {- l' P# F
8 K: z+ y% Q& d* a: H% Z3 K罪行1:把块级元素放入了行内元素内
/ `8 I+ H  c) l; S) B$ |. Z
# D0 v, `9 P& D4 }' x8 q; g1 r0 \
1 F, x% A! K/ Z4 f. u
; g) ^6 L& T) A1 d" t9 Q: ~& `% V3 t0 Z

; I2 b5 k) U0 [6 P4 h, S) ZHTML 元素的表现方式不外乎就两种:块级和行内.每一个标签都有默认的表现方式不是块级就是行内.像P和p 就是块级元素,他们用来形成文档结构.行内元素只能在快级元素内.轻轻松松学网页设计5 o. F) a3 O  K7 W* V. X- N  {
* \5 y/ g4 L) o
罪行2: img 标签没有包含alt属性
: u1 H1 f- Q- d" _* h) {% J) R7 N, k5 o0 F. t& u

0 K( a6 e# Y6 S! c8 H+ n, O  i, K! b3 p6 D

+ w: G+ O  p) m3 halt属性是所有显示在网页如何学习网页设计中图片的必须属性,它能够帮助人们知道这是什么图片.或者在网速比较慢的时候显示图片的含义是什么.它的主要目的是,说 明图片的含义,想这样的说明 alt=”image”是很糟糕的.如果,有些图片的确只是装饰作用而已,那么建议你写成 alt=”".网页设计图
: @6 ~( S8 _0 E  U# q$ u* H0 @+ `' L: l. ^4 C( s
罪行3:在必要的时候没使用list
- g# f- r" I# G3 d: I, ]) D0 s- i# H, M( I+ S$ h$ B
; g4 u8 ^& f" r

- P, t$ y) y6 C7 A1 \1 J: f$ E, K6 @: G; R/ v4 c1 [2 c* ~
犯罪4:使用和显示黑体字和斜体$ `5 [( T% m4 n' p' `* ^

( X! m1 D. j& t" m+ b9 t
$ ~8 a+ h; i1 V# c
! {# ?/ d0 u/ c( n. T
/ V" n1 ]% m7 b% a3 a# u. u
可以用css样式定义 font-weight 和 font-style. 如果必须在页面中写标签的话,用 或 标签来替换.的没有任何语义可言, 但是,为了更简洁的页面,还是选择 css定义样式吧+ M0 g; p. y" q& Z! Q: S

7 y  ^# N9 L' ]  d( l/ I犯罪5:使用太多& S* {& J  L! l- t* B9 ^4 A/ _

5 k% u# l6 D; V1 w. l' e! B
( e) ~" Z% X# R2 f

" J; e# R" P( j9 D, }8 X# F; g) D. u  G5 x" u6 v" e7 ?2 D1 v

. `1 i$ W* |0 V& J' x
3 a  H* a* m( y# q' s$ \+ A换行标记只应该用于插入是在第一个文本流换行符敲到一个新行一个特别字了。它不应该被用来制造元素之间的差距,而是分裂成不同的段落,或调整的幅度CSS样式的文本。网页设计培训从入门到精通
3 }. }7 d( E( E% [; ]; \# d% T# _* o0 [2 ]5 V
罪行6: 使用错误的 Strikethrough 标签
" k4 ^$ a0 q8 j+ J- v
  ]: N; C# Y' D) Y, j; k, M1 Q# ~9 {

% ~6 [& Z1 c" V5 I. d
4 O: g* G1 M2 e$ ^
; b" P% r. }! H$ `9 `在昔日,和允许用来定义网站文字。不过,现在他们被定义为不推荐使用的标签,当他们任然可以有效果.现在用新的标记集- 和。来替换; L: g4 n+ }  t6 q( O1 T
: }( W4 b2 d% l' L: T
罪行 7: 使用内联样式
) h/ j6 Z. L& w2 n$ J' ]
2 C  N! u+ w) Q) x' u2 [
: _9 }. i0 ?! P7 N
- E6 G- X' J! g: x9 P; r& K
/ h4 ]2 N: F5 ~2 Z3 s1 z. O
css最重要的目的只是为了区分文档和样式,如果,你把style写到页面里面,那么完全没有css的作用可言.所以,记住把你的样式放在它该放的位子
+ _$ E6 M* D' A- W; X& T  k. W( s% o8 L! p: B
罪行 8: 把border添加到HTML中& m3 m* O+ g8 I, g

# k9 y2 B. S  Z7 {3 q

# y0 w! k$ X. W2 a5 n6 `5 Q/ g( ]0 m
, V: i& C: L* I  V# q, \( U. R$ [% f0 ]1 ]/ r, p" \1 S" I
罪行 9: 没有使用header标签-
/ I9 D% d% q8 m6 s, Y+ K# D) m/ E, P* q7 E# d- t: ~
. }9 X+ K) X/ ]$ _( Y" V& r

3 V3 R. B7 I5 i  q. V
! d  S/ e, |5 \1 w罪行10: 没有语义的 或
8 Z# j3 V. C; g0 m1 H: H# i- M" N
! F# ~1 E  }3 t* G; p

$ M1 b3 S/ @0 Y) E7 R
, n# i# I. j# x3 [4 f2 e/ z4 i% v不被w3推荐,和(闪动,滚动)标签是纯粹的丑陋。学网页设计看什么书# `4 g) _, _* [- ^
- x* W8 P& Q" y
不要使用这个标签,如果一定要用这样的效果,相信,你会有其他更好的效果0 N  p; f/ \; t

% j0 N; P" @, b0 L1 U文章来源于互联网,由杭州酒店预订收集整理:http://www.tuankezhan.com/index/383.html,转载请注明出处nvts00m。

暂时无法加载帖子列表

回复

使用道具 举报

赚钱达人 发表于 2015-10-12 14:05:23 | 显示全部楼层
楼主V5,
回复

使用道具 举报

风停花开 发表于 2026-03-16 20:16:31 | 显示全部楼层
完全赞同,我也是这么认为的,英雄所见略同~
回复

使用道具 举报

华普在线婷婷 发表于 2026-08-13 18:32:16 | 显示全部楼层
这个思路很新颖,打开了新世界的大门,谢谢分享
回复

使用道具 举报

陈斌 发表于 2026-08-14 08:41:21 | 显示全部楼层
这个分享太实用了,刚好能用到,感谢楼主!
回复

使用道具 举报

【优化】马佑涛 发表于 2026-08-19 03:12:17 | 显示全部楼层
分析得很透彻,很多细节都说到点子上了~
回复

使用道具 举报

我是水手 发表于 2026-09-13 18:30:30 | 显示全部楼层
蹲了这么久,终于看到有价值的讨论,支持一下!
回复

使用道具 举报

siyibang 发表于 2026-09-19 01:25:47 | 显示全部楼层
楼主太厉害了,整理得这么详细,必须支持
回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-9-19 02:48 , Processed in 0.045521 second(s), 28 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表