It has been more than a month since I came into contact with the front-end (what a great name). I have watched a lot of videos and blogs, and I have a certain perceptual understanding. However, I still need to summarize the knowledge I have learned in order to systematize it. Let’s start with Let’s start with the html tag. Regarding tags, the most talked about is conciseness and semantics. Simplicity means that the HTML tag is only responsible for correctly labeling the content on the page, while CSS is responsible for all the presentation of the content. Semanticization should not be a problem, because just like communication between people requires meaningful language, html documents are naturally meaningful as a language for people to communicate with browsers, but this does not make everyone follow (Similar to the emergence of Mandarin, local dialects are still popular in various places, because sometimes they can achieve the same purpose, so people always do it in the way they are most accustomed to). The succinct issues are summarized in CSS. Now let’s talk about semantic issues.
There are a total of 117 tags in w3school, of which 16 are not supported by html5, 29 new tags, and 72 tags inherited from the past.
Today, let’s roughly classify (according to my understanding of their semantics) these 72 “old” tags. On this basis, we will conduct semantic analysis step by step:
4 frame tags: < !DOCTYPE>,,,
1 <!DOCTYPE>2 <html>3 <head>4 <title>标题</title>5 </head>6 <body>7 内容。。。8 </body>9 </html>
The
1 <head>2 <title>标题</title>3 <meta http-equiv="content-type" content="text/html; charset=utf-8">4 <base href="#" />5 <link rel="stylesheet" type="text/css" href="#" />6 </head>
,,,< dfn>,,,-,,,,
,<q>,< small>,<smap><sub>,<sup>,<span>,<strong>,<var>, so many tags related to text also convey a message, that is, the text content is The most important part of a web page. 10 table-related tags: <caption>,<col>,<colgroup>,<table>,<th>,<tr>,<td>,<thead>,< tbody>,<tfoot>. <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"><table> <caption>每月的存款</caption> <colgroup span="3"> <col span="1" style="background-color:red"> <col span="3" style="background-color:blue"> <tr> <th>月份</th> <th>一月</th> <th>二月</th> <th>三月</th> </tr> <tr> <td>存款</td> <td>1000元</td> <td>1000元</td> <td>1000元</td> </tr></table>
Copy after login
1 <table> 2 <thead> 3 <tr> 4 <td>THEAD 中的文本</td> 5 </tr> 6 </thead> 7 <tfoot> 8 <tr> 9 <td>TFOOT 中的文本</td>10 </tr>11 </tfoot>12 <tbody>13 <tr>14 <td>TBODY 中的文本</td> 15 </tr>16 </tbody>17 </table>
10 form-related tags: