前端HTML学习笔记（一）

news2024/11/30 12:48:05

1、基础知识

网页概述：
		1、HTML概念：HTML (Hyper Text Markup Language)中文译为超文本标记语言
		   专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
		2、网页通常由文字、图片、音频、视频、超链接等部分组成
		3、网页的本质是程序员写的代码通过浏览器转换而成的。

.

浏览器概述：
	1、浏览器是网页显示，运行的平台，是前端开发必备利器
	2、常见浏览器：IE浏览器、 火狐浏览器(Firefox) 、谷歌浏览器(Chrome)、Safar|浏览器、 欧朋浏览器(Opera)

  渲染引擎(浏览器内核)：浏览器中专门对代码进行解析渲染的部分。渲染引擎不同导致解析相同代码时的速度、性能、效果也不同
在这里插入图片描述

2、Web标准

  由于不同浏览器的渲染引|擎不同，对于相同代码解析的效果会存在差异，为保证用户在不同浏览器打开网页效果相同，制定了Web标准。

2.1 Web的组成

结构语言说明
结构HTML页面元素和内容，决定了网页的结构
表现CSS网页元素的外观和位置等页面样式(如:颜色、大小等)，决定网页的样式美观
行为JavaScript网页模型的定义与页面交互，决定了网页交互的动态效果

2.2 HTML页面固定结构

  网页中存在固定的结构的，如:整体、头部、标题、主体，其固定结构是要通过特定的 HTML标签进行描述的

HTML骨架结构的组成标签：
	1、html标签:网页的整体
	2、head标签:网页的头部
	3、body标签:网页的身体
	4、title标签:网页的标题

在这里插入图片描述

2.3 HTML页面开发工具：VS Code

利用VS Code 快速搭建网页骨架：
	1、在新建的文件第一行，输入 ！后按 Enter键或 Tab 键

3、HTML语法

HTML 注释快捷键：Ctrl + /

3.1 HTML 标签的构成

在这里插入图片描述

结构说明:
	1、标签由 <、>、 /、英文单词或字母组成。并且把标签中 < > 包括起来的英文单词或字母称为标签名
	2、常见标签由两部分组成，我们称之为双标签，前部分叫开始标签，后部分叫结束标签，两部分之间为包裹内容
	3、少数标签由一 部分组成，我们称之为：单标签。自成一体，无法包裹内容。如：<br>-----换行，<hr>---------横线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡夫</title>
</head>
<body>
    hell world!<br>
    hell world!
    <hr>
</body>
</html>

在这里插入图片描述

3.2 HTML标签的关系

  HTML标签与标签之间的关系可分为:
在这里插入图片描述

3.3 排版标签

3.3.1 HTML标题标签

HTML标题标签代码：h系列标签，1~6级标题,重要程度依次递减
	<h1>1级标题</h1>   (VS Code中直接输入 h1 后按回车键，自定补全，Ctrl+d 可快速修改)
	<h2>2级标题</h2>
	<h3>3级标题</h3>
	<h4>4级标题</h4>
	<h5>5级标题</h5>
	<h6>6级标题</h6>
	
标题特点:
	1、文字都有加粗
	2、文字都有变大，并且从h1→h6文字逐渐减小
	3、独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡夫</title>
</head>
<body>
    <h1>hello world</h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
    <h4>hello world</h4>
    <h5>hello world</h5>
    <h6>hello world</h6>
</body>
</html>

在这里插入图片描述

3.3.2 HTML段落标签

段落在新闻和文章的页面中，用于分段显示
	1、语法结构： <p>我是一段文字 </p>
	2、特点:
		段落之间存在间隙
		独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡夫</title>
</head>
<body>
    <!-- 在进行段落编写时 可用 view——word wrap 实现自动换行-->
    <p>人既是独立个体的单一，也是密切相关、血肉相连的群体，是永远离不开互相扶持、互相帮助的。在漫长而短暂的人生中，我们都在不断地接受父母、师长、朋友和他人的帮助，同时更要学会去回报、帮助别人！因为，我们的生命之歌因帮助而动听，我们的生命之河，因帮助而不干涸，我们的生命之光，因帮助而永不熄灭，我们的生命之诗，因帮助而流光溢彩。</p>
    <p>如果沟通的门通向的另一方是漆黑的深夜，那么语言的钥匙便引领着你走向皓月当空，繁星满天；如果沟通的门通向的另一方是一望无际的沙漠，那么语言的钥匙便引领着你走向鸟语花香的绿洲；如果沟通的门通向的另一方是浩瀚无边的大海，那么语言的钥匙便引领着你走向如宗悫般“乘长风破万里浪”，如毛主席般“到中流击水，浪遏飞舟”。语言在沟通中是多么地重要！它是一把闪光的钥匙，使沟通直接到达人的心坎上。</p>
</body>
</html>

在这里插入图片描述

3.3.3 换行标签

换行：让文字强制换行显示
	代码: <br>
	特点：单标签、让文字强制换行

.

水平线标签：分割不同主题内容的水平线
	代码: <hr>
	特点：单标签、在页面中显示一条水平线

3.4 文本格式化标签

  文本格式化标签：需要让文字加粗、下划线、倾斜删除线等效果，推荐使用 strong、ins、 em、del, 表示的强调语义更强烈!

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡夫</title>
</head>
<body>
    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜线</i>
    <em>倾斜线</em>
    <s>删除线</s>
    <del>
        删除线
    </del>
</body>
</html>

在这里插入图片描述

3.5 媒体标签

3.5.1 图片标签

在这里插入图片描述

属性注意点:
	1、标签的属性写在开始标签内部
	2、标签上可以同时存在多个属性
	3、属性之间以空格隔开
	4、标签名与属性之间必须以空格隔开
	5、属性之间没有顺序之分

.

场景：在网页中显示图片
代码： <img src= " " alt= " ">
特点：单标签、img标签需要展示对应的效果，需要借助标签的属性进行设置!.

图片标签的src属性：目标图片的路径，当前网页和目标图片在同一 个文件夹中，路径直接写目标图片的名字即可(包括后缀名)

图片标签的alt属性：替换文本。当图片加载失败时，才显示alt的文本；当图片加载成功时，不会显示alt的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡夫</title>
</head>
<body>
    <img src="C:\Users\fanfu\Downloads\小猫宝贝可高清4K壁纸_彼岸图网.jpg" alt="">
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡夫</title>
</head>
<body>
    <img src="C:\Users\fanfu\Downloads\小猫宝贝可高清4K壁纸彼岸图网.jpg" alt="这是一只可爱的猫咪">
</body>
</html>

在这里插入图片描述

图片标签的title属性：提示文本。当鼠标悬停时，才显示的文本，注意 title属性不仅仅可以用于图片标签，还可以用于其他标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡夫</title>
</head>
<body>
    <img src="C:\Users\fanfu\Downloads\小猫宝贝可高清4K壁纸_彼岸图网.jpg" alt="这是一只可爱的猫咪" title="这是title">
</body>
</html>


图片标签的width和height属性：设置图片的宽度和高度(数字)
 注意点:如果只设置width或height中的一一个，另-一个没设置的会自动等比例缩放(此时图片不会变形)
 	    如果同时设置了width和height两个，若设置不当此时图片可能会变形
 	    所以width和height属性只需要给出一个值，另一个等比例缩放，好处就是图片不变形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡夫</title>
</head>
<body>
    <img src="C:\Users\fanfu\Downloads\小猫宝贝可高清4K壁纸_彼岸图网.jpg" alt="这是一只可爱的猫咪" title="这是title" width="200">
</body>
</html>

在这里插入图片描述

3.5.2 路径学习

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
	例如:
		盘符开头: D:day01\images\1.jpg
		完整的网络地址: https://www.itcast.cn/2018czgw/images/logo.gif

相对路径(常用)
	当前文件:当前的htm|网页
	目标文件:要找到的图片
	相对路径: 从当前文件开始出发找目标文件的过程
	
	相对路径分类:
		1、同级目录：当前文件和目标文件在同一目录中
			语法结构：直接写目标文件的名字即可
				方法一：<img src="目标图片.gif">
				方法二：<img src="./目标图片.gif">
		2、下级目录：目标文件在下级目录中
			语法结构：
				1. 先知道在哪个文件夹里面-→文件夹名字
				2. 进入这个文件夹→/
				3. 此时看到目标文件直接喊她 -→直接写目标文件名字
		3、上级目录：目标文件在上级目录中
			语法结构：
				1、先出当前文件夹，到上一-级目录→./
				2、此时看到目标文件直接喊她 -→直接写目标文件

下级目录示例
在这里插入图片描述
.
上级目录示例在这里插入图片描述

3.5.3 音频标签

音频标签：在页面中插入音频 
语法结构： <audio src=" ./music.mp3" controls></audio>
音频标签目前支持三种格式：MP3、Wav、Ogg

音频标签常见属性
在这里插入图片描述

3.5.4 视频标签

视频标签：在页面中插入视频
语法结构：<video src="./video. mp4" controls></vide0>
视频标签目前支持三种格式：MP4、WebM、Ogg

视频标签常见属性
在这里插入图片描述

3.6 链接标签

链接标签：点击之后，从一个页面跳转到另一 个页面
语法结构： <a href=" ./目标网页.html">超链接</a>
特点:双标签，内部可以包裹内容；如果需要a标签点击之后去指定页面，需要设置a标签的href属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡夫</title>
</head>
<body>
    <!-- 当开发网站初期，我们还不知道跳转地址的时候，href的 值书写#(空链接) -->
    <a href="https://www.baidu.com/">跳转到百度</a>
</body>
</html>

在这里插入图片描述

 链接标签的target属性：目标网页的打开形式
	_self：默认值，在当前窗口中跳转(覆盖原网页)
	_blank：在新窗口中跳转(保留原网页)
	例如：<a href="https: / /www. baidu.com/" target="_ blank">百度一下</a>

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

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

相关文章

Julia入门-0、在Windows下安装Julia

Julia入门-0、在Windows下安装Julia

文章目录 0、前言1、相关网站2、Windows 系统下安装Julia3、Julia 交互式命令窗口 0、前言 Julia 是一个面向科学计算的高性能动态高级程序设计语言。 Julia 最初是为了满足高性能数值分析和计算科学的需要而设计的&#xff0c;不需要解释器&#xff0c;速度快。 1、相关网站…
阅读更多...
C++类与对象Plus

C++类与对象Plus

我们之前讲的都是类与对象的基础&#xff0c;以及类中的几个默认函数等&#xff0c;今天我们就讲一下类与对象的其他东西 初始化列表 在我们的默认构造函数的时候&#xff0c;我们在初始化的时候我们都是在构造函数中完成我们的初始化任务 我们现在来看一个类 我们看一下我们…
阅读更多...
基于 LSTM 进行多类文本分类（ TensorFlow 2.0）

基于 LSTM 进行多类文本分类（ TensorFlow 2.0）

NLP 的许多创新是如何将上下文添加到词向量中。一种常见的方法是使用循环神经网络。以下是循环神经网络的概念&#xff1a; 他们利用顺序信息。他们可以捕捉到到目前为止已经计算过的内容&#xff0c;即&#xff1a;我最后说的内容会影响我接下来要说的内容。RNNs 是文本和语音…
阅读更多...
mac下删除python3.7，并将版本更新到3.9

mac下删除python3.7，并将版本更新到3.9

如何卸载python3.7 有些小伙伴想直接从3.7升级到3.9 那恐怕是不行的&#xff0c;python3.7的库占的空间不少&#xff0c;所以首先我们应该来删除它. python安装后的路径分类 在删除之前需要先了解&#xff1a;python安装后有几类路径需要我们去查看删除 python存储库路径&am…
阅读更多...
【分组码系列】线性分组码的网格图和维特比译码

【分组码系列】线性分组码的网格图和维特比译码

线性分组码的网格图 由于码字的比特位是统计独立的,所以编码过程可以利用有限状态机来描述，它能精确地确定初始和最终状态。可以利用网格图进一步描述编码过程[36],采用维特比算法进行最大似然译码. 在GF(2)上定义线性分组码(n,k)。相应的(n-k)Xn维校验阵可以写成 令码字为系…
阅读更多...
TensorFlow vs PyTorch：哪一个更适合您的深度学习项目？

TensorFlow vs PyTorch：哪一个更适合您的深度学习项目？

在深度学习领域中&#xff0c;TensorFlow 和 PyTorch 都是非常流行的框架。这两个框架都提供了用于开发神经网络模型的工具和库&#xff0c;但它们在设计和实现上有很大的差异。在本文中&#xff0c;我们将比较 TensorFlow 和 PyTorch&#xff0c;并讨论哪个框架更适合您的深度…
阅读更多...
队列、栈专题

队列、栈专题

队列、栈专题 LeetCode 20. 有效的括号解题思路代码实现 LeetCode 921. 使括号有效的最少添加解题思路代码实现 LeetCode 1541. 平衡括号字符串的最少插入次数解题思路代码实现 总结 不要纠结&#xff0c;干就完事了&#xff0c;熟练度很重要&#xff01;&#xff01;&#xff…
阅读更多...
icevision环境安装

icevision环境安装

Installation - IceVision # 1. git clone 代码# pip 换源&#xff1a; ~/.pip/pip.conf 隐藏文件[global] index-url https://pypi.tuna.tsinghua.edu.cn/simple [install] trusted-hostmirrors.aliyun.compip install -e .[all,dev]ImportError: cannot import name Multi…
阅读更多...
chatgpt-4它的未来是什么？该如何应用起来？

chatgpt-4它的未来是什么？该如何应用起来？

在当今快节奏的数字通信世界中&#xff0c;ChatGPT已成为一个强大的在线聊天平台&#xff0c;改变了人们互动和沟通的方式。凭借其先进的AI功能、用户友好的界面和创新技术&#xff0c;ChatGPT已成为个人和企业的热门选择。 然而&#xff0c;ChatGPT的未来有望更加激动人心和具…
阅读更多...
VSCode的安装以及相关插件配置

