网站开发：XTML+CSS - 网页文档结构

1. 前言

HTML（HyperText Markup Language，超文本标记语言）是构建网页和 web 应用程序的标准标记语言。它定义了网页的结构和内容，允许开发者创建有组织、语义化的文档。

HTML 使用一系列的元素（elements）和标签（tags）来标记不同类型的内容，比如文本、图像、链接、表单、视频等。每个 HTML 标签都有特定的用途，可以用来定义页面的不同部分，如标题、段落、列表、链接、图片等。

 

2. 文档结构

<!DOCTYPE html>

用于告知浏览器当前文档的HTML版本，有助于页面渲染

<html>
...
</html>

上述的<html>标签象征HTML标记文档的开始，可以省略，但为了保持文档的完整性最好加上。

<head>是HTML文档中用于包含有关网页的元数据，在<body>标签之前，通常对于网站中内部进行渲染与处理，通常包含以下内容：

  • <title>: 定义网页的标题，显示在浏览器标签页上。
  • <meta>: 提供文档的元数据，比如字符集、作者、描述等。
  • <link>: 连接外部资源，比如 CSS 文件。
  • <style>: 内部 CSS 样式。
  • <script>: 内部 JavaScript 代码或链接到外部 JavaScript 文件。
<head>
...
</head>

2.1 title

tltle是自定义网页栏目显示

<title> 这是我的第一个网站 </title>

效果如下图所示：

 

2.2 meta标签

meta一般针对于网页页面的元信息，在我的理解就是处理网页内部内容的一个框架，例如网页本身编码形式，网页中索引等。

针对于meta，可以将其比作其他编程语言中的类型，后续所跟charset，name等是他的不同功能呈现方式，选择相应功能后，根据content进行相关参数设定。

<meta charset='UTF-8'> #设置浏览器显示形式
<meta name='keywords' content='关键字,keywords' /> #这个网页的关键字，关于什么
<meta name='description' content='网页的介绍' /> #针对于搜索引擎网页的摘要介绍
<meta http-equiv='refresh' content='5,url' /> #设置间隔5s，跳转至url;
<!-- 如果没有设置url，则默认刷新 -->

3. 文本与图像

HTML中编写主题内容就像写一篇文章，要有标题，正文，美化的图片等等

网页所显示的内容都放在网页的主题标记内，是HTML文件的重点所在

主体标记以body进行声明，以此开始以此结束。

<body>
...
</body>

3.1 标题

HTML文档中包含有各种级别的标题，由<h1>至<h6>由重要性进行排序

h实际上就是headline的简称，方便大家记忆

<html>
<head>
</head><body>
<h1>这里是第一级标题</h1>
<h2>这里是第二级标题</h2>
<h3>这里是第三级标题</h3>
<h4>这里是第四级标题</h4>
<h5>这里是第五级标题</h5>
<h6>这里是第六级标题</h6>
</body></html>

3.2 文字列表（目录）

文字列表可以有序编排一些信息资源，例如目录等，使得网站内容更加结构化和条理化，方便浏览者更加方便跨界获取信息

3.2.1 无序列表

无序列表使用<ul></ul>标签进行声明，其中对于每一个列表使用<li></li>

<body>
<h1>游戏设计</h1>
<ul><li>项目需求</li><li>内容收集</li><ul> <!-- 列表中也可以嵌套列表 --><li>背景调查</li></ul>
</ul>
</body>

3.2.2 有序列表

有序列表顾名思义列表中的标签都是有次序的，标记为<ol></ol>，每一个列表使用<li></li>

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>

如下图所示，有序列表将文本自动编码 

 

3.3 文本段落

使用标签<p></p>进行声明，paragraph的简称，声明后后序文本为成为一个段落，声明结束后自动换行。

注意在HTML中打若干个空格，实际上只会显示一个空格

<p>一起学习哈哈哈哈哈啊哈哈</p>
<p>学个勾巴</p>

3.4 文本样式与排版

3.4.1 重要文本

文本样式标签跟在段落标签之后

<p><b>粗体文字</b></p>
<p><em>强调文字</em></p>
<p><strong>超级强调文字</strong></p>

3.4.2 倾斜文字

<p><I>斜体字</i></p>

 3.4.3 上下标显示

<!-- 上标显示 -->
<p>c=a<sup>2</sup></p><!-- 下标显示 -->
<p>c=a<sub>2</sup></p>

3.4.4 换行标记

换行标记是一个单标签<br/>

