Home >Web Front-end >HTML Tutorial >Front-end notes for newbies--First introduction to html tags_html/css_WEB-ITnose
Front-end notes for newbies--First introduction to html tags_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:34:211642browse
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: 39403138edf34e3c5bd0d56c0d39a0eb,100db36a723c770d327fc0aef2ce13b1,93f0f5c25f18dab9d176bd4f6de5d30e,6c04bd5ca3fcae76e30b72ad730ca86d
1 <!DOCTYPE>2 <html>3 <head>4 <title>标题</title>5 </head>6 <body>7 内容。。。8 </body>9 </html>
The b2386ffb911b14667cb8f0f91ea547a7 tag must appear within the 93f0f5c25f18dab9d176bd4f6de5d30e 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 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 tag: b2386ffb911b14667cb8f0f91ea547a7,e8e496c15ba93d81f6ea4fe5f55a2244,dde6fb694e6711ae5e6f381704c04ae4,49f0a8b7d253a4290e8079224fcdf651,a4b561c25d9afb9ac8dc4d70affff419,71af07a0e88a1ac1ff73f855702ac153,b8a712a75cab9a5aded02f74998372b4,f3a85e1241a187c5ac462d886e9a968b,ffbe95d20f3893062224282accb13e8f,e2af78330a61c6f93370b43ed0bc51bb,823db3943044a0a9a620ada8d4b1d965,907fae80ddef53131f3292ee4f81644b,4a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145ecc,5a8028ccc7a7e27417bff9f05adf5932,426be984ffbbb815d7d88e3543a85d91,e388a4556c0f65e1904146cc1a846bee,e03b848252eb9375d56be284e690e873,1244aa79a84dea840d8e55c52dc97869,fda1720b885000015fa956a59b9c863b,e3af741ebd51bacfdbe0be5adecd12d4b96cac025db4031319c29e1eb68f19d6,2cdea26b4c3988e37d674b56660962a7,45a2772a6b6107b401db3c9b82c049c2,8e99a69fbe029cd4e2b854e244eab143,b7f90f73cad438258bf67e62f79b2113, 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: 63bd76834ec05ac1f4c0ebbeaafb0994,581cdb59a307ca5d1e365becba940e05,879b49175114808d868f5fe5e24c4e0b,f5d188ed2c074f8b944552db028f98a1,b4d429308760b6c2d20d6300079ed38e,a34de1251f0d9fe1e645927f19a896e8,b6c5a531a458a2e790c1fd6421739d1c,ae20bdd317918ca68efdc799512a9b39,45d34ede88d816973d95e26696dafc5d,06669983c3badb677f993a8c29d18845.
<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>
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: 2b5469ab79cf842344327415c3b3bb95,e911751791aa3ba95dc724e2fb905976,ff9c23ada1bcecdd1a0fb5d5a0f18437,afb3b5496f97adf499d05666de27f448,221f08282418e2996498697df914ce4e,5a07473c87748fb1bf73f23d45547ab8,5b7a15bed8615d1b843806256bebea72,5c0e96d12fc7501cef2ae2efde646ee0,4750256ae76b6b9d804861d8f69e79d3.
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> View Code 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 (5c69336ffbc20d23018e48b396cdd57a73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742) 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: c34106e0b4e09414b63b2ea253ff83d6,ff6d136ddc5fdfeffaf53ff6ee95f185,25edfb22a4f469ecb59f1190150159c6,5c69336ffbc20d23018e48b396cdd57a,73de882deff7a050a357292d0a1fca94,67bc4f89d416b0b8236eaa5f43dee742.
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>
3 image-related tags: a1f02c36ba31691bcfe87b2722de723b, dab9f699790ab0922e596ecb9f6677d5, 03fc64e1e502d5ba947b3a9af06d2d2a.
<img src="planets.gif" 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>
5 introduction tags: c9ccee2e6ea535a969eb3f532ad9fe89,3f1c4e4b6b16bbbd69b2ee476dc4f83a,2b0b25ff593c5b6c03403dd6234ffb2c,273238ce9338fbb04bee6997e5552b950c68fef83818661b6da588c77ca3985e. c9ccee2e6ea535a969eb3f532ad9fe89--Introduce a style sheet to the html document, 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2b0b25ff593c5b6c03403dd6234ffb2c introduce scripts to the html document, 273238ce9338fbb04bee6997e5552b95 and 0c68fef83818661b6da588c77ca3985e define the introduction of multimedia objects and set parameters for them.
2 container tags: dc6dce4a544fdca2df29d5ac0ea9906b, d5ba1642137c3f32f4f4493ae923989c. 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.
10. There are 6 separate tags left: 9f9091322f187259b3af9befdc60c2f1 for comments, df250b2156c434f3390392d09b1c9563 for line breaks, f32b48428a809b51f04d3228cdf461fa dividing line, 3499910bf9dac5ae3c52d5ede7383485 Define hyperlinks, bb9345e55eb71822850ff156dfde57c8 define buttons, 208700f394e4cf40a7aa505373e0130b address labels.
The summary of the "old" tags is the above. In the future, some important and commonly used tags will be summarized.