前端与 HTML | 青训营笔记

388 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

一、本堂课重点内容:

  • 介绍了前端是什么、要解决的问题和技术栈等
  • 介绍了 HTML 的语义化
  • 介绍了常用的 HTML 标签

二、详细知识点介绍:

HTML概念

HTML(Hyper Text Markup Language),即超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。 HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。HTML文件的扩展名为htm(因为之前的文件系统最多只支持三位扩展名)或html。


常用HTMl标签

<h1~h6></h1~h6> 层级标签

<div></div> 块级元素

<p></p> 段落

<span></span> 包含的文本

<a></a> 超链接文本

<img/> 图片标签

<br/> 换⾏行行

<hr/>⽔水平分割线

<table></table> 表格标签

<tr></tr> 表格的行标签

<td></td> 表格的单元格标签

<ul></ul> ⽆无序列表

<ol></ol> 有序列表

<li></li>列表项

<dl></dl>自定义列表

<dt></dt>自定义列表头

<dd></dd>自定义列表内容

三、实践练习例子:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>example</title>
    </head>
    <body>
        <h1>HTML标签</h1>
        <p></p>
        <br/>
        <hr/>
        <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>Lyra</td>
            <td>16</td>
            <td>Js01</td>
        </tr>
        </table>
           <a href="#">Link</a>
           <img src="image.jpg" title="photo" width="800" />

        <ul>
            <li></li>
            <li></li>
        </ul>

        <ol type="a">
            <li></li>
            <li></li>
        </ol>
   </body>
</html>

四、课后个人总结:

想起当初那次寄掉的字节面试,面试官问了一手,谈谈html5脚本的异步加载,鼠鼠常用的只有async,defer只记得有这么个东西,面试官问了我这两个标签的区别,鼠鼠就趴窝了,之后看了这篇W博客文章才了解了deferasync之间的区别, asyncdefer都立即开始下载,都不会暂停解析器。asyncdefer之间的差异在于执行的时间,区别在于async脚本有可能不按照它们在页面中出现的顺序执行,defer脚本按照它们在页面中出现的顺序执行