HTML入门笔记[3]:HTML常用标签①

二册夫斯基
775 阅读8分钟

1. HTML语法

HTML语法相对灵活，并不区分大小写，基本的语法注意事项如下：

  • HTML元素以开始标签起始，开始标签一般为<a>``<p>形式。
  • HTML元素以结束标签终止，结束标签一般为</a>``</p>。
  • 一般元素的内容是开始标签与结束标签之间的内容，但也有一些标签不存在结束标签，比如<meta>元素。
  • 一些元素具有空内容(空元素)，如<br>换行标签(插入一个换行符)，但空元素也需要对应的结束标签关闭
  • 大多数HTML元素拥有属性

2. HTML标签分类

HTML 5规定的标签有110多个，但是常用的标签没有那么多
所以新增的标签可以做什么呢，就不能div和span一把梭么
我们可以将常用的标签分为以下几类：

  • 头标签
    • <head>元素所包含的标签，一般包括<meta>、<style>、<title>、<base>和<link>
  • 章节标签
    • 对HTML文档的内容进行结构划分
    • 常见的标签有<section>、<nav>、<artical>、<aside>、<h1>-<h6>、<header>、<footer>、<address>、<main>
  • 内容层次标签
    • 体现HTML内容的层次，增强内容可读性
    • 常见的标签有<p>、<hr>、<pre>、<blockqoute>、<ol>+<li>、<ul>+<li>、<dl>+<dt>+<dd>、<figure>+<figcaption>
  • 文字标签
    • 修饰文本内容，增强内容可读性
    • 常见的标签有<a>、<em>、<strong>、<q>、<time>、<code>、<kdb>、<sub>/<sup>、<mark>、<br>/<wbr>、<ins>/<del>
  • 嵌入内容标签
    • 将图片、视频或者音频内容嵌入HTML文档
    • 常见的标签有<img>、<iframe>、<video>、<audio>、<canvas>、<svg>
  • 表格标签
    • 在HTML文档中创建表格
    • 常见的标签有<table>、<tbody>、<thead>、<tfoot>、<tr>、<td>、<th>
  • 表单标签
    • 在HTML文档中创建表单
    • 常见的标签有<form>、<label>、<input>、<button>、<select>、<option>、<textare>、<progress>
  • 可交互元素标签
    • 实现网页与用户的交互功能
    • 常见的标签有<summary>+<details>、<menu>+<menuitem>

3.章节标签

