如何写出高效率的HTML_html/css_WEB-ITnose
个人翻译,欢迎转载!
英文原文:https://samdutton.wordpress.com/2015/04/02/high-performance-html/
第一次翻译国外的博文,有什么意见和建议欢迎提出!
我们该如何提升网页的性能?
看到这个问题时,大多数开发者会想到图片优化、JavaScript优化、服务器配置升级、文件压缩甚至是CSS压缩这些方式。然而,网页的核心语言HTML却被忽视了。
如今,HTML的负担越来越重,在全球排名前100的网站中,平均每个页面的HTML代码大小有40k左右,其中Amazon和Yahoo平均每页的HTML代码有几千行,Youtube的首页甚至有3500个HTML元素。虽然降低每页HTML的复杂性、减少元素数量并不能使页面的加载时间提升很多,但是良好的HTML编码习惯是提升网页加载速度的一个重要基础。之所以写这篇文章,就是为了告诉你如何写出干净整洁的HTML代码,能够让你的网页在许多设备上都能快速正常的加载运行。在这个过程中,你能够学会如何搭建易于维护和Debug的网站以及app。
写代码的方式可以有很多种,特别是HTML。本文只是根据我们的经验来做出相对最好的建议,并不代表每条建议在任何情况下都能达到效果,仅供参考。
内容简介
- 各司其职:样式由CSS来控制就够了,不要用HTML元素来强行获取想要的样式;
- 一丝不苟:开发过程中一定要加入代码校验工具,以确保代码没有任何语法以及逻辑上的错误;
- 干净整洁:使用自动排版工具来保持代码结构和格式的一致性;
- 熟练语言:应了解所有的元素用法,并在HTML多使用语义化的元素;
- 一视同仁:设计过程中一定要考虑到所有的情况,备用方案很重要,甚至要专门为特殊人群使用ARIA (Accessible Rich Internet Application),以保证你的网站可以通过屏幕阅读器或者纯文本浏览器来展示;
- 全面测试:通过各种工具来测试你的网站在不同设备和不同尺寸屏幕上的表现。
Web三基友
HTML的含义应该不多解释了,请自行百度百科。
首先要说的是,HTML和CSS两兄弟虽然彼此充满基情,但是也不能把关系搞得太复杂,样式由CSS来控制就够了,不要用HTML元素来强行获取想要的样式,比如不要仅仅为了使文字变大而使用
、、这些标题标签,也不要仅仅为了缩进而使用标签。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默认样式表,HTML元素默认的显示方式都是由这些默认样式表来决定的。比如,Chrome中默认的样式是32px bold,字体是Times.
基友三原则: HTML用于建立结构,CSS用于渲染样式,JavaScript用于控制行为; 首先完成HTML的设计,然后根据样式需求来设计CSS,最后在确实需要的情况下才设计JavaScript; 将CSS和JavaScript文件进行归档,与HTML文件分开(这样不仅有助于页面缓存,而且可以使后期Debug更容易),这之后再把CSS和JavaScript链接到HTML中,可以根据需要来对CSS和JavaScript代码进行压缩加密。
结构的搭建
HTML在结构上搭建上需要注意这些:
采用HTML5标准时开头应该加上,像这样:
Recipes: pesto Pesto
Pesto is good!
应在head标签中引入CSS文件,这样浏览器就可以在输出HTML之前获取CSS信息:
My pesto recipe
在
标签的末尾引入JavaScript文件,这样可以在页面显示之后再编译JavaScript文件,以加快页面读取速度,同时有助于JavaScript对页面中的元素进行操作,像这样: ...
对元素的操作应添加在JavaScript代码中,而不要在HTML中添加,下面这个例子就是错误的,这样后期难以维护。
- 比如这样写就不太好:
index.html
...
- 这样写就好多了:
index.html
... ... ...
***js/local.js***
javascriptinit(); var fooButton = document.querySelector('#foo');fooButton.onclick = handleFoo();
代码校验
虽然现在浏览器的容错力越来越高,但这不能成为代码粗制滥造的借口。不管什么时候,正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少,而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时,正确有效的HTML就更显得尤为重要,也许一个正常运行的模块会在其他环境中出现可怕的异常。
如何才能提高HTML的正确性呢?可以有这些方式:
在项目中加入校验过程:可以在代码编辑器中使用HTMLHint、SublimeLinter这类代码校验插件,也可以在build的时候使用HTMLHint with Grunt这类校验工具,还可以通过W3C HTML validator等网站来在线检测代码; 尽量采用HTML5标准; 确保正确的HTML层级:嵌套元素时确保元素首尾完整,在一个有大量内容的元素的结束标签后应添加注释,这样有助于后期debug,特别是在使用模板的时候,如下所示:
...
在所有不能自动结束的元素末尾添加结束标签;
- 比如这个例子,这样写也可以可以正常运行:
Pesto is good to eat...
...and pesto is easy to make.
- 不过还是下面这样比较不容易出错:
Pesto is good to eat...
...and pesto is easy to make.
结束标签不是必须的,所以有些人认为可以不写,这可以接受,但是和标签一定要加:
- Basil
- Pine nuts
- Garlic
另一方面,要去掉冗余代码:
像和这一类元素可以不加结束标签; 布尔型的属性可以不赋值,只要该属性出现,值就为true;
- 下面这样是可以运行的(没有加autoplay和controls):
- 这样就不能运行,因为这两个属性值必须是true:
- 这样改一下就可以运行了:
- 这样写会更易读:
CSS和 JavaScript链接不需要type属性,他们就是他们; 外部链接可以省略协议部分(如http,ftp),这样可以避免内容太长而引起问题。像这样写是可以的:
Tag soup
良好的代码排版
保持一致的代码排版可以使HTML代码更易于理解、优化和debug,要做到良好的代码排版应注意以下这几点:
在项目中保持统一的HTML代码风格; 使用代码编辑器来帮助你自动排版,比如在Sublime Text中可以使用自带的Reindent,也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier; 在HTML中用缩进来分层更易于阅读,如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候,那就表示你需要重构一下你的HTML了; 缩进可以通过空格或者Tab来实现,但一定不要两者同时使用; 用更直接易读的方式写HTML代码,比如这句话,就可以很明显的看出这是个标题:
Contact
这样写的话就更像是一个链接:
Contact
元素要按常规放置,比如footer元素最好是放在HTML页面的底部,虽然理论上把它放在任何地方都可以正常运行; 统一所有引号的使用规则,不要这里用双引号,那里又单引号; 使用小写字母来写标签和属性,大写字母很不易读,像这样:
Home
混合式的写法简直就是反人类:
Pesto
语义化设计
语义化的意思是从名称一眼就能看出其内容和作用是什么,HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素,比如,
标题使用 (, …),列表使用或者
;
内容中的标题应该从开始;
在适当的地方使用HTML5的新元素,比如,
正文中的文本内容要用标签,内容的结构化可以使用HTML5的新元素(或者
),不要颠倒; 修改文字样式时,和要比和更好些,因为前者语义更加明显;
不要把文字和元素混合在一起,这样容易导致布局出错,比如这样:
Name:
这样写会更好些:
布局
首先再次强调一遍:
样式由CSS来控制就够了,不要用HTML元素来强行获取想要的样式。
布局需要注意的问题有这些:
元素用来放文字,而不是用来布局。在浏览器自身的样式表中默认
有margin和其他样式;
想实现换行可以使用元素或者CSS的display属性,尽量避免使用
来换行。文字内容中的换行可以用
,但通常也很少这样用,有时在诗文中会把
作为标点来使用;
避免使用
,因为这个元素对语义和结构都没有太大帮助,反而
极差的灵活性对布局和显示都有很大的影响; 不要滥用,W3C对的描述是这样的:当没有其他元素可用时才能使用。如果想让和这类元素能够在结尾换行,可以在样式中添加display: block,这样要比把它们放进或者使用
来换行要好得多; 必须知道哪些是块级元素,这样就可以避免把块级元素放到里面,比如列表就不需要放到div里面; 是用来放表格数据的,不是用来布局的; Flex box现在越来越流行,学一学没有坏处; 盒模型一定要掌握,必须知道什么时候该用padding,什么时候该用margin; 使用margin的规则:通常情况下,margin都是添加在元素的bottom和right,有时也可以是top或者left。无论如何,尽量避免同时在bottom和top,或者right和left添加margin。可以用last-of-type选择器来去掉最后一个子元素的margin。 CSS方面
这篇文章虽然是讲HTML的,但也有些CSS的注意事项想说一说:
不要将多句CSS写在同一行; 不要重复使用同一个id; 有时候给父元素添加class要比给子元素添加更简洁易维护(class的命名方式可以采用BEM规则),像这样:
- Basil
- Pine nuts
- Garlic
- Basil
- Pine nuts
- Garlic
易用性
要多为用户考虑,不同的设备条件、使用环境以及输入法等都会给你的HTML带来不同的体验:
尽可能的使用语义化元素; 要准备好备用内容:比如给
链接要加title属性,title必须要有意义,不要只是链接的复述; 在元素中要加入type和placeholder; 设计时要尽量加入ARIA (Accessible Rich Internet Application)。 其他建议
符号的转义,比如HTML & JavaScript; 有些符号不需要转义,比如破折号(如:4-5 weeks)还有货币符号(如:¢,?); 在代码中作用不明显的地方适当的添加注释(注释在重构时的作用性举足轻重,优秀的HTML代码,无论多么复杂都可以很好的阅读和理解); 有时全大写的标题会起到吸引注意力的作用,但没必要在HTML中真的输入大写的文字,可以在CSS中通过修改text-transform和font-variant来完成。这样做还有个好处,就是当用户复制这段文字时,他们可能不想要全大写的,像下面的
,当用户复制文字内容时,得到的是大小写混合的文字:
HTML W3C Web Accessibility Initiative ARIA guidance
CSS
h4 { font-variant: small-caps;}
测试
重中之重,就是一定要做测试!
在工作流程、调试工具和部署过程中都可以加入HTML测试。一定要测试你的页面在不同条件的设备,不同大小的屏幕以及不同网速的环境下的读取情况。还要使用纯文字浏览器(如: Lynx)或者屏幕阅读器(如:ChromeVox)来测试页面在特殊环境下的交互性。可以使用Chrome Dev Tools device mode这种仿真器来监视页面的变化。工作流程中可以加入Page Speed, Web Page Test等工具来做自动化测试。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
这些标题标签,也不要仅仅为了缩进而使用标签。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默认样式表,HTML元素默认的显示方式都是由这些默认样式表来决定的。比如,Chrome中默认的样式是32px bold,字体是Times.
基友三原则: HTML用于建立结构,CSS用于渲染样式,JavaScript用于控制行为; 首先完成HTML的设计,然后根据样式需求来设计CSS,最后在确实需要的情况下才设计JavaScript; 将CSS和JavaScript文件进行归档,与HTML文件分开(这样不仅有助于页面缓存,而且可以使后期Debug更容易),这之后再把CSS和JavaScript链接到HTML中,可以根据需要来对CSS和JavaScript代码进行压缩加密。
结构的搭建
HTML在结构上搭建上需要注意这些:
采用HTML5标准时开头应该加上,像这样:
Recipes: pesto Pesto
Pesto is good!
应在head标签中引入CSS文件,这样浏览器就可以在输出HTML之前获取CSS信息:
My pesto recipe
在
标签的末尾引入JavaScript文件,这样可以在页面显示之后再编译JavaScript文件,以加快页面读取速度,同时有助于JavaScript对页面中的元素进行操作,像这样: ...
对元素的操作应添加在JavaScript代码中,而不要在HTML中添加,下面这个例子就是错误的,这样后期难以维护。
- 比如这样写就不太好:
index.html
...
- 这样写就好多了:
index.html
... ... ...
***js/local.js***
javascriptinit(); var fooButton = document.querySelector('#foo');fooButton.onclick = handleFoo();
代码校验
虽然现在浏览器的容错力越来越高,但这不能成为代码粗制滥造的借口。不管什么时候,正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少,而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时,正确有效的HTML就更显得尤为重要,也许一个正常运行的模块会在其他环境中出现可怕的异常。
如何才能提高HTML的正确性呢?可以有这些方式:
在项目中加入校验过程:可以在代码编辑器中使用HTMLHint、SublimeLinter这类代码校验插件,也可以在build的时候使用HTMLHint with Grunt这类校验工具,还可以通过W3C HTML validator等网站来在线检测代码; 尽量采用HTML5标准; 确保正确的HTML层级:嵌套元素时确保元素首尾完整,在一个有大量内容的元素的结束标签后应添加注释,这样有助于后期debug,特别是在使用模板的时候,如下所示:
...
在所有不能自动结束的元素末尾添加结束标签;
- 比如这个例子,这样写也可以可以正常运行:
Pesto is good to eat...
...and pesto is easy to make.
- 不过还是下面这样比较不容易出错:
Pesto is good to eat...
...and pesto is easy to make.
结束标签不是必须的,所以有些人认为可以不写,这可以接受,但是和标签一定要加:
- Basil
- Pine nuts
- Garlic
另一方面,要去掉冗余代码:
像和这一类元素可以不加结束标签; 布尔型的属性可以不赋值,只要该属性出现,值就为true;
- 下面这样是可以运行的(没有加autoplay和controls):
- 这样就不能运行,因为这两个属性值必须是true:
- 这样改一下就可以运行了:
- 这样写会更易读:
CSS和 JavaScript链接不需要type属性,他们就是他们; 外部链接可以省略协议部分(如http,ftp),这样可以避免内容太长而引起问题。像这样写是可以的:
Tag soup
良好的代码排版
保持一致的代码排版可以使HTML代码更易于理解、优化和debug,要做到良好的代码排版应注意以下这几点:
在项目中保持统一的HTML代码风格; 使用代码编辑器来帮助你自动排版,比如在Sublime Text中可以使用自带的Reindent,也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier; 在HTML中用缩进来分层更易于阅读,如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候,那就表示你需要重构一下你的HTML了; 缩进可以通过空格或者Tab来实现,但一定不要两者同时使用; 用更直接易读的方式写HTML代码,比如这句话,就可以很明显的看出这是个标题:
Contact
这样写的话就更像是一个链接:
Contact
元素要按常规放置,比如footer元素最好是放在HTML页面的底部,虽然理论上把它放在任何地方都可以正常运行; 统一所有引号的使用规则,不要这里用双引号,那里又单引号; 使用小写字母来写标签和属性,大写字母很不易读,像这样:
Home
混合式的写法简直就是反人类:
Pesto
语义化设计
语义化的意思是从名称一眼就能看出其内容和作用是什么,HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素,比如,
标题使用 (, …),列表使用或者
;
内容中的标题应该从开始;
在适当的地方使用HTML5的新元素,比如,
正文中的文本内容要用标签,内容的结构化可以使用HTML5的新元素(或者
),不要颠倒; 修改文字样式时,和要比和更好些,因为前者语义更加明显;
不要把文字和元素混合在一起,这样容易导致布局出错,比如这样:
Name:
这样写会更好些:
布局
首先再次强调一遍:
样式由CSS来控制就够了,不要用HTML元素来强行获取想要的样式。
布局需要注意的问题有这些:
元素用来放文字,而不是用来布局。在浏览器自身的样式表中默认
有margin和其他样式;
想实现换行可以使用元素或者CSS的display属性,尽量避免使用
来换行。文字内容中的换行可以用
,但通常也很少这样用,有时在诗文中会把
作为标点来使用;
避免使用
,因为这个元素对语义和结构都没有太大帮助,反而
极差的灵活性对布局和显示都有很大的影响; 不要滥用,W3C对的描述是这样的:当没有其他元素可用时才能使用。如果想让和这类元素能够在结尾换行,可以在样式中添加display: block,这样要比把它们放进或者使用
来换行要好得多; 必须知道哪些是块级元素,这样就可以避免把块级元素放到里面,比如列表就不需要放到div里面; 是用来放表格数据的,不是用来布局的; Flex box现在越来越流行,学一学没有坏处; 盒模型一定要掌握,必须知道什么时候该用padding,什么时候该用margin; 使用margin的规则:通常情况下,margin都是添加在元素的bottom和right,有时也可以是top或者left。无论如何,尽量避免同时在bottom和top,或者right和left添加margin。可以用last-of-type选择器来去掉最后一个子元素的margin。 CSS方面
这篇文章虽然是讲HTML的,但也有些CSS的注意事项想说一说:
不要将多句CSS写在同一行; 不要重复使用同一个id; 有时候给父元素添加class要比给子元素添加更简洁易维护(class的命名方式可以采用BEM规则),像这样:
- Basil
- Pine nuts
- Garlic
- Basil
- Pine nuts
- Garlic
易用性
要多为用户考虑,不同的设备条件、使用环境以及输入法等都会给你的HTML带来不同的体验:
尽可能的使用语义化元素; 要准备好备用内容:比如给
链接要加title属性,title必须要有意义,不要只是链接的复述; 在元素中要加入type和placeholder; 设计时要尽量加入ARIA (Accessible Rich Internet Application)。 其他建议
符号的转义,比如HTML & JavaScript; 有些符号不需要转义,比如破折号(如:4-5 weeks)还有货币符号(如:¢,?); 在代码中作用不明显的地方适当的添加注释(注释在重构时的作用性举足轻重,优秀的HTML代码,无论多么复杂都可以很好的阅读和理解); 有时全大写的标题会起到吸引注意力的作用,但没必要在HTML中真的输入大写的文字,可以在CSS中通过修改text-transform和font-variant来完成。这样做还有个好处,就是当用户复制这段文字时,他们可能不想要全大写的,像下面的
,当用户复制文字内容时,得到的是大小写混合的文字:
HTML W3C Web Accessibility Initiative ARIA guidance
CSS
h4 { font-variant: small-caps;}
测试
重中之重,就是一定要做测试!
在工作流程、调试工具和部署过程中都可以加入HTML测试。一定要测试你的页面在不同条件的设备,不同大小的屏幕以及不同网速的环境下的读取情况。还要使用纯文字浏览器(如: Lynx)或者屏幕阅读器(如:ChromeVox)来测试页面在特殊环境下的交互性。可以使用Chrome Dev Tools device mode这种仿真器来监视页面的变化。工作流程中可以加入Page Speed, Web Page Test等工具来做自动化测试。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默认样式表,HTML元素默认的显示方式都是由这些默认样式表来决定的。比如,Chrome中
默认的样式是32px bold,字体是Times.
基友三原则: HTML用于建立结构,CSS用于渲染样式,JavaScript用于控制行为; 首先完成HTML的设计,然后根据样式需求来设计CSS,最后在确实需要的情况下才设计JavaScript; 将CSS和JavaScript文件进行归档,与HTML文件分开(这样不仅有助于页面缓存,而且可以使后期Debug更容易),这之后再把CSS和JavaScript链接到HTML中,可以根据需要来对CSS和JavaScript代码进行压缩加密。
结构的搭建
HTML在结构上搭建上需要注意这些:
采用HTML5标准时开头应该加上,像这样:
Recipes: pesto Pesto
Pesto is good!
应在head标签中引入CSS文件,这样浏览器就可以在输出HTML之前获取CSS信息:
My pesto recipe
在
标签的末尾引入JavaScript文件,这样可以在页面显示之后再编译JavaScript文件,以加快页面读取速度,同时有助于JavaScript对页面中的元素进行操作,像这样:...
对元素的操作应添加在JavaScript代码中,而不要在HTML中添加,下面这个例子就是错误的,这样后期难以维护。
- 比如这样写就不太好:
index.html
...
- 这样写就好多了:
index.html
... ... ...
***js/local.js***
javascriptinit(); var fooButton = document.querySelector('#foo');fooButton.onclick = handleFoo();
代码校验
虽然现在浏览器的容错力越来越高,但这不能成为代码粗制滥造的借口。不管什么时候,正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少,而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时,正确有效的HTML就更显得尤为重要,也许一个正常运行的模块会在其他环境中出现可怕的异常。
如何才能提高HTML的正确性呢?可以有这些方式:
确保正确的HTML层级:嵌套元素时确保元素首尾完整,在一个有大量内容的元素的结束标签后应添加注释,这样有助于后期debug,特别是在使用模板的时候,如下所示:
...
在所有不能自动结束的元素末尾添加结束标签;
- 比如这个例子,这样写也可以可以正常运行:
Pesto is good to eat...
...and pesto is easy to make.
- 不过还是下面这样比较不容易出错:
Pesto is good to eat...
...and pesto is easy to make.
- Basil
- Pine nuts
- Garlic
另一方面,要去掉冗余代码:
布尔型的属性可以不赋值,只要该属性出现,值就为true;
- 下面这样是可以运行的(没有加autoplay和controls):
- 这样就不能运行,因为这两个属性值必须是true:
- 这样改一下就可以运行了:
- 这样写会更易读:
外部链接可以省略协议部分(如http,ftp),这样可以避免内容太长而引起问题。像这样写是可以的:
Tag soup
良好的代码排版
保持一致的代码排版可以使HTML代码更易于理解、优化和debug,要做到良好的代码排版应注意以下这几点:
用更直接易读的方式写HTML代码,比如这句话,就可以很明显的看出这是个标题:
Contact
这样写的话就更像是一个链接:
Contact
使用小写字母来写标签和属性,大写字母很不易读,像这样:
Home
混合式的写法简直就是反人类:
Pesto
语义化设计
语义化的意思是从名称一眼就能看出其内容和作用是什么,HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素,比如
(, …),列表使用或者
;
…),列表使用或者
;
开始;
标签,内容的结构化可以使用HTML5的新元素(或者
不要把文字和元素混合在一起,这样容易导致布局出错,比如这样:
Name:
这样写会更好些:
布局
首先再次强调一遍:
样式由CSS来控制就够了,不要用HTML元素来强行获取想要的样式。
布局需要注意的问题有这些:
元素用来放文字,而不是用来布局。在浏览器自身的样式表中默认
有margin和其他样式;
来换行。文字内容中的换行可以用
,但通常也很少这样用,有时在诗文中会把
作为标点来使用;
,因为这个元素对语义和结构都没有太大帮助,反而
极差的灵活性对布局和显示都有很大的影响;
来换行要好得多;
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论