【前端HTML】基础标签_头个html基本标签-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_65727637/article/details/136583069

本文详细介绍了HTML的基础结构，包括meta标签、doctype声明、charset、viewport、标题、头部和body元素。此外，还涵盖了标题标签、段落和换行、文本格式化、div和span盒子、图片、超链接（包括基础链接、下载链接和网页元素链接）以及锚点链接的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签的基本结构

<!-- 文档类型声明标签，告诉浏览器页面采取html5显示 -->
<!DOCTYPE html>
<!--en英文网站，zh-CN中文网站  -->
<html lang="zh-CN">

<head>
    <!-- head区域的一个辅助性标签，
    常用于定义页面的说明，关键字，最后修改的日期和其他的元数据。
    这些元数据将服务于浏览器，搜索引擎和其他网络服务。 -->

    <!--charset字符集，UTF-8万国码，基本包括所有国家使用的字符  -->
    <meta charset="UTF-8">
    <!--viewport,移动端窗口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    正文内容
</body>

</html>

快捷方式生成html基本框架

基本标签

标题标签

   <!-- 标题标签：加粗，独占一行，h1-h6 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h6>六级标题</h6>

段落标签和换行标签

<!-- 段落(paragraph)标签：<p></p>   -->
<!-- 段落根据窗口大小换行 -->
<p>《活着》是中国当代作家余华创作的长篇虚构小说，首次发表于《收获》1992年第6期。</p>
<p>《活着》讲述了在大时代背景下，徐福贵的人生和家庭不断经受着苦难，
到了最后所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命。
小说以普通、平实的故事情节讲述了在急剧变革的时代中福贵的不幸遭遇和坎坷命运，
在冷静的笔触中展现了生命的意义和存在的价值，揭示了命运的无奈，与生活的不可捉摸。</p>
<p>1994年，改编自该小说的同名剧情片《活着》上映，由张艺谋执导，葛优、巩俐等主演 [19]1998年7月，《活着》获得意大利“格林扎纳·卡佛”文学奖。</p>

<!-- 换行(break)标签:<br/> -->
《你当像鸟飞往你的山》是塔拉·韦斯特弗创作的自传体小说，2018年首次出版。<br />
《你当像鸟飞往你的山》讲述了一个出生在美国爱达荷州山区的姑娘塔拉，通过自己不断的学习，挣脱了原生家庭的伤痕与束缚，在对自己的过往进行反思时得到救赎与解放的故事。 该书从教育和原生家庭这两个角度来书写，立意新颖。<br />

文本格式化标签

<!-- 文本格式化标签：加粗(strong,b),倾斜(em,i),删除线(del,s),下划线（ins,u）-->
    我是<strong>加粗</strong>标签
    我是<b>加粗</b>标签
    我是<em>倾斜</em>标签
    我是<i>倾斜</i>标签
    我是<del>删除线</del>标签
    我是<s>删除线</s>标签
    我是<ins>下划线</ins>标签
    我是<u>下划线</u>标签

盒子标签

 <!-- 盒子标签：无语义,div,span -->
    <div>（division,分割、分区），独占一行，大盒子</div>
    <div>（division,分割、分区），独占一行，大盒子</div>
    <span>（跨度、跨距），小盒子。</span>
    <span>（跨度、跨距），小盒子。</span>
    <span>（跨度、跨距），小盒子。</span>

图片标签

<!-- 图像标签：<img/>,src属性：图片路径和图片名 -->
    <img src="cat.jpg" />
    <!-- alt属性：图片显示不出来时显示文字 -->
    <br />
    <img src="cat1.jpg" alt="图片加载失败" />
    <br />
    <!-- title属性：鼠标移到图片上显示的文字 -->
    <img src="cat.jpg" title="这是图片标题" />
    <br />
    <!-- width/height属性:图片宽高 -->
    <img src="cat.jpg" width="200" height="200" />
    <br />
    <!-- border属性：设置图像边框 -->
    <img src="cat.jpg" width="200" height="200" border="10" />

图片路径问题

超链接标签

基础链接

   <!-- 超链接(anchor)标签:<a></a>-->
    <!-- href属性：目标地址 -->
    <!-- target属性：_self当前窗口打开（默认值） _blank新窗口打开 -->
    <!-- 基础链接：外部链接，内部链接，空链接-->
    <a href="https://www.bilibili.com/" target="_blank">外部链接：B站</a>
    <a href="../1-基础结构/1-基础结构.html" target="_blank">内部链接</a>
    <a href="#">空链接</a>

文件下载链接


    <!-- 链接地址是.zip/.exe文件，点击链接后下载该文件 -->
    <a href="download.zip">下载文件</a>

网页元素链接：点击该图片或音频跳转至相应链接地址

<!-- 网页元素链接：音频，图片，视频都可以作为超链接 -->
    <a href="https://www.bilibili.com/"> <img src="logo.png"></a>

锚点链接