文章目录

  • 1、介绍：
  • 2、HTML5文件的基本结构
  • 2.1、
  • 2.2、标题标记
  • 2.3、换行标记
  • 2.4、段落标记
  • 2.5、标题标记
  • 2.6、无序列表及无序列表的嵌套
  • 2.7、有序列表
  • 3、对上面代码的实现



HTML5的概述

1、介绍：

HTML5的最基本语法是<标记符></标记符>。标记符通常都成对使用，有一个开头标记和一个结束标记。

2、HTML5文件的基本结构

2.1、

一个完整的HTML5文件包括标题、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象统称为HTML元素。
一个HTML5文件的基本结构如下：

<!DOCTYPE html>
<html>文件开始的标记
	<head>文件头部开始的标记
	文档头部的内容
	</head>文件头部结束的标记
	<body>文件主体开始的标记
	文件主体的内容
	</body>文件主体结束的标记
</html>文件结束的标记
2.2、标题标记
<title>
网页的标题
</title>

网页地址栏：

html5内核 html5内容_html

2.3、换行标记
床前明月光，</br>
疑是地上霜。</br>
举头望明月，</br>
低头思故乡。</br>
2.4、段落标记
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
2.5、标题标记
由<h1>~<h6>元素来定义
<h1>代表1级标题，级别最大，字号也最大，其他标题元素依次递减，<h6>级别最低
<h1>床前明月光，</h1>
<h2>疑是地上霜。</h2>
<h3>举头望明月，</h3>
<h4>低头思故乡。</h4>
2.6、无序列表及无序列表的嵌套
<ul>
	   <li>无序列表1</li>
	   <li>无序列表2</li>
	   <ul>
	   <li>无序列表3</li>
	   <li>无序列表4</li>
	   </ul>
	 </ul>
不同类型的无序列表
<ul type="disc">Disc 项目符号列表</ul>
<ul type="circle">Circle 项目符号列表</ul>
<ul type="square">Square 项目符号列表</ul>

网页实现:

html5内核 html5内容_html5内核_02

2.7、有序列表
<ol>
	 <li>有序列表1</li>
	 <li>有序列表2</li>
	 </ol>
不同类型的有序列表
<ol>
	 <li>数字列表：</li>
	 <li>数字列表：</li></ol>
	 <ol type="A">
	 <li>字母列表：</li>
	 <li>字母列表：</li></ol>

网页实现：

html5内核 html5内容_ci_03

3、对上面代码的实现

<!DOCTYPE html>
<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
	<h1>I am DaMing.</h1>
	<h2>hello world!</h2>
	床前明月光，</br>
	疑是地上霜。</br>
	举头望明月，</br>
	低头思故乡。</br>
	<p>床前明月光，</p>
	<p>疑是地上霜。</p>
	<p>举头望明月，</p>
	<p>低头思故乡。</p>
	<h1>床前明月光，</h1>
	<h2>疑是地上霜。</h2>
	<h3>举头望明月，</h3>
	<h4>低头思故乡。</h4>
	<ul>
	     <li>无序列表1</li>
	     <li>无序列表2</li>
	     <ul>
	         <li>无序列表3</li>
	         <li>无序列表4</li>
	     </ul>
	 </ul>
	 <ul type="disc"><li>Disc 项目符号列表1</li></ul>
	 <ul type="circle"><li>Circle 项目符号列表</li></ul>
	 <ul type="square"><li>Square 项目符号列表</li></ul>
	 <ol>
	 <li>有序列表1</li>
	 <li>有序列表2</li>
	 </ol>
	 <ol>
	 <li>数字列表：</li>
	 <li>数字列表：</li></ol>
	 <ol type="A">
	 <li>字母列表：</li>
	 <li>字母列表：</li></ol>
	</body>
</html>

网页实现：

html5内核 html5内容_ci_04


html5内核 html5内容_ci_05