前端HTML入门基础

阶段目标：掌握HTML、CSS常用布局技巧，能够独立制作网页。

day01：HTML 基础

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

01-今日课程介绍

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

核心技术点

  • 网页组成

  • 排版标签

  • 多媒体标签及属性

  • 综合案例一 - 个人简介

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JNxAEqn8-1691943677571)(assets/1680242340931.png)]

  • 综合案例二 - Vue 简介

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d9gTtlq6-1691943677572)(assets/1680242362352.png)]

02-标签语法

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wTYqCuHH-1691943677572)(assets/1680242502155.png)]

标签结构

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cTcBqfVE-1691943677573)(assets/1680242555328.png)]

03-HTML骨架

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

提示

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

04-标签的关系

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

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zqbtHWFE-1691943677573)(assets/1680255766672.png)]

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BkEp7H2I-1691943677574)(assets/1680255775150.png)]

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-文本格式化标签

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ilWBXoDi-1691943677575)(assets/1680314078647.png)]

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

10-图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

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

图像属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MvmeUX5y-1691943677575)(assets/1680314152822.png)]

属性语法

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vHhllP85-1691943677576)(assets/1680314195951.png)]

11-路径

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

路径分类：

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

相对路径

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

特殊符号：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gaJhukbt-1691943677576)(assets/1680314322997.png)]

绝对路径

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

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

提示

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mvGn0urm-1691943677577)(assets/1680314503056.png)]

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>

常用属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a4QS5NKz-1691943677577)(assets/1680314629860.png)]

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

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

14-视频

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

常用属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wxRgRIKC-1691943677578)(assets/1680314703735.png)]

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WqLB8ArI-1691943677578)(assets/1680314754557.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9AeckOSd-1691943677579)(assets/1680314805528.png)]

<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/35476.shtml

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

相关文章

SQL中CONVERT函数格式:CONVERT(data_type,expression[,style])

SQL中CONVERT函数格式:CONVERT(data_type,expression[,style])

sqlserver convert()函数的使用方法_convert sqlserver_qq_37528515的博客-CSDN博客 SQL中CONVERT函数格式:CONVERT(data_type,expression[,style]) 说明&#xff1a; data_type:目标系统所提供的数据类型&#xff0c;如果转换时没有指定数据类型的长度&#xff0c;则 SQL Serv…
阅读更多...
Maven基础总结

Maven基础总结

前言 Maven 是一个项目管理工具&#xff0c;可以对 Java 项目进行构建、依赖管理。 基本要求掌握 配置Maven环境直接查。 得会在IDEA创建Maven的java项目吧、会创建Maven的web项目吧、会创建多模块项目吧。 得会配置插件pligin、依赖dependency吧 一、Maven四大特性 1、…
阅读更多...
CSS：服务器字体 与 响应式布局（用法 + 例子 + 效果）

CSS：服务器字体 与 响应式布局（用法 + 例子 + 效果）

文章目录 服务器字体定义 服务器字体使用例子 响应式布局设备类型设备特性例子 服务器字体 解决字体不一致而产生的。 首先&#xff0c;在网上把字体下载好。 定义 服务器字体 font-face{font-family:字体名称;src:url(字体资源路径); }使用 在需要使用的选择器里加上 font…
阅读更多...
数学建模（一）前继概念

数学建模（一）前继概念

课程推荐&#xff1a;数学建模老哥_哔哩哔哩_bilibili 目录 一、什么是数学建模&#xff1f; 二、数学建模的一般步骤 三、数学建模赛题类型 1.预测型 2. 评价类 3.机理分析类 4. 优化类 一、什么是数学建模&#xff1f; 数学建模是利用数学方法解决实际问题的一种实践。…
阅读更多...
什么是多线程？进程和线程的区别是什么？如何使用Java实现多线程？

什么是多线程？进程和线程的区别是什么？如何使用Java实现多线程？

文章目录 前言我们为什么要使用线程而不是进程来实现并发编程什么是线程进程和线程的区别如何使用Java实现多线程创建线程1.创建一个继承 Thread 类的线程类2.实现 Runnable 接口匿名内部类方式实现 Runnable 接口lambda 表达式实现 Runnable 接口 Thread 类的常见构造方法Thre…
阅读更多...
T113-S3-RTL8211网口phy芯片调试

T113-S3-RTL8211网口phy芯片调试

目录 前言 一、RTL8211介绍 二、硬件连接 三、设备树配置 四、内核配置 五、phy芯片配置 六、调试问题 总结 前言 在嵌入式系统开发中&#xff0c;网络连接是至关重要的一部分。T113-S3开发板搭载了RTL8211系列的网口PHY芯片&#xff0c;用于实现以太网连接。在开发过程…
阅读更多...
C++ QT(二)

C++ QT(二)

目录 Qt 控件按钮QPushButton控件简介用法示例运行效果 QToolButton控件简介用法示例运行效果 QRadioButton控件简介用法示例运行效果 QCheckBox控件简介用法示例运行效果 QCommandLinkButton控件简介用法示例运行效果 QDialogButtonBox控件简介用法示例运行效果 输入窗口部件Q…
阅读更多...
用 React+ts 实现无缝滚动的走马灯

用 React+ts 实现无缝滚动的走马灯

一、走马灯的作用 走马灯是一种常见的网页交互组件&#xff0c;可以展示多张图片或者内容&#xff0c;通过自动播放或者手动切换的方式&#xff0c;让用户能够方便地浏览多张图片或者内容。 本次实现的不是轮播图而是像传送带一样的无限滚动的形式。 二、需求梳理 走马灯可设…
阅读更多...
Go Gin 中使用 JWT

