【前端基础】HTML 基础

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

核心技术点

  • 网页组成

  • 排版标签

  • 多媒体标签及属性

  • 综合案例一 - 个人简介

    在这里插入图片描述

  • 综合案例二 - 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.rhkb.cn/news/462609.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

UE5相机系统初探（一）

UE5相机系统初探（一）

UE5相机系统初探&#xff08;一&#xff09; 和Unity类似&#xff0c;UE的相机也是由名为Camera的component控制的。那么&#xff0c;在UE中要如何实现一个跟随玩家的第三人称相机呢&#xff1f;假设我们已经有了一个表示玩家的类ACF_Character&#xff0c;首先第一步就是要先在…
阅读更多...
数据库-＞联合查询

数据库-＞联合查询

目录 一、联合查询 1.联合查询 2.多表联合查询时MYSQL内部是如何进⾏计算的 3.多表联合查询 3.1语法 3.2指定多个表&#xff0c;进行联合查询 3.3通过表与表中的链接条件过滤掉无效数据 3.4通过指定列查询&#xff0c;精简查询结果​编辑 3.5可以通过给表起别名的方式&…
阅读更多...
有关《WebGIS开发 从入门到实践》的分享

有关《WebGIS开发 从入门到实践》的分享

从30号发布了新书的上架消息之后&#xff0c;已有不少的朋友、学生下单购买了&#xff0c;有部分已经收到了书了&#xff0c;收到书大致翻阅后也第一时间向我进行了反馈。本文结合我在写本书时的思考和收到的大家反馈&#xff0c;给大家介绍一下我们花了三年写完出的《WebGIS开…
阅读更多...
YOLO——yolo v4(2)

YOLO——yolo v4(2)

文章目录 一、损失函数改进1.GIOU损失2.DIOU损失3.CIOU损失 二、非极大值抑制 YOLOv4是一种先进的目标检测算法&#xff0c;它在YOLO系列的基础上进行了多项改进和优化。 一、损失函数改进 IOU损失表示预测框A和真实框B之间交并比的差值&#xff0c;反映预测检测框的检测效果。…
阅读更多...
网络请求优化：理论与实践

网络请求优化：理论与实践

文章目录 引言1. DNS 解析耗时因素优化措施扩展阅读 2. 创建连接耗时因素优化措施扩展阅读 3. 发送 / 接收数据耗时因素优化措施扩展阅读 4. 关闭连接耗时因素优化措施扩展阅读 总结 引言 网络请求的性能会直接影响到用户体验。本文将探讨网络请求的各个步骤&#xff0c;以及如…
阅读更多...
R语言结构方程模型（SEM）

R语言结构方程模型（SEM）

原文链接&#xff1a;R语言结构方程模型&#xff08;SEM&#xff09;https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247624956&idx4&sn295580a016a86cfee8ee2277c93e32d5&chksmfa8da91bcdfa200da897f1f267492039865bdfe5d75a1c6e6df92ff5005e0eb5cc33a…
阅读更多...
android数组控件Textview

android数组控件Textview

说明&#xff1a;android循环控件&#xff0c;注册和显示内容 效果图&#xff1a; step1: E:\projectgood\resget\demozz\IosDialogDemo-main\app\src\main\java\com\example\iosdialogdemo\TimerActivity.java package com.example.iosdialogdemo;import android.os.Bundl…
阅读更多...
GA/T1400视图库平台EasyCVR视频分析设备平台微信H5小程序：智能视频监控的新篇章

GA/T1400视图库平台EasyCVR视频分析设备平台微信H5小程序：智能视频监控的新篇章

GA/T1400视图库平台EasyCVR是一款综合性的视频管理工具&#xff0c;它兼容Windows、Linux&#xff08;包括CentOS和Ubuntu&#xff09;以及国产操作系统。这个平台不仅能够接入多种协议&#xff0c;还能将不同格式的视频数据统一转换为标准化的视频流&#xff0c;通过无需插件的…
阅读更多...
【机器学习】26. 聚类评估方法

【机器学习】26. 聚类评估方法

聚类评估方法 1. Unsupervised Measure1.1. Method 1: measure cohesion and separationSilhouette coefficient Method 2&#xff1a;Correlation between two similarity matricesMethod 3&#xff1a;Visual Inspection of similarity matrix 2. Supervised measures3. 决定…
阅读更多...
不适合的学习方法

不适合的学习方法

文章目录 不适合的学习方法1. 纯粹死记硬背2. 过度依赖单一资料3. 线性学习4. 被动学习5. 一次性学习6. 忽视实践7. 缺乏目标导向8. 过度依赖技术9. 忽视个人学习风格10. 过于频繁的切换 结论 以下是关于不适合的学习方法的更详细描述&#xff0c;包括额外的内容和相关公式&…
阅读更多...
【FNENet】基于帧级非语言特征增强的情感分析

