首页 > Web开发 > 详细

HTML 与 CSS 中值得注意的要点（持续更新）

时间：2015-07-01 15:38:21      阅读：268      评论：0      收藏：0      [点我收藏+]

  • HTML

  1. <button> 元素

元素名称

属性

属性可选值

属性默认值

button

type

button

?

reset

?

submit

?

<button> 元素 的 type 属性取值可以是 button、reset、submit；在IE8及更新版本和其他现代浏览器中该属性默认值为 submit。

可以观察如下代码及其最终效果:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. </head>
  6. ?
  7. <body>
  8. <form action=‘‘ method=‘get‘>
  9. ???<input type=‘text‘ name=‘button‘ value=‘buttons‘/>
  10. ???<button>button</button>
  11. </form>
  12. ?
  13. <form action=‘‘ method=‘get‘>
  14. ???<input type=‘text‘ name=‘submit‘ value=‘submits‘/>
  15. ???<input type=‘submit‘ value=‘submit‘ />
  16. </form>
  17. </body>
  18. </html>

因此，在表单中如果要使用 <button> 元素则应当小心

  • CSS

  1. 文字排版

    1. word-spacing 只对英文有效，可参考以下代码及其最终效果：
    1. <p style="word-spacing:10px;">this paragraph has a spacing of 10 pixels between words</p> <!--单词间距-->
    2. <p style="word-spacing:10px;">汉语段落单词间距有效吗</p>

  • HTML + CSS

  1. 溢出控制 overflow

经过验证发现：

  1. 无论是 html5 还是 xhtml中，无意义的英文文本不会因为碰到父元素的边界就自动换行，而是会随着内容增加朝右侧无限延伸；
  2. 无论是 html5 还是 xhtml，中文均会自动换行。
  3. 图像遇到父元素边界会自动换行。

验证代码见下：

XTHML 版本：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>xthml 验证溢出效果</title>
  6. ?
  7. <style type="text/css">
  8. div{
  9. ???border:1px black solid;
  10. ???margin:100px;
  11. ???height:140px;
  12. ???overflow:visible;
  13. }
  14. .meaningful {
  15. ???width:500px;
  16. ???background:red;
  17. }
  18. .nonsense{
  19. ???width:400px;
  20. ???background:green;
  21. }
  22. ?
  23. </style>
  24. </head>
  25. <body>
  26. ???<!--英文-->
  27. ???<!--有意义的文本-->
  28. ???<div class="meaningful">
  29. ??????english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.english is english.
  30. ???</div>
  31. ???<hr>
  32. ???<!--无意义的文本-->
  33. ???<div class=‘nonsense‘>
  34. ??????<p>
  35. ?????????abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" />
  36. ?????????aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabcabcabcabcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabcabcabcabcabcabcabcabcabcabcabcabcabc
  37. ??????</p>
  38. ???</div>
  39. ???<hr>
  40. ???<!--有边界的元素内图像-->
  41. ???<div>
  42. ??????<img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" />
  43. ???</div>
  44. ???<!--中文-->
  45. ???<hr>
  46. ???<div class="meaningful">
  47. ??????中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。中文。
  48. ???</div>
  49. ???<div class=‘meaningful‘>
  50. ??????<p>
  51. ?????????中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！中文不会跑出去！
  52. ??????</p>
  53. ???</div>
  54. ???<!--无边界的图像-->
  55. ???<hr />
  56. ???<img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" />
  57. </body>
  58. </html>

HTML 5 版本:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>h5 验证溢出效果</title>
  6. <style>
  7. div{
  8. ???border:1px blue solid;
  9. ???height:140px;
  10. ???margin:50px;
  11. ???overflow:visible;
  12. }
  13. .eng{
  14. ???width:400px;
  15. ???background:grey;
  16. }
  17. .cn{
  18. ???width:500px;
  19. ???background:red;
  20. }
  21. </style>
  22. ?
  23. </head>
  24. ?
  25. <body>
  26. ???<div class="eng">
  27. ???<!--有意义的文本-->
  28. ??????in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.in-div and outside-paragraph texts.
  29. ???</div>
  30. ???<div class=‘eng‘>
  31. ??????<p>
  32. ??????<!--无意义的文本-->
  33. ?????????asdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfdasdfasijfdasdkfjaksfdaksjkfajkdfjaksjfd
  34. ??????</p>
  35. ???</div>
  36. ???<div>
  37. ??????<!--有边界的图像-->
  38. ??????<img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" />
  39. ???</div>
  40. ???<hr>
  41. ???<div class="cn">
  42. ???<!--有意义的文本-->
  43. ??????div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。div内段落外文字。
  44. ???</div>
  45. ???<div class=‘cn‘>
  46. ??????<p>div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。div内段落内文字。</p>
  47. ??????<!--无意义的文本-->
  48. ??????<p>去微软推哦怕是的法国红酒看来;自行车人的消息传出气氛佳伟峰皮卡史蒂夫去年危机的身份暖水瓶打开佛卡上的就非要你还不公布</p>
  49. ???</div>
  50. ???<hr />
  51. ???<!--无边界的图像-->
  52. ???<img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" /><img src="1.png" />
  53. </body>
  54. </html>

HTML 与 CSS 中值得注意的要点（持续更新）

原文：http://www.cnblogs.com/shinyoo/p/4613141.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！