High-quality HTML, high-quality HTML

High-quality HTML, high-quality HTML

This series comes from writing high-quality code-web Front-end development practices

In HTML, CSS, and JavaScript, HTML is the structure, CSS is the modifier, and JavaScript is the control. The structure is very important both in the front-end and back-end. When using HTML, you must consider semantics.

1. How do I determine whether your tags are semantic? The browser will give the label a default style, so some simple styles can be reflected even without CSS modification. Therefore, a simple way to determine whether a Web page tag is semantic is to remove CSS and check whether the website structure is well organized and readable. You can manually comment out the CSS code, or use a web debugging tool, such as the firefox Web Developer plug-in, to disable CSS. 2. How to select the correct tag? The following are some common examples: 2.1 title and content
To implement the above style, use solution 1:

<Div class = "container"> 
        <style type="text/css">.container{width: 400px;margin: 0 auto;background-color: #ff0;}h2{position: relative;border-bottom: 1px dashed #333;}h2 a{position: absolute;right: 0;top: 0;}p{text-indent: 2em;line-height: 150%;margin: 0 0 1em 0;}strong{color:red;font-weight: normal;}</style>


This scheme places the anchor in h2, but it is obvious that the anchor "more" does not belong to the title, so this is not semantic. Solution 2 is as follows:
<Div class = "container"> <div class = "title"> CSS code will not be pasted, the anchor is proposed from the title, and a div block is added to both, indicating that they should belong to a whole in form. The structure of solution 2 seems much clearer. 2.2 form fields are usually wrapped with fieldset labels and used with legend labels to describe the purpose of the form. Fieldset has a border by default. You can change the style as needed, or hide the legend label to ensure both semantics and display. Each input tag corresponds to a label and is associated with a for tag. The following is an example:
<Form action = "" method = "" class = "fieldset"> <fieldset> <legend> logon form </legend> <p> <label for = "name"> account: </label> <input type = "text" id = "name"/> </p> <label for = "pw"> password: </label> <input type = "text" id = "pw"/> </p> <input type = "submit" value = "Logon" class = "subBtn"> </fieldset> </form>
2.3 Table

Tables are often used on data display pages. Common table labels include caption, thead, tbody, tfoot, tr, td, and th. The table title should be caption, the header should be surrounded by thead, the body should be surrounded by tbody, and the tail should be surrounded by tfoot. The header and the common cells must be separated. the header uses th and the cell uses td.
<Table> <caption> table title </caption> <thead> <tr> <th> Implementation Method </th> <th> code volume </th> <th> Search engine-friendly </th> <th> compatibility with special terminals </th> </tr> </thead> <tbody> <tr> <th> table layout </th> <td> more </td> <td> difference </td> <td> General </td> </tr> <th> misuse of tags </th> <td> more </td> <td> difference </td> <td> average </td> </tr> </tbody> </table>

2.4 semantic tags should pay attention to the following points in order to ensure the readability of the webpage after style removal and comply with Web standards: 1. use div and span as few as possible, and replace them with more semantic tags; 2. the semantics is not obvious. p can be used as well as div. Because p has the upper and lower spacing by default, it is more readable after style removal, and is advantageous for compatibility with special terminals; 3. Do not use pure style labels, such as B, font, u, and so on. Use CSS settings instead. In terms of semantics, strong and em need to be emphasized.





How can front-end development engineers output high-quality design drawings into html pages?
Cut the Graph Layout by yourself!

I am a programming cainiao and want to learn html5 game development. Which website has abundant high-quality learning resources?
There are html5 tutorials on MDN, js online manuals on w3school, and some nice entry-level blog posts on cnblogs that can be used to develop html5 games.

We need to get familiar with js first. html5 content can be roughly learned in less than a day or two. After that, we can make a game by making reference to frameworks such as cocos2d, you can also directly find A useful framework to learn about computer graphics and common algorithms such as A * Based on the game you want to do.