web前端入门知识：1-1

Delete102

已于 2023-03-05 16:34:57 修改

阅读量89

点赞数

分类专栏： web前端文章标签： html 前端 Powered by 金山文档

于 2023-03-05 16:26:19 首次发布

本文链接：https://blog.csdn.net/qq_50147784/article/details/129347403

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了Web前端开发工程师的工作内容，强调了兴趣和敲代码的重要性。学习内容包括使用浏览器、编辑器等工具，掌握HTML（结构）、CSS（样式）和JavaScript（行为）三种编程语言。HTML定义网页结构，CSS负责样式设计，JavaScript则用于实现动态效果和交互行为。

摘要由CSDN通过智能技术生成

1、web前端开发工程师

【

打开一个网站，这个网站里面有文字、图片...

首先可以知道web开发工程师是跟网站打交道的，做的一切事情都是网站

也就是将你所做的东西放在网站中，别人通过网站打开你的网站就可以看到你写的东西

】

2、成为一名web前端开发工程师需要具备的条件

【

兴趣

敲代码

】

3、web前端开发工程师需要学习什么

【

一、软件(代码的辅助工具)

浏览器：(想要访问一个网站必须通过浏览器)

常用浏览器(谷歌chrome、火狐、IE)

浏览器调试工具：F12

编辑器：写代码的工具

vscode\hBuilder\sublime\dreamwever

PS:PhotoShop（UI设计师将psd设计稿给web工程师，web工程师再去写网站）

二、语言(计算机的编程语言)

HTML(结构):超文本标记语言【决定你是否有好身体、身体结构】

与浏览器沟通的一个方式

超：超过，网页中不仅可以放文本，还可以放图片、视频、音乐

文本：文本就是语言

(标记)标签:

双标签：<html></html>

单标签：<br/>

CSS(表现/样式):层叠样式表【决定你是否打扮的美丽外观、用于装饰】

网页中将所有的元素默认为一个矩形的盒子

CSS用于控制页面中元素的样式

width:100px; height:100px; background:red;

JavaScript(行为):脚本语言【决定你是否有吸引人的行为】

你能控制的东西比如开关

【编写前后端交互行为和网页的动态样式】

】

vscode快捷键：!+shift

<!-- 声明文件类型 是html类型 -->
<!DOCTYPE html>
<html>
    <head>
        <!-- char:编码 set:设置 设置编码为UTF-8类型  
            起到翻译作用：你写的什么语言就翻译什么语言
        -->
        <meta charset="UTF-8">
        <title>我的第一个网页</title>
    </head>
    <body>
        这是我的第一个网页
    </body>
</html>

<!--

标签

是由尖括号包围的关键词，所有的标签都写在<>

大多数标签都有成对出现的，例如：<html></html>，叫做双标签，第一个标签是开始标签，第二个是结束标签。

如：<br/>，叫做单标签

标签关系

双标签关系可以分为两类：包含关系和并列关系

包含关系：(嵌套关系、父子关系)

            <head>
                <title></title>
            </head>
        并列关系：(兄弟关系 )
            <head></head>
            <body></body>

<!DOCTYPE html>
<!-- 声明文档类型 作用就是告诉浏览器使用的是html5版本来显示网页 -->
<!-- <!DOCTYPE>不是一个HTML标签，它是文档类型声明标签 -->

<html lang="en"><!-- html是根标签 -->
<!-- lang是定义页面的语言的，lang="en" 则表示此页面定义为英文网页 ,lang="zh-CN" 则表示此页面定义为中文网页-->

<!-- head是网页的头部，在head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解释网页 -->

<head>
    <!-- 
        meta主要用于设置网页的一些元数据，元数据不是给用户看的，是给浏览器或者是给搜索引擎的爬虫程序看的
        meta中的属性：
            charset 指定网页的字符集
            name 指定的是数据的名称
            content 指定的是数据的内容
    -->
    <!-- meta标签用来设置网页的元数据(相当于与生俱来的，底层的数据)，这里meta用来设置网页的字符集，避免乱码 -->
    <meta charset="UTF-8">
    <!-- 规定 HTML 文档的字符编码，防止出现乱码情况 -->
    <!-- 

        字符集：
        utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gb2312 简单中文 包括6763个汉字
        BIG5 繁体中文 港澳台等用
        GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
        UTF-8则包含全世界所有国家需要用到的字符
        记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。 
    -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s    cale=1, user-scalable=no"> -->
    <!-- 
        viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。
        width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度。
        initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。
        maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间
        user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。
     -->
    <!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
    <title>123</title>

</head>

<!-- body是html的子元素，表示网页的主体，网页中的所有的可见内容都应该写在body里 -->

<body><!-- 身体、使用户看的东西 -->
    好好学习天天向上
    <h1>好好学习天天向上</h1>
    
    <!-- 
        HTML网页
            每一个网页都会有一个基本的结构标签 (也称为骨架标签)，页面内容也是在这些基本标签上书写。
            HTML网页也叫HTML文档
      -->
</body>

</html>