【HTML】从0开始构建HTML页面

news2024/12/27 10:10:52

1、HTML文档基本格式

1.1、!DOCTYPE:文档类型声明
1.2、html:根标签
1.3、head:头部标签
1.4、body:主体标签

2、头部相关标签

2.1、< title>

< title>标签用于定义HTML页面的标题,即给网页取一个名字,必须位于< head>标签之内。

2.2 、< meta>

标签用于定义页面的元信息,可重复出现在< head>头部标签中。
在这里插入图片描述

3、主体相关标签

3.1、标题标签

HTML提供了6个等级的标题,即h1、h2、h3、h4、h5和h6,从h1到h6标题的重要性依次递减。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题标记</title>
</head>
<body>
<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h3>这是3级标题</h3>
<h4>这是4级标题</h4>
<h5>这是5级标题</h5>
<h6>这是6级标题</h6>
</body>
</html>

效果图:
在这里插入图片描述

3.2、段落标签

在网页中使用p标签来定义段落。< p >标签是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

<p align="对齐方式">段落文本</p>

align属性设置对齐方式:
①:align=“left”
②:align=“center”
③:align=“right”

3.3、水平线标签

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。水平线可以通过 < hr />标签来定义。

<hr 属性="属性值" />

在这里插入图片描述

3.4、换行标签

在word中,按【Enter】键可以将一段文字换行显示,但在网页中,如果想要将某段文本强制换行显示,就需要使用换行标签< br />。

3.5、文本样式标签

文本样式标签用来控制网页中文本的字体、字号和颜色。

<font 属性="属性值">文本内容</font> 

在这里插入图片描述

<body>
<h2><font face="微软雅黑" size="5" color="#545454">传智播客设计学院</font></h2>
<p>
	<font size="2" color="#515151">
    	&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0e5c9e">人生若只如初见</font>何事秋风悲画扇。
    </font>
</p>
</body>

3.6、文本格式化标签

在网页中,有时需要为文字设置粗体、斜体或下划线等一些特殊显示的文本效果,为此HTML提供了专门的文本格式化标签
在这里插入图片描述

<body>
<p>我是正常显示的文本</p>
<p><b>我是使用b标记加粗的文本</b><strong>推荐使用strong加粗</strong></p>
<p><i>我是使用i标记倾斜的文本</i><em>推荐使用em斜体文本</em></p>
<p><u>我是u带下划线文本</u>,不建议使用</p>
<p><s>我是s带删除线文本</s><del>推荐使用del带删除线文本</del></p>
</body>

效果图:
在这里插入图片描述

4、图文混排

4.1、常见图像格式

GIF:最突出的地方就是它支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片质量几乎没有损失。再加上GIF支持透明(全透明或全不透明),因此很适合在互联网上使用。GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。
PNG:包括PNG-8和真色彩PNG(PNG-24和PNG-32)。相对于GIF,PNG最大的优势是体积更小,支持alpha透明(全透明,半透明,全不透明),并且颜色过渡更平滑,但PNG不支持动画。其中PNG-8和GIF类似,只能支持256中颜色,如果做静态图可以取代GIF,而真色彩PNG可以支持更多的颜色,同时真色彩PNG(PNG-32)支持半透明效果的处理。
JPG:所能显示的颜色比GIF和PNG要多的多,可以用来保存超过256种颜色的图像,但是JPG是一种有损压缩的图像格式,这就意味着每修改一次图片都会造成一些图像数据的丢失。
总结:在网页中小图片或网页基本元素如图标、按钮等考虑使用GIF或PNG-8格式图像,半透明图像考虑使用真色彩PNG格式(一般指PNG32),色彩丰富的图片则考虑使用JPG格式,动态图片可以考虑使用GIF格式。

4.2、图像标签

<img src="图像URL" />

在这里插入图片描述

4.3、特殊字符标签

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Programmatically add website content to OpenAI with C#

