Web前端最新HTML5基础认知(1)，2024年最新字节跳动前端开发工程师面试

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

一、向下兼容型：除了一小部分HTML中的标签外，HTML5都能兼容。

二、用户至上：为了满足用于的需求而生，可以归结为只有及其少的部分浏览器不能使用HTML5之外，其余的大多数的浏览器都能够兼容。

三、化繁为简：1、以浏览器代替原生的JavaScript   2、DOCTYPE被简化  3、字符集声明    4、强大的API

四、无插件规范：提供无插件的原生支持弥补插件本身不足的问题。

五、媒体的中立：例如HTML5的媒体播放能在不同的设备或则平台上运行

六、引入了语义：能够增强代码的可读性与代码查询的便利性

七、引入原生媒体支持：能够直接的播放视频和音频文件，不需要借助插件

八、引入可编程内容：在现在可以把HTML5理解为HTML+css+javaScript的总称。

开发工具：Hbuilder

在开发工具Hbuilder中，先通过文件新建一个web项目，注意在创建的项目名称第一个字母要大写。

然后再点击HelloHbuilder创建一个空白的html的空白文件。然后便可开始用标签 编写网页。

HTML5标签开始

一、主体结构

         //文档类型的声明   //表示文档HTML开始                       //包含文档元素剧开始

//声明字符编码

  //设置文档的标题                  //包含文档元素剧结束                //文本内容的开始

这仅仅只是一个开始
 //其中的br表示强制换行

百度//表示超链接，其中的href是超链接必须要有的熟悉

             //文本内容的结束          //文档HTML结束

二、文本标签

作用效果相似标签

1.加粗（b和strong都是双标签）

b：用于产品名称或者标题之类的

strong：用于强调文章的关键字

2.换行（br与wbr都是单标签）

br :   强制换行

wbr：安全换行（当浏览器窗口缩小时，不会特别容易的产生突兀的文本变化效果）

3.倾斜（i和em都是双标签）

i：多用于表示外文词汇或者科技术语

em：用于文本内容中自己想要使得文本倾斜的内容

4.下划线（u和ins都是双标签）

u：加下划线时不怎么明显

ins：加下划线时较u来说比较的明显

5.删除线（s和del都是双标签）

s：删除线不怎么明显

del：删除线相比较s而言比较明显

6.上下标（sup和sub都是双标签，用在数字前后）

sup：上标

sub:   下标

7.放小：small（将旁注显示为小型文本）

8.编程代码相关标签：code  samp  kdb var   都是标记计算机编程语言相关的文本代码，在中文网站显示中不怎么明显

9.表示缩写：abbr

10.定义定义项目：dfn

11.定义注释：ruby   在ruby标签下还有rt与rp标签，可用rt和rp两者结合表示汉语拼音

12.定义文本（文字的方向）显示方向 ：bdo

13.突出显示文本：mark 可以使文字在浏览器中显示的比较突兀

超链接、路径与锚点

一、超链接

标签用来表示超链接，在HTML5中主要用到的是href属性和target属性。其中href属性是标签中必须用的一个属性，用来指定链接地址。target属性用来指定所链接的页面在浏览器窗口中的打开方式。

target参数值：

blank:在新的窗口打开链接的文件           self：在同一框架或窗口中打开链接的文件

parent: 将链接的文件载入含有该链接框架的父框架集或者父窗口中

top：在该浏览器窗口中打开，但是原有的框架会被删除。

二、路径

绝对路径：是从盘符开始的路径      相对路径：是从当前盘符开始的路径

目录语法

同一个目录：文件名.html或者是./文件名.html

在子目录：文件名/文件名.html

在孙子目录：文件名/文件名/文件名.html

在子子目录：…/文件名

三、锚点

超链接也可以用来将同一个文档中的另一个元素移入到视野，通过属性id和name来实现锚点的定位

//链接

第一章 第二章第三章

//锚点

或者

或者

或者

分组元素

1.段落分离

（p为双标签）

标签就是在

所包含的文本形成一个段落；使得段落与段落之间存在一定过得空隙。

这是一个段落

这是另一个段落

2.通用分组

（div是双标签）

进行一般性分组元素布局，在HTML5中和

的区别在于分组的元素之间没有空隙，其作用效果与
相同

这是一个分组

这是另外一个分组

3.引用大量他处内容<blockquote是双标签>

将文本内容进行分段，与标签p所分段的段落间隙相同并且首行会缩进空格。

这是一个大段引自他处的内容

这是另一个大段引自他处的内容

4.展示格式内容<pre双标签>

大概的展示编辑器中的文本内容，能够读出文本中的格式。

5.添加分割<hr单标签>

有一条下划线用于分割文本中间的内容，来显示上下文主题的区别，使用hr时只需要用

---

即可

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总