html5中的一些标签学习总结

html5 contenteditable="true"

html5内容可编辑属性

html5 hgroup

hgroup字面意思是头部的组,可以将其分拆为h和group来理解。在html5中的作用是用于对网页和区块的标题进行组合。(网页是一个最大的区块,所以可以认为hgroup是区块的标题的组合)
前面的文章有提到header元素,貌似这个元素跟hgroup有非常相似的功能,那么它们之间有什么不同呢?
继续从hgroup的定义来看,它是对“标题"的组合,html中的标题有h1,h2,h3,h4,h5,h6。hgroup只能是对这六种h的组合,不能包含其他元素,这就是跟header的区别,header可以包含其他元素,而且header可以包含hgroup。

下面是hgroup的一些示例:

情景一

?
1
2
3
4
5
6
7
8
9
10
<!doctype html>
<title>html5 hgroup 示例一 html5zhan.com</title>
<section>
    <hgroup>
        <h1>我爱我母亲</h1>
        <h2>给全世界母亲的一封信</h2>
    </hgroup>
     
    <p>又到了5月的第二个星期天.....</p>   
</section>

情景二

?
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<title>html5 hgroup 示例二 html5zhan.com</title>
<section>
    <header>
        <hgroup>
            <h1>我爱我母亲</h1>
            <h2>给全世界母亲的一封信</h2>
        </hgroup>
        <p>添加时间:2012-5-10</p>
    </header>
    <p>又到了5月的第二个星期天.....</p>   
</section>

除非有两个或者以上的h标签,否则请不要使用hgroup。

 

html5 section

section  字面上理解为“块”,“部分”。在html5网页中表现的意思跟字面理解差不多,即部分,块,模块,主要作用为对页面的内容进行分块或者对文章的内容进行分段。

页面分块示例

可直接查看html5zhan.com的首页,主要由六部分组成,html5新元素,html5新api,html5最新动态,html5文章导航,html5最新文章以及html5作品。
这些内容彼此都是一个独立的模块,这个时候就可以使用section包裹他们。

文章分段示例

这里直接给出一个介绍文章分段的代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<article>
    <h1>Web编程语言比较</h1>
    <p>web编程语言常用的有asp,asp.net,php,jsp...</p>
    <section>
        <h2>asp</h2>
        <p>asp全称Active Server Page</p>
    </section>
    <section>
        <h2>asp.net</h2>
        <p>asp的颠覆版本</p>
    </section>
    <section>
        <h2>php</h2>
        <p>草根动态语言,免费,强大</p>
    </section>
</article>

 

 

 

article与section的异同

section和article可以互相嵌套,也就是说他们没有上下级关系,section可以包含article,article也可以包含section。
感觉上使用都差不多,都可以有h1,h2,h3,都有一个主体,那应该怎么来区分它们的不同?其实很简单,只要从字面上理解它们就可以足够了:
1、article是文章,文章就是一段完整的独立的内容。
2、section就是块,某种意义上可以理解为div,但是比div的意思更加明确一点。

section和div的异同

1、section和div都可以对内容进行分块,但是section是进行有意义的分块,无意义的分块应该由div来做,例如用作设置样式的页面容器。
2、section内部必须有标题,标题也代表了section的意义所在。

其他说明

1、section做为"块",理论上可以用于很多地方,例如一个同字型的网页,可以用于包裹两边的内容,但是实际上,html5中定义了更加有意义的aside标记,完全可以用aside来替代section,因此在使用的时候应尽量使用更有意义的标记。
2、html5与css3权威指南中提到一个检查轮廓的工具,这里提供一下:http://gsnedders.html5.org/outliner/

 

html5 article

article 字面意思为“文章”。在web页面中表现为独立的内容,如一篇新闻,一篇评论,一段名言,一段联系方式。这其中包括两方面,一为整个页面的主旨内容,另外就是一些辅助内容。

article可以嵌套,即article里面还可以包含article,此时内article应该跟外article有一定的关联性,如同情景二,其中主内容的评论。

 

?
1
2
3
4
<article id="demo">
    <h1>内容标题(选用)</h1>
    <p>内容</p>
