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

时间 2020-01-30

标签 html 入门笔记经常使用标签栏目 HTML 繁體版

原文原文链接

1. HTML语法

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

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

2. HTML标签分类

HTML 5规定的标签有110多个，可是经常使用的标签没有那么多
~~因此新增的标签能够作什么呢，就不能div和span一把梭么~~
咱们能够将经常使用的标签分为如下几类：html

头标签
- <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文档的内容结构化，对于文档内容进行梳理。下面的代码包括了所有经常使用标签：canvas

<!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>
复制代码

↓↓↓代码效果以下↓↓↓浏览器

章节标签示例

我是一个页眉

这是一个一级标题h1

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

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

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

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

3.1 `<div>`标签

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

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

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

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

注意：默认状况下，浏览器一般会在<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>的使用禁忌

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

3.5 `<aside>`标签

<aside>定义了<article>之外的内容，通常有两种应用场景。

展现<article>的附属信息，内容能够是与当前文章有关的相关资料、名次解释，等等。

<article>
  <h1>…</h1>
  <p>…</p>
  <aside>…</aside>
</article>
复制代码

在<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> 
复制代码

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

1. HTML语法

2. HTML标签分类

3.章节标签

这是一个一级标题h1

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

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

3.1 <div>标签

3.2 <main>标签

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

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

这是一个一级标题h1

3.5 <aside>标签

3.6 <nav>标签

3.1 `<div>`标签

3.2 `<main>`标签

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

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

3.5 `<aside>`标签

3.6 `<nav>`标签