编程笔记 html5cssjs 009 HTML链接我的网址簿

编程笔记 html5&css&js 009 HTML链接我的网址簿

一、代码
二、解释

这段代码的主要功能是展示一个包含多个分类和网址的网址簿，每个分类下有多个网址链接。通过a标签的href属性，用户可以点击链接跳转到相应的网址。同时，通过style标签定义的样式，网页呈现出了特定的字体颜色、背景颜色、边距和填充等视觉效果。

一、代码

<!DOCTYPE html>
<html lang="zh-cn">
<head><title>编程笔记 html5&css&js 我的网址簿</title><meta charset="utf-8"/><style>/* 选择你喜欢的颜色吧 */body {display: block;color: #eeeeee;background-color: teal;margin-left: 20%;margin-right: 20%;padding: 20px;}a {display: block;/* 设置链接为块级元素 */margin: 20px 20px;/* 设置左右边距为20px，上下边距为20px */}</style>
</head>
<body>
<h1>我的网址簿</h1>
<p>
<h3>媒体</h3>
<p><a href="https://yss5678.blog.csdn.net/">明月看潮生的博客_CSDN博客</a><a href="https://mp.csdn.net/?spm=1000.2115.3001.8539">CSDN创作中心</a><a href="https://www.csdn.net/?spm=1011.2124.3001.4476">CSDN - 专业开发者社区</a><a href="https://www.bilibili.com/">哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</a><a href="https://www.cnblogs.com/">博客园 - 开发者的网上家园</a><a href="https://cp.kuaishou.com/article/manage/video?status=2">快手</a><a href="https://v.qq.com/biu/u/history/"> 腾讯视频</a><a href="https://www.kongfz.com/">孔夫子旧书网</a><a href="https://weread.qq.com/">微信读书</a><a href="https://www.10jqka.com.cn/">同花顺财经__让投资变得更简单</a>
</p>
<h3>科技</h3>
<p><a href="https://www.aliyun.com/">阿里云-上云就上阿里云</a><a href="https://dev.csdn.net/">开发云 - 一站式云服务平台</a><a href="https://www.oschina.net/">OSCHINA - 中文开源技术交流社区</a><a href="https://www.chinaz.com/">站长之家 - 站长资讯-我们致力于为中文网站提供动力！</a><a href="https://leetcode.cn/">力扣（LeetCode）官网 - 全球极客挚爱的技术成长平台</a><a href="https://www.proginn.com/">程序员客栈-领先的程序员自由工作平台-程序员兼职</a><a href="https://www.docker.com/">Docker</a><a href="https://www.126.com/">126网易免费邮-你的专业电子邮局</a><a href="https://www.edrawsoft.cn/">绘制精美的流程图、思维导图、信息图等 - 亿图官网</a>
</p>
<h3>教育</h3>
<p><a href="https://www.zxx.edu.cn/">国家中小学智慧教育平台</a><a href="https://le.ouchn.cn/home">首页 | 终身教育平台</a><a href="https://www.icourse163.org/">中国大学MOOC(慕课)_国家精品课程在线学习平台</a><a href="https://www.smartedu.cn/">国家智慧教育-高教</a><a href="https://www.researchgate.net/topic/Computer-Science">计算机科学</a><a href="https://www.ieee.org/">IEEE - 世界上最大的技术专业组织，致力于推动技术进步，造福人类。</a>
</p>
<h3>编程</h3>
<p><a href="https://www.jetbrains.com.cn/">JetBrains: 软件开发者和团队的必备工具</a><a href="https://paat.ceracu.org.cn/">全国青少年编程能力等级考试</a><a href="https://code.visualstudio.com/Download">Download Visual Studio Code</a><a href="https://www.postgresql.org/">PostgreSQL：世界上最先进的开源数据库</a>
</p>
<h3>GO</h3>
<p><a href="https://go.dev/">The Go Programming Language</a><a href="https://golang.google.cn/">The Go Programming Language 镜像</a><a href="https://hao.studygolang.com/">Golang导航 - 学Go从这里开始！</a><a href="https://gin-gonic.com/zh-cn/#td-block-1">Gin Web Framework</a>
</p>
<h3>RUST</h3>
<p><a href="https://www.rust-lang.org/zh-CN/">Rust 程序设计语言官网</a><a href="https://course.rs/about-book.html">关于本书 - Rust语言圣经(Rust Course)</a><a href="https://kaisery.github.io/trpl-zh-cn/">Rust 程序设计语言 简体中文版教程</a><a href="https://rustwiki.org/zh-CN/rust-by-example/">通过例子学 Rust 中文版</a><a href="https://www.runoob.com/rust/rust-tutorial.html">Rust 教程 | 菜鸟教程</a><a href="https://rocket.rs/">Rocket - Simple, Fast, Type-Safe Web Framework for Rust</a>
</p>
<h3>VUE</h3>
<p><a href="https://yiming_chang.gitee.io/pure-admin-doc/">Pure Admin 保姆级文档</a><a href="https://cn.vuejs.org/">Vue.js - 渐进式 JavaScript 框架 | Vue.js</a><a href="https://cn.vitejs.dev/guide/">开始 | Vite 官方中文文档</a><a href="https://nodejs.cn/">Node.js 中文网</a><a href="https://typoraio.cn/#">Typora 官方中文站</a><a href="https://pinia.vuejs.org/zh/">Pinia | The intuitive store for Vue.js</a><a href="https://www.typescriptlang.org/docs/handbook/intro.html">TypeScript: Handbook</a>
</p>
<h3>PYTHON</h3>
<p><a href="https://www.python.org/">Welcome to Python.org</a><a href="https://www.w3cschool.cn/yshfid/">Jinja2中文文档</a><a href="https://pandas.pydata.org/">pandas - Python 数据分析库</a>
</p>
<h3>database</h3>
<p><a href="https://docs.sqlalchemy.org/en/20/dialects/postgresql.html">PostgreSQL — SQLAlchemy 2.0 Documentation</a><a href="https://pymssql.readthedocs.io/en/stable/pymssql_examples.html">pymssql</a><a href="https://www.psycopg.org/psycopg3/docs/">psycopg 3.2.0.dev1 文档</a>
</p>
<h3>ENGLISH</h3>
<p><a href="https://ai.youdao.com/#/">有道智云AI开放平台</a><a href="https://fanyi.youdao.com/">有道</a><a href="https://cn.bing.com/translator/">翻译</a><a href="https://dict.youdao.com/">网易有道</a><a href="https://ttime.timerecord.cn/">TTime | 一款简洁、高效、高颜值的输入、截图、划词翻译AI软件</a>
</p>
</body>
<footer style="text-align: right;font-size: 1.5rem;font-weight: bold;margin-right: 22%;margin-bottom: 5rem;color: #ffcc00;">HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
</footer>
</html>

二、解释

HTML中的<p>标签代表段落（Paragraph），是用于定义网页文本内容中一个逻辑上的段落的元素。
它是块级元素，意味着：

自动换行：每个<p>标签内包含的内容会在浏览器中自动生成一个新的文本行，并且前后会有一些默认的上下间距。
容器性：<p>标签会创建一个“框”来包围其内部的文本或其它内嵌元素，这个框可以接受CSS样式设置，如宽度、高度、背景颜色、内外边距等。
语义化：在HTML5中，<p>标签强调的是内容的语义结构，它告诉浏览器和搜索引擎这是一个独立的思想或主题单元。
结构化文档：通过合理使用
标签，可以更好地组织和呈现文档内容，使页面具有更好的可读性和可访问性。

这段HTML代码定义了一个网页，它包括以下几个部分：
文档类型声明（）：指明这是一个HTML5文档。
HTML标签：包含了整个网页的结构。
head标签：包含了网页的头部信息，如标题和样式。
title标签：定义了网页的标题。
meta标签：定义了网页的字符编码为UTF-8。
style标签：定义了网页的样式，包括body和a标签的样式。
body标签：包含了网页的主要内容。
h1标签：定义了网页的主标题。
h3标签：定义了各个分类的子标题。
p标签：定义了各个分类下的链接。
a标签：定义了可点击的链接，指向不同的网址。
footer标签：定义了网页的页脚，包含了作者信息。
这段代码的主要功能是展示一个包含多个分类和网址的网址簿，每个分类下有多个网址链接。通过a标签的href属性，用户可以点击链接跳转到相应的网址。同时，通过style标签定义的样式，网页呈现出了特定的字体颜色、背景颜色、边距和填充等视觉效果。