HTML5全部元素详解:一个都不能少

根元素<html>

<html> 元素是 HTML 文档的根元素。建议为 <html> 元素指定 lang 属性,便于屏幕阅读器识别。

<!DOCTYPE html><html lang="en"><head></head><body></body></html>

文档元数据<head>

<head> 元素表示文档元数据的集合,是 <html> 元素的第一个子元素。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body></body></html><title>

<title> 元素代表文档的名字或标题。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name><title>这是文档的标题</title></head><body></body></html>

<base>

<base> 元素为文档中的所有链接指定基地址。如果URL中含有协议名或"//"则会忽略 <base> 指定的基地址。

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><base href=""></head><body><!– –><img src="a.jpg"><!– 如果带协议头,则忽略 base 指定的基URL –><!– –><img src=""><!– 省略协议头但保留"//",仍然会忽略 base 指定的基URL –><!– 这也是谷歌前端编码规范推荐使用的一种方式 –><!– –><img src="//www.baidu.com/img/c.jpg"></body></html>

<link>

<link> 元素为文档指定外部样式表。

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><link rel="stylesheet" href="css/style.css"></head><body></body></html><meta>

<meta> 元素提供文档的元信息,如文档编码、文档作者、文档描述等。

<!DOCTYPE html><html lang="zh-CN"><head><!– 常用的几个 –><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no"><meta name="author" content=""><meta name="keywords" content=""><meta name="description" content=""></head><body></body></html><style>

<link> 是引入外部样式文件,而 <style> 元素则是在文档中写样式。

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title></title><style>#div {width: 100px;height: 100px;}</style></head><body></body></html>Sections

<body>

浏览器窗口中显示的所有内容都在 <body> 元素中,是 <html> 元素的第二个子元素。

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title></title></head><body><h1>浏览器窗口中显示的所有内容都在这里</h1></body></html><article>

代表独立的、完整的一篇”文章“,如一个贴子、一篇文章、一条回复。可以包含 <header> 、 <footer> 、 <section> 等元素。

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title></title></head><body><!– 一篇文章 –><article><header><h1>The Very First Rule of Life</h1><p><time datetime="2009-10-09">3 days ago</time></p></header><p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p><p>…</p><section><h1>Comments</h1><!– 一条评论 –><article><footer><p>Posted by: <span>George Washington</span></p><p><time datetime="2009-10-10">15 minutes ago</time></p></footer><p>Yeah! Especially when talking about your lobbyist friends!</p></article><!– 一条评论 –><article><footer><p>Posted by: <span>George Hammond</span></p><p><time datetime="2009-10-10">5 minutes ago</time></p></footer><p>Hey, you have the same first name as me.</p></article></section></article></body></html><section>

代表页面或某一部分的一节或一个部分,每个 <section> 一般都有一个主题思想,但未必一定要有 <h> 元素。

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title></title></head><body><article><header><h2>Apples</h2><p>Tasty, delicious fruit!</p></header><p>The apple is the pomaceous fruit of the apple tree.</p><!– 此处表示文章的一个小主题 –><section><h3>Red Delicious</h3><p>These bright red apples are the most common found in many supermarkets.</p></section><section><h3>Granny Smith</h3><p>These juicy, green apples make a great filling for apple pies.</p></section></article></body></html><nav>

而在于当时的那份心情。可是旅行的彼时那刻我的心情一直是好的吗?

HTML5全部元素详解:一个都不能少

相关文章:

你感兴趣的文章:

标签云: