【前端基础】HTML 基础

news2024/11/6 15:00:50

目标：掌握标签基本语法，能够独立布局文章页。

核心技术点

  • 网页组成

  • 排版标签

  • 多媒体标签及属性

  • 综合案例一 - 个人简介

    在这里插入图片描述

  • 综合案例二 - Vue 简介

    在这里插入图片描述

02-标签语法

HTML 超文本标记语言——HyperText Markup Language。

  • 超文本：链接
  • 标记：标签，带尖括号的文本

在这里插入图片描述

标签结构

  • 标签要成对出现，中间包裹内容
  • <>里面放英文字母（标签名）
  • 结束标签比开始标签多 /
  • 标签分类：双标签和单标签
<strong>需要加粗的文字<strong>
<br>
<hr>

在这里插入图片描述

03-HTML骨架

  • html：整个网页
  • head：网页头部，用来存放给浏览器看的信息，例如 CSS
    • title：网页标题
  • body：网页主体，用来存放给用户看的信息，例如图片、文字
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页主体
  </body>
</html>

提示

VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

04-标签的关系

作用：明确标签的书写位置，让代码格式更整齐

  • 父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

    在这里插入图片描述

  • 兄弟关系（并列关系）：兄弟标签换行要对齐

    在这里插入图片描述

05-注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

<!-- 我是 HTML 注释 -->

06-标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

  • 文字加粗
  • 字号逐渐减小
  • 独占一行（换行）

经验

  1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
  2. h2 ~ h6 没有使用次数的限制

07-段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

<p>段落</p>

显示特点：

  • 独占一行
  • 段落之间存在间隙

08-换行和水平线

  • 换行：br
  • 水平线：hr
<br>
<hr>

09-文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

在这里插入图片描述

提示：strong、em、ins、del 标签自带强调含义（语义）。

10-图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

src用于指定图像的位置和名称，是 的必须属性。

图像属性

在这里插入图片描述

属性语法

  • 属性名=“属性值”
  • 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

在这里插入图片描述

11-路径

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

  • 相对路径：从当前文件位置出发查找目标文件
  • 绝对路径：从盘符出发查找目标文件
    • Windows 电脑从盘符出发
    • Mac 电脑从根目录出发

相对路径

查找方式：从当前文件位置出发查找目标文件

特殊符号：

  • / 表示进入某个文件夹里面 → 文件夹名/
  • **. ** 表示当前文件所在文件夹 → ./
  • … 表示当前文件的上一级文件夹 → …/

在这里插入图片描述

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

<img  src="C:\images\mao.jpg">

提示

  1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /
  2. 特殊的绝对路径 → 网页底部友情链接

12-超链接标签

作用：点击跳转到其他页面。

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

<a href="https://www.baidu.com/">跳转到百度</a>

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

13-音频

<audio src="音频的 URL"></audio>

常用属性

在这里插入图片描述

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

14-视频

<video src="视频的 URL"></video>

常用属性

在这里插入图片描述

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

15-综合案例一-个人简介

网页制作思路：从上到下，先整体再局部，逐步分析制作

分析内容 → 写代码 → 保存 → 刷新浏览器，看效果

在这里插入图片描述

<h1>尤雨溪</h1>
<hr>
<p>尤雨溪，前端框架<a href="../17-综合案例二/vue简介.html">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。

</p>
<img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪">
<h2>学习经历</h2>
<p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p>
<h2>主要成就</h2>
<p>尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士， <ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯</ins> 。</p>
<p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p>
<h2>社会任职</h2>
<p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>

16-综合案例二-Vue简介

在这里插入图片描述

<h1>Vue.js</h1>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
<p>其作者为<a href="../16-综合案例一/个人简介.html" target="_blank">尤雨溪</a></p>
<h2>主要功能</h2>
<p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
<p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
<p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p>
<video src="../media/vue.mp4" controls></video>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2229614.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Es 基础操作 增删改查

Es 基础操作 增删改查

ES想知道大家应该都很熟悉了&#xff0c;今天就来稍微介绍入门下 也是为了帮助自己记忆 一. ES专属名称 看上面图就知道了 具体分片副本的就不讲那么细了 还有个倒排索引可以了解下 相当于把内容拆分成分词 然后每个分词都对应哪些内容对应的id 这样查到了分词就能查到哪些…
阅读更多...
echarts地图，柱状图，折线图实战