<body>
我是<br/>一个<br/>大傻子
<body>

3.5 图片

网页中使用的图像可以是GIF，JPEG，MBP，PNG等格式的图像文件

URL(Uniform Resource Locator)，翻译为“统一资源定位器”，网络中的计算机是通过IP地址进行区分，若需要访问某个资源，首先需要定位该计算机，然后获取相应文件。

http://www.baidu.com/pages/computer.html

http:表示协议

//.../:主机名

绝对路径：完整的去描述文件位置的路径就是绝对路径

相对路径：以当前位置作为参考点，相对于目标的位置，例如与html文件同级的情况下，相对路径是image/tp.jpg （image文件夹中的tp图片）；

".."表示上一级目录，"../.."表示上级的上级目录

插入图片的标签为单标记<img>，相关属性下图所示

属性值描述
alttext图像的文本描述
srcURL要显示的图像的URL
width"pixcel"设置图像宽度
height"pixels"设置图像宽度
<body>
<img src='images/picture.jpg' alt='草莓沙拉' width="200">
</body>

 

 

4. 超链接

4.1 网页跳转

超链接的文本与图形可以连接到其他页面

超链接标记为<a></a>

在<a>后需要一个载体去接受超链接，可以使用文本也可以使用图片

<a href='www.baidu.com'>百度一下</a> #使用文本进行超链接
<a href='www.baidu.com'><img src='image.jpg'></a> #使用图片进行超链接

 在默认状态下，跳转页面会覆盖掉原界面，可以设置新窗口显示超链接页面

<a href='http://www.baidu.com' target='_blank'> new window </a>

4.2 邮箱跳转

使用“mailto”关键字进行声明，点击后用户即可跳转至发送邮箱页面

<a href="mailto":xxxxx@xx.com>邮箱发送</a>

5. 标签总结

标签效果
<head></head>渲染
<body></body>主体
<title></title>网页标题
<h1></h1>标题
<p></p>段落
<img src='ULR' alt=''>图片
<a href='URL'></a>超链接
<ol></ol> <li></li>

有序列表

<ul></ul> <li></li>

无序列表

杂七杂八的实验汇总： 

<!-- # HB -->
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset='utf-8' />
<title> 这是我的第一个网站 </title>
</head>
<body>
<h1> How can i say </h1>
<ul><li>项目需求</li><li>内容手机</li>
</ul><ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol><p><i>This is a paragraph of text. It will be displayed with a space before and after it.</i></p>
<p>OKOKOKOKOKOKOK</p>
<h2> OK </h2>
<p>H<sub>2 </p>
<img src='WechatIMG396.jpeg' alt='haha'>
<p> <a href='http://www.baidu.com'>公司简介</a> </p>
<p> <a href='https://shibboleth.nyu.edu/idp/profile/SAML2/Redirect/SSO?execution=e5s1)'><img src='WechatIMG396.jpeg'></a> </p>
<p> <a href='mailto:1173083865@qq.com'>站长信箱</a> </p>
<p> <a href='http://www.baidu.com' target='_blank'> new window </a> </p></body></html><!--meta 设置元属性，例如set的作用-->
<!--“keywords”“description”相当于功能定义，设置元属性的具体内容-->
<!--content表示所包含的内容--><!--h1,h2代表标签，重要性程度高低进行排列,字体由大至小进行打印-->
<!--p代表段落-->
<!--相关文本格式化字符查表得到-->

 

6. 参考资料

《精通HTML5+CSS3+JavaScript网页设计》

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

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

相关文章

如何轻松开启美股交易之旅？

如何轻松开启美股交易之旅？

你是否正在考虑进入美股市场&#xff0c;却不知道从哪里开始&#xff1f;“如何投资美股”的具体步骤和技巧&#xff0c;你是否已经掌握&#xff1f; 掌握美股交易时间与规则 1. 美股交易时间&#xff1a;灵活安排交易计划的基础 如何投资美股&#xff1f;首先&#xff0c;你…
阅读更多...
简单的java调动远程服务器shell脚本

简单的java调动远程服务器shell脚本

简单的java调动远程服务器shell脚本 1.需求 我们想要在我们的xxl-job中调用一个定时任务&#xff0c;固定时间频率去调用另一个服务器的shell脚本&#xff0c;进行数据批量的处理&#xff0c;整体需求逻辑非常简单&#xff0c;此处记录一下java调用shell脚本部分&#xff0c;…
阅读更多...
Redis应用（2）——Redis的项目应用（一）

