2024年Web前端最全【Web前端】HTML详解(下篇)，2024年最新2024web前端经典面试题及答案

本文链接：https://blog.csdn.net/2401_84419493/article/details/138699966

总结

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

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

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

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

前端面试题汇总

JavaScript

前端资料汇总

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<h1>望庐山瀑布</h1>

<h2>唐 李白</h2>

<div style="color:red">

    <p>日照香炉生紫烟，</p>

    <p>遥看瀑布挂前川。</p>

</div>

<div style="font-weight:bold;color:blue">

    <p>飞流直下三千尺，</p>

    <p>疑是银河落九天。</p>

</div>




**显示效果：**![在这里插入图片描述](https://img-blog.csdnimg.cn/5189e4aa470145e29a487398850d94a2.png)



> **`<div>`标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。**



[]( )4.HTML的 span 元素

----------------------------------------------------------------------------



**HTML `<span>` 元素是内联元素，可用作文本的容器。**



**例：对文档中的一部分文本进行着色！**

唐 -李白




**显示效果：**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/7a80d8b1ccb94094b4ac3a7fd1c8828a.png)



> **`<span>` 用于对文档中的行内元素进行组合。**



* * *



[]( )二.HTML布局

=====================================================================



**布局用于改善网站的外观，我们可以使用`<div>`或者`<table>`添加网页布局，大多数网站可以使用 `<div>` 或者 `<table>` 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。**



[]( )1.使用div元素添加网页布局

----------------------------------------------------------------------------



**div 元素是用于分组 HTML 元素的块级元素。**

<meta charset="utf-8"> 

<title>小橙子前端教程!</title>

<div id="container" style="width:600px">



    <div id="header" style="background-color:cornflowerblue;">

        <h1 style="margin-bottom:0;">--唐诗三百首--</h1>

    </div>

    <!--下外边距-->

    <!--float:该属性控制目标HTML元素是否浮动以及如何浮动.-->

    <div id="menu" style="background-color:dimgrey;height:200px;width:200px;float:left;">

        <b>菜单</b><br>

        望庐山瀑布<br>

        静夜思<br>

        绝句<br>

        琵琶行

    </div>



    <div id="content" style="background-color:aliceblue;height:200px;width:400px;float:left;">

        望庐山瀑布<br>

        翻译译文：



        香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。



        高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。



    </div>



    <!--clear 属性规定元素的哪一侧不允许其他浮动元素。-->

    <div id="footer" style="background-color:cadetblue;clear:both;text-align:center;">

        橙子！</div>



</div>




![在这里插入图片描述](https://img-blog.csdnimg.cn/03f154d135ae488db260abb7f0ad7b46.png)



[]( )2.使用table元素添加网页布局

------------------------------------------------------------------------------



我们还可以使用table标签添加网页布局！

<meta charset="utf-8"> 

<title>小橙子前端教程!</title>

<table width="600" border="0">

    <tr>

        <td colspan="2" style="background-color:cornflowerblue">

            <h1>--唐诗三百首--</h1>

        </td>

    </tr>



    <tr>

        <td style="background-color:dimgrey;width:200px;vertical-align:top;">

            <b>菜单</b><br>

            望庐山瀑布<br>

            静夜思<br>

            绝句<br>

            琵琶行

        </td>

        <!--vertical-align 属性设置元素的垂直对齐方式。-->

        <td style="background-color:aliceblue;height:200px;width:400px;vertical-align:top;">

            望庐山瀑布<br>

            翻译译文：



            香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。



            高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。</td>

    </tr>



    <tr>

        <td colspan="2" style="background-color:cadetblue;text-align:center;">

            橙子！</td>

    </tr>

</table>




![在这里插入图片描述](https://img-blog.csdnimg.cn/30bb076fc83548839619ef930cbd7977.png)



> `<table>`元素主要用于创建表格，虽然可以用于添加网页布局，但是不建议使用！



* * *



[]( )三.HTML表单和输入

========================================================================



**HTML 表单用于收集用户的输入信息，HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。**



> **表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）  

> 等等。**



**我们使用标签来创建表单，多数情况下被用到的表单标签是输入标签 `<input>`。**



[]( )1.文本域

------------------------------------------------------------------



**文本域(Text Fields)通过 `<input type="text">` 来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。**

<form>

    First <input type="text" name="firstname"><br>

    Last <input type="text" name="lastname">

</form>




![在这里插入图片描述](https://img-blog.csdnimg.cn/c944c7d9e640484da4cbf0507bd87a45.png)



[]( )2.密码字段

-------------------------------------------------------------------



**密码字段通过标签 `<input type="password">` 来定义。**

Password:




![在这里插入图片描述](https://img-blog.csdnimg.cn/c72c6753b7fe44b3876d241e1968c3a8.png)



> **密码字段字符不会明文显示，而是以星号 \* 或圆点 . 替代。**



[]( )3.单选按钮

-------------------------------------------------------------------



**单选按钮(Radio Buttons)通过`<input type="radio">`标签来定义。**

    <input type="radio" name="sex" value="male">男<br>

    <input type="radio" name="sex" value="female">女

</form>




![在这里插入图片描述](https://img-blog.csdnimg.cn/42cf599e53b8401eb2023f74661e7021.png)



[]( )4.复选框

------------------------------------------------------------------



**复选框(Checkboxes)通过标签`<input type="checkbox">`来定义。**

<form>

    <input type="checkbox" name="vehicle" value="Bike">语文<br>

    <input type="checkbox" name="vehicle" value="Car">数学<br>

    <input type="checkbox" name="vehicle" value="Bike">英语<br>

    <input type="checkbox" name="vehicle" value="Car">历史

</form>




![在这里插入图片描述](https://img-blog.csdnimg.cn/caca265aefce46ccb2d79f934d52503b.png)



[]( )5.提交按钮

-------------------------------------------------------------------



**提交按钮用`<input type="submit">`标签来定义！**

    Username: <input type="text" name="user">

    <input type="submit" value="Submit">

</form>




![在这里插入图片描述](https://img-blog.csdnimg.cn/26fa957cb27d42899d079a71effcd4f1.png)  

**在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html\_form\_action.php 文件，该页面将显示出输入的结果。**



> **`method` 属性用于定义表单数据的提交方式，可以是以下值：**

> 

> *   **`post`：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。**

> *   **`get`：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。**



* * *



[]( )四.HTML框架

=====================================================================



**有时候我们希望在同一个浏览器界面中显示不止一个页面，这时候就要用到框架！**



[]( )1.iframe语法

-----------------------------------------------------------------------




[]( )2.iframe设置高度和宽度

----------------------------------------------------------------------------



**`height` 和 `width` 属性用来定义iframe标签的高度与宽度。**




[]( )3.iframe去除边框

-------------------------------------------------------------------------



**`frameborder` 属性用于定义iframe表示是否显示边框。**

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个认识自己的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总