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元素,该元素的属性有namehttp-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>
说明:在该语法中需要先定义映射图片的名称,然后再引用这个映射图像
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容