Redis应用（2）——Redis的项目应用（一）

/** * 雪花id的工具类 */ Slf4j public class SnowFlakeUtil { private static long workerId 0; private static long datacenterId 1; private static Snowflake snowflake IdUtil.getSnowflake(workerId,datacenterId); PostConstruct // 自动调用&#xff0c;在构造方法…
阅读更多...
Python 与 Excel 图表自动化：让数据“会说话”

Python 与 Excel 图表自动化：让数据“会说话”

在数据驱动的时代&#xff0c;数据分析师、财务专家、销售经理们都离不开Excel——这个简单而强大的工具。而Excel图表是展现数据故事的不二之选。然而&#xff0c;手动创建图表不仅耗时&#xff0c;还容易出错。如何让这繁琐的工作变得简单&#xff1f;答案就是&#xff1a;Py…
阅读更多...
网络安全服务基础Windows--第8节-DHCP部署与安全

网络安全服务基础Windows--第8节-DHCP部署与安全

DHCP协议理解 定义&#xff1a;DHCP&#xff1a;Dynamic Host Configuration Protocol&#xff0c;动态主机配置协议&#xff0c;是⼀个应⽤在局域⽹中的⽹络协议&#xff0c;它使⽤UDP协议⼯作。 67&#xff08;DHCP服务器&#xff09;和68&#xff08;DHCP客户端&#xff0…
阅读更多...
如何在 Cursor IDE 中使用驭码CodeRider 进行 AI 编程？

如何在 Cursor IDE 中使用驭码CodeRider 进行 AI 编程？

驭码CodeRider 是极狐GitLab 公司自研发布的 AIGC 产品&#xff0c;可以用来进行 AI 编程和 DevOps 流程处理。本文分享如何在 Cursor 中使用驭码CodeRider。 Cursor 是近期比较火爆的一款 AI 代码编辑器&#xff0c;通过将 AI 能力引入软件研发来提升软件研发效率。而驭码Cod…
阅读更多...
三级_网络技术_53_应用题

三级_网络技术_53_应用题

一、 请根据下图所示网络结构回答下列问题。 1.设备1应选用__________网络设备。 2.若对整个网络实施保护&#xff0c;防火墙应加在图中位置1~3的__________位置上。 3.如果采用了入侵检测设备对进出网络的流量进行检测&#xff0c;并且探测器是在交换机1上通过端口镜像方式…
阅读更多...
CISAW认证涉及10个技术方向，到底哪个更适合您？

CISAW认证涉及10个技术方向，到底哪个更适合您？

对于渴望在信息安全领域提升自己技能的你&#xff0c;CISAW&#xff08;信息安全保障人员&#xff09;认证无疑是一个理想的选择。 这项认证不仅适用于网络信息安全岗位的专业人员&#xff0c;还为那些寻求深化专业知识、提高职业竞争力的人士提供了宝贵的学习机会。 CISAW认…
阅读更多...
【Linux】消息队列信号量

【Linux】消息队列信号量

目录 消息队列 原理 接口 指令 信号量 概念 对于信号量理论的理解 信号量的操作 信号量的指令 消息队列 原理 消息队列提供了一个从一个进程向另外一个进程发送一个数据块的方法&#xff0c;每个数据块都有一个类型。对消息队列的的管理也是先描述&#xff0c;再组织…
阅读更多...
开源网安引领AIGC+开发安全，智能防护铸就软件安全新高度

开源网安引领AIGC+开发安全，智能防护铸就软件安全新高度

近日&#xff0c;国内网络安全领域知名媒体数说安全正式发布了《2024年中国网络安全市场100强》和《2024年中国网络安全十大创新方向》。开源网安凭借在市场表现力、资源支持力以及产品在AI方向的创新力上的优秀表现成功入选百强榜单&#xff0c;并被评为“AIGC开发安全”典型厂…
阅读更多...
go发邮件的功能如何使用？新手必备的指南？

go发邮件的功能如何使用？新手必备的指南？

Go发邮件怎么实现发信功能&#xff1f;使用go发邮件的注意事项&#xff1f; 在这个数字化时代&#xff0c;电子邮件已成为我们日常沟通的重要工具。对于新手来说&#xff0c;掌握如何使用go发邮件功能是至关重要的。AokSend将详细介绍go发邮件的使用方法&#xff0c;帮助你快速…
阅读更多...
分布式服务调用RPC框架复习

分布式服务调用RPC框架复习

目录 1、Dubbo概念与架构 1.1 Dubbo简介 1.2 注册与发现流程图 1.3 Dubbo架构图 2、Dubbo调用流程 3、关于Dubbo 服务治理 3.1 Dubbo通信协议 3.2 序列化方式 3.3 负载均衡算法 4、Dubbo与Spring Cloud关系 4.1 相似之处 4.2 差异之处 5、Dubbo 与 gRPC 关系 6、…
阅读更多...
【C/C++】web服务器项目开发总结【请求 | 响应 | CGI】

【C/C++】web服务器项目开发总结【请求 | 响应 | CGI】

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;Linux_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 一&#xff0c;背景 二&…
阅读更多...
使用 Milvus 和 Streamlit 搭建多模态产品推荐系统

使用 Milvus 和 Streamlit 搭建多模态产品推荐系统

我们可以使用 Milvus 搭建多模态 RAG 应用&#xff0c;用于产品推荐系统。用户只需简单上传一张图片并输入文字描述&#xff0c;Google 的 MagicLens 多模态 Embedding 模型就会将图像和文本编码成一个多模态向量。然后&#xff0c;使用这个向量从 Milvus 向量数据库中找到最相…
阅读更多...
C++设计模式——Template Method模板方法模式

C++设计模式——Template Method模板方法模式

一&#xff0c;模板方法模式的定义 模板方法模式是一种行为型设计模式&#xff0c;它先定义了一个算法的大致框架&#xff0c;然后将算法的具体实现步骤分解到多个子类中。 模板方法模式为算法设计了一个抽象的模板&#xff0c;算法的具体代码细节由子类来实现&#xff0c;从…
阅读更多...
【Linux】进程状态（RSDT 阻塞 僵尸 孤儿）

【Linux】进程状态（RSDT 阻塞 僵尸 孤儿）

目录 进程状态 进程状态的查看 R和S 运行状态 T/t 暂停状态 kill命令 D &#xff08;disk sleep&#xff09;状态、 Z 状态&#xff08;僵尸状态&#xff09; 孤儿状态 运行状态 阻塞状态 进程状态 一个进程通常有三种状态 ◉ 就绪状态&#xff08;Ready&#xff0…
阅读更多...
如何验证谷歌seo服务商的实力真假？

如何验证谷歌seo服务商的实力真假？

要验证谷歌SEO服务商的实力真假&#xff0c;可以通过几种简单有效的方法。 你可以要求对方通过视频会议或上门服务&#xff0c;展示谷歌官方后台的真实数据。 通过Google Search Console的实时数据&#xff0c;你可以直接看到他们为客户提供的服务效果&#xff0c;这样的数据是…
阅读更多...
【加密社】如何根据.dat文件恢复密钥

【加密社】如何根据.dat文件恢复密钥

加密社 看了这篇指南&#xff0c;你将了解助记词和密钥地址&#xff08;qianbao&#xff09;背后的基本原理。 以及&#xff0c;如何找回你的大饼密钥。 Not your key, not your coin 如果你不掌握自己加密货币钱包的私钥&#xff0c;那么你实际上并不能完全控制你的资产 在当今…
阅读更多...
【STM32开发笔记】STM32H7S78-DK上的CoreMark移植和优化--兼记STM32上的printf重定向实现及常见问题解决

【STM32开发笔记】STM32H7S78-DK上的CoreMark移植和优化--兼记STM32上的printf重定向实现及常见问题解决

【STM32开发笔记】STM32H7S78-DK上的CoreMark移植和优化--兼记STM32上的printf重定向实现及常见问题解决 一、CoreMark简介二、创建CubeMX项目2.1 选择MCU2.2 配置CPU时钟2.3 配置串口功能2.4 配置LED引脚2.5 生成CMake项目 三、基础功能支持3.1 支持记录耗时3.2 支持printf输出…
阅读更多...
基于FPGA的OV5640摄像头图像采集

基于FPGA的OV5640摄像头图像采集

1.OV5640简介 OV5640是OV&#xff08;OmniVision&#xff09;公司推出的一款CMOS图像传感器&#xff0c;实际感光阵列为&#xff1a;2592 x 1944&#xff08;即500w像素&#xff09;&#xff0c;该传感器内部集成了图像出炉的电路&#xff0c;包括自动曝光控制&#xff08;AEC…
阅读更多...
最新文章

Copyright @ 2022~2023