第一章初始HTML 5

1.1 HTML5 概述
- 1.1.1 HTML5发展历程
- 1.1.2 HTML5的优势
- 1.1.3 HTML5浏览器支持情况
- 1.1.4 创建第一个HTML5页面
1.2 HTML5 基础
- 1.2.1 HTML5文档基本格式
- - 1.标记
  - 2.< html >标记
  - 3.< head >标记
  - 4.< body >标记
- 1.2.2 HTML5语法
- 1.2.3 HTML标记
- - 1.单标记和双标记
  - 2.注释标记
- 1.2.4 标记的属性
- 1.2.5 HTML5文档头部相关标记
- - 1.设置页面标题标记< title>
  - 2.定义页面元信息< meta />
  - 3.引用外部文件标记
  - 4.内嵌式标记< style>
1.3 文本控制标记
- 1.3.1 标题和段落标记
- - 1.标题标记
  - 2.段落标记
  - 3.水平线标记< hr/>
- 1.3.2 文本格式化标记
- 1.3.3 特殊字符标记
1.4 图像标记
- 1.4.1 常用图像格式
- 1.4.2 图像标记< img/>
- 1.4.3 绝对路径和相对路径
1.5 超链接标记
- 1.5.1 创建超链接
- 1.5.2 锚点链接
1.6 阶段案例——制作HTML 5百科页面
- 1.6.1 分析效果图
- 1.6.2 制作页面
- 1.6.3 制作页面链接

1.1 HTML5 概述

1.1.1 HTML5发展历程

发展之类的，简单了解一下就OK，其他我就不多赘述了。

1.1.2 HTML5的优势

1.解决了跨浏览器的问题（即拥有良好的跨平台性能）
2.新增了多个新特性
3.用户优先的原则
①安全机制的设计
②表现和内容分离
4.化繁为简的优势

1.1.3 HTML5浏览器支持情况

1.IE浏览浏览器
2.火狐浏览器
3.Goggle浏览器
4.Safari浏览器
5.Opera浏览器

1.1.4 创建第一个HTML5页面

这里，我选择的是Dreamweaver CS6来进行相关过程

简单看一下，相关的界面

其他就不多赘述了，开始第一个HTML页面

就修改了标题，添加了一点文本。大致画面，如下：

1.2 HTML5 基础

1.2.1 HTML5文档基本格式

一般新建相关文件的时候，可以看到默认文档，会自带一些源代码，如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body>
</body>
</html>

1.<!doctype >标记

这是位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范，参考上面的相关代码，那就是HTML5文档中的DOCTYPE声明。

只有在开头处使用<!doctype>声明，浏览器才能将该网友作为有效的HTML文档，并按指定的文档类型进行解析。

2.< html >标记

说明一下——(这里为了能够看到，加了空格的，具体里面是没有的哦)

这是根标记，用于告知浏览器其自身是一个HTML文档。

< html >标记标志着HTML文档的开始

< /html >标记标志着HTML文档的结束

在它们之间的是文档的头部和主体内容

3.< head >标记

用于定位HTML文档的头部信息，也称为头部标记，紧跟在< html >标记后面，主要用来封装其他位于文档头部的标记。

一个HTML文档只能含有一对< head >标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

4.< body >标记

< body >标记用于定义文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都是位于< body >标记内，< body >标记中的信息才是最终展示给用户看的。

一个HTML文档中只能还有一对< body >标记，且< body >标记必须在< html >标记内，位于.< head >头部标记之后，与.< head >标记是并列关系。

1.2.2 HTML5语法

HTML采用宽松的语法格式，毕竟要兼容各个浏览器。

1.标签不区分大小写
2.允许属性值不使用引号。
3.允许部分属性值的属性忽略

1.2.3 HTML标记

1.单标记和双标记

1）双标记

双标记是指由开始和结束两个标记符组成的标记

<标记名>内容</标记名>

2）单标记

也称为空标记，是指用一个标记符号即可完整地表述某个功能的标记。

<标记名 />

举例说明一下

<hr /> 就是单标记，用于定义一条水平线

