前端——基础认知（1）_前端页面的认识-程序员宅基地

技术标签： 前端  

目录

一、基础认知（了解）

1.基础概念铺垫

1.1 认识网页

1.1.1 了解

1.1.2 小结

1.2 五大浏览器和渲染引擎

1.2.1五大浏览器

1.2.2 渲染引擎（了解）

1.3 Web标准

1.3.1 为什么需要Web标准？（了解）

1.3.2 Web标准的构成

1.3.3 Web标准的记忆方法

2.HTML初体验

2.1 HTML的感知

2.1.1 HTML的概念

2.1.2 网页体验-构建基本网页的步骤

2.2 HTML骨架结构

2.2.1 HTML页面固定结构

2.3 开发工具的使用

2.3.1 为什么要使用 VS Code？

2.3.2 VS Code使用前要求

2.3.3 VS Code创建网页的步骤

2.3.4 VS Code的基本快捷键

2.3.5 VS Code的其他快捷键

3.语法规范

3.1 HTML的注释

3.1.1 什么是注释

3.1.2 注释的作用和写法

3.2 HTML标签的构成

3.2.1 HTML标签的结构

3.3 HTML标签的关系

3.3.1 HTML标签与标签之间的关系可分为

 二.HTML标签学习

一、基础认知（了解）

1.基础概念铺垫

1.1 认识网页

1.1.1 了解

  • 问题1：网页由哪些部分组成？
         √ 文字、图片、音频、视频、超链接
  • 问题2：我们看到的网页背后本质是什么？
         √ 前端程序员写的代码
  • 问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
         √ 通过浏览器转化（解析和渲染）成用户看到的网页

1.1.2 小结

  • 问题1：网页由哪些部分组成？
         √ 文字、图片、音频、视频、超链接
  • 问题2：咱们程序员写的代码是通过什么软件转换成网页的？
         √ 浏览器

1.2 五大浏览器和渲染引擎

1.2.1五大浏览器

  • 浏览器：是网页显示、运行的平台，是前端开发必备利器
  • 常见的五大浏览器：

        IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）

1.2.2 渲染引擎（了解）

  • 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
  • 浏览器出品的公司不同，内在的渲染引擎也是不同的：

  

  • 注意点：
        渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的
        谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）

1.3 Web标准

1.3.1 为什么需要Web标准？（了解）

  • 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异：
        如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！
  • Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

1.3.2 Web标准的构成

构成 语言 说明
结构 HTML 页面元素和内容
表现 CSS 网页元素的外观和位置等页面样式（如：颜色、大小等）
行为 JavaScript 网页模型的定义与网页交互

1.3.3 Web标准的记忆方法

  • Web标准要求页面实现：结构、表现、行

2.HTML初体验

2.1 HTML的感知

2.1.1 HTML的概念

  • HTML（Hyper Text Markup Language）中文译为：超文本标记语言
        专门用于网页开发的语言，主要通过 HTML标签 对网页中的文本、图片、音频、视频等内容进行描述。

2.1.2 网页体验-构建基本网页的步骤

1. 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为： 文字变粗案例.txt
2. 双击这个文件，输入代码等内容 → 记得保存！
3. 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为 .html
4. 双击 文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容

2.2 HTML骨架结构

2.2.1 HTML页面固定结构

  • 网页类似于一篇文章：
        每一页文章内容是有固定的结构的，如：开头、正文、落款等……
        网页中也是存在固定的结构的，如：整体、头部、标题、主体
  • 网页中的固定结构是要通过特点的 HTML标签 进行描述的
<!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>网页的标题</title>
</head>
<body>
    网页的主体内容
</body>
</html>

2.3 开发工具的使用

2.3.1 为什么要使用 VS Code？

  • 刚刚通过文本编辑器，如：记事本，完全可以编写网页源代码
        但是效率……不忍直视
  • 实际开发中，注重开发的 效率和便捷性 ，因此我们会使用一些开发工具
        开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
  • 前端开发神器：VS Code → 速度快、体积小、插件多

2.3.2 VS Code使用前要求

1. VSCode 软件安装完毕
2. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
3. open in browser 直接打开浏览器插件安装完毕

