Summary of some common techniques in front-end development

1. How to display the date on the right in the article title list:

Copy code

The code is as follows:

<p><span>2010-10-10</span>@Mr.ThinkThis is the title of the article</p>

Then define span to float right:

p span{float:right}
In fact, this method can be extended to many situations, which is a very practical way of writing;
2. According to web standards, there can only be one h1 tag on a page. Many people know this concept, but few actually do it.
3. The problem of overlapping blank margins: generally avoid it by adding transparent borders or 1px inner margins. Detailed explanation: https://www.jb51.net/css/28157.html
4. Max/min-width/height implementation in IE6, _width: expression(this.width >600 ? "600px" : true);, height is the same.
5.html/class/id, it is best to write them in lowercase, which is more rigorous (in line with xhtml standards);
6. It is not recommended to use the following code to be compatible with IE8:

<meta http-equiv="X-UA-Compatible" content="IE=7" />
If it is a non-short-term page, try to avoid using it, and the page should ensure backward compatibility as much as possible;
7. Empty div has a default height in IE (not in FF), you can remove the default height by defining: div { witdh:100%; background:#9c0; ling-height:0};
8. When using the table tag, you should make use of its own properties as much as possible to separate the structure and style to the maximum extent. Detailed explanation: https://www.jb51.net/css/28158.html
9. Make full use of the label tag in the form to improve the user experience; this is good for those small option boxes on the page and for people with disabilities to read the website. Details are the first step to user experience;
10.fieldset, legend tags, a little-known but very practical set of tags; it can clearly frame a group of elements, mainly used in forms;
11. The optgroup tag is a little-known one, but it is very helpful in improving the user experience of select forms. What does it do? It can group options when there are many options:

Copy code

The code is as follows:

<select id="selectId">
<optgroup label="GROUP ONE">
<option value="1">one select</option>
<option value="2">two select</option>
</optgroup>
<optgroup label="GROUP TWO">
<option value="3">three select</option>
<option value="4">four select</option>
</optgroup>
</select>

12. The form must have a name value. The name value is a label, different from the id. As far as I have found, if the name value is not defined, the form element cannot be obtained through document.formid in non-IE browsers. Please see the following code and comments:

Copy code

The code is as follows:

<html>
<head>
<script>
window.onload = function(){
alert(document.mrform.length); //All browsers will pop up the form element length
alert(document.thinkform.length); //Only IE will pop up the length of the form element
}
</script>
</head>
<body>
<form name="mrform" id="thinkform" action="#">
......
</form>
</body>
</html>

Source: http://mrthink.net/css-common-summary/

<<: Learn about CSS label display mode in one article

>>: IDEA uses the Docker plug-in (novice tutorial)