网站开发第一弹---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>

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Spring Cloud】微服务架构演变及微服务架构介绍

【Spring Cloud】微服务架构演变及微服务架构介绍

文章目录 系统架构演变单体应用架构垂直应用架构分布式架构SOA 架构微服务架构 微服务架构介绍微服务架构的常见问题微服务架构的常见概念服务治理服务调用服务网关服务容错链路追踪 微服务架构的常见解决方案ServiceCombSpringCloudSpring Cloud Alibaba 总结 欢迎来到阿Q社区…
阅读更多...
让企业的招投标文件、生产工艺、流程配方、研发成果、公司计划、员工信息、客户信息等核心数据更安全。

让企业的招投标文件、生产工艺、流程配方、研发成果、公司计划、员工信息、客户信息等核心数据更安全。

PC端访问地址1&#xff1a;www.drhchina.com PC端访问地址2&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 全方位立体式防护　　让数据泄密无处遁形 信息防泄漏是一项系统的整体部署工程&#xff0c;加密监控已成为多数企事业单…
阅读更多...
序章 初始篇—转生到vue世界！

序章 初始篇—转生到vue世界！

Vue.js 是什么&#xff1f; Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项…
阅读更多...
Java异常处理--异常处理的方式1

Java异常处理--异常处理的方式1

文章目录 一、异常处理概述二、方式1&#xff1a;捕获异常&#xff08;try-catch-finally&#xff09;&#xff08;1&#xff09;抓抛模型&#xff08;2&#xff09;try-catch-finally基本格式1、基本语法2、整体执行过程3、try和catch3.1 try3.2 catch (Exceptiontype e) &…
阅读更多...
Arcgis10制图/建模小技巧：梯田地形

Arcgis10制图/建模小技巧：梯田地形

小编早年做城市设计的时候&#xff0c;还不知道怎么用gis生成地形&#xff0c;然后导入skechup&#xff1b;只会把cad的等高线导进su后一层层拉伸&#xff08;过程很繁琐&#xff09;&#xff0c;会得到梯田地形。梯田地形虽然不完全贴合实际&#xff0c;但也凑合能用&#xff…
阅读更多...
Jupyter Notebook

Jupyter Notebook

2017年左右在大学里都听说过Jupyter Notebook&#xff0c;并且也安装用了一段时间&#xff0c;后来不知道什么原因没有用了。估计是那时候写代码的时候多一些&#xff0c;因为它可以直接写代码并运行结果&#xff0c;现在不怎么写代码了。 介绍 后缀名为.ipynb的json格式文件…
阅读更多...
M-G552PJ1 IMU（惯性测量单元）CAN接口

M-G552PJ1 IMU（惯性测量单元）CAN接口

一般描述 M-G552PJ1是一个小的形状因子惯性测量单元&#xff08;IMU&#xff09;&#xff0c;具有6个自由度&#xff1a;三轴角速率和 线性加速度&#xff0c;并提供了高稳定性和高精度的测量能力与使用的高精度 补偿技术。通过控制器局域网&#xff08;CAN&#xff09;接口…
阅读更多...
计算机毕业设计----Springboot农业物资管理系统

计算机毕业设计----Springboot农业物资管理系统

项目介绍 农业物资管理系统&#xff0c;管理员可以对角色进行配置&#xff0c;分配用户角色&#xff1b; 主要功能包含&#xff1a;登录、注册、修改密码、零售出库、零售退货、采购订单管理、采购入库管理、采购退货管理、销售管理、财务管理、报表管理、物资管理、基本资料管…
阅读更多...
superset未授权访问漏洞（CVE-2023-27524）复现

superset未授权访问漏洞（CVE-2023-27524）复现

Superset是一个开源的数据探索和可视化平台。它由Apache软件基金会支持&#xff0c;旨在帮助用户通过直观的方式探索、分析和可视化复杂的数据集。Superset支持多种数据源&#xff0c;包括关系型数据库、NoSQL数据库和各种其他数据存储系统。Apache Superset 2.0.1 版本及之前版…
阅读更多...
springboot057洗衣店订单管理系统

springboot057洗衣店订单管理系统

&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;一 、设计说明 1.1 研究背景 如…
阅读更多...
Java填充Execl模板并返回前端下载

Java填充Execl模板并返回前端下载

