html 基础知识

最新推荐文章于 2025-04-27 23:18:19 发布

jpruby

最新推荐文章于 2025-04-27 23:18:19 发布

阅读量596

点赞数 1

分类专栏： vue 文章标签： html 前端 css3

本文链接：https://blog.youkuaiyun.com/m0_58039950/article/details/125088838

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了HTML的基础知识，包括文件命名规范、语义标签的使用，如<header>和<footer>，以及文本相关元素如<p>、<pre>、<strong>和<mark>等。同时，讲解了区块定义、导航元素、主要区域和通用容器的概念，帮助理解HTML页面结构和内容呈现。

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

HTML 基础知识

基础知识

HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。用于按不同标签声明网页中的内容。

文件命名

使用小写字线命名文件，不要出现中文字符
扩展名标准是.html，当然也可以使用.htm
多个单词可以使用- 或 _ 连接，建议使用- 字符如user-create.html

语义标签

HTML 标签都有具体语义，非然技术上可以使用 div 标签表示大部分内容，但选择清晰的语义标签更容易让人看明白。比如 h1表示标题、p标签表示内容、强调内容使用em标签。

<article>
    <h1>瓜甜不甜只有自己知道</h1>
    <p>小伙给我说写代码比打游戏有意思，加油小伙</p>
    <em>from jpruby</em>
</article>

效果：

嵌套关系

元素可以互相嵌套包裹，即元素存在父子级关系。

<div>
    <span>我不是一个块元素我不能引起换行我是span</span>
    <span>我不是一个块元素我不能引起换行我是span</span>
    <span>我不是一个块元素我不能引起换行我是span</span>
    <p>我是一个块元素我可以引起换行，但是我的父标签是div 我是p标签</p>
    <p>我是一个块元素我可以引起换行，但是我的父标签是div 我是p标签</p>
    <a href="">你猜我是不是一个块元素，我是a标签</a>
    <a href="">你猜我是不是一个块元素，我是a标签</a>
    <h2>我是一个块元素么我是h2</h2>
    <h2>我是一个块元素么我是h2</h2>
</div>

效果

页眉页脚

[#](https://doc.houdunren.com/html/2 页面结构.html#header)header

header 标签用于定义文档的页眉，下图中的红色区域都可以使用header标签构建。

#footer

footer 标签定义文档或节的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

导航元素

在 HTML 中使用nav设置导航链接。

<header>
      <nav>
        <ul>
          <li>
            <a href="">系统学习</a>
          </li>
          <li>
            <a href="">视频库</a>
          </li>
        </ul>
      </nav>
    </header>

主要区域

HTML5 中使用 main 标签表示页面主要区域，一个页面中main元素最好只出现一次。

   <main>
      <article>
        <h1>瓜甜不甜只有自己知道</h1>
        <p>小伙给我说写代码比打游戏有意思，加油小伙</p>
        <em>from jpruby</em>
      </article>
      <div style="border: 1px solid blue; margin-top: 20px">
        <span>我不是一个块元素我不能引起换行我是span</span>
        <span>我不是一个块元素我不能引起换行我是span</span>
        <span>我不是一个块元素我不能引起换行我是span</span>
        <p>我是一个块元素我可以引起换行，但是我的父标签是div 我是p标签</p>
        <p>我是一个块元素我可以引起换行，但是我的父标签是div 我是p标签</p>
        <a href="">你猜我是不是一个块元素，我是a标签</a>
        <a href="">你猜我是不是一个块元素，我是a标签</a>
        <h2>我是一个块元素么我是h2</h2>
        <h2>我是一个块元素么我是h2</h2>
      </div>
 </main>

区块定义

使用 section 定义一个区块，一般是一组相似内容的排列组合。类似于一个div块

<main>
   <article>
     <section>
       <h2>锁机制</h2>
     </section>
     <section>
      <h2>事物处理</h2>
     </section>
   </article>
</main>

附加区域

使用 aside 用于设置与主要区域无关的内容，比如侧面栏的广告等。

<body>
  <main>
    <article>
      ...
    </article>
    <aside>
      <h2>社区小贴</h2>
      <p>jpruby是一个主张友好、分享、自由的高手。</p>
    </aside>
  </main>
</body>

通用容器

div 通用容器标签是较早出现的，也是被大多数程序员使用最多的容器。不过我们应该更倾向于使用有语义的标签如article/section/aside/nav 等。

有些区域这些有语义的容器不好表达，这时可以采用div容器，比如轮播图效果中的内容。

文本相关

p

p标签标记了一个段落内容。不多说了

pre

原样显示文本内容包括空白、换行等。

<pre>
        这是pre标签的显示效果
            这是换行后的内容，空白和换行都会保留
</pre>

br

在html 中回车是忽略的，使用 br 标签可以实现换行效果。

span

span 标签与 div 标签都是没有语义的，span 常用于对某些文本特殊控制，但该文本又没有适合的语义标签。

描述文本

small 用于设置描述、声明等文本。

<small> 半年付 </small>

time

标签定义日期或时间，或者两者。

<time> 2019-07-26 </time>

abbr

abbr标签用于描述一个缩写内容

在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫 <abbr title="Uniform Resource Locator">URL</abbr> 统一资源定位符。

sub

用于数字的下标内容

水的化学式为H<sub>2</sub>O

SUP

用于数字的上标内容

请计算5<sup>2</sup>平方

del

del 标签表示删除的内容，ins 一般与 del 标签配合使用描述更新与修正。

原价 <del>200元</del> 现价 <ins>100元</ins>

s

s 标签显示效果与 del 相似，但语义用来定义那些不正确、不准确或没有用的文本。

<s>A 太阳是方的</s> <br>
B 地球是圆的

progress

用于表示完成任务的进度，当游览器不支持时显示内容。

<progress value="60" max="100">完成60%</progress>

strong

strong 标签和 em 一样，用于强调文本，但是它们的强调程度不同。

<strong>jpruby</strong>喜欢吃<em>西瓜</em>

mark

用于突出显示文本内容，类似我们生活中使用的马克笔。

学习以下语言 <mark>PHP</mark>、<mark>JavaScript</mark>

联系信息

[#](https://doc.houdunren.com/html/3 文本相关.html#address)address

用于设置联系地址等信息，一般将address 放在footer 标签中。

<address>
	xxxx@qq.com
</address>

列表

列表的使用与word 等软件的列表概念相似，只不过是应用在网页展示中。

无序列表

没有数字编号的列表项，可以使用CSS定义更多样式

<ul>
    <li>苹果🍎</li>
    <li>香蕉🍌</li>
    <li>鸭梨🍐</li>
    <li>葡萄🍇</li>
    <li>西瓜🍉</li>
</ul>