【HTML5】01-HTML摆放内容-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>文本内容</strong>
    <hr>
</body>
</html>

2. HTML骨架

HTML基本骨架是网页模板

html 是整个网页

head 是网页头部，存放给浏览器看的代码

body 是网页主体，存放给用户看的代码

title 是网页标题

快速生成HTML骨架：英文 ! + Enter / Tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    给用户看的
</body>
</html>

3. 标签的关系

明确代码的书写位置

有两种关系：父子 / 嵌套、兄弟 / 并列

<html>
    <head></head>
    <body>
        
    </body>
</html>

4. 标题标签

标签名：h1 ~ h6 双标签

文字加粗，字号逐渐减小、自占一行

h1 一般只用一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

5. 段落标签

标签名：p 双标签

独占一行、段落之间存在间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA  AAAAAAA  AAAAAAAA  AAAAAAAAAA  AA。</p>
    <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA  AAAAAAA  AAAAAAAA  AAAAAAAAAA  AA。</p>
    <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA  AAAAAAA  AAAAAAAA  AAAAAAAAAA  AA。</p>
    <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA  AAAAAAA  AAAAAAAA  AAAAAAAAAA  AA。</p>
</body>
</html>

6. 换行和水平线

换行 br 和水平线 hr 都是单标签

<body>
    文本1
    <br>
    文本2
    <!-- 如果没有br，仅敲换行键实际网页中是没有换行效果的 -->
    <hr>
    文本3
    <hr>
</body>

7. 文本格式化标签

包括：

加粗 strong

倾斜 em

下划线 ins

删除线 del

不会换行，若没有br则都在一行显示

<body>
    <strong> strong 加粗 </strong>
    <br>
    <em> em 倾斜 </em>
    <br>
    <ins> ins 下划线 </ins>
    <br>
    <del> del 删除线</del>
</body>

8. 图像标签

在网页中插入图片

img 是单标签

<img src = " 图片的URL ">

src 指定图片的位置和名称

图片和html最好放到同一路径下

图像 - 属性

1. alt 替换文本

图片无法显示时出现的文字

2. title 提示文本

鼠标悬停时显示的文字

9. 路径

路径是指在查找文件时，从起点到终点经历的路线

分类

相对路径

从当前文件位置出发查找目标文件

/ 代表进入某文件夹

如 images/ 是进入image文件夹

. 表示当前文件所在文件夹 ./

.. 表示当前文件夹的上一级 ../

绝对路径

从盘符出发查找目标文件

windows电脑是从盘符出发

Mac是从根目录出发

以windows为例

<body>
    <!-- 绝对路径 -->
    <img src="D:\5.webp">
    <img src="D:/5.webp">
    <!-- / 和 \ 都行-->
    
    <!-- 链接百度图片 -->
    <img src="https://search-operate.cdn.bcebos.com/7e85570b817e17e8f3ae93134cc78451.gif">
</body>

绝对路径应用：友情链接

在本页面放一些其他网页的原链接

10. 超链接标签

a 双标签中间可以加文字

href 属性是跳转地址

输入a 有提示文字直接回车即可

<body>
    <a href="http://baidu.com">跳转到百度</a>
</body>

还可以跳到自己的文件

复制要跳的文件的相对地址

<a href="01-标签的写法.html">01-标签的写法</a>

若要打开一个新的页面

<body>
    <a href="http://baidu.com" target="_blank">跳转到百度</a>
    <a href="01-标签的写法.html" target="_blank">01-标签的写法</a>
</body>

开发初期不知道跳转的地址，href写：# 表示空链接

    <!-- 空链接 -->
    <a href="#">空链接</a>

11. 音频标签

audio 双标签

src 保存音频的URL 支持MP3 Ogg Wav

controls 属性显示音频控制面板点击后还能播放

loop 循环播放

autoplay 自动播放一般浏览器都禁用

注：属性名和属性值一样时，只写一遍就行

    <audio src="./XXXX/XXX.mps" controls loop autoplay></audio>

12. 视频标签

video 双标签

src 保存音频的URL 支持MP4 WebM Ogg

controls 属性显示音频控制面板点击后还能播放

loop 循环播放

muted 静音播放

autoplay 自动播放一般浏览器支持在静音状态下自动播放

注：如果没有静音就不能自动播放

    <video src="./XX/XX.MP4" controls loop muted autoplay></video>

本文介绍HTML5摆放标签的知识点。