零基础学习HTML5

news2025/1/12 23:39:47

1. 使用软件

vscode + 谷歌浏览器
vscode下载地址：https://code.visualstudio.com/
谷歌可以使用360软件管家安装

2. 安装插件

在vscode中安装插件：open in browser，点击Extensions后搜索对应插件名然后点击安装Install
在这里插入图片描述
安装完成后可在html文件中右键多了两个选择：
在这里插入图片描述

3. 标签语法

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

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

标签结构

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

4. HTML骨架

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

提示

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

5. 标签的关系

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

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

    <html>
	<body></body>
</html>

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

    <head></head>
<body></body>

6. 注释

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

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

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

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

7. 标题标签

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

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

显示特点：

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

经验

  1. h1 标签在一个网页中只能用一次（这是一种规范写法但并不强制），用来放新闻标题或网页的 logo
  2. h2 ~ h6 没有使用次数的限制

8. 段落标签

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

<p>段落</p>

显示特点：

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

9. 换行和水平线

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

10. 文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
在这里插入图片描述

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

10-图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

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

图像属性

在这里插入图片描述

属性语法

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

12. 路径

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

路径分类：

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

相对路径

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

特殊符号：

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

绝对路径

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

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

提示

  1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /
  2. 特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接

13. 超链接标签

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

<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>

14. 音频

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

常用属性
在这里插入图片描述

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

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

15. 视频

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

常用属性
在这里插入图片描述

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

16. 综合案例一-个人简介

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

分析内容 → 写代码 → 保存 → 刷新浏览器，看效果
在这里插入图片描述

<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>

17. 综合案例二-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/1105116.html

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

相关文章

【LeetCode】543. 二叉树的直径

【LeetCode】543. 二叉树的直径

543. 二叉树的直径&#xff08;简单&#xff09; 思路 对于任一结点&#xff0c;以此结点为根的diameter就可以表示为左子树高度 右子树高度&#xff0c;而二叉树的diameter就是所有结点为根的diameter中最大的那个。因此&#xff0c;变量 maxLen 用来保存当前遍历过的节点的…
阅读更多...
phpstudy_2016-2018_rce_backdoor 漏洞复现

phpstudy_2016-2018_rce_backdoor 漏洞复现

phpstudy_2016-2018_rce_backdoor 漏洞复现 Remote Command Execute 打开 bp 打开代理浏览器 访问 php 页面 回到 bp 查看 http 历史&#xff0c;找到刚刚访问的 php 页面 发送到 Repeater 转到 Repeater php 页面请求内容加 Accept-Charset: 修改 Accept-Encodi…
阅读更多...
Comsol电磁铁仿真

Comsol电磁铁仿真

简介 Comsol是一款多物理场仿真软件&#xff0c;可以完成固体力学、流体力学、传热学和电磁学的仿真。本文将介绍使用Comsol完成电磁铁仿真的主要流程&#xff0c;计算铁芯的受力。 步骤 1.建立模型并设置材料 建立二维旋转对称模型&#xff0c;绿色为动铁&#xff0c;材料…
阅读更多...
STM32F103外部晶振8MHZ改为16MHz的使用

STM32F103外部晶振8MHZ改为16MHz的使用

STM32F103外部晶振8MHZ改为16MHz的使用 目录 STM32F103外部晶振8MHZ改为16MHz的使用前言一、修改标准函数库的方法1、stm32f10x.h修改HSE_VALUE2 、system stm32f10x.c的SetSysClockTo72&#xff08;&#xff09;函数修改3、不同晶振的统一配置的方式4 、时间晶振修改5、修改Ta…
阅读更多...
基于STM32F407的FreeRTOS学习笔记（1）——环境搭建

基于STM32F407的FreeRTOS学习笔记（1）——环境搭建

以前使用STM32单片机一直停留在逻辑开发以及前后台系统&#xff0c;而真正被广泛使用的则是RTOS。 前后台系统则是我们常用的&#xff0c;使用一个主循环许多的调用函数这些构成了后系统&#xff0c;利用中断进行异常处理则是前系统。 而RTOS则是将任务按照优先级排列&#xf…
阅读更多...
怎么压缩图片？图片过大这样压缩变小

怎么压缩图片？图片过大这样压缩变小

在日常生活中&#xff0c;我们常常会遇到需要上传或发送图片的情况&#xff0c;然而&#xff0c;很多时候图片的大小会成为问题&#xff0c;因为过大的图片可能会导致传输速度变慢&#xff0c;甚至无法上传。那么&#xff0c;如何将这些过大的图片压缩变小呢&#xff1f; 一、嗨…
阅读更多...
【C++进阶之路】类型转换

【C++进阶之路】类型转换

文章目录 类型转换1.C语言的类型转换1.1整形提升1.2算术转换1.3强制类型转换 2.C类型转换2.1static_cast2.2reinterpret_cast2.3const_cast2.3dynamic_cast 总结 类型转换 1.C语言的类型转换 1.1整形提升 在写顺序表的插入函数时&#xff0c;我们的接口实现是这样的&#xf…
阅读更多...
Confluence 自定义展示页面

Confluence 自定义展示页面

1. 概述 Confluence 作为知识库可通过JS脚本方式&#xff0c;根据登录用户或用户组进行前端页面的自定义 2. 实现方式 Confluence →管理→自定义HTML 嵌入对应JS脚本&#xff0c;示例如下 <script type"text/javascript">jQuery(#footer).html(<div>…
阅读更多...
UE5 Python脚本自动化Sequence Key帧

UE5 Python脚本自动化Sequence Key帧

