网站开发第一弹---HTML01

 🎉欢迎您来到我的MySQL基础复习专栏

☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克🍹
✨博客主页：小小恶斯法克的博客
🎈该系列文章专栏：网站开发flask框架
🍹文章作者技术和水平很有限，如果文中出现错误，希望大家能指正🙏
📜 感谢大家的关注！ ❤️

目录

1. 前后端的理解

2.HTML介绍

3.基础标签

4.标题标签

5. 段落标签

6. 换行标签

7. 文本标签

8. 水平线标签

9. div标签

10. 块和行内元素

11. 特殊符号

12. 图片

13. 超链接

14. 锚点

15. 列表

1. 前后端的理解

        通俗的讲，我们浏览网页时，咱们能够看见的所有东西都叫前端，前端里面的数据都是从后端来的。

        如下图，框的位置是固定的，数据是变化的，那么数据是哪来的？数据就是从后端调过来的，相当于架构是固定的，内容是变化的。犹如钢筋你搭建好了，混凝土的材料后期可以铺盖上去。

 

 前后端的交互：

 

2.HTML介绍

前端核心技术：HTML、CSS 和 JavaScript，也叫“网页三剑客”

HTML，全称 Hyper Text Markup Language（超文本标记语言）

HTML 是一门描述性语言

CSS，即Cascading Style Sheet（层叠样式表），是用来控制网页外观的一种技术

JavaScript是什么？JavaScript，就是我们通常所说的JS，是一种嵌入到 HTML页面中的脚本语言，由浏览器一边解释一边执行

总结：HTML用于控制网页的结构，CSS用于控制网页的外观，而 JavaScript 控制着网页的行为

HTML：

CSS ：

JS：

        

以上三部分就是网页的核心组成元素，如果再细分的话就是组成这些元素的分支，比如文字、图像、图片、按钮、表格、表单、音频、视频等等

 

3.基础标签

html骨架标签总结

html语法规则

<DOCTYPE html>：相当于预告我要写的是HTML

<html><html>:顶级元素，所有内容都写在里面，写网页就相当于套娃，只不过html标签是爸爸

HTML 标签是由尖括号包围的关键词，例如 <html>


HTML 标签通常是成对出现的，例如 <html> 和 </html> 

 标签对中的第一个标签是开始标签，第二个标签是结束标签


有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签  

 

标签的关系

双标签关系可以分为两类：包含关系和并列关系

包含标签 (父子关系)：
<head>
    <title> </title>            
</head>

并列关系 (兄弟关系):
<head> </head>
<body> </body>

4.标题标签

            在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写。6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>标题标签</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>

5. 段落标签

在HTML中，我们可以使用“p标签”来显示一段文字 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>段落标签</title>
</head>
<body><h3>归去来兮</h3><p>悟已往之不谏，知来者之可追</p></body>
</html>

段落标签会自动换行，并且段落与段落之间有一定的间距，因为p标签是块级元素

6. 换行标签

段落标签是会自动换行的。那么如果想要随意地对文字进行换行处理，可以使用<br/>单标签 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
</body>
</html>

使用两个 p 标签处理 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>

用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会

7. 文本标签

在HTML中，我们可以使用“文本标签”来对文字进行修饰，例如粗体、斜体、上标、下标等。常用的有8种文本标签。

粗体标签：strong、b

斜体标签：i、em、cite

上标标签：sup

下标标签：sub

中划线标签：s

下划线标签：u

大字号标签：big

小字号标签：small

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>粗体标签</title>
</head>
<body><p>这是普通文本</p><strong>这是粗体文本</strong><br/><b>这是粗体文本</b><i>斜体文本</i><br/><em>斜体文本</em><br/><cite>斜体文本</cite><p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p><p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
</body>
</html>

 

8. 水平线标签

在HTML中，我们可以使用“hr标签”来实现一条水平线。hr，是horizon（水平线）的缩写。 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>水平线标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
<hr/>
<h3>春晓</h3>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</body>
</html>

 

9. div标签

在HTML中，我们可以使用“div标签”来划分 HTML 结构，从而配合 CSS 来整体控制某一块的样式 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>div标签</title>
</head>
<body>
<!--这是第一首诗-->
<div><h3>静夜思</h3><p>床前明月光，疑是地上霜。</p><p>举头望明月，低头思故乡。</p>
</div>
<hr/>
<!--这是第二首诗-->
<div><h3>春晓</h3><p>春眠不觉晓，处处闻啼鸟。</p><p>夜来风雨声，花落知多少。</p>
</div>
</body>
</html>

使用div标签来划分区域，使得代码更具有逻辑性。当然，div标签最重要的用途是划分区域，然后结合CSS针对该区域进行样式控制，这一点我们学了CSS才会知道

10. 块和行内元素

块元素和行内元素，是HTML中极其重要的概念，同时也是学习CSS的重要基础知识。对于这一节的内容，小伙伴们要重点掌握，千万不要跳过了。

在之前的学习中，小伙伴可能会发现：在浏览器预览效果，有些元素是独占一行的，其他元素不能跟这个元素位于同一行，如p、div、hr等。而有些元素不是独占一行的，其他元素可以跟这个元素位于同一行，如strong、em等。特别注意一下，这里所谓的“独占一行”，并不是在HTML代码里独占一行，而是在浏览器显示效果中独占一行。

注：标签，也叫“元素”，例如p标签又叫p元素。叫法不同，意思相同。这一节使用“元素”来称呼，也是让大家熟悉这两种叫法。

块元素

在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。

 

行内元素

在HTML中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。

（1）行内元素可以与其他行内元素位于同一行。

（2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

11. 特殊符号

"    双引号（英文）      &quot;
‘    左单引号        &lsquo;
’    右单引号        &rsquo;
×    乘号             &times;
÷    除号             &divide;
>    大于号            &gt;
<    小于号            &lt;
&    “与”符号        &amp;
—    长破折号       &mdash;
|    竖线            &#124;
§    分节符            &sect;
©    版权符           &copy;
®    注册商标      &reg;
™    商标            &trade;
€    欧元            &euro;
£    英镑            &pound;
¥    日元            &yen;
°    度            &deg;

12. 图片

  任何网页都少不了图片，一个图文并茂的页面，可以使得用户体验更好。如果想让网站获得更多的流量，也需要从“图文并茂”这个角度挖掘一下 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 通过img标签加载图片src 就是图片的路径alt 图片加载不出来显示的文字title 鼠标移动到图片上面显示的文字ps: 图片路径一定要写相对路径--><img src="./imgs/image1.png" alt="海贼王" title="海贼王啊"/></body>
</html>

 

13. 超链接

超链接随处可见，可以说是网页中最常见的元素了，例如绿叶学习网的导航、图片列表等都用到超链接。只要我们轻轻一点，就会跳转到其他页面。

超链接，英文名是hyperlink。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。

<a href="链接地址">超链接中的文本</a>

href表示你想要跳转到那个页面的路径（也就是地址）

超链接的范围非常广，我们可以将文本设置为超链接，这个叫做“文本超链接”。也可以将图片设置为超链接，这个叫做“图片超链接”

# _self         默认值，在原来窗口打开链接    重点！
# _blank         在新窗口打开链接            重点！
# _parent        在父窗口打开链接            
# _top            在顶层窗口打开超链接

 

14. 锚点

锚点就类似于游戏中的传送，它不会跳转到网页外部，仅用于网页内部的跳转

要使用锚点，需要给要跳转的位置加上名称，然后利用 a 标签的 href 去跳转到指定位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li><a href="#article">推荐文章</a></li><li><a href="#music">推荐音乐</a></li><li><a href="#movie">推荐电影</a></li>
</ul>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
<div id="article"><h3>推荐文章</h3><ul><li>朱自清-荷塘月色</li><li>余光中-乡愁</li><li>鲁迅-阿 `Q` 正传</li></ul>
</div>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
<div id="music"><h3>推荐音乐</h3><ul><li>林俊杰-被风吹过的夏天</li><li>曲婉婷-在我的歌声里</li><li>许嵩-灰色头像</li></ul>
</div>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
<div id="movie"><h3>推荐电影</h3><ul><li>蜘蛛侠系列</li><li>钢铁侠系统</li><li>复仇者联盟</li></ul>
</div>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
……<br/>
</body>
</html>

15. 列表

列表是网页中最常用的一种数据排列方式

在HTML中，列表共有3种：有序列表、无序列表

有序列表

<ol><li>长沙</li><li>上海</li><li>北京</li>
</ol>

无序列表

<ul><li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>

最后，这篇言简意赅，清晰明了的文章，都是我老师写出来的，我写在这里也是为了让自己方便学习，感谢恩师！

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

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

相关文章

基于pytorch的循环神经网络情感分析系统

基于pytorch的循环神经网络情感分析系统

任务目标 基于给定数据集&#xff0c;进行数据预处理&#xff0c;搭建以LSTM为基本单元的模型&#xff0c;以Adam优化器对模型进行训练&#xff0c;使用训练后的模型进行预测并计算预测分类的准确率。 数据简介 IMDB数据集是一个对电影评论标注为正向评论与负向评论的数据集…
阅读更多...
【AI视野·今日NLP 自然语言处理论文速览 第七十二期】Mon, 8 Jan 2024

【AI视野·今日NLP 自然语言处理论文速览 第七十二期】Mon, 8 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 8 Jan 2024 Totally 17 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers DeepSeek LLM: Scaling Open-Source Language Models with Longtermism Authors DeepSeek AI Xiao Bi, Deli Ch…
阅读更多...
深度卷积神经网络

深度卷积神经网络

目录 1.AlexNet 2. 代码实现 1.AlexNet (1)特征提取 (2)选择核函数来计算相关性&#xff1a;怎么判断在高维空间里面两个点是如何相关的&#xff0c;如果是线性模型就是做内积。 (3)凸优化问题 (4)漂亮的定理 丢弃法的作用就是因为模型太大了&#xff0c;使用它来对模型做…
阅读更多...
无监督学习Principal Component Analysis(PCA)精简高维数据

无监督学习Principal Component Analysis(PCA)精简高维数据

目录 介绍 一、PCA之前 二、PCA之后 介绍 Principal Component Analysis (PCA) 是一种常用的数据降维和特征提取技术。PCA通过线性变换将高维数据映射到低维空间&#xff0c;从而得到数据的主要特征。PCA的目标是找到一个正交基的集合&#xff0c;使得将数据投影到这些基…
阅读更多...
初探UAF漏洞（3）

初探UAF漏洞（3）

构造exp #include <iostream> #include <Windows.h>typedef void(*FunctionPointer) ();typedef struct _FAKE_USE_AFTER_FREE {FunctionPointer countinter;char bufffer[0x54]; }FAKE_USE_AFTER_FREE, * PUSE_AFTER_FREE;void ShellCode() {_asm{noppushadmov e…
阅读更多...
github上的python图片转excel，pytesseract安装相关问题

github上的python图片转excel，pytesseract安装相关问题

问题1&#xff1a;明明都pip install pytesseract&#xff0c;但是就是安装不上 pytesseract 未安装链接: https://pan.baidu.com/s/1I4HzCgO4mITWTcZFkdil6g?pwdafes 提取码: afes 安装后一路next&#xff0c;然后配置环境变量 C:\Program Files\Tesseract-OCR新建一个系统…
阅读更多...
c++学习：容器stack栈+queue+map（简易输入法）+deque

c++学习：容器stack栈+queue+map（简易输入法）+deque

目录 stack 模板原型 头文件 模板的成员类型和成员对象和成员函数 栈类模板的容器对象 实例 queue 模板原型 头文件 模板的成员类型和成员对象和成员函数 队列类模板的容器对象 实例 map 模板原型 头文件 模板的成员类型和成员对象和成员函数 关联类模板的容器…
阅读更多...
VScode远程连接开发嵌入式开发板

VScode远程连接开发嵌入式开发板

在做嵌入式开发时&#xff0c;很多时候需要远程连接或者远程调试设备&#xff0c;这时可以通过VScode上的插件来很方便的进行远程连接和调试。 ssh远程连接嵌入式开发板&#xff1a; 1、安装vscode ssh远程插件&#xff1a;Remote-SSH。 2、点击""&#xff0c;输入…
阅读更多...
构建基于RHEL8系列(CentOS8,AlmaLinux8,RockyLinux8等)的MySQL8.0.32的RPM包

构建基于RHEL8系列(CentOS8,AlmaLinux8,RockyLinux8等)的MySQL8.0.32的RPM包

本文适用&#xff1a;rhel8系列&#xff0c;或同类系统(CentOS8,AlmaLinux8,RockyLinux8等) 文档形成时期&#xff1a;2023年 因系统版本不同&#xff0c;构建部署应略有差异&#xff0c;但本文未做细分&#xff0c;对稍有经验者应不存在明显障碍。 因软件世界之复杂和个人能力…
阅读更多...
监督学习 - 逻辑回归（Logistic Regression）

监督学习 - 逻辑回归（Logistic Regression）

什么是机器学习 逻辑回归&#xff08;Logistic Regression&#xff09;虽然名字中包含"回归"一词&#xff0c;但实际上是一种用于解决分类问题的统计学习方法&#xff0c;而不是回归问题。它是一种线性模型&#xff0c;常用于二分类问题&#xff0c;也可以扩展到多分…
阅读更多...
Inis博客系统本地部署结合内网穿透实现远程访问本地站点

Inis博客系统本地部署结合内网穿透实现远程访问本地站点

文章目录 前言1. Inis博客网站搭建1.1. Inis博客网站下载和安装1.2 Inis博客网站测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总…
阅读更多...
搭建sprinboot服务环境

搭建sprinboot服务环境

搭建sprinboot服务环境 安装jdk安装nginx安装Redis安装MySQL一 下载MySQL二 安装MySQL三 启动mysql服务获取初始化密码四 登陆MySQL五 修改密码六 设置远程访问七 相关问题错误&#xff1a;1819错误&#xff1a;1251 或 2059错误&#xff1a;10060忽略表名大小写 记录搭建sprin…
阅读更多...
【Docker】概述与安装

【Docker】概述与安装

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Docker的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一. Docker的概述 1.Docker为什么出现 2…
阅读更多...
Vue入门五（Vue-CLI项目搭建｜vue项目目录介绍｜vue项目开发规范｜es6导入导出语法）

Vue入门五（Vue-CLI项目搭建｜vue项目目录介绍｜vue项目开发规范｜es6导入导出语法）

文章目录 一、Vue-CLI 项目搭建介绍node环境搭建1) 下载与安装2&#xff09;测试是否安装成功 安装vue-cli安装vue脚手架 创建Vue项目1&#xff09;使用命令创建项目2&#xff09;使用图形化界面创建项目 二、vue项目目录介绍1.命令行运行vue项目2.Pycharm中运行项目3.目录结构…
阅读更多...
Java基础项目---飞机大战的简易实现

Java基础项目---飞机大战的简易实现

推荐阅读 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;一&#xff09; 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;二&#xff09; 文章目录 推荐阅读前言一、系统分析问题描述总体设计功能流程图 二、程序和算法的介绍FlyingOb…
阅读更多...
Open CASCADE学习|参数化球面的奇异性

Open CASCADE学习|参数化球面的奇异性

参数曲面的奇异性是一个相对复杂的概念&#xff0c;它涉及到参数曲面的几何特性和参数化过程中的一些特殊情况。参数曲面通常用于描述三维空间中的复杂形状&#xff0c;通过参数方程将二维参数域映射到三维空间中。然而&#xff0c;在某些情况下&#xff0c;参数曲面可能会表现…
阅读更多...
回顾2023，展望未来

回顾2023，展望未来

回顾2023 重拾博客 CSDN博客创建和写作&#xff0c;几乎是和我正式开始学习编程开始&#xff0c;至今已经6年。刚上编程课的时候&#xff0c;刚上C语言课的时候&#xff0c;老师说可以通过写技术博客来帮助自己更好学习&#xff0c;于是我就开始自己的技术博客编写之旅。 我…
阅读更多...
在微信上秒杀链接怎么做_带给用户微信秒杀新体验

在微信上秒杀链接怎么做_带给用户微信秒杀新体验

微信秒杀新体验&#xff1a;让每一次点击都成为一次抢购的狂欢&#xff01; 在这个数字化、信息化的时代&#xff0c;微信已经成为了我们生活中不可或缺的一部分。与此同时&#xff0c;微信营销也成为了众多商家竞相角逐的新战场。如何在众多的营销信息中脱颖而出&#xff0c;吸…
阅读更多...
持续构建行业影响力|HarmonyOS SDK荣膺年度“技术卓越”奖项

持续构建行业影响力|HarmonyOS SDK荣膺年度“技术卓越”奖项

自2023年9月华为宣布鸿蒙原生应用全面启动以来&#xff0c;HarmonyOS SDK通过将HarmonyOS系统级能力对外开放&#xff0c;支撑开发者高效打造更纯净、更智能、更精致、更易用的鸿蒙原生应用&#xff0c;和开发者共同成长。 通过在开发者社区和HarmonyOS开发者持续的内容共创与技…
阅读更多...
Leetcode 494 目标和

Leetcode 494 目标和

题意理解&#xff1a; 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可以在 2 之前添加 &#xff0c;在 1 之前添…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023