模块二：HTML5基础
上机实训要求：
要设计出令人满意的网页效果，不仅需要熟练掌握网站设计软件的基本操作，还需要掌握网站建设的基础知识，如基础语言、网络术语、制作流程、网站和网页的组成元素等。
一、HTML5文档的基本结构：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文档标题</title>
</head>
<body>
网页内容
</body>
</html>
二、页面标签
1．title标签<title></title>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>title标签示例</title>
</head>
<body>
title标签示例
</body>
</html>
2．标题标签<h1></h1>～<h6></h6>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>标题标签</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
3．段落标签<p></p>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>段落p标签</title>
</head>
<body>
<p>段落元素由 p 标签定义。</p>
<p align="right">这里是段落。</p>
<p align="center">这里是段落。</p>
<p align="left">这里是段落。</p>
div border属性<p align="justify">这里是段落。</p>
</body>
</html>
4．换行标签<br/>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>换行标签示例</title>
</head>
<body>
<h3>鹿柴</h3>
<p>空山不见人，但闻人语响。<br />
返景入深林，复照青苔上。<br />
</p>
<h3>八阵图</h3>
<p>功盖三分国，名成八阵图。</p>
<p>江流石不转，遗恨失吞吴。</p>
</body>
</html>
5．水平分割线标签<hr>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>水平分割线标签示例</title>
</head>
<body>
<h3>以下水平线通过hr标签实现</h3>
<hr>
<h3>以下水平线通过CSS实现</h3>
<div ></div> <div ></div> <div
></div> </body>
</html>
6．超链接标签<a></a>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>超链接标签示例</title>
</head>
<body>
<h3>以下是常见的超链接类型</h3>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。