网站开发第一弹---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数据集是一个对电影评论标注为正向评论与负向评论的数据集…
阅读更多...
Spring Boot Starter介绍和实战

Spring Boot Starter介绍和实战

引言 Spring Boot Starter 是 Spring Boot 提供的一种机制&#xff0c;用于简化和集成应用程序的依赖管理。通过创建自定义的 Starter&#xff0c;可以将一组相关的依赖打包成一个简单的、可重用的模块&#xff0c;使应用程序的配置和依赖管理更加方便。在本文中&#xff0c;我…
阅读更多...
【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;使用它来对模型做…
阅读更多...
python连接sqlite3工具类

python连接sqlite3工具类

简单使用python连接sqlite3工具类&#xff0c;代码可根据场景自行抽象 #!/usr/bin/env python # -*- coding: utf-8 -*-import sqlite3class SQLiteHandler:# 示例用法default_db_path "example.db"def __init__(self, db_fileNone):self.db_file db_file or self…
阅读更多...
Spring面试整理-Spring的AOP

Spring面试整理-Spring的AOP

Spring的面向切面编程（AOP）是其核心功能之一，它允许开发者在不改变原有代码的情况下，增加额外的行为（如日志记录、事务管理、安全检查等）。AOP 通过定义"切面"（aspects）和"通知"（advice）来实现这一功能。 AOP概念 切面（Aspect）：切面是模块化的…
阅读更多...
TCP 和 UDP 的区别

TCP 和 UDP 的区别

TCP&#xff08;Transmission Control Protocol&#xff09;和UDP&#xff08;User Datagram Protocol&#xff09;是两种主要的传输层协议&#xff0c;它们在网络通信中有一些关键的区别&#xff1a; &#xff08;1&#xff09;http1 / http2 基于 tcp 协议&#xff0c;https …
阅读更多...
XCODE IOS 静态链接库替换升级

XCODE IOS 静态链接库替换升级

XCODE 版本15.2. 一个很久需求没更新的IOS 应用&#xff0c;近来有新需求要开发。 拉下代码运行&#xff0c;出现了个BAD_ACCESS错误。出错的位置位于一个调用的第三方的.a静态库内部。因为调用代码并没有修改&#xff0c;很容易想到可能XCODE相关升级&#xff0c;导致的问题。…
阅读更多...
无监督学习Principal Component Analysis(PCA)精简高维数据

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

目录 介绍 一、PCA之前 二、PCA之后 介绍 Principal Component Analysis (PCA) 是一种常用的数据降维和特征提取技术。PCA通过线性变换将高维数据映射到低维空间&#xff0c;从而得到数据的主要特征。PCA的目标是找到一个正交基的集合&#xff0c;使得将数据投影到这些基…
阅读更多...
Android Studio 分别运行flutter 的debug和release版本

Android Studio 分别运行flutter 的debug和release版本

前言 由于在Android Studio 没找到运行release版本的入口,现在通过命令行运行 1.release版本 运行release版本的话直接执行下面命令3 flutter run --release相关命令统计 1.生成apk flutter build apk2.安装apk&#xff1a; flutter install3.运行release版本 flutter …
阅读更多...
【期末不挂科-单片机考前速过系列P11】（第十一章：单片机的并行拓展例题）经典例题盘点（带图解析）

【期末不挂科-单片机考前速过系列P11】（第十一章：单片机的并行拓展例题）经典例题盘点（带图解析）

前言 大家好吖&#xff0c;欢迎来到 YY 滴单片机系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…
阅读更多...
初探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新建一个系统…
阅读更多...
第十九章 类的继承

第十九章 类的继承

文章目录 一、继承二、原型三、原型和实例关系的检测 一、继承 面向对象三大特点&#xff1a;封装&#xff0c;继承&#xff0c;多态 封装&#xff1a;打包继承&#xff1a;一个对象A不具有某个功能a&#xff0c;通过某种方式使用了对象B的a功能 的过程多态&#xff1a;对象或…
阅读更多...
【SQL server】DML触发器监控数据库字段值改变

【SQL server】DML触发器监控数据库字段值改变

文章目录 前言DML触发器基本思路创建触发器固定字段触发示例完整示例代码变量声明查询新旧值插入数据到日志表效果视频动态字段触发示例完整代码示例触发器基本信息变量声明定义游标打开游标临时表创建循环处理字段
阅读更多...
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;对稍有经验者应不存在明显障碍。 因软件世界之复杂和个人能力…
阅读更多...
mac安装mysql和docker

mac安装mysql和docker

官方下载页面&#xff1a;https://dev.mysql.com/downloads/mysql/ 傻瓜式安装 配置环境变量&#xff1a; open ~/.zshrc插入下面的配置&#xff1a; export PATH$PATH:/usr/local/mysql/bin export PATH$PATH:/usr/local/mysql/support-files$ source ~/.bash_profile $ …
阅读更多...
【投稿优惠|火热征稿】2024年测量控制与轨道交通国际学术会议(ICMCRT 2024)

【投稿优惠|火热征稿】2024年测量控制与轨道交通国际学术会议(ICMCRT 2024)

【投稿优惠|火热征稿】2024年测量控制与轨道交通国际学术会议(ICMCRT 2024) 2024 International Conference Measurement Control and Rail Transit(ICMCRT 2024) 一、【会议简介】 业内专家认为&#xff0c;在当今以信息技术带动工业化发展的时代&#xff0c;测量控制与仪器仪…
阅读更多...
最新文章

Copyright @ 2022~2023