章节标签将HTML文档的内容结构化，对于文档内容进行梳理。下面的代码包括了全部常用标签：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>章节标签示例</title>
        <style>
            h1 {color:darkred;}
            h2 {color:lightblue;}
            h3 {color:lightgreen;}
            p {color:green;}
            div{border: thin dotted #FF0000;}
            nav{border: solid #000000;}
            main{background-color:pink;}
            article{border: solid white;}
			aside{background-color:blue;color:white;}
            section{border: solid yellow;}
			header{background-color:lightblue;}
			footer{background-color:lightgreen;}
        </style>
    </head>
    <body>
        <header>我是一个页眉</header>
        <div>
        <nav>
            <a href="/html/">HTML</a>
            <a href="/css/">CSS</a>
        </nav>
        <main>
        <article>
            <h1>这是一个一级标题h1</h1>
            <p>此标签里显示的是article整个文章的主要内容，下面的section元素里是对该文章的评论</p>
            <section>
			<h2>评论(这是一个二级标题h2)</h2>
            <h3>发表者：maizi(这是一个三级标题h3)</h3>
            <p>这篇文章很不错啊，顶一下！</p>
            </section>
        </article>
        <aside>我是一个侧边栏</aside>
        </main>
        </div>
        <footer>我是一个页脚</footer>
    </body>
</html>

↓↓↓代码效果如下↓↓↓

章节标签示例 我是一个页眉
HTML CSS

这是一个一级标题h1

  

此标签里显示的是article整个文章的主要内容，下面的section元素里是对该文章的评论

  

评论(这是一个二级标题h2)

    

发表者：maizi(这是一个三级标题h3)

    

这篇文章很不错啊，顶一下！

我是一个侧边栏
我是一个页脚

3.1 <div>标签

<div>标签定义HTML文档中的一个分隔区块或者一个区域部分。

虽然我很短，但我是一个块元素
默认情况下，浏览器通常会在div元素前后放置一个换行符。

众所周知<div>只是一个标签，无具体语义和灵魂，可用在任何场景，让人摸不着头脑。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

注意：默认情况下，浏览器通常会在<div> 元素前后放置一个换行符。

3.2 <main>标签

<main>代表了文档中body的主要，与文档直接相关。<main>也可以是文档的中心主题的扩展。
<main>在一个文档中有且只能有一个，不能出现一个以上的<main>。
<main>不能是以下元素的后代<article>、<aside>、<footer>、<header>或<nav>。

↓↓↓ HTML 5标准中的示例↓↓↓

<main>
 
  <h1>Skateboards</h1>
  The skateboard is the way cool kids get around
  <article>
  <h2>Longboards</h2>
  Longboards are a type of skateboard with a longer 
  wheelbase and larger, softer wheels.
  ... 
  </article>

  <article>
  <h2>Electric Skateboards</h2>
  These no longer require the propelling of the skateboard
  by means of the feet; rather an electric motor propels the board, 
  fed by an electric battery.
  </article>
 
</main>
 
  <!-- other content -->

3.3 <header>标签和<footer>标签

我是一个页眉
虽然我只有一行，但我是一个块元素
我是一个页脚
  • <header>标签定义文档或者文档的一部分区域的页眉，可以作为页面的内容介绍或者导航栏的容器。
  • <footer>标签定义文档或者文档的一部分区域的页脚，一般页脚会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
  • 可以在一个文档中定义多个<header>和<footer>，但 <header> 标签不能被放在<footer>、<address>或者另一个<header> 元素内部。

3.4 <section>标签和<artical>标签

这是一个一级标题h1

此标签里显示的是article整个文章的主要内容，下面的section元素里是对该文章的评论

这篇文章很不错啊，顶一下!

<section>标签和<article>标签都是HTML 5新增加的标签

  • <section>标签对页面上的内容进行分块，定义了文档的某个区域，比如章节、头部、底部或者文档的其他区域，通常由内容及其标题组成。

    • 典型应用场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

  • <article>代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。

    • 通常<article>元素有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

<section>？<artical>？<div>？

<div>、<section>、<artical>，三个元素的语义从无到有，逐渐增强的。<div>无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用<section>，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用<artical>。
原则上来说，能使用<artical>的时候，也是可以使用<section>的，但是实际上，假如使用<article>更合适，那么就不要使用<section>。

关于<section>的使用禁忌

  1. 不要将用<section>作为设置样式的页面容器，那是<div>的工作。
  2. 如果<article>、<aside>或<nav>更符合应用场景，就不要使用<section>。
  3. 不要为没有标题的内容块使用<section>。

3.5 <aside>标签

<aside>定义了<article>以外的内容，一般有两种应用场景。

  1. 展示<article>的附属信息，内容可以是与当前文章有关的相关资料、名次解释，等等。
<article>
  <h1>…</h1>
  <p>…</p>
  <aside>…</aside>
</article>
  1. 在<article>之外使用，作为页面或站点全局的附属信息部分。最典型的示例为侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。
<aside>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
</aside>

3.6 <nav>标签

<nav>标注该区域为导航链接的区域，只起语义的作用，没有实际的显示效果，其内容通常是一个列表。<nav>没有默认显示效果，只表示该区域是导航链接部分。

<nav>
<a href="#">首页</a><a href="#">服务器端</a><a href="#">关于</a>
</nav>
首页服务器端关于

<nav>也可以配合列表使用

<nav> 
<ul> 
<li><a href="#">首页</a></li> 
<li><a href="#">服务器端</a></li> 
<li><a href="#">联系我们</a></li> 
</ul> 
</nav>
avatar
文章
阅读
粉丝