常用的HTML5标记及其作用 html5标记分几类

转载

mob64ca13ff28f1 2023-11-24 10:54:14

文章标签 常用的HTML5标记及其作用 python html H5 HTML 文章分类 HTML5 移动开发

HTML5的基本概念

HTML的标记类型 HTML都有固定的标记类型，都要使用"<" 和 ">" 符号括起来。 HTML的标记大概有两种标记类型，一种是容器标记(Container Tag),另外一种是单一标记(Single Tag)。容器标记的格式 <开始标记>.......</结束标记>。而单一标记没有结束标记，只有起始标记。比如，<hr>,<img>等等。
HTML的组成最简单的HTML网页由<html>与</html>标记标识出网页的开始与结束，网页中可分为"头(head)"和"主体(body)"两部分。最简单的结构就是上篇文章的代码结构，分离出来如下：

<!doctype html>

<html>

<head>
<title> 我的博客首页 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--  如果注释这一句在火狐浏览器会显示乱码  -->
<html lang="zh-CN">
</head>

<body>
    我从这里开始学习H5!
</body>

</html>

其中一些标记含义如下
<head></head>标记:作用是放置网页的一些信息，比如<title>,<meta>通常这些信息不会直接显示到网页上。
<title></title>标记：说明网页的标题，此标题会显示在浏览器标题栏中.
<body></body>标记：放置网页的内容

标记属性的使用例如，<html>标记的lang属性可以标记网页语言。<html lang="zh-CN"> 还有：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />。 meta 可用来描述网页，这样可以让搜索引擎快速找到并且分类，值得注意的是标记的属性是不区分大小写的.
H5的声明与编码设置 HTML5的DOCTYPE声明如下：<!DOCTYPE html> HTML5的语言声明如下：<html lang="zh-CN"> HTML5的网页编码声明：<meta chartset="utf-8">
H5的常见的语义标记
综合练习

下面是上一篇文章和这篇文章的知识点的练习，效果如下：

常用的HTML5标记及其作用 html5标记分几类_html

<!doctype html>
<html>

<head>
<title> 我的博客首页 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="zh-CN">
</head>

<body>

<header id="header">
    <hgroup>
       <h1>写博客既是一种坚持，也是一种好习惯</h1>
       <h4>作者 不孤独的美食家</h4>
    </hgroup>

    <nav>
    	<ul>
    		<li><a href="#"></a>iOS</li>
    		<li class="current-item"><a href="#"></a>Swift</li>
    		<li><a href="#"></a>H5</li>
    	</ul>
    </nav>
</header>

<article id="article">
	<section>
		<h1>好好学习，天天向上</h1>
		<h2>坚持学习H5</h2>
		<h4>学习好青年</h4>
		<h2>编程小能手</h2>
	</section>

	<aside>
		<figure>
		<img src="2.png" alt="hehe"  />
		<img src="1.png" alt="hehe" title="xuexi" width="200" height="200" />
		</figure>
	</aside>
</article>

<p><strong>注释:第一次写H5的代码</strong></p>

<footer>
	赶紧来给我的博客点赞吧
</footer>


</body>

</html>