零基础学习HTML5

1. 使用软件

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

2. 安装插件

在vscode中安装插件：open in browser，点击Extensions后搜索对应插件名然后点击安装Install
在这里插入图片描述
安装完成后可在html文件中右键多了两个选择：
在这里插入图片描述
或者安装live server插件，然后右键选择Open with live Server他就会帮助我们启动浏览器，然后使用win + ➡的方式切屏，就可以看到实时的效果展示。

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.mzph.cn/news/111295.shtml

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

相关文章

linux 下的java gate服务断掉的原因及解决思路

linux 下的java gate服务断掉的原因及解决思路

一.查询断掉的原因 1.查看gate日志&#xff0c;发现没有报错信息&#xff0c;突然就断了 2.查看是不是OOM导致 dmesg | grep java 发现确实Out of Memory了 3.发生问题的原因&#xff1a; 默认情况下, Linux kernels(内核)允许进程申请的量超过系统可用内存. 这是因为,在大多数…
阅读更多...
计算机操作系统-第十一天

计算机操作系统-第十一天

目录 1、进程的状态 创建态与就绪态 运行态 终止态 新建态 结束态 进程状态的转换 进程的组织方式 链接方式&#xff08;常见&#xff09; 索引方式&#xff08;少见&#xff09; 本节思维导图 1、进程的状态 创建态与就绪态 1、进程正在被创建时&#xff0c;处于…
阅读更多...
零基础搭建个人网站详细流程

零基础搭建个人网站详细流程

最近两天&#xff0c;为了给自己的工具类APP备案&#xff0c;买了阿里云ECS和域名。虽然很想说离线工具APP不用联网&#xff0c;但是现实就很无语。言归正传&#xff0c;既然买了总不能将它们闲置着&#xff0c;就诞生了建站的想法&#xff0c;至少还能放个用户协议和隐私协议。…
阅读更多...
01-初识HTML和CSS

01-初识HTML和CSS

1.HTML与CSS 1.1.什么是HTML&#xff1f;什么是CSS&#xff1f; HTML是HyperText Markup Language(超文本标记语言) ​ 它不是一种编程语言&#xff0c;而是一种标记语言&#xff0c;用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者…
阅读更多...
nodejs+vue云旅青城系统-旅游网站

nodejs+vue云旅青城系统-旅游网站

用户可以实现首页、个人中心、订票信息管理、路线制定管理等。不仅使服务管理难度变低了&#xff0c;还提升了管理的灵活性。目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 …
阅读更多...
互联网Java工程师面试题·Java 总结篇·第九弹

互联网Java工程师面试题·Java 总结篇·第九弹

目录 75、阐述 JDBC 操作数据库的步骤。 76、Statement 和 PreparedStatement 有什么区别&#xff1f;哪个性 能更好&#xff1f; 77、使用 JDBC 操作数据库时&#xff0c;如何提升读取数据的性能&#xff1f;如何提升更新数据的性能&#xff1f; 78、在进行数据库编程时&a…
阅读更多...
定制效果在线定制印刷系统源码 DIY在线定制系统源码 云印刷定制系统源码手机、PC端实时互通

定制效果在线定制印刷系统源码 DIY在线定制系统源码 云印刷定制系统源码手机、PC端实时互通

支持各类产品的在线定制&#xff0c;无论是水杯雨伞U盘还是T恤衬衫四件套&#xff0c;均可轻松进行定制 独创制作间概念&#xff0c;同一套模板可以重复对应不同制作间 手机、PC端实时互通&#xff0c;客户可通过任意途径进行图片上传、编辑&#xff0c;一方修改另一方即时可见…
阅读更多...
开源游戏引擎和模拟器的项目合集 | 开源专题 No.38

开源游戏引擎和模拟器的项目合集 | 开源专题 No.38

yuzu-emu/yuzu Stars: 26.2k License: GPL-3.0 yuzu是一款全球最受欢迎的开源Nintendo Switch模拟器&#xff0c;由Citra创建者编写。它采用C语言编写&#xff0c;并具有可移植性&#xff0c;在Windows和Linux上进行积极维护。该模拟器能够全速运行大多数商业游戏&#xff0c…
阅读更多...
Go 存储系列：LSM存储引擎 LevelDB

Go 存储系列：LSM存储引擎 LevelDB

概念介绍 LSM-Tree 被是一种面向写多读少应用场景的数据结构 &#xff0c;被 Hbase、RocksDB 等强力 NoSQL 数据库采用作为底层文件组织方式。 简单的LSM-Tree 包含 2 层树状数据结构&#xff1a; Memtable 并完全驻留在内存中&#xff08;假设 T0&#xff09; SStables 存储…
阅读更多...
leetcode - 319. Bulb Switcher