【FNENet】基于帧级非语言特征增强的情感分析

这篇文章语言极其晦涩难懂&#xff0c;内容和同专栏下的CENet中每一张图都百分之95相似&#xff0c;有些描述位置和内容都一模一样&#xff0c;还并且没有引用人家 abstract&#xff1a; 多模态情感分析&#xff08;Multimodal Sentiment Analysis&#xff0c; MSA&#xff09…
阅读更多...
贪心算法习题其三【力扣】【算法学习day.20】

贪心算法习题其三【力扣】【算法学习day.20】

前言 ###我做这类文档一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&am…
阅读更多...
shell脚本案例：RAC配置多路径时获取磁盘设备WWID和磁盘大小

shell脚本案例：RAC配置多路径时获取磁盘设备WWID和磁盘大小

使用场景 在RAC配置多路径时&#xff0c;需要获取到磁盘设备的wwid。因为RAC的磁盘配置是提前规划好的&#xff0c;只知道wwid&#xff0c;不知道磁盘对应大小&#xff0c;是不知道应该如何配置多路径的mutipath.conf文件的&#xff1b;而凭借肉眼手工去对应磁盘设备的wwid和大…
阅读更多...
【毫米波雷达（三）】汽车控制器启动流程——BootLoader

【毫米波雷达（三）】汽车控制器启动流程——BootLoader

汽车控制器启动流程——BootLoader 一、什么是Bootloader(BT)&#xff1f;二、FBL、PBL、SBL、ESS的区别三、MCU的 A/B分区的实现 一、什么是Bootloader(BT)&#xff1f; BT就是一段程序&#xff0c;一段引导程序。它包含了启动代码、中断、主程序等。 雷达启动需要由BT跳转到…
阅读更多...
论技术思维和产品思维

论技术思维和产品思维

大家好&#xff0c;我是农村程序员&#xff0c;独立开发者&#xff0c;前端之虎陈随易。 这是我的个人网站&#xff1a;https://chensuiyi.me。 我的所以文章都可以在我的个人网站找到&#xff0c;欢迎访问&#xff0c;也欢迎与我交朋友。 程序员做独立开发&#xff0c;技术思…
阅读更多...
【python】flash-attn安装

【python】flash-attn安装

这个命令&#xff1a; 确保使用正确的 CUDA 12.6 工具链 设置必要的 CUDA 环境变量 包含了常见的 GPU 架构支持 利用你的128核心进行并行编译 # 清理之前的安装 proxychains4 pip uninstall -y flash-attn# 获取 CUDA 路径 CUDA_PATH$(dirname $(dirname $(which nvcc)))# 使用…
阅读更多...
RFID资产管理

RFID资产管理

随着物联网和智能制造的发展&#xff0c;RFID资产管理逐渐成为企业提升运营效率的重要工具。利用RFID技术&#xff0c;企业能够实时跟踪和管理各种固定资产&#xff0c;从而提高资产利用率&#xff0c;降低运营成本。在现代化的管理体系中&#xff0c;RFID资产管理不仅限于资产…
阅读更多...
linux查看系统架构的命令

linux查看系统架构的命令

两种方式&#xff0c;以下以中标麒麟为示例&#xff1a; 1.cat /proc/verison Linux version 3.10.0-862.ns7_4.016.mips64el mips64el即为架构 2.uname -a 输出所有内容 Linux infosec 3.10.0-862.ns7_4.016.mips64el #1 SMP PREEMPT Mon Sep 17 16:06:31 CST 2018 mips64el…
阅读更多...
Transformer+KAN系列时间序列预测代码

Transformer+KAN系列时间序列预测代码

前段时间&#xff0c;来自 MIT 等机构的研究者提出了一种非常有潜力的替代方法 ——KAN。该方法在准确性和可解释性方面表现优于 MLP。而且&#xff0c;它能以非常少的参数量胜过以更大参数量运行的 MLP。 KAN的发布&#xff0c;引起了AI社区大量的关注与讨论&#xff0c;同时…
阅读更多...
分享一个免费的网页转EXE的工具

分享一个免费的网页转EXE的工具

HTML2EXE是一款在Windows系统下将Web项目或网站打包成EXE执行程序的免费工具。这款工具能够将单页面应用、传统HTMLJavaScriptCSS生成的网站、Web客户端&#xff0c;以及通过现代前端框架&#xff08;如Vue&#xff09;生成的应用转换成独立的EXE程序运行。它支持将任何网站打包…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023