01-初识HTML

2023-09-20 16:18:37

01-初识HTML

学习目标：

  1. 理解HTML的基本语法
  2. 掌握排版标签实现标题等效果
  3. 相对路径和绝对路径
  4. 媒体标签（图片、音频、视频）
  5. 超链接

一、基础认知

了解网页组成和五大浏览器
明确Web标准的构成

1.1 认识网页
  1. 以下网页有哪些部分组成

文字、图片、音频、视频、超链接…

  1. 那么这个网页背后本质是什么？

a

  1. 前端的代码是通过什么软件转换成用户眼中的页面的？

1.2 五大浏览器和渲染引擎
1.2.1 浏览器
  1. 浏览器：是网页显示、运行的平台，是前端开发必备利器
  2. 常见的五大浏览器：

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

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

  1. 注意点：

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

1.3 Web标准
1.3.1 为什么需要Web标准？
  1. 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！

  1. Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

1.3.2 Web标准的构成
  1. Web标准中分成三个构成：
构成语言说明
结构HTML页面元素和内容
表现CSS网页元素的外观和位置等页面样式（如：颜色、大小等）
行为JavaScript网页模型的定义与页面交互
  1. Web标准要求页面实现：结构、表现、行为三层分离

结构：HTML（决定了身体）

表现：CSS（决定了样式美观）

行为：JavaScript（决定了交互的动态效果）

1.4 开发工具

Visual Studio Code（推荐） 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder

  1. 推荐插件

    1. 中文插件：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
    2. 浏览器运行：open in browser
    3. 文件夹样式：vscode-icons
    4. 自动重新加载网页：Live Server

  2. 导入别人发给你的插件压缩包（extensions.zip）

    将压缩包（extensions.zip）解压在 .vscode的 extensions文件中

    位置：C:\Users\Administrator（自己电脑用户名）\.vscode\extensions

  3. 常用快捷键

    1. 快速生产网页结构：！(英文感叹号)+tab | enter
    2. 保存：ctrl+s
    3. 运行：alt+b（右击 → Open in Default Browser）
    4. 快速复制一整行：ctrl + c
    5. 快速粘贴一整行：ctrl + v
    6. 快速删除（剪切）一整行：ctrl + x

二、HTML初体验

2.1 HTML初感知

2.1.1 HTML的概念
  1. HTML（Hyper Text Markup Language）中文译为：超文本标记语言

专门用于网页开发的语言，主要通过HTML标签实现网页中的文本、图片、音频、视频等内容

  1. 案例：文字变粗案例

体验构建一个网页，需要在网页中显示一个加粗的文字

文字要变粗
<strong>文字要变粗</strong>
<h1>文字要又大又粗</h1>

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

2.2HTML骨架结构

2.2.1 HTML页面固定结构
  1. 网页类似于一篇文章：

每一页文章内容是有固定的结构的，如：开头、正文、落款等……
网页中也是存在固定的结构的，如：整体、头部、标题、主体

  1. 网页中的固定结构是要通过特点的 HTML标签 进行描述的


2.3 注释

  1. 概念：
  • 为代码添加的具有解释性、描述性的信息.比如：产品说明书、电影介绍这种。
  • 浏览器执行代码时会忽略所有的注释
  1. 格式：<!-- 注释的内容 -->
  2. 快捷键：ctrl + /
更多推荐

【腾讯云 Cloud Studio 实战训练营】在Cloud Studio上使用React实现学生管理系统

一、前言为了提升办公效率，越来越多的人开始使用云工作站的方法进行“云办公”了，所谓云办公即把传统意义办公场所转移到网络浏览器中，这样做的好处有：实现真正的移动化办公，不再受设备、时间、地点等的束缚，随时随地都能访问云工作站进行办公。支持多人协同，大家都能在同一环境下进行工作，可对同文件进行修改。更能保证数据的安全性，以

Spring高手之路5，Dubbo服务注册与发现（文末送书）

目录一、介绍1、介绍Dubbo服务注册与发现的基本概念和重要性2、阐述Dubbo服务注册与发现的实现方式和应用场景二、Dubbo服务注册与发现的架构设计1、Dubbo服务注册与发现的总体架构设计。2、Dubbo服务提供方的注册与发现设计3、Dubbo服务消费者端的注册与发现设计三、Dubbo服务注册与发现的实现方式1、

使用cpolar配合Plex打造个人媒体站，畅享私人影音娱乐空间

文章目录1.前言2.Plex网站搭建2.1Plex下载和安装2.2Plex网页测试2.3cpolar的安装和注册3.本地网页发布3.1Cpolar云端设置3.2Cpolar本地设置4.公网访问测试5.结语1.前言用手机或者平板电脑看视频，已经算是生活中稀松平常的场景了，特别是各种碎片时间（追剧下饭、地铁上刷剧等等），看

【整理】text2kgbench: 语言模型根据本体生成知识图谱的能力

概述该论文的研究背景是大型语言模型（LLM）和基于本体的知识图谱（KG）在自然语言处理（NLP）任务中的性能提升。过去的方法存在一些问题，该论文提出的方法通过从文本中生成KG并遵循给定的本体，解决了这些问题，并鼓励了新的方法。本文提出了Text2KGBench，一个基准测试，用于评估语言模型根据本体从自然语言文本中生成

访问者模式简介

概念：访问者模式（Visitorpattern）是一种行为型设计模式，它允许在不修改已有对象结构的情况下定义新操作。该模式将数据结构与操作分离，使得新增操作变得容易，并且可以在不同的数据结构上复用相同的操作。特点：将操作封装到独立的访问者类中，使得添加新的操作变得简单。可以对一个对象结构中的元素进行多种不同类型的遍历和

Remix 和 Next.js 中实现依赖注入

