ife-task1:零基础HTML编码--HTML语义化

最新推荐文章于 2022-01-10 16:41:40 发布

github_34514750

最新推荐文章于 2022-01-10 16:41:40 发布

阅读量591

点赞数

CC 4.0 BY-SA版权

分类专栏：百度前端技术学院 html 文章标签： html 标签导航语义化

本文链接：https://blog.youkuaiyun.com/github_34514750/article/details/51044443

百度前端技术学院同时被 2 个专栏收录

10 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍了HTML语义化的关键，如nav标签用于导航，header表示头部，article代表文章主体，section组织内容，figure处理图片，aside定义侧边栏。同时，还涉及到了table表格标签和表单标签的使用，强调了这些语义化标签对于提高代码可读性和结构的重要性。

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

HTML 是一种标记语言
HTML 标签：标记了html文档和元素
HTML 元素：从开始到结束标签的所有代码，是基本的构造区块
HTML 属性:一般都在开始标签中定义，名称/值形式出现
HTML 之前遗忘的标签：这些标签都是为了更好的语义化，语义化方便爬虫等分析

1.nav标签

<nav> :导航栏（横竖均可），用于link other pages

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

2.文章结构标签

对一些表示块的标签应用的不是很多，导航用nav，头部用header，文章用article，区块用section，插入图片用figure，侧边栏用aside，正确的使用这些标签无疑能让代码的可读性更高，结构性更强

<article> :定义外部的内容，外部内容可以是来自外部的新闻提供者的一篇新的文章或者是来自blog的文本

<header>:定义文档的页眉；对应<footer>定义文章的页脚

<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
<aside> 的内容可用作文章的侧栏。

<section>
    <header>
        <h1></h1>
        ......
        <h6></h6>
    </header>

    <aside>
    </aside>

    <article>
        <p></p>
    </article>

    <footer>
    </footer>
</section>

3.图片排列标签

  <figure>:用作文档中插图的图像
  <figcaption>:定义figure元素的标题caption

<figure>
    <figcaption>标题</figcaption>
    <img src=""/>
    ......
    <figcaption>标题</figcaption>
    <img src=""/>
</figure>

4.table标签

<table>

    <thead>

        <tr>

            <th></th>

            ......

        </tr>

    </thead>

    <tbody>

        <tr>

            <td></td>

            ......

        </tr>

        ......

    </tbody>

    <tfoot>

        <tr>

            <td></td>

            ......

        </tr>

    </tfoot>

5.表单标签

表单会用到的标签<form>

<span> 标签被用来组合文档中的行内元素。

<em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<input>文本，单选，多选，提交按钮

<label>主要用于绑定一个表单元素，当点击label便签的时候，被绑定的表单元素就会获得焦点,和其他表单元素比如input一起使用
      <input type="radio" name="sex" id="male"/>
      <label for="male">男</label>
      <input type="radio" name="sex" id="female"/>
      <label for="female">女</label>

<textarea>多行文本

<select>下拉框选择；
input标签的属性placeholder，pattern 属性规定用于验证输入字段的模式，模式指的是正则表达式pattern="[0-9A-Za-z]{6,16}"

<fieldset>表单内相关元素分组，可以将表单一部分内容打包，生成一组相关表单的字段
legend 元素为 fieldset 元素定义标题（caption）。