HTML5基础
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5基础
1，网页的基本结构
1，使用记事本新建一个文本文件，保存为index.html
2，输入下面多行字符
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>This is a html file</title>
</head>
<body>
</body>
</html>
通过上面的演示代码，可以看到每个网页都是有固定的结构开始构建。
每个网页都包含doctpye, html, head, body元素。
<!doctype html>部分告诉浏览器这是一个HTML5页面，它始终位于页面的第一行。
<html>和</html>表示开始和结束标签。
<head>和</head>
表示页面的头部，头部中有一部分是浏览器可见的，即<title></title>之间的文本，作为页面标题；<meta charset=>用来设置lang语言属性的代码.
3，创建网页内容
除了基本结构外，一般网页包含以下3部分内容。
1，文本内容：在页面上显示页面内容的纯文字。
2，外部引用：指页面中加载的图像，音频，视频文件，以及样式表和JavaScript文件.
3，标记：对文本内容的描述。
下面为页面添加一些主体内容。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>This is a test html file</title>
</head>
<body>
<article>
<h1>我的第一个网页</h1>
<img src="file:///Macintosh%20HD/Users/admin/Desktop/61684503707_.pic.jpg" width="200" alt ="今天是个好日子" />
<p>现在准备开始学习啦</p>
</article>
</body>
</html>
在浏览器中会呈现这样的效果如图
整个页面中包含了：文本，外部文件的引用（连接图片），标记（article, h1, img等）。
1.2 头部信息
<head>
<meta charset="UTF-8">
<title>This is a test</title>
</head>
浏览器会把它放在窗口的标题栏或者状态栏中显示，当把文档加入用户的链接列表，收藏夹或书签列表是，标题将作为该文档的默认名称。
1.2.2 网页元信息
使用<meta>标签可以定义网页的元信息。
如定义针对搜索引擎的描述和关键词，一般网站都必须设置这两条元信息，以方便搜索引擎检索。
<meta name = “description”content = “…..”>
<meta name = “keyboard”content = “”>
1.3.1 基本结构
HTML5包含一百多个标签，这些标签都被放在body内。
文档标题<h1><h2><h3><h4><h6>: 定义文档标题。
<p>: 定义段落文本。
<ul><ol><li>: 定义信息列表，导航列表，榜单结构
<table><tr><textarea> 定义表单结构
<span>定义行内包含框。
1.3.2 使用div元素
HTML是简单的文档识别语音，文档结构大部份使用<div>标签来完成，div没有任何语义，是一个通用容器。
为了能够识别不同的结构，一般通过定义id或者class来赋予专门的语义。
1.3.3 使用id和class
Id和class用来标识页面上的元素，id必须是唯一的，可以用来标识持久的结构性元素，也可以用来标识一次性元素。
class与id不同，同一个class可以应用于页面上任意数量的元素。
class与id的命名最好区分大小写，采用驼峰式命名法。
一般在不适合使用id的情况下使用class。
1.3.4 使用title
<ul title = “网页标题”>
<li><a href = “#”title = “提示信息”>列表内容</a></li>
Title用来为文档中任何部分加上提示标签，也可以使用屏幕阅读器朗读title文本，实现无障碍阅读。
1.3.5 使用role
Role主要共残疾人士使用。
1.3.6 注释, 以方便开发人员修改。
<!--页面主题-->
1.4 HTML主结构
1.4.1 定义页眉
Head表示页眉，用来导航和定义整个页面的标题栏。
一个页面可以设计多个header结构。
<header>
<nav>
<li><a href = “”>组织结构</a></li>
<li><a href = “”>领导介绍</a></li>
<li><a href = “”>公司新闻</a></li>
<li><a href = “”>关于我们</a></li>
<nav>
1.4.2 定义导航
Nav表示导航条，导航条的应用场景:
1.主菜单导航，
2. 侧边栏导航，
3.页内导航，
4.翻页导航
<nav>
<a href = “index.html”>首页</A>
<a href = “li ve.html”>生活</A>
<a href = “bbs.html”>论坛</A>
</nav>
1.4.3定义主要区域
Main表示主要区域，用来标识网页中的主要内容。
在一个页面中不能出现一个以上的main 元素。
1.4.4定义文章块
Article表示文章块，用来标识页面中一块完整的独立的可以被转发的内容。
1.4.5定义区块
Section表示区块，用于标识文档中的节，多用于对内容进行分区，如章节，页眉，页脚或文档中的其它部分。
1.4.6定义附栏
Aside表示附栏，用来标识所处内容之外的内容。
Aside 元素主要有以下两种用法
作为主体内容的附属信息部分，包含在article中，可以是与当前内容有关的参考资料，名词解释。
作为页面辅助功能部分，如有情链接，最新评论列表，历史存档，日历等。
1.4.7定义页脚
Footer表示脚注，用来标识文档或节的页脚。
如版权信息，作者等。
示例 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客模板</title>
</head>
<body>
<header>
<h1>[网页标题]</h1>
<h2>[次级标题]</h2>
<h4>[标题提示]</h4>
</header>
<main>
<nav>
<h3>[导航栏]</h3>
<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>
</nav>
<section>
<h2>[文章块]</h2>
<article>
<header>
<h1>[文章标题]</h1>
</header>
<p>[文章内容]</p>
<footer>
<h2>[文章脚注]</h2>
</footer>
</article>
</section>
<aside>
<h3>[辅助信息]</h3>
</aside>
<footer>
<h2>[网页脚注]</h2>
</footer>
</main>
</body>
</html>。