标题标记< h2>、水平标记< hr />、段落标记< p>

2.注释标记

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。

<!-- 注释语句 -->

1.2.4 标记的属性

想让HTML标记提供了更多的信息，需要使用HTML标记的属性加以设置。

<标记名 属性1="属性值 1" 属性2="属性值 2" ……> 内容 < /标记名>

上述语法中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面

属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开。任何标记的属性都有默认值，省略该属性则取默认值。

参考代码，进行修改之后的结果：

这里面涉及到标记的嵌套

加粗标记< strong>和倾斜标记< em>

1.2.5 HTML5文档头部相关标记

1.设置页面标题标记< title>

< title>标记用于定于HTML页面的标题，即给网页加一个名字，必须位于< head>标记之内。一个HTML文档只能包含一对< title>< /title>标记。< title></ title>之间的内容将显示在浏览器窗口的标题栏中。

< title>网页标题名称< /title>

2.定义页面元信息< meta />

< meta />标记用于定义页面的元信息，可重复出现在< head >头部标记中，在HTML中是一个单标记。< meta />标记本身不包含任何内容，通过”名称/值“的形式成对的使用其属性可定义页面的相关参数。

1）< meta name=”名称“ content=”值“ />
在< meta >标记中使用name/content属性可以为搜索引擎提供信息。
①设置网页关键字
②设置网页描述
③设置网页作者

2）< meta http-equiv=”名称“ content=”值“ />
在< meta >标记中使用http-equiv/content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。
①设置字符集
②设置页面自动刷新与跳转

3.引用外部文件标记

一个页面往往需要多个外部文件的配合，在< head>中使用< link>标记可引用外部文件，一个页面允许使用多个< link>标记引用多个外部文件。

<link 属性=”属性值“ />

4.内嵌式标记< style>

< style>标记用于HTML文档定义信息，位于< head>头部标记中。

< style 属性=”属性值“>样式内容< /style>

在HTML中使用style标记时，常常定义其属性为type，相应的属性为text/css，表示使用了内嵌式的CSS样式。

1.3 文本控制标记

1.3.1 标题和段落标记

1.标题标记

HTML提供了六个等级的标题，即< h1>、< h2>、< h3>、< h4>、< h5>、< h6>，从前到后重要性依次递减。

<hn align="对齐方式">标题文本</hn>

该语法中n的取值为1到6，align属性为可选属性，用于指定标题的对齐方式。

2.段落标记

段落标记就是< p>。默认情况下，文本在段落中会根据浏览器窗口的大小自动换行。

<p align="对齐方式">段落文本</p>

3.水平线标记< hr/>

< hr/>就是创建横跨网页水平线的标记

< hr 属性=“属性值”/>

< hr/>是单标记，在网页中输入< hr/>标记，就添加了一条默认样式的水平线

属性名	含义	属性值
align	设置水平线的对齐方式	可选择left、right、center·三种值，默认为center，居中对齐
size	设置水平线的粗细	以像素为单位，默认为2像素
color	设置水平线的颜色	可用颜色名称、十六进制#RGB、rgb（r，g，b）
width	设置水平线的宽度	可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

1.3.2 文本格式化标记

在网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML准备了专门的文本格式化标记，使文字以特殊的方式显示。

1.3.3 特殊字符标记

特殊字符有专门的替代代码，这里就不赘述了。可以看看文章末尾的分享，或许更加高效

1.4 图像标记

1.4.1 常用图像格式

1.GIF格式
2.PNG格式
3.JPG格式

1.4.2 图像标记< img/>

想要在网页中显示图像，就需要使用到图像标记。

< img src=“图像 URL” />

当然，仅靠这一个属性是远远不够的，还需要其他属性，我这里就不一一列举了。

1）图像的替换文本属性alt
2）图像的宽度、高度属性width、height
3）图像的边框属性border
4）图像的边距属性vspace和hspace
5）图像的对齐属性align

1.4.3 绝对路径和相对路径

1.绝对路径