2.3.3 VS Code创建网页的步骤

1. 双击打开VS Code软件
2. 将 day01代码 文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
3. 点击目录上的 +新建文件按钮 创建页面，注意： 文件后缀名需要是.html

2.3.4 VS Code的基本快捷键

1. 快速生成标签：英文 + tab
2. 保存文件：ctrl + s
        注意1：写完文件之后务必需要保存文件，否则网页无变化
        注意2：可以设置自动保存省去每次保存的麻烦
3. 快速查看网页效果：右击 → Open in Default Browser
        快捷键：alt + b
        注意： 必须安装了open in browser 插件
4. 快速生成结构标签：! + tab
        注意1： !必须是英文的 ，中文!无效
        注意2： 必须保证当前文件后缀名是.html ，否则无效
        VS Code自动生成的骨架多了其他标签，之后会介绍

2.3.5 VS Code的其他快捷键

1. 快速复制一整行：ctrl + c

2. 快速粘贴一整行：ctrl + v

3. 快速删除（剪切）一整行：ctrl + x

3.语法规范

3.1 HTML的注释

3.1.1 什么是注释

  • 问题：程序员在代码中添加的注释，是为了给谁看的？
         下次的阅读代码者（自己或者其他程序员）

3.1.2 注释的作用和写法

  • 注释的作用：

        为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码

        浏览器执行代码时会忽略所有的注释

  • 注释的快捷键：

        在VS Code中：ctrl + /

3.2 HTML标签的构成

3.2.1 HTML标签的结构

  • 标签的结构图：

  •  结构说明：

        1.标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。

        2.常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。

        3.少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

3.3 HTML标签的关系

3.3.1 HTML标签与标签之间的关系可分为

  • 父子关系（嵌套关系）

  •  兄弟关系（并列关系）

 二.HTML标签学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joy_jyx/article/details/127095842

智能推荐

js-选项卡原理_选项卡js原理-程序员宅基地

文章浏览阅读90次。【代码】js-选项卡原理。_选项卡js原理

设计模式-原型模式（Prototype）-程序员宅基地

