HTML心得

最新推荐文章于 2025-12-30 10:21:10 发布

原创最新推荐文章于 2025-12-30 10:21:10 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

本文介绍了HTML的基本结构，包括注释、头部配置、标题标签（h1-h6）、段落、水平线、换行、div、字体样式（如粗体、斜体、删除线、下划线）、上标、下标、标记、缩写、超链接、图片、音频和视频标签的使用。内容涵盖块级和行级元素的区别以及属性应用。

<!DOCTYPE html>
<!-- 注释标签 ctrl + / -->
<html lang="en">
<head>
    <!-- 头部  小图标、网页标题 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>html</title>
</head>
<!-- 放 页面主体 -->
<body>
    <!-- 基础标签 -->

学习到了注释标签因该怎么去用

学到了开头的头部、小图标、网页标题该怎么弄

也学了该怎么放页面主体

怎么放基础标签

  <!-- 标题标签 h1 - h6 从大到小 -->
    <h1>标题标签</h1>
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题<br>标签</h6>

学到了标题标签从大到小的使用

  <!-- 段落标签 -->
    <p>段落标签</p>

学到了段落标签

  <!-- 水平线 hr -->
    <hr>

学到了水平线hr

<hr>

 <!-- 换行标签 br -->
    <br>

学到了换行标签br

<!-- div  通用标签 -->
    <div  color="pink" face="楷体" size="22">段落标签标题标签  <h6>标题<br>标签</h6></div>

    <!-- 文字标签 -->
    <font color="pink" face="楷体" size="22">字体标签</font>
    
    <!-- 粗体 -->
    <b>粗体标签</b> <strong>粗体标签</strong>
    <!-- 斜体 -->
    <i>斜体标签</i> <em>斜体标签</em>
    <!-- 删除线 -->
    <s>删除线</s> <del>删除线</del>
    <!-- 下划线 -->
    <u>下划线</u> <ins>下划线</ins>

学到了文字标签

字体标签

学了4个小型的小知识

和是粗体标签

和是斜线

<s>和<del>是删除线

和<ins>是下划线

 <!-- 上标 -->
    这是<sup>上标</sup>

    <!-- 下标 -->
    这是<sub>下标</sub>

上标是sup下标是sub

格式是：这是<sup||sub>内容</sup||/sub>

 <!-- 标记 -->
    <mark  title="这是一大段文字这是一大段文字这是一大段文字">mark 标记</mark>
    <!-- 缩写 abbr -->

    <!-- title属性 所有标签共有的属性，鼠标悬浮时，显示属性值 《属性值：属性里的内容》 -->
    <abbr title="这是一大段文字这是一大段文字这是一大段文字">缩写</abbr>
    <br>
    <!-- span 通用行内标签 -->
    <span>通用行内标签</span>

mark是一个相当于标记重点的一个命令。重点的可以标记

缩写是abbr是吧内容相当于影藏到里面

title属性相当于一个标题所有标签共有的属性，鼠标悬浮时，显示属性值《属性值：属性里的内容》

span和div作用是一样的都是属于通用行内标签那个标签里都能用

<!-- 块级标签  独占一行。可以设置宽高 -->
    <!-- 行级标签  内容撑开，不自动换行 不可以设置宽高 -->

块级标签是独占一行。可以设置宽高

行级标签是内容撑开，不自动换行不可以设置宽高

 alt：图片加载失败时，提示图片内容
    -->
    <img title="欣知大数据" src="./img/11.jpg" width="200" height="100" alt="欣知大数据二十部">

图片标签是绝对路径：你电脑的第一个本文件里的
相对路径：文件相对路径 ../.. ./
alt：图片加载失败时，提示图片内容

 <!-- a标签 超链接 href 里面放链接路径 -->
    <a href="https://www.baidu.com">百度</a>
    <!-- 还能跳转项目内的页面
        target: _blank:跳转新窗口
               _self: 在本窗口打开
    -->
    <a href="./b.html" target="_blank">跳转b页面</a>
    <a href="./b.html" target="_top">跳转b页面</a>

学习了超链接在href里面直接放超链接路径

target: _blank 这个是跳转到另一个新页面去展示

self实在当前窗口去打开

<!-- 音频标签 -->
    <!-- controls  控件属性 -->
    <!-- loop 循环播放 -->
    <!-- autoplay  页面打开自动播放 -->
    <audio src="./mp3/Dancers.mp3" controls loop autoplay ></audio>
<!-- 视频标签 -->
    <video src="./mp3/周深 - 大鱼.mp4" controls loop autoplay width="800" height="400"></video>
    <br><br><br><br><br>

还学到了音频和视频标签

音频：<audio src="./mp3/Dancers.mp3" controls loop autoplay ></audio>

视频：<video src="./mp3/周深 - 大鱼.mp4" controls loop autoplay width="800" height="400">