绝对路径就是网页中文件或目录在硬盘上的真正路径或完整的网络地址。网页中不推荐使用绝对地址，因为网页制作完成之后，我们需要将所有的文件上传到服务器。

2.相对路径

相对路径就是相对于当前文件的路径。
1）图像文件和html文件位于同一文件夹
2）图像文件和html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开。
3）图像位于html文件的上一级文件夹：在文件名之前加入“…/”,如果是上两级，则需要使用"…/…/"，以此类推。

1.5 超链接标记

1.5.1 创建超链接

在HTML中创建超链接非常简单，只需要< a >< / a>标记环绕需要被链接的对象即可

< a href=“跳转目标” target=“目标窗口的弹出方式” >文本或图像 < / a>

好的，完成效果。

1.5.2 锚点链接

可以创建锚点链接，用户能够快速定位到目标内容。

大致就是如此，请忽略相同的文字，哈哈哈，太懒了。

1.6 阶段案例——制作HTML 5百科页面

1.6.1 分析效果图

这里就不具体分析了啊，毕竟书上和实际操作的内容还是有出入的。

1.6.2 制作页面

1.制作首页面
2.制作page01页面
3.制作page02页面

1.6.3 制作页面链接

推荐去看看专业教程，我这些基本就是最简单的东西，是用来记录自己学习的，分享一个链接HTML教程

自学《HTML5+CSS 32网站设计基础教程》第一章相关推荐

laravel教程第一章安装laravel
#laravel教程# ##第一章安装laravel## ###前言 ### 有很多人,都在纠结于自己学什么框架,用什么框架.在这里我想告诉你,框架都是死的,但是人是活的,只要你明白的框架的基本原理 ...
matlab里面atn是什么意思,matlab教程第一章
<matlab教程第一章>由会员分享,可在线阅读,更多相关<matlab教程第一章(63页珍藏版)>请在人人文库网上搜索. 1.第1章矩阵及其基本运算MATLAB,即&quo ...
乐行学院RabbitMQ学习教程第一章 RabbitMQ介绍(可供技术选型时使用)
乐行学院RabbitMQ学习教程第一章 RabbitMQ介绍 RabbitMQ介绍 1.RabbitMQ技术简介 2.RabbitMQ其他扩展插件 2.1监控工具rabbitmq-managemen ...
AArch64教程第一章
AArch64教程第一章 AArch64是一个新的64位模式,它是ARMv8架构下的一部分,它于2011年随着ARM发布.它被逐步部署于智能手机和服务器.所以我认为现在学习一点关于此架构的知识是比较好 ...
javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战一.学习任务通过几个案例练习回顾学过的知识通过练习积累JS的使用技巧二.实例练习1:删除确认提示框实例描述: 防止用户小心单击了"删除& ...
北大青鸟c语言课后答案,北大青鸟C语言教程--第一章 C语言基础.ppt
<北大青鸟C语言教程--第一章 C语言基础.ppt>由会员分享,可在线阅读,更多相关<北大青鸟C语言教程--第一章 C语言基础.ppt(20页珍藏版)>请在人人文库网上搜索. ...
乐行学院Redis5学习教程第一章redis5的安装
乐行学院Redis5学习教程第一章redis5的安装 1.安装虚拟机 2.centeros下载 3.vmware安装centeros 4.vmware安装centeros设置IP 5.安装redis ...
Day1ps设计基础作业第一章第二章
Day1 ps设计基础作业第一章第二章 1.1工作区和工作流程 3种调整人像照片亮度的方式:1图像-调整-亮度/对比度,2图像-调整-色阶,3获取图像亮度+混合模式,通道(右下)按ctrl RGB的缩 ...
计算机中的数制与编码教程,第一章计算机中的数据和编码教程.doc
第一章计算机中的数据和编码教程第一章计算机中的数据和编码 1.1计算机中的数制 1.2计算机中数的表示 1.3计算机中的编码 1.1 计算机中的数制之进位计数制进位制: 按照进位的方法进行计数的 ...

自学《HTML5+CSS 32网站设计基础教程》 第一章

第一章 初始HTML 5