Go Gin 中使用 JWT

一、JWT JWT全称JSON Web Token是一种跨域认证解决方案&#xff0c;属于一个开放的标准&#xff0c;它规定了一种Token实现方式&#xff0c;目前多用于前后端分离项目和OAuth2.0业务场景下。 二、为什么要用在你的Gin中使用JWT 传统的Cookie-Sesson模式占用服务器内存, 拓展性…
阅读更多...
uniapp实现自定义导航内容高度居中（兼容APP端以及小程序端与胶囊对齐）

uniapp实现自定义导航内容高度居中（兼容APP端以及小程序端与胶囊对齐）

①效果图如下 1.小程序端与胶囊对齐 2.APP端内容区域居中 注意&#xff1a;上面使用的是colorui里面的自定义导航样式。 ②思路&#xff1a; 1.APP端和小程序端走不同的方法&#xff0c;因为小程序端要计算不同屏幕下右侧胶囊的高度。 2.其次最重要的要清晰App端和小程序端…
阅读更多...
【数学建模】清风数模更新5 灰色关联分析

【数学建模】清风数模更新5 灰色关联分析

灰色关联分析综述 诸如经济系统、生态系统、社会系统等抽象系统都包含许多因素&#xff0c;系统整体的发展受各个因素共同影响。 为了更好地推动系统发展&#xff0c;我们需要清楚哪些因素是主要的&#xff0c;哪些是次要的&#xff0c;哪些是积极的&#xff0c;哪些是消极的…
阅读更多...
网络基础——网络的由来与发展史

网络基础——网络的由来与发展史

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 作者会持续更新网络知识和python基础知识&#xff0c;期待你的关注 目录 一、网络的由来 二、计算机网络的发展史 1、第一阶段 2、第二阶段 3、第三阶段 前言 每天都是使用网络&#xff0c;那么你知道网络…
阅读更多...
FPGA----Vivado SDK创建并使用静态链接库（C/C++代码移植）

FPGA----Vivado SDK创建并使用静态链接库（C/C++代码移植）

1、在进行SoC开发时&#xff0c;PS端的C/C代码可能涉及到核心算法需要移植操作&#xff0c;为此&#xff0c;本文讲述了如何将C/C代码打包为.a文件供程序调用 2、文章以我的程序为例&#xff0c;逐步讲述代码生成静态链接库并调用的方法。 下面是我程序的目录结构&#xff0c…
阅读更多...
spring boot实现实体类参数自定义校验

spring boot实现实体类参数自定义校验

安装依赖项 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency>1、新建实体类 Data public class UserEntity {private String name;private Integer age;…
阅读更多...
RocketMQ 延迟消息

RocketMQ 延迟消息

RocketMQ 延迟消息 RocketMQ 消费者启动流程 什么是延迟消息 RocketMQ 延迟消息是指&#xff0c;生产者发送消息给消费者消息&#xff0c;消费者需要等待一段时间后才能消费到。 使用场景 用户下单之后&#xff0c;15分钟未支付&#xff0c;对支付账单进行提醒或者关单处理…
阅读更多...
PostgreSQL查询慢sql原因和优化方案

PostgreSQL查询慢sql原因和优化方案

PostgreSQL sql查询慢优化方案有一下几种解决方案&#xff1a; 1.关闭会话 查询慢sql的执行会话&#xff0c;关闭进程。 查看数据库后台连接进程 SELECT count(*) FROM pg_stat_activity;SELECT * FROM pg_stat_activity; 查看数据库后台连接进程&#xff0c;但是此条SQL不…
阅读更多...
python提取pdf图片

python提取pdf图片

import fitz import re import osdef save_pdf_img(path, save_path):path: pdf的路径save_path : 图片存储的路径# 使用正则表达式来查找图片checkXO r"/Type(? */XObject)"checkIM r"/Subtype(? */Image)"# 打开pdfdoc fitz.open(path)# 图片计数im…
阅读更多...
用HARU-Net增强核分割:一种基于混合注意的残差u块网络

用HARU-Net增强核分割:一种基于混合注意的残差u块网络

文章目录 Enhancing Nucleus Segmentation with HARU-Net: A Hybrid Attention Based Residual U-Blocks Network摘要本文方法损失函数后处理消融实验 Enhancing Nucleus Segmentation with HARU-Net: A Hybrid Attention Based Residual U-Blocks Network 摘要 核图像分割是…
阅读更多...
W6100-EVB-PICO 做TCP Server进行回环测试（六）

W6100-EVB-PICO 做TCP Server进行回环测试（六）

前言 上一章我们用W6100-EVB-PICO开发板做TCP 客户端连接服务器进行数据回环测试&#xff0c;那么本章将用开发板做TCP服务器来进行数据回环测试。 TCP是什么&#xff1f;什么是TCP Server&#xff1f;能干什么&#xff1f; TCP (Transmission Control Protocol) 是一种面向连…
阅读更多...
zabbix监控安装部署

zabbix监控安装部署

目录 一、环境 二、配置 1.配置yum源&#xff0c;这里用的清华的 2.过滤一下安装包&#xff0c;查看依赖包 安装依赖包 3.配置数据库 开机自启 创建数据库 创建用户 授权 导入数据到数据库 查看zabbix数据库有没有表和数据 4.修改zabbix配置文件 1.修改zabbix配置…
阅读更多...
最新文章

Copyright @ 2022~2023