1.1 HTML 标签 · 前端面试知识点总结

# HTML 标签主要是介绍了一些常用的、易混淆的 HMTL 标签。 ## label 为输入字段做相关标记。例如： ```html <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> ``` 这时候，点击 label 标签内容，后边的 input 会自动获得焦点。 > 注意 label 的 for 值要与后边 input 的 id 相同。class 不可以。 ## iframe ### iframe 缺点 - iframe 会阻塞主页面的 Onload 事件。 - 搜索引擎的检索程序无法解读这种页面，不利于 SEO。 - iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 ### 建议使用iframe之前需要考虑上边两个缺点。如果需要使用iframe，最好是通过 javascript，动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。 ### iframeborder 设置 iframe 的边框。 ## br 在不产生新段落得情况下进行换行。一个 br 产生一个换行。 ## 不常见格式化标签 |标签| 描述 | |-------|--------------| |`<b>` |定义粗体文本 | |`<em>` |定义着重文字 | |`<i>` |定义斜体字 | |`<small>`|定义小号字 | |`<strong>`|定义加重语气 | |`<sub>` |定义下标字 | |`<sup>` |定义上标字 | |`<ins>` |定义插入字 | |`<del>` |定义删除字 | |标签 |描述| |-------|--------------| |`<code>` |定义计算机代码 | |`<kbd>` |定义键盘码 | |`<samp>` |定义计算机代码样本| |`<var>` |定义变量 | |`<pre>` |定义预格式文本 | |标签 |描述 | |-------|-----------------| |`<abbr>` |定义缩写 | |`<address>` |定义地址 | |`<bdo>` |定义文字方向 | |`<blockquote>` |定义长的引用| |`<q>` |定义短的引用语 | |`<cite>` |定义引用、引证 | |`<dfn>` |定义一个定义项目| ## head ### title 定义文档的标题，一般显示在浏览器的标签中。 ### base 定义页面中所有链接默认的链接地址。 ```html <head> <base href="http://www.runoob.com/images/" target="_blank"> </head> ``` ### meta 用来描述 HTML 文档的描述，关键词，作者，字符集等。 ```html <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <meta name="description" content="免费在线教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="runoob"> </head> ``` ### 图标 ```html <link rel="shortcup icon" href="img_url"> ``` ## 图片映射实现图片的部分区域可点击。 ```html <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap">  <area shape="rect" coords="x1,y1,x2,y2" alt="Sun" href="sun.htm">  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">  </map> ``` > 实际测试谷歌浏览器中，usemap="@planetmap" 中带有 # 与不带有 # 同样有效果，但是 map 只能使用 map，使用 id 和 class 不可以。 [运行结果](http://www.runoob.com/try/try.php?filename=tryhtml_areamap) ## table 表格标签。 tr：一行。 th：表头，单元格。 td：表体，单元格。 caption：定义表格标题。 colgroup：定义表格列的组。 col：定义表格列的属性。 thead：定义表格的页眉。 tbody：定义表格的主体。 tfoot：定义表格的页脚。 ## ul ul + li，无序列表。 ol + li，有序列表。 dl + (dt + dd)，自定义列表，dt 为列表项，dd 为列表项描述。 ## input 使用 type 定义 input 的种类，例如： |Type 的值|input 的种类| |---------|------------| |text |输入框 | |password |密码字段 | |radio |单选按钮（对应的常见的属性值有 value、name、checked）| |checkbox |多选按钮（属性值有 value、name、checked）| |submit |提交按钮 | |reset |重置按钮 | ## noscript noscript 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。 noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容： ```html <script> document.write("Hello World!") </script> <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>  ```