HTML5概念

超文本标记语言（Hyper Text Markup Language）
html5是构建Web内容的一种语言描述方式，万维网联盟于2014年发布，被认为是互联网的核心技术之一。
其新引进的语法特征能够在移动设备上支持多媒体，能更好的适应移动端设备。新的解析规则增强了灵活性、新属性、淘汰过时的或冗余的属性，真正的改变了用户与文档的交互方式。

页面基本结构

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>First HTML Program</title>
  5.     <meta charset="utf-8" />
  6.   </head>
  7.   <body>
  8.     Hello HTML
  9.   </body>
  10. </html>

  • <DOCTYPE HTML> 

    1. 文档类型,是html5标准网页声明,全称为Document Type HyperText Mark-up Language，
    2. 意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，
    3. <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
    4. 此声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

  • <html> </html> 

    1. <html> 标签告知浏览器这是一个 HTML 文档。
    2. <html> 标签是 HTML 文档中最外层的元素。
    3. <html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

  • <head></head> 

    1. <head> 元素是所有头部元素的容器。
    2. <head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。
    3.  以下列出的元素能被用在 <head> 元素内部：
    4. <title> （在头部中，这个元素是必需的）
    5. <style>
    6. <base>
    7. <link>
    8. <meta>
    9. <script>
    10. <noscript>

  • <body></body> 

    <body> 标签定义文档的主体。
<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

  • <meta charset="utf-8" /> 

    元数据（Metadata）是数据的数据信息。
<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

  • <title>First HTML Program</title> 

    <title> 标签定义文档的标题，在所有 HTML 文档中是必需的。
<title>元素：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时的标题
显示在搜索引擎结果中的页面标题

标签名与标签属性

  • 标签名
    用来描述该标签中的内容在页面中的角色.
    标签分从书写格式上分为单标签和双标签两种
    • 双标签
      <标签名>xxxxx</标签名>
    • 单标签
      <标签名 />

标签按显示样式分为行标签和块标签两种

  • 行标签
    每个标签在页面中显示时,不会独占一行.
  • 块标签
    每个标签在页面中显示时,会独占一行

两种标签可以通过显示属性进行切换

  • 标签属性
    用来对标签的细节进行补充

单标记标签，用于定义一条水平线。
方便理解但又不需要显示在页面


 换一行
定义文本粗体
定义斜体字
定义下划线文本
定义加删除线的文本

…
 定义标题
定义文字的字体、颜色、大小
定义文档中的节
定义文档中的节

定义文档中的段落
定义列表

图像标记

1、创建一张图片
初识HTML5 - 图1标签 用于在网页中添加一张图片。
初识HTML5 - 图2
2、src 属性
规定显示图像的路径。
图像的路径可以是绝对路径也可以是相对路径。
3、图片样式
.image1{
text-align:center;
margin-top:150px;
width:600px;
}
text-align:center; 设置图片在父级div中距中显示
margin-top:150px; 设置图片的外延边距为150像素
width:600px; 设置图片宽度为600像素
alt=”文本” 文本不能显示时替换文字
title=”文本”鼠标悬停时显示的内容
vspace图像顶部和底部的空白
hspace图像左侧和右侧的空白
align对齐方式top/left/right/middle/bottom

相对路径

相对路径就是相对于当前文件的路径，相对路径不带有盘符，相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。而HTML通常是以HTML网页文件为起点，通过层级关系描述目标的位置。

绝对定位

目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。绝对定位就是网页上的文件或目录在硬盘上真正的路径。

超链接标记

语法格式：文本或图片
href：用于指定链接目标的url地址
target：用于指定链接页面的打开方式
_self 默认值，在原窗口打开
_blank 在新窗口打开

<!-- 默认效果 -->
<a href="http://www.baidu.com" >百度</a>
   <!-- 指定在当前窗口打开指定页面 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- 指定在新窗口打开指定页面 -->
<a href="http://www.baidu.com" target="_self">百度</a>
   <!-- 打开本地页面 -->
<a href="../test.html"></a>

超链接a标签的锚点

步骤：
1.使用链接文本
2.使用相应的id名标注跳转目标的位置

        <p id="c0">
        <a href="#c1">第一章</a> <br>
        <a href="#c2">第二章</a> <br>
        <a href="#c3">第三章</a> <br>
    </p>

    <hr>
    <div id="c1">第1章内容</div>
    <div id="c2">第2章内容</div>
    <div id="c3">第3章内容</div>
    <a href="#c0">回到顶部</a> <br>