</article>

 

article既然是独立的内容,那么内容的主题是必不可少,标题则为选用内容。

情景一

整个页面的主旨内容

 

?
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<title>html5站案例</title>
<body>
    <article>
        <h1></h1>
        <p>主内容</p>
    </article>
    <aside>
        侧边内容
    </aside>
</body>

 

情景二

内容的评论

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<title>html5站案例</title>
<body>
    <article>
    主内容省略....
    <section>
        <h1>评论</h1>
        <ul>
            <li>
                <article>评论1</article>
            </li>
            <li>
                <article>评论2</article>
            </li>
        </ul>
    </section>
    </article>
    <aside>
        侧边内容
    </aside>
</body>

 

情景三

辅助内容

 

?
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<title>html5站案例</title>
<body>
    主内容省略...
    <aside>
        <article>
            <p>作者:kspig</p>
            <p>文章编写时间:2012年4月</p>
        </article>
    </aside>
</body>

 

 

html5 address

address字面理解为“地址”,在html5中,它用于文档或者文章作者或拥有者的联系信息。注意,这里放的不是字面上理解的“地址”,而是指“联系信息”,可以包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。
address一般放在footer中,有时也放在header中,视情况而定。

情景

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<title>html5 address 示例 html5zhan.com</title>
  
<header><h1>html5 address 示例 html5zhan.com</h1></header>  
<p>这里是主体...</p>
<footer>
    作者:html5zhan
    <address>
        <ul>
            <li>网址:http://www.html5zhan.com</li>
            <li>QQ:10000</li>
            <li>邮件:web@daojia100.com</li>
        </ul>
    </address>
</footer>

转载于:https://www.cnblogs.com/javawebstudy/p/3765416.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/273713.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

总结1:Ajax上传图片至阿里云服务器

1.页面效果以及JS <!-- HTML --> <div style"margin:30px;"><div class"form-horizontal rowt"><div class"control-label col-lg-1">标书分类</div><div class"col-lg-2"><select required&q…

Leetcode::Subsets

Given a set of distinct integers, S, return all possible subsets. 分析&#xff1a;题目就是给一个整数集合&#xff0c;给出所以的子集。 基本思想是递归或者说是迭代的方法。用前面得到的集合来构造 后面的。但是怎样高效、方便的构造集合是关键点。比如&#xff0c;开始…

总结2:上传图片至指定服务器

1.前段页面以及JS <!-- HTML --> <section class"content"><div class"row"><div class"col-xs-12"><div class"box box-success"><div class"row" style"margin-top: 1%;margin-bu…

苹果新的编程语言 Swift 语言进阶(一)--综述

Swift 是苹果开发和提供的供开发IOS 和OS X应用的一门新的语言。Swift语言基于C 和Objective-C语言&#xff0c;除了提供C 和Objective-C语言具有的所有语法功能外&#xff0c;为了编程方便和高效&#xff0c;Swift在语法上作了大量的优化和改进。 Swift采用安全编程模式&#…

总结3:IDEA中使用${pageContext.request.contextPath}填写路径时出错

问题描述&#xff1a; 之前一个项目在eclipse中开发的&#xff0c;其中有使用到 <jsp:include page"${pageContext.request.contextPath}/../head.jsp"/>启动项目成功&#xff0c;访问出错。在换到IDEA中启动项目时提示路径出错&#xff0c;当把路径修改为 …

操作12864(ST7920控制器)

引脚部分查看中文的12864介绍&#xff0c;下面这些可以在ST7920的英文数据手册里查到。 Function Description 部分介绍工作方式、存储器、操作方法。Instructions 部分介绍指令。按照并行或串行的 Timing Diagram 来操作&#xff0c;注意数据何时有效。查看初始化的流程图&…

问题之传递参数名和接收参数名要一致。

前端传递发送的Ajax请求&#xff0c;请求参数为data data: {organizationId:$("#organId").val()},//data.field 后端接受参数 //错误接受参数 RequestMapping(value "") ResponseBody public Object findAll(Integer organId) { return…

总结4:input文本输入框自动提示

