HTML学习笔记（一）

作者: 寒桥 | 来源:发表于2017-02-14 00:48 被阅读191次

HTML5学习笔记之表格标签
HTML5学习笔记之表单标签
HTML5学习笔记之基础标签
HTML5学习笔记之音视频标签
html
HTML5基本介绍
HTML5—HTML学习
初学HTML
HTML 学习笔记（一）
HTML学习笔记（一）

本节学习内容

<a href="#1">HTML说明</a>
<a href="#2">HTML头部标记</a>
<a href="#3">标题字</a>
<a href="#4">段落标记</a>
<a href="#5">建立超链接</a>
<a href="#6">使用图像</a>

<a name="1">HTML说明</a>

HTML是一款描述性标记语言，不是编程语言
一个完整的HTML文档必须包含3个部分：一个由<html>元素定义的文档版本信息；一个由<head>定义各项声明的文档头部；一个由<body>定义的文档主体部分

<a name="2">HTML头部标记</a>

<head>...</head>头部标记，一般包括标题、基础信息、文档样式表定义、脚本和元信息，定义在头部的信息往往不会直接显示在网页上
<title>...</title>标题标记，页面的标题只有一个
元信息标记meta,meta元素提供的信息不显示在页面上，一般用来定义页面信息的说明、关键字和刷新等。一个HTML页面中可以有多个meta元素，该元素的属性有name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎查找、分类,语法<meta name="keywords" content="输入具体的关键字">
name="keywords"设置网页的关键字属性，在content中定义具体的关键字
<meta name="description" content="设置页面说明">，name设置成description页面说明，在content中定义具体的描述语言
<meta name="generator" content="FrontPage">，name设置成generator编辑工具，在content中定义具体的编辑工具名称
<meta name="author" content="作者的姓名">，name设置成author作者信息，在content中定义具体的信息
<meta http-equiv="content-type" content="text/html; charset=字符集类型">，网页中还可以设置语言的编码方式。http-equive用于传送HTTP通信协议的标头，而在content才是具体的属性值。charset用于设置网页的内码语系，也就是字符集的类型。
<meta http-equiv="refresh" content="跳转的时间; URL=跳转到的地址">，<meta/>标记可以使网页在经过一定时间后自动刷新。refresh表示网页的刷新，在content中设置刷新的时间和刷新后的链接地址，时间和链接地址之间用分号隔断，默认情况系，跳转时间的单位是秒

<a name="3">标题字</a>

标题字标记<h1>到<h6>
标题字对其属性<align=对齐方式>，left、center、right。

<a name="4">段落标记</a>

段落标记<p>段落文字</p>，每一个新的段落标记开始的同时意味着上一个段落的结束
换行标记<br>，作用是在不另起一段的情况下强制当前文本换行，<br>是唯一可以为文字分行的方法，标记<p>可以为文字分段
不换行标记<nobr>,网页中某一行的文字过长，浏览器会自动对文字进行换行处理，可以使用<nobr>标记来禁止自动换行
水平线标记<hr>,代表水平分割模式，并会在浏览器中显示一条线
其他标记-特殊符号的表示

特殊符号	符号的代码	特殊符号	符号的代码
一个半角空格	`&nbsp`;	“	`&quot`;
&	`&amp`;	<	`&lt`;
>	`&gt`;	×	`&times`;
§	`&sect`;	©	`&copy`;
®	`&reg`;	™	`&trade`;

<a name="5">建立超链接</a>

超链接能够浏览者在各个独立的页面之间方便的跳转。网站都是有众多的网页组成，网页之间都是通过链接方式相互关联的。超链接的作用范围很广，可以将文档中的任何文字及任意位置的图片设置为超链接。
超链接分为外部链接、电子邮件链接、锚点链接、空链接、脚本链接。
每个网页都有一个唯一的地址，称为统一资源定位符（URL）。在网页中创建内部链接的时候，一般不会指定链接文档的完整URL，而是指定一个相对当前文档或站点根文件夹的相对路径。
绝对路径：是包括服务器规范在内的完全路径。好处是它同链接的源端点无关，只要网站的地址不变，无论文档在站点中如何移动都可以正常的而不会发生错误。另外，希望链接同站点上的其他内容，就必须使用绝对路径。缺点在于不利于测试，不利于站点的移植。
相对路径：可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相关。好处在于如果站点的结构和文档的位置不变，那么链接就不会出错。可以将整个网站移植到另一个地址的网站中，而不需要修改文档中的链接路径。
提示：插入图像时，如果使用图像的绝对路径，图像在远程服务器而不是在本地硬盘上，则将无法在文档窗口中查看该图像。对于图像尽量使用相对路径
内部链接是指链接的对象是在同一个网站中的资源
链接的目标窗口，在创建网页的过程中，默认情况下超链接在原来的浏览器窗口中打开，可以使用target属性来控制打开的目标窗口。语法为：<a href="目标文件" target="目标窗口的打开方式">，target参数的取值有四种：

-self(在当前页面中打开链接)、

-blank(在一个全新的空白窗口中打开链接)、

-top(在顶层框架中打开链接，也可以理解为在根框架中打开链接)、
-parent(在当前框架的上一层打开链接)
锚点链接：当页面中由于文本或者图像过多，导致页面过长，访问者需要不断拖动滚动条查看文档内容。为了方便文档中的内容，在文档中需要进行锚点链接。语法为<a name="锚点的名称"></a>，利用锚点的名称可以链接到相应的位置。这个名称可以是数字或英文，或者两者的混合。同一个网页中可以有无数个锚点，但是不能有相同名称的两个锚点
链接同一页面中的锚点，用#号以及锚点的名称作为href的属性值，语法为<a href="#锚点的名称"></a>
提示：如果链接的锚点在屏幕上已经可见，那么浏览器可能不会再跳到那个锚点。如果链接的锚点正好在屏幕的底部，那么根据屏幕的大小，浏览器也不能跳到该锚点，因为已经到了底部，只能尽可能的接近锚点
链接到其他页面中的锚点：锚点不但可以链接到同一个页面，也可以在不同页面中设置。语法：<a href-"链接的文件地址#锚点名称">...</a>
锚点链接常常用于那些内容庞大繁杂的网页。通过单击命名锚点，能够快速重定向网页特定的位置，如快速到页首、页尾或者网页中某段位置，便于浏览者查看网页内容。
外部链接是指跳转到当前网站之外的资源中。如:
（1）链接到外部网站<a href="http://.....">....</a>
（2）链接到E-mail<a href="mailto:邮件地址">...</a>
（3）链接到FTP<a href="ftp://ftp地址">...</a>FTP代表文件传输协议，一个FTP站点通常包含一些上传和下载文件的文件目录
（4）链接到Telnet<a href="telnet://telnet地址">...</a>Telent常用来登陆一些BBS网站，也是一种远程登录方式
（5）下载文件<a href="文件地址">...</a>如果超链接指向的是一个文件,单击链接的时候就会下载文件

<a name="6">使用图像</a>

网页中常用的图像格式优3种:GIF JPEG和PNG

(1)GIF -- Graphic Interchange Format图像交换格式,优点:可制作动态图像、可以将图像以交错的方式在网页中呈现(如图像尚未下载,浏览器会先以马赛克的形式将图像慢慢显示,让浏览者可以大致猜出下载图像的雏形)

(2)JPEG -- Joint Photographic Exports Group它是一种图像压缩格式

(3)PNG -- Portable Network Graphics图像格式是一种非破坏性的网页图像文件格式
插入图像标记img img元素的属性定义:

属性	描述	属性	描述
src	图像的源文件	alt	提示文字
width,height	宽度和高度	border	边框
vspace	垂直间距	hspace	水平间距
align	排列	dynsrc	设定avi文件的播放
loop	设定avi文件循环播放次数	usemap	映像地图
start	设定avi文件播放方式	lowsrc	设定低分辨率图片
loopdelay	设定avi文件循环播放延迟

图像的提示文字alt。提示文字有两个作用，当浏览该网页时，如果图像下载完成，将鼠标指针放在该图像上，鼠标指针旁边会出现提示文字。也就是说，当鼠标指针指向图像上方时，稍等片刻，可以出现图像的提示性文字，用于说明说着描述图像。第二个作用是，如果图像没有被下载，在图像的位置上就会显示提示文字。
图像的超链接，除了文字可以添加超链接之外，图像也可以设置超链接。同一个图像的不同部分也可以链接到不同的文档，这就是热区链接。超链接也是用<a>标签来完成。
图像热区链接：在HTML中可以把图片划分为多个热点区域，每一个热点区域链接到不同的网页。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的热点区域进行超链接，这就是映射地图。

语法：
首先需要在文件中设置映射图像名，在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称如下：
![](图像地址)
然后需要定义热区图像以及热区的链接属性如下：
<map name="映射图像名称">
<area shape="热区形状" coords="热区坐标" href="链接地址">
</map>
说明：在该语法中需要先定义映射图片的名称，然后再引用这个映射图像