当前位置：首页 > ops >正文

HTML5基础

ops 2025/7/21 19:55:50

1. 什么是HTML

W3C标准

2. HTML的基本结构

<!DOCTYPE>

<title>

<meta>

标题标签<h1>

段落标签<p>

换行标签<br/>

水平线标签<hr/>

字体加粗<strong>、斜体<em>

注释和特殊符号

范例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一个页面</title>
</head>
<body><h1>徐州欢迎您!</h1><strong>&quot;简介&quot;</strong><em>这是云龙湖&nbsp;&nbsp;&gt;旁边&lt;</em><p>徐州欢迎你，有梦想谁都了不起！</p><p>有勇气就会有奇迹。</p><p>有勇气就会有奇迹。有勇气就会有奇迹。</p><hr/>有勇气就会有奇迹。<br/>有勇气就会有奇迹。<br/></body>
</html>

3. 图像标签

如在同文件夹的img中有1.webp格式的图片，举例：

<img src="img/1.webp" width="200" height="200">

4. 链接标签

举例：

<a href="01.html" target="_self">按钮</a> //点击（按钮）跳转到01.html（不打开新页面）

<a href="01.html" target="_blank"><img src="img/1.png" alt="派大星" title="图片"/>
</a>
//点击派大星图片（如果没有在img文件夹中找到1.png则会出现一个默认图片和派大星超链接）
跳转到新页面展示01.html

<a href="01.html" target="_self"><img src="img/1.webp" alt="派大星" title="图片" width="200" height="200"/>
</a>

图片找不到，alt和title也没有的话就只显示一个烂图标，一般alt是必加的

5. 超链接

页面间链接

锚链接

功能性链接

6. 行内元素和块元素

如果将元素用红框框起来，则会发现：

7. 例题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>快速购物</title><style>p{position: fixed; right: 5%; top: 50%; font-size: 40px; }</style>
</head>
<body><p><a href="#t1">服装鞋包</a><br /><a href="#t2">个护美妆</a><br /><a href="#t3">手机通讯</a><br /><a href="#t3">家用电器</a><br /></p><a href="01.html" target="_self">按钮</a><br/><a href="01.html" target="_self"><img src="img/1.png" alt="派大星" title="图片"/></a><br/><a href="01.html" target="_self"><img src="img/1.webp" alt="派大星" title="图片" width="200" height="200"/></a><h1><a name="t1">服装鞋包</a></h1><img src="img/img2.png"><br/><h1><a name="t2">个护美妆</a></h1><img src="img/img3.png"><br/><h1><a name="t3">手机通讯</a></h1><img src="img/img4.png"><br/><h1><a name="t4">家用电器</a></h1><img src="img/img5.png"><br/></body>
</html>