HTML5学习:语义元素section

HTML5学习:语义元素section

一、定义
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

二、用法
section标签下一般有一个标题<h1></h1>、还有一个内容<p></p>。示例代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta name="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
    <section>
            <h1>标题1</h1>
            <p>内容1</p>
    </section>
    <section>
            <h1>标题2</h1>
            <p>内容2</p>
    </section>
    <section>
            <h1>标题3</h1>
            <p>内容3</p>
    </section>
  </body>
</html>

结果如下:

中文出现乱码,我们修改一下页面编码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

结果如下:

时间: 2024-10-10 19:49:27

HTML5学习:语义元素section的相关文章

HTML5的语义元素有什么作用?

如今,web开发慢慢走向了html5的时代,今天主要说说 html5的语义化元素的意义 1.容易修改和维护.在html5出来之前,传统的网页基本是div用来布局,要想理解整体布局和不同区块的重要程度,其实是有点困难的(虽然说可以加上语义化的类):而通过html5语义元素,通过标记就可以迅速了解基本结构信息.这样,等你几个月回头修改时,就会比较轻松了.并且,当别人接手你的项目时,就显得更重要了! 2.无障碍性.方便屏幕阅读器和其他辅助工具对页面进行扫描,为让残疾人士提供更好的上网体验 3.搜索引擎

HTML5学习笔记(二):用于构建页面的语义元素

1.语义元素 大多数HTML5语义元素的用途是标识页面中的一个内容区块,为标注的内容赋予额外的含义,不真正做任何事. 2.使用语义元素的原因 容易修改和维护: 无障碍性(现代Web设计的一个重要主题): 对搜索引擎的友好性高: 适应未来的浏览器和Web设计工具的发展趋势 3.语义元素的来历 在发明HTML5之前,其发明者花很长时间研究已有的网页,还研读了谷歌对十几亿个网页的统计信息.谷歌公布的这个调查分析并列出了Web作者在自己网页中使用的类名,将Web页面中一些共性的东西(比如页面都有页眉.页

HTML5 语义元素(一)页面结构

本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.<footer>.<header>.<main>.<nav>.<section>等元素. 目录 1. 语义元素介绍 1.1 何为语义元素 1.2 特点 2. 原先界面布局 3. 页面结构语意元素 3.1 说明 3.2 详细介绍 3.3 示例图 1. 语义元

努力学习 HTML5 (4)&mdash;&mdash; 浏览器对语义元素的支持情况

经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> 元素就行了.为此我们要做的就是为它们添加点样式规则.之后就可以得到超级可靠的语义元素了,即使使用10年前的浏览器也可以正常浏览. 为语义元素添加样式 浏览器遇到不认识的元素时,会把它们当做内联(inline)元素.大多数 HTML5 语义元素都是块级元素. 因此我们添加一条超级规则,为9个 HTML5 元素

HTML5学习:语义元素article

HTML5学习:语义元素article 一.定义<article> 标签定义外部的内容.外部内容可以是来自一篇文章,或者来自博客 的博文,或者是来自论坛的文章. 二.用法格式和上篇的section元素一样:<h1></h1><p></p>,示例代码如下: <!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type"

HTML5学习笔记(三):语义化和新增结构元素

在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义化的概念,同时提供了新的标签来指定对应的内容类型. 语义化的好处 语义化的html只用来搭建网页的结构,去掉css后,网页结构不会变: 屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页: 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重: 你的页面是否对爬虫容易理解非常重要,因

HTML5学习:语义元素nav

HTML5学习:语义元素nav 一.定义标签<nav>定义导航链接的部分,用来将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读器等设备的支持也更好. 二.用法格式:<nav><a href="#">test</a></nav>,示例代码如下: < !DOCTYPE html> <html>   <head>     <meta http-equiv=&q

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

HTML5的文档结构和新的语义元素

学习前端的东西似乎没有什么捷径,就是直接上手撸就完了 本文目标:(熟知) 1.创建基本HTML5文档结构 2.使用新的语义元素来布局页面 下面直接上代码: <!DOCTYPE html> <!-- DOCTYPE简洁声明,强制现代的浏览器使用标准模式 --> <html lang="en"> <!-- 使用lang指定文档语言 --> <head> <meta charset="UTF-8">