echarts地图，柱状图，折线图实战

1.地图 <template><div style"height: 100%;" class"cantainerBox"><div class"top"><div class"leftTop"><span class"firstSpan">推广进度</span><div>省份选择&#xff1a;&l…
阅读更多...
Redis高级篇之bigKey理论介绍以及优化

Redis高级篇之bigKey理论介绍以及优化

文章目录 0 前言1.MoreKey案例2.BigKey案例2.1多大算BigKey2.1.1 string和二级结构2.2 Bigkey危害、产生与发现2.2.1 bigkey的危害2.2.2 如何产生2.2.3 如何发现 2.2.4 大key如何删除3.BigKey生产调优3.1 redis.conf配置文件 LAZY FREEING相关说明 结语 0 前言 bigKey是面试经常…
阅读更多...
讲讲 kafka 维护消费状态跟踪的方法？

讲讲 kafka 维护消费状态跟踪的方法？

大家好&#xff0c;我是锋哥。今天分享关于【讲讲 kafka 维护消费状态跟踪的方法&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 讲讲 kafka 维护消费状态跟踪的方法&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Kafka 中&#x…
阅读更多...
UE5.4 PCG Layered Biomes插件

UE5.4 PCG Layered Biomes插件

B站学习链接 官方文档 一、PCGSpawn Preset&#xff1a;负责管理PCG要用到的植被资产有哪些 二、BiomesSettings&#xff1a;设置要使用的植被资产Layer、Spawn参数 1.高度Layer参数&#xff1a; 2.地形Layer&#xff1a;我这里用地形样条线绘制了一块地形Layer 绘制点和…
阅读更多...
深度了解flink(七) JobManager(1) 组件启动流程分析

深度了解flink(七) JobManager(1) 组件启动流程分析

前言 JobManager是Flink的核心进程&#xff0c;主要负责Flink集群的启动和初始化&#xff0c;包含多个重要的组件(JboMaster&#xff0c;Dispatcher&#xff0c;WebEndpoint等)&#xff0c;本篇文章会基于源码分析JobManagr的启动流程&#xff0c;对其各个组件进行介绍&#x…
阅读更多...
ChatGPT终于变成了智能搜索引擎

ChatGPT终于变成了智能搜索引擎

一、引言 今天即2024年11月1日&#xff0c;ChatGPT又给我们带来了惊喜。 继前一段时间新增加聊天搜索功能之后&#xff0c;ChatGPT又新增联网功能&#xff0c;可以像搜索引擎一样进行网页搜索&#xff0c;这样一个智能工具摇身一变成AI搜索了&#xff01; 有了AI搜索我们将可…
阅读更多...
ZK范式系列之zkVM介绍（1）

ZK范式系列之zkVM介绍（1）

1. 引言 zkVM&#xff08;Zero-Knowledge Virtual Machine&#xff0c;零知识虚拟机&#xff09;&#xff1a; 是一种功能强大的虚拟机&#xff0c;利用零知识证明 (zero-knowledge proof&#xff0c;ZKP) 来保证计算的完整性和隐私性。 零知识证明&#xff08;ZKP&#xff…
阅读更多...
颠覆微服务管理：用Traefik+Docker轻松实现自动化流量控制

颠覆微服务管理：用Traefik+Docker轻松实现自动化流量控制

#作者&#xff1a; Power0fMoney 文章目录 第一部分&#xff1a;背景和现状1.1 微服务架构的兴起1.2 容器技术的普及1.3 运维的痛点 第二部分&#xff1a;详细解释Traefik各个功能模块2.1 动态服务发现2.2 内置的Lets Encrypt支持2.3 中间件支持2.4 负载均衡策略2.5 监控和可视…
阅读更多...
BSV区块链为供应链管理带来效率革命

BSV区块链为供应链管理带来效率革命

​​发表时间&#xff1a;2024年10月10日 供应链管理是众多行业的重中之重&#xff0c;它确保了商品能够从制造商处顺畅地传递到消费者手中。然而&#xff0c;传统的供应链管理面临着许多挑战&#xff0c;包括缺乏透明度、延误、欺诈和协调上的低效率等等。 BSV区块链技术的出…
阅读更多...
Xcode 15.4 运行flutter项目，看不到报错信息详情？