文章目录在Remix中实现依赖注入在Next.js中实现依赖注入对比小结在Remix中实现依赖注入在Remix中实现依赖注入需要使用到context。下面是一个简单的示例：首先，在项目根目录下创建context.js文件：importReactfrom'react';constDependenciesContext=R

【Spatial-Temporal Action Localization（二）】论文阅读2017年

文章目录1.ActionVLAD:Learningspatio-temporalaggregationforactionclassification[code](https://github.com/rohitgirdhar/ActionVLAD/)[](https://github.com/rohitgirdhar/

platform驱动模型

一、总线驱动模型1.概念linux中将一个挂载在总线上的驱动的驱动模型分为三部分:device、driver和bus。device是用来保存设备信息的对象，存放在内核中一个klist_device链表中进行管理。driver当前设备的驱动信息对象，存放在内核中一个klist_driver链表中进行管理。bus是当前设备

【Python从入门到进阶】36、Selenium 动作交互

接上篇《35、selenium基本语法学习》上一篇我们介绍了selenium的基本语法，包括元素定位以及访问元素信息的操作。本篇我们来学习selenium操作网页的动作内容。一、什么是selenium动作操作动作操作是指使用Selenium调用WebDriver执行与用户交互相关的动作，例如单击、右键单击、悬停、拖放等

Redis集群搭建

Redis集群搭建1、主从模式部署1.1环境准备IP主机名角色192.168.54.200mastermaster192.168.54.201slave1slave1192.168.54.202slave2slave21.2下载下载地址：http://download.redis.io/releases/这里选择下载：

全链路自动化测试

背景从SOA架构到现在大行其道的微服务架构，系统越拆越小，整体架构的复杂度也是直线上升，我们一直老生常谈的微服务架构下的技术难点及解决方案也日渐成熟（包括典型的数据一致性，系统调用带来的一致性问题，还是跨节点跨机房复制带来的一致性问题都有了很多解决方案），但是有一个环节我们明显忽略了。在现在的微服务架构趋势下，微服务在

热文推荐
  1. 高精度地图定位在高速公路自动驾驶系统中的应用

    【摘要】自动驾驶已经成为全球汽车产业的战略发展方向，其中L3级高速公路自动驾驶是最有可能率先落地的自动驾驶系统，高精度地图和定位系统是自动驾驶系统的关键一部分，近年来发展迅速，已经达到可量产状态。文章首先分析了自动驾驶和高精度地图定位的发展现状，然后，对高精度地图和定位系统在自动驾驶系统的地理围栏判定和感知冗余方面的应

  2. Linux MQTT智能家居（MQTT框架）

    文章目录前言一、MQTT通信框架二、心跳包三、项目中使用到的软件四、MQTT中服务器和客户端建立连接的步骤总结前言本篇文章将会讲解MQTT的框架，我们这个项目使用到的MQTT源码库来自于一位大佬编写。大佬博客主页：主页一、MQTT通信框架MQTT（MessageQueuingTelemetryTransport）是一种

  3. OSI七层网络参考模型与数据流通过程

    OSI七层网络参考模型文章目录OSI七层网络参考模型1.OSI参考模型初步了解2.OSI参考模型理解3.数据流通的过程1.OSI参考模型初步了解OSI，英文为OpenSystemInterconnect，意为开放式系统互连，国际化标准组织(ISO)指定了OSI模型，这个模型把网络通信的工作定义成7个框架，分别是物理层，

  4. 《java并发编程的艺术》读书笔记 1~2章

    1.java并发基本概念1.1上下文切换实现原理：通过CPU时间片来实现这个机制。时间片是CPU分配给各个线程的时间，时间片非常短，CPU通过不停的切换线程执行，让我们感觉多个线程是同时执行的。CPU通过时间片分配算法来循环执行任务，当前任务执行一个时间片会切换到下一个任务，并保存上一个任务的状态，下次切换到这个任务时

  5. day44 数据库查询命令

    --isnull和isnotnull#1.查询没有上级领导的员工编号，姓名，工资selectempno,ename,salfromempwheremgrisnull;#2.查询emp表中没有奖金（comm）的员工姓名，工资，奖金selectename,sal,commfromempwherecommisnull;#3.

  6. 《Clean Code》

    整洁代码文章目录一、命名1.1变量1.2函数Rule11.【推荐】先整体后细节1.3类二、格式三、条件语句四、对象和数据结构一、命名以业务为导向命名[operateMaxSaleQtyLogs]>以技术命名[operateMaxSaleQtyLogList]>随意命名[logList]1.1变量Rule1.【推荐】变量

  7. 面向组织分析的内容

    声明本文是学习GB-T42859-2023航天产品质量问题三个面向分析方法实施要求.而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们1范围本文件规定了航天产品质量问题三个面向分析方法实施的一般要求、程序和分析内容。本文件适用于承担航天产品研制任务的单位对质量问题从产品、流程、组织等角度开展分析和改进

  8. 安全模型中的4个P

    引言：在安全模型中，经常会碰到PDR,PPDR，IPDRR，CARTA-PPDR等模型，其中的P，是predict？是prevent？还是protect？还是policy呢？一、4P字典意思解释1、predict：动词，预测的意思，tosaythatsomethingwillhappeninthefuture；2、pr

  9. pnpm入门教程

    一、概述1、更小使用npm时，依赖每次被不同的项目使用，都会重复安装一次。而在使用pnpm时，依赖会被存储在内容可寻址的存储中。2、更快依赖解析。仓库中没有的依赖都被识别并获取到仓库。目录结构计算。node_modules目录结构是根据依赖计算出来的。链接依赖项。所有以前安装过的依赖项都会直接从仓库中获取并链接到nod