Refactoring HTML to improve web application design_html/css_WEB-ITnose

This article summarizes several rules and practices for reconstructing HTML to improve Web application design from three perspectives: good structure, effectiveness, and layout, combined with past project development experience. Part of the reference is from "Reconstructing HTML to Improve Web Application Design".

Refactoring. What is refactoring? Why refactor.

Refactoring is a process of making small changes without changing the behavior of the program. It is a process of gradually improving the code. Removing bad code that has accumulated over time to create code that is clearer and easier to maintain, debug, and add new features cannot just happen late in the coding process, or even when you realize your code is no longer viable. When it is necessary to rewrite, it should be gradually accumulated and modified from the beginning of development. In the past, due to the randomness of daily coding, problems accumulated and gradually spread, and in the end we had to start over. If time cannot withstand the need to reinvent the wheel, you have no choice. The only option is to refactor.

No matter what you do, don’t neglect improvement because of the pursuit of perfection. If you have enough time to do a little refactoring, then do a little. You can do more in the future when you have time. Although the overall reconstruction design is eye-catching and unforgettable, without daily accumulation, how can we achieve huge achievements? Your goal should be to have new changes to your code every day. After a few months of persistence, I believe we can all have clear code with pride.

Well-formed

　The first task in converting markup to conform to modern standards is to achieve well-formation. Well-structured ensures the uniqueness of the DOM's operable document tree structure, thus becoming the basis for reliable cross-browser JavaScript code. For a chaotic page, any reliable automated processing or testing is very difficult to guarantee. Secondly, the display effect of the browser page is even more unpredictable. For scrambled pages, different browsers use different methods to supplement the correct fragments and correct errors. Therefore, when it comes to reconstructing HTML, the most important thing is undoubtedly to make the page well-structured.

To be well-formed, most websites must do at least or all of the following:

All actual tags should have a matching closing tag

Empty Elements should use the empty element tag syntax

All attributes must have a value

All attributes need to be enclosed in quotes

All & good must be escaped For &

All less than signs must be escaped as 9826f96d64f266b3f3e5a61166893d71ee2bfd64228f824cf6027e0da2815b78 is rewritten as e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3, etc., because XHTML only uses lowercase names, and all elements and attributes must be lowercase, both f8f3d586dc15d52a0cad8a47983d3d90 and 9efd419b5d4562ad7fb2ce42f3a1ba7c Not accepted

Enclose attribute value in quotes . 2bd448ff9f87be03c1e531e89b5f2bdc54bdf357c58b8a65c66d7c19c8e4d114 is rewritten as a65cce1e16b898547c105df7a3c15d8654bdf357c58b8a65c66d7c19c8e4d114 etc. Some attributes with spaces sometimes appear to have brackets but no right brackets. The browser should not parse according to your wishes. Different browsers have different parsing effects, which may cause cross-browser problems.

Complement the missing attributes. f9ebc06cbf9b4117a82826fe3c02bd0d Change to 4ddb2bb0efad4fd2ed026237166d571c etc. XHTML does not support syntax with only attribute names but no values.

Replace empty tags with empty element tags . The XML parser requires that all start tags have a matching end tag e388a4556c0f65e1904146cc1a846bee to have a corresponding 94b3e26ee717c64999d7867364b1b4a3, 0c6dc11e160d3b678d68754cc175188a be rewritten as 0b9f73f8e206867bd1f5dc5957dbcb38, etc.

Eliminate overlap. 8e99a69fbe029cd4e2b854e244eab143907fae80ddef53131f3292ee4f81644bxxxx128dba7a3a77be0113eb0bea6ea0a5d0d1c6776b927dc33c5d9114750b586338 is rewritten as 8e99a69fbe029cd4e2b854e244eab143907fae80ddef53131f3292ee4f81644bxxxxd1c6776b927dc33c5d9114750b586338128dba7a3a77be0113eb0bea6ea0a5d0 etc. Different browsers build different DOM trees for documents containing overlapping elements. Overlapping elements make JavaScript, CSS, and other programs that need to read the DOM difficult to create, troubleshoot, and maintain.

Validity

　Validity is slightly stricter than well-formedness, that is, not only the syntax of the document must be correct, but also the semantics must be correct . Ensure that elements and attributes can only appear in the appropriate places according to their own semantics.

Effectiveness is the cornerstone of future-oriented development. Effective websites are device-independent, and effective pages convey the same information to different readers, even if they are using browsers with different interfaces.

Well-formedness and validity checks are the basic grammatical constraint guarantees. The next step is to ensure that the semantics are appropriate.

Specific implementation methods:

1. Add transitional DOCTYPE statement

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

 

 

　　过渡式DTD让你不必要完全语义标记就能让文档通过验证，并且他允许包含i,b和center等这些不推荐使用的表现性元书，因此，在进一步改善文档的语义之前，你可以找出比修复更严重的结构问题。

　　2，删除所有不存在的标签

