HTML相关知识点

常用标签

• 标题标签: <h1> ~ <h6>
• 段落、换行、分割线标签:<p></p>、<br />、<hr />
• 行内元素标签:<strong>用于将文字加粗显示</strong>、<em>文字倾斜</em>、<del>显示删除线</del>、<ins>显示下划线</ins>
• 图像标签:<img src="" alt="" title=""/>
  • src="图片的路径"，绝对路径、相对路径
  • alt="图片将加载不出来的时候用于显示提示信息"
  • title="鼠标悬停到图片上显示图片的标题信息"
• 超链接标签:<a href="跳转的url地址" target="_selt/blank"></a>
  • target 属性用于指定是在当前窗口或者是在新窗口打开连接
• 表格标签:<table> <thead>表格的标题</thead> <tbody>表格区域内容 <tr>行 <th>表头<th/> <td>列</td> </tr> </tbody> </table>
  • 属性: align="center/left/right"、border="1"
  • 合并单元格: 合并行：rowspan=“合并单元格个数”【跨行合并】合并列：colspan=“合并单元格个数”【跨列合并】
• 表单标签:<form> <input type="text"> <form>
  • type类型: text[文本]、radio[单选]、password[密码]、button[按钮]、checked[多选]、file[文件]、image[图片]、submit[提交]、rest[重置]
• H5新增：number：数字；tel：电话；search：搜索；email：邮箱；url：地址；date：年月日；time：时分秒；month：月；week：周；time：时间；color：生成颜色选择表单；range：范围
• 事件: click：点击事件、focus：聚焦事件、blur：失焦事件、change：失焦且value值改变、submit：form提交事件、input：每当input里的输入框内容发生变化都会触发此事件、invalid：当验证不通过时触发此事件

- select 标签:、textarea：文本框

• 列表标签: <ul><li>无序列表</li></ul> <ol><li>有序列表</li></ol> <dl><dt><dd>自定义列表</dd><dt/></dl>

• 语义化标签: <header>头部区域</header>、<nav>定义导航区域</nav>、<artical>定义文章内容</artical>、<section>定义文档区域</section>、<aside>定义侧边栏</aside>、<footer>定义底部区域</footer>

• 音视频标签: <audio></audio>、<video></video>

  • 属性: src="url路径"、controls[控件]、autoplay[自动播放]、loop[循环]

• 块级元素: 它的特点就是，自己独占一行，可以设置宽、高、内外边距

• 行内元素: 它的特点就是，一行可以显示多个，不能设置宽、高

• 行内快元素：一行可以显示多个行内块元素，而且行内块元素之间有间隔，可以设置宽度和高度、内外边距

相关面试题

• src和href的区别？
  • src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系
• 对语义化的理解
  • 语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）通俗来讲就是用正确的标签做正确的事情
• script标签中defer和async的区别？
  • 如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。使用defer和async都会使得解析HTML的同时进行js脚本的异步下载，不会阻碍文档的解析，区别是，async在下载完js脚本之后立即执行js，有可能会阻碍文档的解析，且多个标记async的js脚本可能不会按照顺序执行；使用defer会在html解析完成之后再执行js脚本文件，而且多个defer的脚本会按照顺序执
• HTML5的离线储存怎么使用，它的工作原理是什么？
  • 离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
• iframe标签 有那些优点和缺点？
  • 优点：用来加载速度较慢的内容（如广告）可以使脚本可以并行下载，可以实现跨子域通信
  • 缺点：会阻塞主页面的 onload事件，无法被一些搜索引擎识别，会产生多个页面嵌套不便于管理
• Canvas和SVG的区别？
  • SVG 是可以缩放的矢量图，其特点是，不依赖于分辨率，支持事件处理器，复杂度较高，渲染比较慢，不适合游戏开发使用
  • Canvas 通过Javascript来绘制2D图形，是逐像素进行渲染的，其位置发生改变，就会重新进行绘制，依赖于分辨率，不支持事件处理器，适合做图片密集的游戏