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

  • 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>
时间： 2024-08-04 20:42:03

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

使用JEECG过程中的问题汇总（持续更新）

1.首次启动Tomcat服务时,控制台信息提示请使用SQL Server 2005或更高版本. <dependency> <groupId>org.jeecgframework</groupId> <artifactId>jdbc2005</artifactId> <version>${sqlserver.version}</version> <scope>runtime</scope> </

JavaScript 中值得注意的要点(1)

Delete 操作在数组与对象之间的差异 对数组进行 delete 运算,效果与对对象进行 delete 运算不同:见下: //delete操作在对象和数组之间的不同 //先删除对象的属性 var originObj={name:'Spark',inner:{top:'shirt',short:'T-string'}}; delete originObj.inner; for (var prop in originObj){ ?document.write(prop); } //-> name

CSS知识总结之浏览器（持续更新）

web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是documentElement,对应的是html标签. 例如:在chrome中,构建成的DOM树会被将页面划分为很多图层(注:图层并不是节点,一个图层可能包含一个或者多个节点). 更深入的了解:参考http://www.html5rocks.com/zh/tutorials/speed/layers

css比较特殊选择器汇总（持续更新）

1.css选择器中加号(+)是啥意思? 加号(+)为:相邻同胞选择器,如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector) 如图: 我们经常见到页面上方的导航,用“/”分隔开,这个时候我们就可以考虑使用相邻兄弟同胞选择器, 样式写法类似如:li+li:before {padding: 0 5px;color: #ccc;content: "/\00a0";},表示li的紧接的li的前面加入样式‘/’,

3.C#/.NET编程中的常见异常（持续更新）

1.Object reference not set to an instance of an object. 未将对象引用(引用)到对象的实例,说白了就是有个对象为null,但是你在用它点出来的各种东西. 2.An entity object cannot be referenced by multiple instances of IEntityChangeTracker. 一个实体对象不能由多个IEntityChangeTracker实例引用.首先参见MSDN中对于Entity Frame

Android中AlarmManager使用示例（持续更新）

现在普遍的手机都会有一个闹钟的功能,如果使用Android来实现一个闹钟可以使用AtarmManager来实现.AtarmManager提供了一种系统级的提示服务,允许你安排在将来的某个时间执行一个服务.AlarmManager对象一般不直接实例化,而是通过Context.getsystemservice(Context.ALARM_SERVICE)方法获得. 下面是我们运用之前用到的TimePickerDialog结合AlarmManager,实现一个可以设定任意时间而且可以重复的闹钟,演示效

C语言中的那些库函数（持续更新中）

1.[exit()] exit是在调用处强行退出程序,运行一次程序就结束.exit(0)表示正常退出.exit(1)表示异常退出,这个1是返回给操作系统的.无论是写在main函数中,还是在其他函数中,都是程序退出.一般都是认为0是正常退出.其他数字是异常退出.所在的头文件是stdlib.h.  返回值的意义其实同main函数中的return一样,零表示正常,非零表示异常. 2.[memset] 函数的声明为:memset(void *, int, size_t n).功能是将void *所指向的

html、css、javascript随手笔记（持续更新）

本文仅为个人常用代码整理,供自己日常查阅 html 浏览器内核 <!--[if IE]><![endif]--> <!--[if IE 6]><![endif]--> <!--[if gte IE 7]><![endif]--> <!--[if lte IE 7]><![endif]--> <!--[if !IE]><![endif]--> <!--[if !(lte IE 7)]

Web 前端开发面试中常遇的问题【持续更新】

XHTML与HTML的区别: XHTML必须合理的结束 XHTML必须关闭 XHTML标签名必须用小写字母 XHTML必须有根元素 XHTML中,需要给所有属性赋一个值 XHTML中‘<’,‘>’,&等用编码表示 XHTML中,不要在注释中写—— 图片必须有说明文字,及alt属性必须有 用id属性代替name属性 2.HTML5与HTML4的区别 HTML5简化了语法,HTML 4中文档格式定义为:<!DOCTYPE HTML PUBLIC "-//W3C//DTD H