　　3，用CSS替代center，i，font等不被推荐或弃用的标签。

　　4，把行内（inline）元素，放在块（block）元素中

　　要做到有效，文档中所有元素是有效的严格性XHTML元素还不够，还必须保证它们之间的正确关系，浏览器和其他程序处理XHTML需要依赖元素间的正确位置。

Do you like this pictrue?<br /><img src = "file.gif" />I think it's really <em>neat</em><!--改写为--><p>Do you like this pictrue?<br /></p><div><img src = "file.gif" /></div><p>I think it's really <em>neat</em></p>

 

 

　　

 布局

　　1，熟悉元素语义

　　每一个元素都应各司其职：ul是无序列表，ol是有序列表，table是表格式数据，blockquote是应用，h1~h6是标题等。恰当的语义元素有助于屏幕阅读器呈现更容易理解的结构，也能保证不同平台间正确显示。对于初学者，很多本来语义良好的元书，如ul,blockquote,table等，被滥用与实现某种特定布局效果。这些滥用的目的是给网页生成特定的外观，然而这些外观难以跨浏览器，几乎除了设计者自己的电脑，通常很多地方都不通用的。

 

失败经历： 　 　为了实现导航效果，一开始没有考虑内容语义，无意中将导航主项和相关联的菜单分开，在利用css中的相对定位，设定top和left属性，将相关菜单移动到相关的主项下。这样会导致一个严重的问题。一旦将不同页面放置在不同的分辨率的屏幕上，菜单就会错位。就是说，针对不同分辨率的屏幕，还要设计不同的top和left属性。 <div class = "nav"> <div class="nav01">菜单一</div><div class="nav02">菜单二</div><div class="nav03">菜单三</div></div><div class = "menu"> <div class="menu01">子菜单一</div><div class="menu02">子菜单二</div><div class="menu03">子菜单三</div></div> 　　优化设计过的导航HTML结构，组合主菜单和子菜单： <nav> <ul class="clear"> <li class="first"><a href="#">菜单一</a></li> <li> <span class="Darrow"></span> <a href="#">菜单二</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd><dd><a href="#">子菜单二</a></dd><dd><a href="#">子菜单三子菜单三</a></dd> </dl> </li> <li> <span class="Darrow"></span> <a href="#">菜单三</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd><dd><a href="#">子菜单二</a></dd><dd><a href="#">子菜单三子菜单三</a></dd> </dl> </li> </ul></nav>

The purpose of writing HTML is not for a certain structure or page appearance, but for how to better present the content. Therefore, before writing HTML, be sure to think about which semantic elements should be used for this content. .

Proper HTML is great for handling cross-browser issues. After you get the web design, before you start building the web application, you must stop thinking about how the page looks and start thinking about what the page means.

2. Replace table layout

CSS-based pages are smaller and simpler than table-based pages.

a) Easier to write and edit, faster to download,

b) Save bandwidth by switching to CSS. At the same time, the external css files can be cached and reused, without having to download them again every time the page is downloaded.

Instead of abusing the table element used to present tabular data and using table layout, you can consider the frequently used column layout:

1) Two columns, left There is a fixed-width sidebar on the side, and a flexible-width content column on the right

2) Three columns, a fixed-width sidebar on the left and right, and content in the middle.

根据以往项目开发经验： 　　栏目的高度是由它们所包含的内容量决定。对于内容比重大的网站来说，因为不能保证单个内容栏跟其他栏等高，栏会固定高度，保证各栏高度相同；而对于内容简单短小页面，不固定高度问题不大。另外，主体内容的div应该在侧栏，页头或页脚之前，这样屏幕阅读器可以从页面最重要的内容开始线性读取页面。搜索引擎机器人也可以对排在页面前面的内容予以更高的优先级。 　　就两栏布局而言，有三种可能的宽度： 　　　　（1）两栏宽度固定。最普遍，固定宽度对于一部分用户来所可能过大，过大的宽度用户必须滚动水平内容来查看内容，降低文本的可读性 　　　　（2）左栏固定，内容栏是百分比宽度 　　　　（3）两栏都是百分比 　　从更好的用户体验考虑，主体内容应该能调整大小，以便适应不同窗口宽度。

                                                                Determined by the amount of content they contain. For websites with heavy content, since there is no guarantee that a single content column is the same height as other columns, the height of the column will be fixed to ensure that the height of each column is the same; for pages with simple and short content, not fixing the height is not a big problem. In addition, the div of the main content should be before the sidebar, header or footer, so that screen readers can read the page linearly starting from the most important content of the page. Search engine bots can also give higher priority to content that ranks higher on the page. As far as the two-column layout is concerned, there are three possible widths: (1) The width of the two columns is fixed. The most common, fixed width may be too large for some users. If the width is too large, users must scroll horizontally to view the content, reducing the readability of the text (2) The left column is fixed and the content column is a percentage Width (3) Both columns are percentages Considering a better user experience, the main content should be able to be resized to adapt to different window widths.

                                                                

 

　　3，内容与样式分离

　　　　

　　当然我们的页面也需要漂亮的外观，以帮助我们在竞争中脱颖而出。这可以通过在独立的CSS样式中放置有关表现的信息来实现。CSS用来描述网页的外观，而浏览器可以自由选择不同的样式表或是修改过的样式表。实际上，你可以为不同的浏览器随意发送不同的样式表，也可以为它们独特的能力量身定制。这是响应式设计的基本实现方法。

　　“响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。”

　　出于方便或者是自身的编码习惯，在修改某种被更改的需求的样式代码时候，我们很容易在html代码中直接镶嵌样式代码。这样的做法除了更快的完成你暂时的任务之外没有任何好处。

 

　　4，使用CSS定位替代框架

 

　　网站使用框架的理由实际上就两种：

　　   （1）为所有页面引入相同的静态内容，而不用单独编辑每个页面。例如导航，网页头部尾部。也就是说，单独的非框架页面可能比相应的框架页面更耗带宽，因为框架内容每次都要给客户端重新发送内容。

　　　（2）显示多栏外观。例如Java API，包含包和类的列表，主体内容

　　然而，过多使用框架将降低可用性：

　　　（1）难以标记数千或返回指定页面

　　　（2）难以保存和打印页面

　　   （3）过多的滚动条占据屏幕的宝贵空间

　　在每一个页面上都有导航和其他相同或几乎相同的内容，对网站来说是非常普遍的，使用CSS取代框架，关键在于设立对应每个框架的div，每个div内容是对应框架里的文档内容。然而，这样做的问题在于，它违反了DRY原则（Don't Repeat Youself,别重复你自己），对于相同的内同，虽然有时候只是很小的变化，但还是需要不断在这一页那一页重复出现。重复内容通常也是代码的坏味道。框架在静态页面上避免恶劣不必要的重复，我提倡清晰，可维护的代码，在不损害用户界面的前提下，我更远一选择难看的代码而不是难看的用户界面。日常中原始的HTML是重复的，但不是我们必须编辑的，很多时候我们可以通过后台自动生成重复内容。

　　　　

Apache服务器端包含： 　 　通常，拥有服务器端包含的以.shtml结尾的文件会在发送到客户端之前，告诉服务器需要解析自身以及包含的内容 　　　几乎所有的Web服务器都支持某些形式的服务器端包含功能，使用服务器端包含各种非静态文件，性能有所降低，但影响不大。 <!DOCTYPE html><html> <meta charset = "utf-8"><body> <!--#include virtual = "/header.html" --> <!---这里嵌套主内容--> <!--#include virtual = "/footer.html"--> <!--#include virtual = "/siderbar.html"--></body></html>   尽管Apache默认的编译会包含mod_include，但可能不会在所有目录上启用，你需要子啊Apache主配置文件或是.htacess文件中添加一下三行配置，以指向每一个使用服务器包含的目录： AddType text/html .shtmlAddOutputFilter INCLUDES .shtmlOptions +Includes   PHP包含： PHP的include函数有类似的功能 <!DOCTYPE html><html> <meta charset = "utf-8"><body> <!--主内容--> <?php include("footer.html"); include("sidebar.html"); ?></body></html>

 

　　5，正确标记列表

　　正确标记列表能够提升可访问性，通常我们子啊列表中实现跳转和导航。

　　大部分浏览器给列表以及列表中的项目都制定特定的外观，通常表现为缩进和项目符号，可能不是你所需要的外观，因此很容易在搭建html的时候忽略它们的存在，放弃使用正确列表标记，而使用语义较差的标签，实现同样的效果。根据需求，你能够通过CSS可以容易地修复这些特定的外观。下面整理了开发中常用的CSS样式修改规则：

/*删除项目符号*/ ul{ list-style-type:none;       }/*载入外部图片自定义项目符号*/ ul li { list-style-image : url(images/str.gif);}/*去掉缩进的规则*/ ul{ margin-left : 0px; padding-left :0px;}/*把项目排成一行*/ ul,li{ display: inline; margin:0px; padding: 0px;}/*在列表项之间插入逗号*/ ul li:after{ content : ",";}/*制定项目的宽度，超出时显示省略号*/ div.titleholder { font-size: 8pt; width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} 

　　然而，lu应用与列表上，blockquote应用在应用上。blockquote与ul相比，整理文本缩进更强大，更准确。

 

　　6，为图片添加width和height属性

　　　　width和height属性能让浏览器更快地样式化页面并展现给用户。但注意，这样做，对页面的显示速度有提升，但对下载速度并没有帮助。

　　　　出于一般项目开发触觉，改变图片的尺寸意味着要修改HTML，否则图片会奇怪地变大变小。如果需要经常改变图片，比如设计页面是，最好是在最后的阶段插入确定的宽度和高度。