VSCode的安装以及相关插件配置

VSCode是什么&#xff1f; VSCode严格来说&#xff0c;也是一款编辑器&#xff0c;强大之处在于集成了各种各样的插件。至此往后&#xff0c;将使用VSCode来取代vim。话不多说&#xff0c;步骤如下&#xff1a; 安装步骤 1、VSCode的下载 https://vscode.cdn.azure.cn/stabl…
阅读更多...
NSSCTF (3)

NSSCTF (3)

[GDOUCTF 2023]hate eat snake 我们打开js源码 很明显这里当score大于60会出flag score = getScore 我们寻找到了getScore方法所在的地方 之后发现他存在于Snake
阅读更多...
Python多线程之_thread与threading模块

Python多线程之_thread与threading模块

Python多线程之_thread与threading模块 在Python程序中&#xff0c;多线程的应用程序会创建一个函数&#xff0c;来执行需要重复执行多次的程序代码&#xff0c;然后创建一个线程执行该函数。一个线程是一个应用程序单元&#xff0c;用于在后台并行执行多个耗时的动作。 在多…
阅读更多...
DBWeaver 连接H2数据库 详细教程

DBWeaver 连接H2数据库 详细教程

1.DBWwaver下载网址 https://github.com/dbeaver/dbeaver/releases 2. 软件安装 点击安装文件&#xff0c;一直下一步即可 3. DBWeaver连接H2数据库 3.1打开软件在搜索框里面输入&#xff1a;h2 3.2 查询到h2数据库 3.3 点击选中的数据库&#xff0c;出现这样的页面&#xf…
阅读更多...
铁路信号计轴设备简介

铁路信号计轴设备简介

设备概述 计轴设备是铁路信号系统中的一个重要组成部分。它的主要功能是&#xff1a; 利用安装在钢轨上的传感器&#xff0c;来探测进入和出清轨道区段的车轮对数&#xff0c;进而判别轨道区段的占用和出清&#xff0c;其作用与轨道电路等效。 根据两站办理发车进路情况及区…
阅读更多...
浪涌保护器的类型和应用

浪涌保护器的类型和应用

我们可能经常遇到电子设备损坏的情况。发生这种情况是由于多种情况造成的&#xff0c;例如大气变化&#xff08;闪电和雷声&#xff09;、电压击穿以及使用压缩机等重型设备。所有这些中断都可能会对电气设备造成破坏。进入这种情况的一种设备是浪涌保护器&#xff0c;也称为浪…
阅读更多...
EndNote X9 导入知网文献 插入引用文献 方法

EndNote X9 导入知网文献 插入引用文献 方法

文章目录 1 EndNote X9 导入知网文献2 EndNote X9 插入参考文献常见问题总结3 EndNote X9 快速上手教程&#xff08;毕业论文参考文献管理器&#xff09; 1 EndNote X9 导入知网文献 下载知网参考文献引用&#xff1a; ①下载 引用&#xff1b; ②格式为 EndNote&#xff1b; 知…
阅读更多...
流水线三维可视化运维，装配自动化提质增效

流水线三维可视化运维，装配自动化提质增效

大家带来智慧生产线/设备流水线合集。 智慧仓储产线 智慧仓储产线通过对仓储现场的数字化建模&#xff0c;利用先进的物联网、大数据、人工智能等技术&#xff0c;对仓储现场设备、环境、人员进行全流程数字化管理。 为贯彻仓储行业应用的全面性&#xff0c;图扑 HT 应用 Web…
阅读更多...
15个提高Javascript开发技巧

15个提高Javascript开发技巧

大厂面试题分享 面试题库 前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 web前端面试题库 VS java后端面试题库大全 劈柴不照纹&#xff0c;累死劈柴人。上学的时候就总有那些“小怪物们”总能解出来难题&…
阅读更多...
固态硬盘无法识别，怎么办？4招教您解决！

固态硬盘无法识别，怎么办？4招教您解决！

案例&#xff1a;电脑识别不了固态硬盘怎么办&#xff1f; 【我的电脑识别不了固态硬盘&#xff0c;这给我带来了很大的困扰。我尝试了很多方法&#xff0c;还没有解决。求一个有效的解决方法&#xff01;】 固态硬盘在计算机领域中越来越普遍&#xff0c;其快速读取和写入速…
阅读更多...
PyCharm十大提高生产力的插件

PyCharm十大提高生产力的插件

PyCharm是一个非常流行的Python开发IDE。除了支持Python语言&#xff0c;PyCharm还支持其他流行的语言&#xff0c;如C、C、JavaScript等。PyCharm被广泛使用&#xff0c;是因为它拥有许多方便而实用的插件&#xff0c;这些插件能够显著提高开发者的生产力。下面我们将介绍十大…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023