1、页面效果 2、引入CSS/JS <link rel"stylesheet" href"css/jquery-ui.min.css"><script src"https://code.jquery.com/jquery-1.12.4.js"></script><script src"https://code.jquery.com/ui/1.12.1/jquery-ui.js&qu…

Map集合遍历

//创建一个map对象并赋值Map<String, String> map new HashMap<String, String>();for (int i 0; i < 10; i) {map.put("Key" i, "Value" i);}//使用keySet便利Set<String> keySet map.keySet();for (String s : keySet) {Syste…

MySql数据同步FEDERATED引擎

概要&#xff1a;FEDERATED存储引擎访问在远程数据库的表中的数据&#xff0c;而不是本地的表。这个特性给某些开发应用带来了便利&#xff0c;你可以直接在本地构建一个federated表来连接远程数据表&#xff0c;配置好了之后本地表的数据可以直接跟远程数据表同步。实际上这个…

SpringBoot 配置多数据源(Sql Server、MySql)

创建SpringBoot项目就不说了。(直接使用IDEA创建就好了) 整个目录结构如图&#xff1a;&#xff08;不用管图中报错&#xff0c;项目是在另一台电脑上写的。报错是没有jar包&#xff0c;因为网络比较慢。&#xff09; 1、主要pom.xml <dependencies><dependency>…

【SQL语句】MySql、SqlServer查询近期记录

#-------------------------MYSQL------------------------- #每小时记录 SELECT HOUR(open_time) hourNum, COUNT(1) hourCount FROM b_entrance_guard_record GROUP BY HOUR(open_time) #近六个月出入记录 SELECT MONTH(n.open_time) monthNum, COUN…

SpringBoot 记录操作日志

目录结构&#xff1a; 1、创建springboot项目&#xff0c;添加依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>…

SpringBoot 配置记录

# 图片上传 配置图片上传大小 spring:servlet:multipart:max-file-size: 100MBmax-request-size: 100MBdatasource:#数据库文件存放 /doc/sql目录下url: jdbc:mysql://localhost:3306/merchant_pay?useUnicodetrue&characterEncodingUTF-8&autoReconnecttrue&f…

py2.7+pyqt4开发端口检测工具

py2.7pyqt4开发端口检测工具 使用工具&#xff1a;python2.7,pyqt4,pyinstaller,pywin32 先贴代码 1 import sys2 from PyQt4 import QtGui,QtCore3 4 import threading5 import thread6 import os7 import re8 import urllib9 import socket10 import time11 12 13 global max…

MySql 创建存储过程

DELIMITER $$ #以delimiter来标记用$表示存储过程结束 CREATE PROCEDURE ownerapartment() ##创建pre()存储方法 BEGIN DECLARE i INT; #定义i变量 SET i1; WHILE i<35 DO #对i的值配置INSERT INTO owner_apartment (id, owner_id,property_id, community_id, buildi…

opencv 和 parfor

一次遇到两个不熟悉的&#xff0c;因此在一起记一下。 OpenCV的全称是&#xff1a;Open Source Computer Vision Library。 OpenCv是一个基于&#xff08;开源&#xff09;发行的跨平台计算机视觉库&#xff0c;可以运行在Linux,Windows和Mac OS操作系统上。它轻量级而且高效—…

POI 导出

1.添加依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.17</version></dependency> 2.POI工具类 import java.io.UnsupportedEncodingException; import javax.servlet.http.Htt…

度量空间的基本性质

收敛性 $\bf命题&#xff1a;$ 连续性 $\bf命题&#xff1a;$ 稠密性 $\bf命题&#xff1a;$设$E$为度量空间$X$中的点集&#xff0c;则$E$在$X$中稠密的充要条件是对任意的$x \in X$&#xff0c;存在点列$\left\{ {{x_n}} \right\} \subset E$&#xff0c;使得${x_n} \to x\…

@Value 注入静态变量

1、定义配置类 Component public class FilePathConfig {public static String httpResUrl;public static String savePath;public static String resUri;public String getHttpResUrl() {return httpResUrl;}Value("${file.path.httpResURL}")public void setHttpR…