题意&#xff1a;使用 C# 以编程方式将网站内容添加到 OpenAI。 问题背景&#xff1a; Our goal is to have a ChatGPT answer questions about our websites content. 我们的目标是让 ChatGPT 回答关于我们网站内容的问题。 We are trying to integrate something similar t…

设计模式笔记01(java版)

文章目录 设计模式概述学习设计模式的必要性设计模式分类创建型模式结构型模式行为型模式 UML类图概述类图的作用类图表示法类的表示方式类与类之间关系的表示方式1&#xff0c;单向关联2&#xff0c;双向关联3&#xff0c;自关联聚合关系组合关系依赖关系继承关系实现关系 软件…

【hot100篇-python刷题记录】【买卖股票的最佳时机】

摆烂几天,又来了。 R5-贪心篇(不像) 贪心的常规思路是找到贪心切入点,例如最经典的算法是安排最多活动问题,需要以结束时间排序,然后遍历不冲突,计算最大数即可(每次都选择最早结束的活动)。 贪心算法的使用需要满足贪心特征。即局部最优解等于全局最优解。 对于本…

Docker 修改容器端口映射(以 Portainer 为例)

文章目录 背景解决第1步:找到容器id第2步:查找docker根目录第3步:停止docker服务第4步:修改容器的hostconfig.json配置文件第5步:启动docker服务第6步:验证参考背景 项目中有个服务也使用了9000端口,而Portainer的默认端口也是9000。结果可想而知,端口冲突,肯定有一个…

stable diffusion inpainting(img2img+inpaint/inpaint-model)

https://zhuanlan.zhihu.com/p/681250295https://zhuanlan.zhihu.com/p/681250295AIGC专栏4——Stable Diffusion原理解析-inpaint修复图片为例_diffusion inpaint-CSDN博客文章浏览阅读1.7w次,点赞42次,收藏79次。Inpaint是Stable Diffusion中的常用方法,一起简单学习一下。…

CAS-ViT实战:使用CAS-ViT实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…

springer 投稿系统中返修注意点

初次提交 初次提交时&#xff0c; manuscript 提交的是 pdf 文件 返修后提交 在经过返修之后需要提交的是注意一下几点&#xff1a; 此时提交的Blined manuscript &#xff0c;虽然名字没变&#xff0c;但不能再提交pdf 文件&#xff0c; 而需要提交的是可编辑的源文件 .te…

Sketch-gen模型部署教程

一、介绍 SketchGen: 一种图像转草图工具&#xff0c;主要用于制作合成数据集或生成参考图。它能够帮助研究人员和开发者快速地从真实图像中提取出线稿轮廓&#xff0c;这对于计算机视觉任务如物体识别、场景理解等非常有用。通过使用这种工具&#xff0c;可以更方便地创建训练…

【科技赋能教育】电路仿真软件:解锁电路教学新篇章,让知识触手可及!

教育领域正经历着一场前所未有的变革。电路学&#xff0c;作为理工科学生必修的一门基础课程&#xff0c;其抽象性、复杂性和实验条件的高要求&#xff0c;曾让无数学生望而却步。然而&#xff0c;随着电路仿真软件的出现&#xff0c;这一切正悄然发生着变化&#xff0c;它不仅…

Java面试-基础

1. 面向对象 什么是面向对象 什么是面向对象&#xff1f; 对比面向过程&#xff0c;是两种不同的处理问题的角度 面向过程更注重事情的每一个步骤及顺序&#xff0c;面向对象更注重事情有哪些参与者 &#xff08;对象&#xff09;、及各自需要做什么 封装、继承、多态 2. …

yum 安装 MySQL 8.0【2024最新教程】

文章目录 第 1 步:添加 MySQL Yum Repository第 2 步:【可选】选择 MySQL 版本第 3 步:安装 MySQL Community Server第 4 步:启动 MySQL第 5 步:修改 root 密码第 6 步:【可选】修改配置文件默认配置修改数据目录和日志文件添加更多配置第 7 步:【可选】修改 root 可外部…

