接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧。关于标签,谈论最多的就是简洁和语义化。简洁指html标签仅仅负责把页面中的内容进行正确标示即可,而对内容的表现形式则统统交由css负责。语义化本不应成为问题,因为就像人与人之间的交流需要有意义的语言一样,html文档作为人与浏览器交流的语言自然是有意义的,但这并不能使所有人都遵循(类似于有了普通话,但各地方言依然流行,因为有时都可以达到一样的目的,所以人们总是按其最习惯的方式来进行)。简洁的问题到css是在进行总结,现在先谈谈语义化的问题。
w3school中共有117个标签,其中html5有16个不支持,29个新标签,以及从以前延续下来的72个标签。
今天先大致分类(按照我对其语义的理解)一下这72个“旧”标签吧,在此基础上以后分步进行语义辨析:
- 4个框架标签:,,,
1 DOCTYPE> 2 <html> 3 <head> 4 <title>标题title> 5 head> 6 <body> 7 内容。。。 8 body> 9 html>
这里面的
标签是必须出现在标签内的,但并不属于我所说的第一部分。 - 4个只能(但并不必须)或必须在标签之内出现的标签:
,, , 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> - 22个与文本有关的标签:,,,
,,
,,
,,-
,,,
,
,
,,
,,,,,这么多标签与文本有关也传递出一个信息,那就是文本内容才是网页中最重要的部分。 - 10个与表格有关的标签:
, , , ,
, , ,。,, <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个与表单有关的标签:
- 6个与列表有关的标签:
- ,
- ,
- ,
- ,
- 。
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>Coffeedt> 18 <dd>Black hot drinkdd> 19 <dt>Milkdt> 20 <dd>White cold drinkdd> 21 dl>
- 3个与图像有关的标签:,
- 5个引入标签:
- ,