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>
↓↓↓代码效果如下↓↓↓
章节标签示例 我是一个页眉这是一个一级标题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>
的使用禁忌
- 不要将用
<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>