Xcode 15.4 运行flutter项目，看不到报错信息详情？

Xcode升级后&#xff0c;遇到了奇怪的事情&#xff1a; 运行flutter项目&#xff0c;左侧栏显示有报错信息&#xff0c;但是点击并没有跳转出具体的error详情。【之前都会自己跳转出来的&#xff0c;升级后真的是无厘头】 方案&#xff1a; 点击左侧导航栏最右边的图标——>…
阅读更多...
Openlayers高级交互（14/20）：汽车移动轨迹动画（开始、暂停、结束）

Openlayers高级交互（14/20）：汽车移动轨迹动画（开始、暂停、结束）

本示例演示在vue+openlayers中实现轨迹动画，这里设置了小汽车开始，暂停，结束等的控制键，采用了线段步长位置获取坐标来定位点的方式来显示小车的动态。 效果图 专栏名称内容介绍Openlayers基础实战 （72篇）专栏提供73篇文章，为小白群体提供基础知识及示例演示，能解决基…
阅读更多...
【深入浅出】深入浅出Bert（附面试题）

【深入浅出】深入浅出Bert（附面试题）

本文的目的是为了帮助大家面试Bert&#xff0c;会结合我的面试经历以及看法去讲解Bert&#xff0c;并非完整的技术细致讲解&#xff0c;介意请移步。 深入浅出】深入浅出Bert&#xff08;附面试题&#xff09; 网络结构Pre-TrainingFine-Tuning 输入编码词向量编码句子编码位置…
阅读更多...
保存暄桐的这份清福清单 让福气慢慢积累

保存暄桐的这份清福清单 让福气慢慢积累

鸿福易享&#xff0c;清福难得。真正的清福&#xff0c;不是多么好的物质基础&#xff0c;而是来源于内心的平安喜乐。生活于纷繁的现代社会&#xff0c;想获得清净的福德实属不易&#xff0c;于是&#xff0c;便更需要我们为自己创造条件。暄桐送你一份清福清单&#xff0c;当…
阅读更多...
Profinet、Ethernet/IP 工业以太网无线通信解决方案

Profinet、Ethernet/IP 工业以太网无线通信解决方案

在工业现场&#xff0c;我们常常会面临这样的困扰&#xff1a;两个PLC之间、PLC 跟远程IO之间或者PLC 跟伺服之间由于种种原因不方便布线&#xff0c;严重影响了通讯效率和生产进程。为了解决这一难题&#xff0c;三格电子设计了一款工业以太网无线网桥&#xff0c;这款无线网桥…
阅读更多...
【Flask】四、flask连接并操作数据库

【Flask】四、flask连接并操作数据库

目录 前言 一、 安装必要的库 二、配置数据库连接 三、定义模型 四、操作数据库 1.添加用户 2.删除用户 3.更新用户信息 4查询所有用户 五、测试结果 前言 在Flask框架中&#xff0c;数据库的操作是一个核心功能&#xff0c;它允许开发者与后端数据库进行交互&#xf…
阅读更多...
NGINX 交叉编译 arm32

NGINX 交叉编译 arm32

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…
阅读更多...
如何在Linux下安装和配置Docker

如何在Linux下安装和配置Docker

文章目录 安装前的准备在Debian/Ubuntu上安装Docker添加Docker仓库安装Docker验证安装 在CentOS/RHEL上安装Docker安装必要的软件包设置Docker仓库安装Docker启动Docker服务 Docker的基本使用拉取一个镜像运行一个容器 配置Docker创建Docker目录使用非root用户运行Docker 结语 …
阅读更多...
什么是感知器？

什么是感知器？

神经网络是松散地基于人脑结构的信号处理工具。它们通常与人工智能 (AI) 相关。我不喜欢“人工智能”这个词&#xff0c;因为它不且简单化。如果将“智能”定义为快速进行数值计算的能力&#xff0c;那么神经网络是人工智能。但在我看来&#xff0c;智能远不止于此——它是设计…
阅读更多...
【js逆向学习】某多多anti_content逆向（补环境）

【js逆向学习】某多多anti_content逆向（补环境）

文章目录 声明逆向目标逆向分析逆向过程总结 声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023