功能&#xff1a;后端使用Java POI填充Execl模板&#xff0c;并返回前端下载 Execl模板如下&#xff1a; 1. Java后端 功能&#xff1a;填充模板EXECL,并返回前端 controller层 package org.huan.controller;import org.huan.dto.ExcelData; import org.huan.util.ExcelT…
阅读更多...
DevOps搭建(十六)-Jenkins+K8s部署详细步骤

DevOps搭建(十六)-Jenkins+K8s部署详细步骤

​ 1、整体部署架构图 2、编写脚本 vi pipeline.yml apiVersion: apps/v1 kind: Deployment metadata:namespace: testname: pipelinelabels:app: pipeline spec:replicas: 2selector:matchLabels:app: pipelinetemplate:metadata:labels:app: pipelinespec:containers:- nam…
阅读更多...
计算机毕业设计——SpringBoot仓库管理系统(附源码)

计算机毕业设计——SpringBoot仓库管理系统(附源码)

1&#xff0c;绪论 1.2&#xff0c;项目背景 随着电子计算机技术和信息网络技术的发明和应用&#xff0c;使着人类社会从工业经济时代向知识经济时代发展。在这个知识经济时代里&#xff0c;仓库管理系统将会成为企业生产以及运作不可缺少的管理工具。这个仓库管理系统是由&a…
阅读更多...
Linux习题3

Linux习题3

解析&#xff1a; grep&#xff1a;查找文件内的内容 gzip&#xff1a;压缩文件&#xff0c;文件经压缩后会增加 gz&#xff1a;扩展名 find&#xff1a;在指定目录下查找文件 解析&#xff1a; A hosts文件是Linux系统上一个负责ip地址与域名快速解析的文件&#xff0c;以…
阅读更多...
自动化测试框架pytest系列之21个命令行参数介绍(二)

自动化测试框架pytest系列之21个命令行参数介绍(二)

第一篇 &#xff1a; 自动化测试框架pytest系列之基础概念介绍(一)-CSDN博客 接上文 3.pytest功能介绍 3.1 第一条测试用例 首先 &#xff0c;你需要编写一个登录函数&#xff0c;主要是作为被测功能&#xff0c;同时编写一个测试脚本 &#xff0c;进行测试登录功能 。 登…
阅读更多...
随机过程——卡尔曼滤波学习笔记

随机过程——卡尔曼滤波学习笔记

一、均方预测和随机序列分解 考虑随机序列 使用预测 定义 称为的均方可预测部分。 若相互独立&#xff0c;则是均方不可预测的。 定义随机序列的新息序列 V(k)基于样本观测的条件均值为0&#xff0c;即均方不可预测。 V(k)与是正交的&#xff0c;即。 二、卡尔曼滤波 …
阅读更多...
哪款台灯护眼效果最好？高品质的儿童护眼台灯推荐

哪款台灯护眼效果最好？高品质的儿童护眼台灯推荐

根据去年的报道&#xff0c;全国儿童青少年的整体近视率高达至52.7%&#xff0c;其中幼儿园及小学生患近视率为35.6%&#xff0c;初中生为71.1%&#xff0c;高中生和大学生为80.5%&#xff0c;大学生更是达到90%&#xff01;也就是说几乎绝大部分青少年都患有近视&#xff0c;而…
阅读更多...
SpringBoot知识02

SpringBoot知识02

1、快速生成mapper和service &#xff08;自动生成简单的单表sql&#xff09; 2、springboot配置swagger&#xff08;路径不用加/api&#xff09; &#xff08;1&#xff09;主pom导包&#xff08;子pom要引用&#xff0c;可选依赖&#xff09; <!-- swagger3…
阅读更多...
慢 SQL 的优化思路

慢 SQL 的优化思路

分析慢 SQL 如何定位慢 SQL 呢&#xff1f; 可以通过 slow log 来查看慢SQL&#xff0c;默认的情况下&#xff0c;MySQL 数据库是不开启慢查询日志&#xff08;slow query log&#xff09;。所以我们需要手动把它打开。 查看下慢查询日志配置&#xff0c;我们可以使用 show …
阅读更多...
网络市场中的品牌推广：面向新一代数字原住民的挑战与机遇

网络市场中的品牌推广：面向新一代数字原住民的挑战与机遇

随着科技的迅速发展和互联网的普及&#xff0c;我们正处在一个网络成熟期&#xff0c;一个以数字化和网络化为特征的新时代。在这个时代&#xff0c;新一代的数字原住民经营者正在崛起&#xff0c;他们依赖网络寻找商机&#xff0c;建立自己的事业。对于企业来说&#xff0c;如…
阅读更多...
最新文章

Copyright @ 2022~2023