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: ,,,
1 <!DOCTYPE>2 <html>3 <head>4 <title>标题</title>5 </head>6 <body>7 内容。。。8 </body>9 </html>
The
tag must appear within the tag. But it doesn't belong to the first part of what I said. 4 tags that can only (but are not required) or must appear within the tag: <title>,<meta>,<base>,<link class="sycode"> <pre class='brush:php;toolbar:false;'>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></pre> 22 text-related tags: <abbr>,<b>,<bdo>,<blockquote>,<cite>,<code>,,<del>,<em>,<h1>-<h6>,<i>,<ins>,<p>,</p>
<pre class="brush:php;toolbar:false">,<q>,,<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>,</caption>
<col>,<colgroup>,<table>,<th>,</th>
<tr>,<td>,<thead>,,</thead>
</td>
</tr>
<tfoot>. <p class="sycode"> <pre class='brush:php;toolbar:false;'><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></pre> </p> <p class="sycode"> <pre class='brush:php;toolbar:false;'> 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></pre> </p> <p> </p> 10 form-related tags: <fieldset>,<legend>,<form>,<input>,<select>,<option>,</option>
<optgroup>,<menu>,<textarea>. <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'> 1 <form action="DoFormAction.htm"> 2 <fieldset style="width=800px"> <!--套住注册表格的边框--> 3 <legend>请输入如下的信息然后进行注册</legend> 4 <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px"> 5 <tr> 6 <td align="right">用户名:</td> <!--文本框--> 7 <td><input type="text" size="20" style="width:150px" /></td> 8 </tr> 9 <tr> 10 <td align="right">密码:</td> <!--密码框--> 11 <td><input type="password" size="20" style="width:150px" /></td> 12 </tr> 13 <tr> 14 <td align="right">确认密码:</td> 15 <td><input type="password" size="20" style="width:150px" /></td> 16 </tr> 17 <tr> 18 <td align="right">性别:</td> <!--单选框--> 19 <td> 20 <input type="radio" checked="checked" name="sex1" value="男" />男 21 <input type="radio" name="sex1" value="女" />女 22 </td> 23 </tr> 24 <tr> 25 <td align="right">性别(可以点文字选择):</td> 26 <td> 27 <fieldset style="width:150px"> <!--表单外框，也可以通过css设置宽度--> 28 <legend>请选择性别</legend> 29 <input type="radio" checked="checked" name="sex2" value="男" id="man" /> 30 <label for="man">男</label> 31 <input type="radio" name="sex2" value="女" id="woman" /> 32 <label for="woman">女</label> 33 </fieldset> 34 </td> 35 </tr> 36 <tr> 37 <td align="right">城市:</td> <!--下拉框--> 38 <td> 39 <select name="city"> 40 <option value="北京">北京</option> 41 <option value="深圳">深圳</option> 42 <option value="上海">上海</option> 43 <option value="南昌" selected="selected">南昌</option> <!--默认选择南昌--> 44 </select> 45 </td> 46 </tr> 47 <tr> 48 <td align="right">城市所在区域:</td> 49 <td> 50 <select name="area"> 51 <optgroup label="北京"> <!--下拉框分组显示--> 52 <option value="朝阳区">朝阳区</option> 53 <option value="海淀区">海淀区</option> 54 <option value="其他区">其他区</option> 55 </optgroup> 56 <optgroup label="南昌"> 57 <option value="东湖区">东湖区</option> 58 <option value="西湖区">西湖区</option> 59 <option value="青山湖区">青山湖区</option> 60 </optgroup> 61 </select> 62 </td> 63 </tr> 64 <tr> 65 <td align="right">交友目标:</td> 66 <td> 67 <select name="target" size="3" multiple="multiple"> <!--列表框--> 68 <option value="同行" selected="selected">同行</option> 69 <option value="普通朋友">普通朋友</option> 70 <option value="爱人">爱人</option> 71 </select> 72 </td> 73 </tr> 74 <tr> 75 <td align="right">爱好:</td> 76 <td> 77 <!--复选框,注意name属性设置一样，分组--> 78 <input type="checkbox" name="love" value="足球" />足球 79 <input type="checkbox" name="love" value="蓝球" />蓝球 80 <input type="checkbox" name="love" value="乒乓球" />乒乓球 81 </td> 82 </tr> 83 <tr> 84 <td align="right">照片上传:</td> 85 <td> 86 <!--文件选择框--> 87 <input type="file" name="myPic" /> 88 </td> 89 </tr> 90 <tr> 91 <td align="right">自我介绍:</td> 92 <td> 93 <!--多行文本框--> 94 <textarea rows="5" cols="50"> 95 </textarea> 96 </td> 97 </tr> 98 <tr> 99 <td align="center" colspan="2">100 <input type="submit" value="确定" />101 <input type="reset" value="清空" /> 102 <input type="image" src="../images/btnreg.png" onclick="alert('hello')" /> <!--演示图片按钮(会提交数据，类似submit)103 -->104 </td>105 </tr>106 </table>107 </fieldset>108 </form></pre> </p> View Code <p>This form is laid out by tables, which was a popular method a long time ago and is rarely used now. As far as I can see, they are all laid out using definition lists (</p>
<dl>
<dt></dt>
<dd>) and div tags. The above code is found from the Internet, and the tag application is very complete, so Use it here. 6 list-related tags: <ol>,</ol>
<ul>,<li>,<dl>,<dt>,</dt>
<dd>. <p class="sycode"> <pre class='brush:php;toolbar:false;'> 1 <!--有序列表--> 2 <ol> 3 <li>春</li> 4 <li>夏</li> 5 <li>秋</li> 6 <li>冬</li> 7 </ol> 8 <!--无序列表--> 9 <ul>10 <li>春</li>11 <li>夏</li>12 <li>秋</li>13 <li>冬</li>14 </ul>15 <!--定义列表-->16 <dl>17 <dt>Coffee</dt>18 <dd>Black hot drink</dd>19 <dt>Milk</dt>20 <dd>White cold drink</dd>21 </dl></pre> </p> <p> </p> 3 image-related tags: <img src="/static/imghwm/default1.png" data-src="planets.gif" class="lazy" alt="Front-end notes for newbies--First introduction to html tags_html/css_WEB-ITnose" >, <map>, <area>. <p class="sycode"> <pre class='brush:php;toolbar:false;'><img src="/static/imghwm/default1.png" data-src="planets.gif" class="lazy" alt="Planets" usemap ="#planetmap" /> <map id="planetmap"> <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" /> <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" /> <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" /> </map></pre> </p> <p> </p> 5 introduction tags: <style>,<script>,<noscript>,<object><param>. <style>--Introduce a style sheet to the html document, <script> and <noscript> introduce scripts to the html document, <object> and <param> define the introduction of multimedia objects and set parameters for them. <p>2 container tags: <div>, <iframe>. The former divides the content to be displayed on the entire page into multiple "blocks" so that the CSS style sheet can style each part. The latter can display multiple pages on the screen. The most common applications are in the mailbox page and the background management page. The advantage is that when the content of a block on the screen is changed, other parts do not change. <p> 10. There are 6 separate tags left: <!----> for comments, <br /> for line breaks, <hr> dividing line, <a> Define hyperlinks, <button> define buttons, <address> address labels. <p> The summary of the "old" tags is the above. In the future, some important and commonly used tags will be summarized. <p> </style></map>
</dd>
</dl>
</li>
</ul>
</dd>
</dl></textarea>
</menu>
</optgroup></select>
</form>
</legend>
</fieldset>
</tfoot>
</table>
</colgroup></var></strong></span></sup></sub></smap></q></pre></ins></i>
</h6>
</h1></em></del></code></cite>
</blockquote></bdo></b></abbr>
Web Front-end
What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM
What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM
What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM
What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM
What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM
How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM
How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM
What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM
