HTML has gone through nearly 20 years of development. From HTML4 to XHTML, and then to the recently very popular HTML5, it has almost witnessed the development of the entire Internet. However, even now, there are many basic concepts and principles that developers still need to pay close attention to. Below, I will introduce to you the development principles that should be followed.
1. Make good use of DIVs for layout
When developing a Web page, the first thing to consider is to distinguish the focus of the page. By including these contents in DIV tags, the code on the page will appear neat and well-indented.
<div id="header"></div>
<div id="body-container">
<div id="content"> <!-- Content -- > </div>
<div id="right-side-bar"> <!-- Right Side Bar Content Area -- ></div>
</div>
<div id="footer"></div>2. Separate HTML tags and CSS style sheets
A good page should separate HTML tags and CSS style sheets. This is a principle that every web developer should know when they first come into contact with web development. However, until today, there are still many developers who do not strictly follow this principle.
Don’t embed style sheet code in HTML tags. Developers should develop a habit of creating separate files to store CSS style sheets. This will also make it easier for other developers to complete their work quickly when modifying your code.
<p style="color: #CCC; font-size:16px; font-family: arial"> An example to illustrate inline style in html</p>
3. Optimize CSS code
Nowadays, it is very common to add multiple CSS files to a website. However, when a website contains too many CSS files, it will slow down the website's response speed. The solution is: streamline the code and optimize multiple CSS files and merge them into one file. This method can significantly improve the loading speed of the website. In addition, there are many tools that can be used to optimize CSS files, such as CSS Optimizer, Clean CSS, etc.
For CSS, we have also recommended 9 excellent CSS frameworks that you should know. You can learn about the types and related usage of CSS frameworks.
4. Optimize Javascript files and place them at the bottom of the page
Like CSS, it is also common to add multiple Javascript files to the page. But this will also reduce the response speed of the website. For this reason, developers should streamline and optimize these Javascript files.
But one thing is different from CSS, browsers usually do not support parallel loading. This means that when the browser loads a Javascript file, it will no longer load other content at the same time. This causes the page loading speed to seem to slow down.
A good solution is to put the loading order of Javascript files last. To achieve this, developers can place Javascript code at the bottom of the HTML document, and the best location is close to the
5. Make good use of title elements
<h1>This is the topmost heading</h1> <h2>This is a sub-heading underneath the topmost heading.</h2> <h3>This is a sub-heading underneath the h2 heading.</h3>
6. Use appropriate HTML tags in the right place
HTML tags are the key to constructing a standardized content structure. For example, the tag is used to emphasize important content. The tag is suitable for highlighting article paragraphs. If you want to add blank lines between paragraphs, don't use the 7、避免滥用 并不是所有块元素都应该用 8、使用列表创建导航 使用 9、别忘了封闭标签 现在，每当我回忆起在大学里学到的关于Web开发的第一堂课时，教授提到的HTML结构的重要性总是浮现在我的脑海。根据W3C标准，标签应该被封闭。那是因为，在一些浏览器下，如果没有按照标准来将标签封闭，会出现显示不正常的问题。而这一情况在IE6、7和8里尤为明显。 10、标签小写语法 标签采用小写语法是一项行业标准。虽然大写语法并不影响页面的显示效果，但是，代码的可读性很差。下面这段代码可读性就非常差： 11、为图片标签添加alt属性 在 12、在表格里使用 为了提高代码质量，并让用户容易理解表格内容，我们应该用 13、将浏览器兼容代码标明信息并相互分开 对一名Web开发者来说，跨浏览器兼容是一个被重点关注的问题。通常，开发者会针对不同的浏览器来编码，也即是CSS hack。但是，如果开发者在编码时，能注明代码为哪一个版本的浏览器所写，会为以后的维护工作带来极大方便。下面就是一个很好的示例： 14、避免过度注释 作为一名开发者，在代码中添加注释是一个好习惯，能方便理解并易于维护。这在其它编程语言如PHP、JAVA 和 C#里很普遍。但是，HTML/XHTML是文本标记语言，非常容易理解。因此，无需为每行代码都添加注释。 15、测试代码 It is recommended that developers use the W3C text markup verification service to test code. It is an efficient testing tool that can help you find errors in your pages. Moreover, it can also help you locate the corresponding code starting from the page error. This is often difficult to do after coding is complete. However, developers need to note that code that passes verification is not code with excellent performance.
tag. <em>emphasized text</em>
<strong>strongly emphasized text</strong>
列表标签，再配以相应的CSS样式，可以创建美观的导航菜单。
<DIV>
<IMG SRC="images/demo_image.jpg" alt="demo image"/>
<A HREF="#" TITLE="click here">Click Here</A>
<P>some sample text</P>
</DIV>
标签里，alt属性通常非常有用。因为搜索引擎通常无法直接抓取图片文件。但是，如果开发者在alt属性里添加了图片的描述内容，将会方便搜索引擎的抓取。
<!-- has an alt attribute, which will validate, but alt value is meaningless -- >
<img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" />
<!-- The correct way -- >
<img id="logo" src="images/bgr_logo.png" alt="Anson Cheung - Web Development" />
<fieldset>
<legend>Personal Particular</legend>
<label for="name">Name</label><input type="text" id="name" name="name" />
<label for="email">E-mail</label><input type="text" id="email" name="email" />
<label for="subject">Subject</label><input type="text" id="subject" name="subject" />
<label for="message" >Message Body</label>
<textarea rows="10" cols="20" id="message" name="message" ></textarea>
</fieldset><!--[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie-6.css" media="all">
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo');
</script>
<![endif]-->
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