前言 码上1024了&#xff0c;给大家分享一个UE5的脚本小功能&#xff0c;UE5中Sequence动态Key功能&#xff0c;这样我们就可以根据我们的数据动态更新了&#xff0c;非常实用&#xff0c;适合刚入门或者小白&#xff0c;接下来我就把整个过程分享给大家。 过程 新建一个工程…
阅读更多...
E049-论坛漏洞分析及利用-针对bwapp进行web渗透测试的探索

E049-论坛漏洞分析及利用-针对bwapp进行web渗透测试的探索

课程名称&#xff1a; E049-论坛漏洞分析及利用-针对bwapp进行web渗透测试的探索 课程分类&#xff1a; 论坛漏洞分析及利用 --------------------------------------------------------------------------------------------------------------------------------- 实验等…
阅读更多...
用一段爬虫代码爬取高音质音频示例

用一段爬虫代码爬取高音质音频示例

以下是一个使用Reachability库和Objective-C编写的爬虫程序&#xff0c;用于爬取高音质的免费音频。通过https://www.duoip.cn/get_proxy的代码示例完美抓取数据。 #import <Foundation/Foundation.h> #import <Reachability/Reachability.h>interface AudioCrawle…
阅读更多...
vue3学习（八）--- 组件相关

vue3学习（八）--- 组件相关

文章目录 全局组件批量注册全局组件 局部组件递归组件组件定义名称方式1.增加一个script 通过 export 添加name2.直接使用文件名当组件名3.使用插件 unplugin-vue-define-options 动态组件异步组件 一个 Vue 组件在使用前需要先被“注册”&#xff0c;这样 Vue 才能在渲染模板时…
阅读更多...
从实时数据库转战时序数据库，他陪伴 TDengine 从 1.0 走到 3.0

从实时数据库转战时序数据库，他陪伴 TDengine 从 1.0 走到 3.0

关于采访嘉宾 在关胜亮的学生时代&#xff0c;“神童”这个称号如影随形&#xff0c;很多人初听时会觉得这个称谓略显夸张&#xff0c;有些人还会认为这是不是就是一种调侃&#xff0c;但是如果你听说过他的经历&#xff0c;就会理解这一称号的意义所在了。 受到教师母亲的影…
阅读更多...
Mobpush厂商通道回执配置指南

Mobpush厂商通道回执配置指南

为了帮助客户追踪和分析推送效果&#xff0c;Mobpush为APP开发者提供了用户收到推送后行为特征的数据分析&#xff0c;但由于用户使用的设备存在较大差异&#xff0c;不同厂商通道之间配置存在较大差异&#xff0c;不同的厂商通道对送达、展示和点击数据回执的支持程度各不相同…
阅读更多...
汽车智能制造中的RFID技术在供应链生产管理中的应用

汽车智能制造中的RFID技术在供应链生产管理中的应用

行业背景 汽车零部件工业是汽车工业中至关重要的一部分&#xff0c;对于汽车工业的长期稳定发展起着基础性的作用&#xff0c;近年来&#xff0c;汽车配件配套市场规模达到了2000亿元&#xff0c;维修市场达到了600亿元&#xff0c;随着汽车国产化的推进&#xff0c;汽车零部件…
阅读更多...
机器学习-ROC曲线：技术解析与实战应用

机器学习-ROC曲线：技术解析与实战应用

目录 一、引言ROC曲线简介 二、ROC曲线的历史背景二战雷达信号检测在医学和机器学习中的应用横跨多个领域的普及 三、数学基础True Positive Rate&#xff08;TPR&#xff09;与False Positive Rate&#xff08;FPR&#xff09;True Positive Rate&#xff08;TPR&#xff09;F…
阅读更多...
DNS域名解析与Web服务

DNS域名解析与Web服务

一、DNS 域名解析 1、概念&#xff1a; (1) DNS&#xff1a; DNS&#xff08;Domain Name System&#xff09;是一种用于将可读的域名&#xff08;如www.baidu.com&#xff09;转换为计算机可理解的IP地址&#xff08;如192.168.1.1&#xff09;的分布式命名系统&#xff0c…
阅读更多...
uniapp(uncloud) 使用生态开发接口详情5(云公共模块)

uniapp(uncloud) 使用生态开发接口详情5(云公共模块)

1.uniCloud官网 云对象中云公共模块: 网站: https://uniapp.dcloud.net.cn/uniCloud/cf-common.html // 官网介绍 cloudfunctions├─common // 云函数公用模块目录| └─hello-common // 云函数公用模块| ├─package.json| └─index.js // 公用模块代码&#xff0…
阅读更多...
BaiChuan2保姆级微调范例

BaiChuan2保姆级微调范例

前方干货预警&#xff1a;这可能是你能够找到的&#xff0c;最容易理解&#xff0c;最容易跑通的&#xff0c;适用于各种开源LLM模型的&#xff0c;同时支持多轮和单轮对话数据集的大模型高效微调范例。 我们构造了一个修改大模型自我认知的3轮对话的玩具数据集&#xff0c;使用…
阅读更多...
Scrapy设置代理IP方法（超详细）

Scrapy设置代理IP方法（超详细）

Scrapy是一个灵活且功能强大的网络爬虫框架&#xff0c;用于快速、高效地提取数据和爬取网页。在某些情况下&#xff0c;我们可能需要使用代理IP来应对网站的反爬机制、突破地理限制或保护爬虫的隐私。下面将介绍在Scrapy中设置代理IP的方法&#xff0c;以帮助您更好地应对这些…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023