HTML5 基础-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62696265/article/details/148292929

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>