HTML基础标签

最新推荐文章于 2024-06-10 17:18:33 发布

亦昕跑的码

最新推荐文章于 2024-06-10 17:18:33 发布

阅读量641

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/yiXin_Chen/article/details/120627192

版权

html标签的分类:
1) 块元素: 独占一行的元素. 不与其它元素出现在同一行的元素.
2) 内联元素(行元素): 可以与其它元素同处一行的元素.

1. div标签：独占一行

2.span标签：最基础的行元素

例：文本效果测试

3.标题标签: h1 ~ h6

效果: 1) 独占一行
2) 变更字体大小. h1最大, h6最小. h4与默认大小一致
3) 字体加粗
4) 上下文间距

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>

    <h1>文本效果测试</h1>
    <h2>文本效果测试</h2>
    <h3>文本效果测试</h3>
    <h4>文本效果测试</h4>
    文本效果测试
    <h5>文本效果测试</h5>
    <h6>文本效果测试</h6>
</body>
</html>

效果图：

4.换行标签：br （blank row ：空白行）

5.水平线标签：hr （ horizontal :水平）

效果：在网页中插入一条水平线

6.加粗标签：strong

例： 文本测试 字体加粗显示

7.斜体标签：em 字体倾斜显示

例： 文本测试

加粗且斜体： 文本测试

7.图片标签：img ，行元素，自闭合
属性: 1) src: 必填, 图片的引用路径. source
2) alt: 常用, 当图片无法正常显示时, 显示alt中的文字. alter
3) title: 常用, 鼠标悬停时的气泡内容.
4) width: 设置图片的宽度. 数值格式. 表示像素大小
5) height: 设置图片的高度. 数值格式. 表示像素大小

8.超链接标签: a, 行元素

属性: 1) href: 通常必填. html-reference. 表示跳转目标页面的路径
     2) target: 常用. 表示跳转后页面的开启位置.
        值:  _self, 默认值, 表示在当前位置打开
            _blank, 常用值, 表示在新窗口打开
            _top, 表示目标页面在整个浏览器窗口显示
     3) name: 常用. 用于设置超链接的锚点
内容: 通常必填. 表示用户可以看到点击的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接-1</title>
</head>
<body>

    <a>点我</a><br>
    <a href="http://www.baidu.com">访问百度</a><br>
    <!-- ../为相对路径-->
    <a href="../3.常用标签-图片标签/1.图片标签.html">访问 1.图片标签.html</a><br>
    <a href="../3.常用标签-图片标签/1.图片标签.html" target="_blank">访问 1.图片标签.html</a><br>
</body>
</html>

锚链接1：（同个页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>
    <a name="top" href="#bottom">直达底部</a>
    <a name="top" href="#middle">访问中部</a>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <div>
        <a href="#top" name="middle">回到页面顶部1</a>
        <a href="">回到页面顶部2</a>
        <a href="#bottom">直达页面底部</a>
    </div>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <a href="" name="bottom">返回顶部</a>
    <a name="top" href="#middle">访问中部</a>
</body>
</html>

锚链接2：不同页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接2</title>
</head>
<body>
    <a href="2.锚链接.html#middle">访问2.锚链接.html的中部</a>
    <a href="2.锚链接.html#bottom">访问2.锚链接.html的底部</a>
</body>
</html>

9.音频标签：audio, 行元素, html5新标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频标签</title>
</head>
<body>
    <!--
        音频标签: audio, 行元素, html5新标签
        属性: 1) src: 必填. 资源路径
             2) controls: 常用. 音频控制组件
             3) autoplay: 自动播放
             4) loop: 自动循环
    -->
    <audio src="../data/data.mp3" controls autoplay loop></audio>
</body>
</html>

10.视频标签：video, 行元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频标签</title>
</head>
<body>
    <!--
        视频标签: video, 行元素
        属性: 1) src: 必填. 资源路径
             2) controls: 常用. 音频控制组件
             3) autoplay: 自动播放
             4) loop: 自动循环
    -->
    <video src="../data/data.mp4" controls autoplay loop></video>
</body>
</html>

亦昕跑的码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础标签

html标签的分类: 1) 块元素: 独占一行的元素. 不与其它元素出现在同一行的元素. 2) 内联元素(行元素): 可以与其它元素同处一行的元素.1. div标签：独占一行 2.span标签：最基础的行元素例：文本效果测试3.标题标签: h1 ~ h6 效果: 1...
复制链接

扫一扫