一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

入门前端基础(保姆式教学1)

前端通常被称为Web前端,它涉及的是网站或应用程序的用户界面部分,这些界面运行在用户的浏览器上,可以直接被用户看到并与之互动。前端开发者主要负责创建和维护网站的视觉表现,包括结构的搭建、交互的设计以及与后端数据的集成等工作。随着技术的发展,前端领域已经不仅限于传统的网页开发,还包括了移动应用(如微信小程序、移动端APP)、桌面应用以及开发服务器的开发工作。因此,前端在现代软件开发中扮演着至关重要的角色。

准备工作

编辑工具

入门前端基础(保姆式教学1)

  • 然后下载一个谷歌浏览器(电脑自动浏览器也行,前端代码运行必须依赖浏览器,否则无法预览)

创建文件

  • 创建一个以.html结尾的文件即可
  • 然后拖到你下载的vscode工具中
  • 用快捷方式生成模版,快捷方式方法-在页面输入! + tab,注意这里的!必须是英文,是否不会起到快速创建默认代码
  • 按照上面步骤,得到如下结构

入门前端基础(保姆式教学1)

认识代码

标签闭合

  • 双标签闭合:<p></p>这样就是一个闭合标签
  • 单标签闭合:<br/>这样叫单标签闭合,不同就是双标签是以</p>结尾,单标签是以<br/>结尾,/的位置不同区分点
  • 一般标签里面要写内容需要用双标签,如果不需要写内容只需要单标签,有些标签只能是双标签或单标签,以后再说

标签的作用

  • 标签可以用来控制页面的各种布局,例如:上面的标题就是一种简单布局代码,写法<h2>标签的作用</h2>这样写就会独占一行
  • 标签可以配合css增加样式,例如:给文字加上颜色<h2 style='color:red;'>标签的作用</h2>(以后详细讲)
  • 标签还可以配合点击事件使用,例如:你平时点击页面按钮跳转页面或者弹窗(以后详细讲)

了解默认模板结构

  • html是代码的根元素,全局只有一个标签,并且是双标签,会把所有内容包含在里面
  • head标签,主要包含标题、css样式、seo优化
  • title标签,标题浏览器顶部显示的标题就是这里控制
  • body标签,我们要写的标签基本都是写到这里,按需增加,页面长什么样的布局就在这里写了
  • script标签,我们需要写的页面逻辑、业务逻辑都写这里
  • 上面这几个标签都是固定的位置,也是构成一个页面最基本的元素,具体如下
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     //css样式写到这里面
  </style>
</head>
<body>
  // 我们需要增加的标签内容写这里
</body>
<script>
// 一些页面逻辑写到这里,例如算法等
</script>
</html>

记住常用的几个标签(在body标签里面写的)

  • header:头部布局
  • main:中间布局
  • footer:底部局部
  • div:布局
  • h1:主标题
  • h2:副标题
  • p:标签内写段落文字,默认占一行
  • span:标签内写文字,不会占一行
  • 上面的标签其实只要一个div标签就能走遍天下,为什么要分那么多类型?因为这样分类方便所有开发人员查看和维护,快速知道整体布局,也叫标签语义化,就像读文字一样容易理解
  • input:输入框标签
  • img:引入图片的标签
  • video:引入视频的标签
  • audio:引入音频的标签
  • 标签的使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 100px;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <header>
    <h1>我是主标题</h1>
    <h2>我是副标题</h2>
  </header>
  <main>
    <p>我是内容,中间部分</p>
    <div>
      <span>输入框</span>
      <input type="text">
    </div>
    <div>
      <span>引入图片</span>
      <--->
      <img src="./动漫.png" alt="">
    </div>
  </main>
  <footer>
    <p>我是结尾部分</p>
  </footer>
</body>
<script></script>
</html>

入门前端基础(保姆式教学1)
入门前端基础(保姆式教学1)

总结

  • 1、了解什么叫前端
  • 2、前端开发需要的开发工具
  • 3、了解页面的基本构成和标签
  • 4、了解什么叫标签和标签用途
  • 5、认识标签和标签语义化
  • 6、需要记住常用的几个标签
  • 7、标签的使用和布局

今天先了解这么多吧,重在了解和记住常用标签

原文链接:https://juejin.cn/post/7332735079162773539 作者:哈罗哈皮

(0)
上一篇 2024年2月9日 下午4:59
下一篇 2024年2月10日 上午10:01

相关推荐

发表评论

登录后才能评论