【应急响应】-linux日志被删除?

❤️博客主页&#xff1a; iknow181 &#x1f525;系列专栏&#xff1a; 网络安全、 Python、JavaSE、JavaWeb、CCNP &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐评论✍ 在 Linux 应急响应中&#xff0c;攻击者清理日志的行为给追踪和分析带来了巨大挑战。本文将介绍在日志被…

【STM32项目】在FreeRtos背景下的实战项目的实现过程(三)

个人主页~ 实战项目的实现过程&#xff08;一&#xff09;~ 实战项目的实现过程&#xff08;二&#xff09;~ 实战项目的实现过程 五、读例程1、初始化函数2、while函数3、头文件4、源文件 六、移植程序 五、读例程 将一些特定的模块调试好&#xff0c;就是那些使用别的软件…

在Windows Server上安装typecho博客程序(基于IIS)

Typecho Typecho是由type和echo两个词合成的&#xff0c;来自于开发团队的头脑风暴。Typecho基于PHP5开发&#xff0c;支持多种数据库&#xff0c;是一款内核强健﹑扩展方便﹑体验友好﹑运行流畅的轻量级开源博客程序。 网上大多在Windows下安装Typecho的教程都是基于Apache服…

铁电随机存取存储器(FeRAM):前景黯淡,难以突破

铁电随机存取存储器&#xff08;FeRAM&#xff09;是一种快速、非易失性存储器&#xff0c;但它面临着与Optane相似的困境——目前的发展停滞不前。 ### 快速非易失性存储器技术 存在多种快速、非易失性存储器技术&#xff0c;理论上可以填补NAND和NOR与DRAM之间的存储层级空…

ArgoCD 启用Web终端,实现命令行进容器【详细步骤】

文章目录 Terminal 简介启用 Terminal第 1 步:启用 UI第 2 步:设置 Role 或 ClusterRole第 3 步:授权 API扩展知识 - ArgoCD RBACArgoCD 内置用户内置角色匿名/已认证用户 PolicyRBAC 模型结构应用相关 Policy项目级别配置页面配置ArgoCD CLI 配置扩展argocd-cm 示例argocd-…

Vue循环遍历:v-for 指令

1、v-for 指令 在程序设计中&#xff0c;循环控制是变化最丰富的技术。Vue.js 提供了列表渲染的功能&#xff0c;可将数组或对象中的数据循环渲染到 DOM 中。在 Vue.js 中&#xff0c;列表渲染使用的是 v-for 指令&#xff0c;其效果类似于 JavaScript 中的遍历。语法格式如下…

回归预测|基于Transformer-LSTM组合模型的数据回归预测Matlab程序 多特征输入单输出

**回归预测|基于Transformer-LSTM组合模型的数据回归预测Matlab程序 多特征输入单输出 ** 文章目录 前言回归预测|基于Transformer-LSTM组合模型的数据回归预测Matlab程序 多特征输入单输出 Transformer-LSTM 一、Transformer-LSTM模型Transformer-LSTM模型的原理1. Transforme…

Leetcode每日刷题之1658.将x减到0的最小操作数(C++)

1.题目解析 本题的要求是给出一个正整数数组与一个x&#xff0c;要求只从数组两端取数据后x减去取出的数据&#xff0c;求出将x减为0的最小操作数&#xff0c;即找出数组两端的数字保证其和为x并且要求取出的数字个数最少&#xff0c;如果没有符合要求的数字则返回-1 题目来源&…

C语言 | Leetcode C语言题解之第357题统计各位数字都不同的数字个数

题目&#xff1a; 题解&#xff1a; int countNumbersWithUniqueDigits(int n) {if (n 0) {return 1;}if (n 1) {return 10;}int ans 10, cur 9;for (int i 0; i < n - 1; i) {cur * 9 - i;ans cur;}return ans; }