leetcode - 319. Bulb Switcher

Description There are n bulbs that are initially off. You first turn on all the bulbs, then you turn off every second bulb. On the third round, you toggle every third bulb (turning on if it’s off or turning off if it’s on). For the ith round, you toggl…
阅读更多...
数字图像处理实验记录四（图像的空间域增强-平滑处理）

数字图像处理实验记录四（图像的空间域增强-平滑处理）

前言&#xff1a;要是是实验报告赶工的话&#xff0c;建议总结上网抄&#xff0c;或者重构我的总结&#xff0c;仅供学习参考&#xff0c;不要照抄 文章目录 一、基础知识1&#xff0c;噪声2&#xff0c;椒盐噪声3&#xff0c;高斯噪声4&#xff0c;滤波器5&#xff0c;均值滤…
阅读更多...
如何保护IP在线隐私，提高网络安全？

如何保护IP在线隐私，提高网络安全？

前言 随着互联网的发展&#xff0c;越来越多的个人和企业开始关注网络安全和IP隐私保护。特别是在一些敏感领域&#xff0c;如金融、医疗等&#xff0c;安全和隐私问题更是不容忽视。本文将介绍如何通过运用代理IP来保护IP在线隐私&#xff0c;提高网络安全&#xff0c;并且会…
阅读更多...
智能矩阵系统解决的问题？

智能矩阵系统解决的问题？

智能矩阵系统可以解决的问题多种多样&#xff0c;它主要通过人工智能技术应用于矩阵系统&#xff0c;解决一些传统方法难以处理的问题。 以下是一些常见的应用场景&#xff1a; 1. 数据管理&#xff1a;智能矩阵系统可以有效地管理大量的数据&#xff0c;包括数据的存储、检索…
阅读更多...
负载均衡、代理和动静分离的战略

负载均衡、代理和动静分离的战略

一、Nginx简介 1.1 概述 Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理服务器，特点是占有内存少，并发能力强，能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数 。 1.2正向代理与反向代理 1.2.1正向代理 正向代理：如果把局域网外的 Internet 想象…
阅读更多...
flutter 创建插件

flutter 创建插件

资料&#xff1a; flutter与原生通信的方式简介 - 简书 完整流程 Flutter 集成 Golang 多语言跨端开发基础案例 - 知乎 https://www.cnblogs.com/webabcd/p/flutter_lib_plugin_plugin_ios.html 步骤1、创建插件 我创建的插件名字是konnect_im_sdk 选择的语言是 java和swi…
阅读更多...
centos 内核对应列表 内核升级 linux

centos 内核对应列表 内核升级 linux

近期服务器频繁出现问题&#xff0c;找运维同事排查&#xff0c;说是系统版本和内核版本和官方不一致&#xff0c;如下&#xff1a; Release 用的是7.8, kernal 用的是 5.9 我一查确实如此&#xff1a; 内核&#xff1a; Linux a1messrv1 5.9.8-1.el7.elrepo.x86_64 发行版 Cen…
阅读更多...
Day4力扣打卡

Day4力扣打卡

打卡记录 同积元组&#xff08;哈希表 排列组合&#xff09; 链接 思路&#xff1a;用哈希表将数组中出现的两不同数乘积依次记录&#xff0c;将出现两次以上的乘积组通过排列组合计算总情况个数。 class Solution { public:int tupleSameProduct(vector<int>& num…
阅读更多...
彩虹云商城自助发卡商城-卡卡云主题

彩虹云商城自助发卡商城-卡卡云主题

彩虹云商城自助发卡商城-卡卡云主题 全新SUP模板/知识付费模板/卡卡云模板&#xff0c;首页美化&#xff0c;登陆页美化修复了pc端显示不正常的问题。 将这俩个数据库文件导入数据库。 其他的直接导入网站根目录覆盖就好。 PS&#xff1a;若首页显示不正常&#xff1a;请去…
阅读更多...
web：[MRCTF2020]Ez_bypass

web：[MRCTF2020]Ez_bypass

题目 点进题目 调整一下 进行代码审计&#xff0c;先看第一段 if(isset($_GET[gg])&&isset($_GET[id])) {$id$_GET[id];$gg$_GET[gg];if (md5($id) md5($gg) && $id ! $gg) {echo You got the first step; get参数传参&#xff0c;后判断md5后的值是否相等&…
阅读更多...
easyphoto 妙鸭相机

easyphoto 妙鸭相机

AIGC专栏7——EasyPhoto 人像训练与生成原理详解-CSDN博客如何训练一个高品质的人像Lora与应用高品质Lora的链路对于写真生成而言非常重要。由《LoRA: Low-Rank Adaptation of Large Language Models》 提出的一种基于低秩矩阵的对大参数模型进行少量参数微调训练的方法&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023