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

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标题的重要性依次递减。

cpp 复制代码
<!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> 
cpp 复制代码
<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提供了专门的文本格式化标签

cpp 复制代码
<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、特殊字符标签

相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端