文章浏览阅读67次。原型模式是一种对象创建型模式，它采用复制原型对象的方法来创建对象的实例。它创建的实例，具有与原型一样的数据结构和值分为深度克隆和浅度克隆。浅度克隆：克隆对象的值类型（基本数据类型），克隆引用类型的地址；深度克隆：克隆对象的值类型，引用类型的对象也复制一份副本。UML图：具体代码：浅度复制：import java.util.List;/*..._prototype 设计模式

个性化政府云的探索-程序员宅基地

文章浏览阅读59次。入选国内首批云计算服务创新发展试点城市的北京、上海、深圳、杭州和无锡起到了很好的示范作用，不仅促进了当地产业的升级换代，而且为国内其他城市发展云计算产业提供了很好的借鉴。据了解，目前国内至少有20个城市确定将云计算作为重点发展的产业。这势必会形成新一轮的云计算基础设施建设的**。由于云计算基础设施建设具有投资规模大，运维成本高，投资回收周期长，地域辐射性强等诸多特点，各地在建...

STM32问题集之BOOT0和BOOT1的作用_stm32boot0和boot1作用-程序员宅基地

文章浏览阅读9.4k次，点赞2次，收藏20次。一、功能及目的 在每个STM32的芯片上都有两个管脚BOOT0和BOOT1，这两个管脚在芯片复位时的电平状态决定了芯片复位后从哪个区域开始执行程序。BOOT1=x BOOT0=0 // 从用户闪存启动，这是正常的工作模式。BOOT1=0 BOOT0=1 // 从系统存储器启动，这种模式启动的程序_stm32boot0和boot1作用

C语言函数递归调用-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏22次。C语言函数递归调用_c语言函数递归调用

明日方舟抽卡模拟器wiki_明日方舟bilibili服-明日方舟bilibili服下载-程序员宅基地

文章浏览阅读410次。明日方舟bilibili服是一款天灾驾到战斗热血的创新二次元废土风塔防手游，精妙的二次元纸片人设计，为宅友们源源不断更新超多的纸片人老婆老公们，玩家将扮演废土正义一方“罗德岛”中的指挥官，与你身边的感染者们并肩作战。与同类塔防手游与众不同的几点，首先你可以在这抽卡轻松获得稀有，同时也可以在战斗体系和敌军走位机制看到不同。明日方舟bilibili服设定：1、起因不明并四处肆虐的天灾，席卷过的土地上出..._明日方舟抽卡模拟器

随便推点

Maven上传Jar到私服报错：ReasonPhrase: Repository version policy: SNAPSHOT does not allow version: xxx_repository version policy snapshot does not all-程序员宅基地

文章浏览阅读437次。Maven上传Jar到私服报错：ReasonPhrase: Repository version policy: SNAPSHOT does not allow version: xxx_repository version policy snapshot does not all

斐波那契数列、素数、质数和猴子吃桃问题_斐波那契日-程序员宅基地

文章浏览阅读1.2k次。斐波那契数列（Fibonacci Sequence）是由如下形式的一系列数字组成的：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, …上述数字序列中反映出来的规律，就是下一个数字是该数字前面两个紧邻数字的和，具体如下所示：示例：比如上述斐波那契数列中的最后两个数，可以推导出34后面的数为21+34=55下面是一个更长一些的斐波那契数列：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584,_斐波那契日

PHP必会面试题_//该层循环用来控制每轮 冒出一个数 需要比较的次数-程序员宅基地

文章浏览阅读363次。PHP必会面试题1. 基础篇1. 用 PHP 打印出前一天的时间格式是 2017-12-28 22:21:21？ //&gt;&gt;1.当前时间减去一天的时间，然后再格式化echo date('Y-m-d H:i:s',time()-3600*24);//&gt;&gt;2.使用strtotime，可以将任何字符串时间转换成时间戳，仅针对英文echo date('Y-m-d H:i:s',str..._//该层循环用来控制每轮 冒出一个数 需要比较的次数

windows用mingw(g++)编译opencv，opencv_contrib，并install安装_opencv mingw contrib-程序员宅基地

文章浏览阅读1.3k次，点赞26次，收藏26次。windows下用mingw编译opencv貌似不支持cuda，选cuda会报错，我无法解决，所以没选cuda，下面两种编译方式支持。打开cmake gui程序，在下面两个框中分别输入opencv的源文件和编译目录，build-mingw为你创建的目录，可自定义命名。1、如果已经安装Qt，则Qt自带mingw编译器，从Qt安装目录找到编译器所在目录即可。1、如果已经安装Qt，则Qt自带cmake，从Qt安装目录找到cmake所在目录即可。2、若未安装Qt，则安装Mingw即可，参考我的另外一篇文章。_opencv mingw contrib

5个高质量简历模板网站，免费、免费、免费_hoso模板官网-程序员宅基地

文章浏览阅读10w+次，点赞42次，收藏309次。今天给大家推荐5个好用且免费的简历模板网站，简洁美观，非常值得收藏！1、菜鸟图库https://www.sucai999.com/search/word/0_242_0.html?v=NTYxMjky网站主要以设计类素材为主，办公类素材也很多，简历模板大部个偏简约风，各种版式都有，而且经常会更新。最重要的是全部都能免费下载。2、个人简历网https://www.gerenjianli.com/moban/这是一个专门提供简历模板的网站，里面有超多模板个类，找起来非常方便，风格也很多样，无须注册就能免费下载，_hoso模板官网

通过 TikTok 联盟提高销售额的 6 个步骤_tiktok联盟-程序员宅基地

文章浏览阅读142次。你听说过吗？该计划可让您以推广您的产品并在成功销售时支付佣金。它提供了新的营销渠道，使您的产品呈现在更广泛的受众面前并提高品牌知名度。此外，TikTok Shop联盟可以是一种经济高效的产品或服务营销方式。您只需在有人购买时付费，因此不存在在无效广告上浪费金钱的风险。这些诱人的好处是否足以让您想要开始您的TikTok Shop联盟活动？如果是这样，本指南适合您。_tiktok联盟

推荐文章

热门文章

相关标签