Day1 HTML入门笔记内容

HTML的英文全称Hyper Text Markup Language,网页超文本标记语言。HTML并不是什么编程语言,而是一款描述性的标记语言。也是全球广域网上描述网页内容和外观的标准。

作为标记语言,本身不能显示在浏览器中。主要应用于描述超文本中内容的显示方式。

HTML的基本结构

完整的HTML文件包括标题、 段落、 列表、 表格以及各种嵌入对象, 这些对象统称为HTML元素。
一个HTML文件的基本结构如下:

<html>文件开始标记

<head>文件头开始的标记
...文件头部的内容

</head>

<body>文件主体开始的标记

......文件主体的内容

</body>文件主体结束的标记

</html>文件结束的标记


在html文件中,所有的标记都是成对出现,而且都是相对应的,开头标记为<>,结束标记为</>,内容就在两个标记中间进行添加。

写HTML文件方式有很多种,使用记事本,notepad++、Dreamweaver、sublime Text等等。这些都是可以编写HTML文件的工具。

HTML的基本标记

一个完整的HTML文档必须包含3个部分: 一个由<html>元素定义的文档版本信息, 一个由<head>定义各项声明的文档头部和一个由<body>定义的文档主体部分。<head>作为各种声明信息的包含元素出现在文档的顶端, 并且要先于<body>出现。而<body>用来显示文档主体内容。

HTML的头部标记head

在HTML语言的头部元素中, 一般需要包括标题、 基础信息和元信息等。 HTML
的头部元素是以<head>为开始标记, 以</head>为结束标记的。

含义:<head>元素的作用范围是整篇文档。 <head>元素中可以有<meta>元信息定义、文档样式表定义和脚本等信息, 定义在HTML语言头部的内容往往不会在网页上直接显示。

语法格式:

<head>......</head>

HTML标题标记title

HTML页面的标题一般是用来说明页面的用途, 它显示在浏览器的标题栏中。在HTML文档中, 标题信息设置在<head>与</head>之间。 标题标记以<title>开始, 以</title>结束。

语法格式:

<title>......</title>

HTML元信息标记meta

meta元素提供的信息不显示在页面中, 一般用来定义页面信息的说明、 关键字、 刷新等。

在HTML中, meta标记不需要设置结束标记, 在一个尖括号内就是一个meta内容。 在一个HTML页面中可以有多个meta元素。

meta元素的属性有name和httpequiv, 其中name属性主要用于描述网页, 以便于搜索引擎查找、 分类。

设置页面关键字

在页面中设置关键字问题上,搜索引擎方面,检索信息都是通过输入关键字来实现的。

关键字在网页中也是非常重要的,是整个网站登陆过程中最基本的也是非常重要的部分,也是网页优化的基础。

关键字在浏览网页时时看不到的,仅仅只是提供搜索引擎的使用。

语法格式:

<meta name = "keywords" content="输入具体的关键字">

设置页面说明问题、定义编辑工具、设置作者的信息,只要在meta的声明里面更改就可以。

语法格式:

<meta name = "description" content="设置页面说明">
<meta name = "generator" content="编辑软件的名称">
<meta name = "author" content="输入作者的名字">

设置网页文字及语言

在网页中还是要设置语言的编码形式,这样子浏览器才可以正确的选择语言。而不需要人工选取语言。

语法格式:

<meta http-equiv="content-type" content = "text/html; charset=字符集类型"/>

http-equiv用于传送HTTP通信协议的标头, 而在content中才是具体的属性值。 charset用于设置网页的内码语系, 也就是字符集的类型, 国内常用的是GB码, charset往往设置为gb2312, 即简体中文。 英文是ISO-8859-1字符集, 另外还有其他的字符集。

设置网页的定时跳转

在<meta>中设置定时跳转,即可实现网页的自动刷新。可以通过http-equiv设置为refresh来实现。content中的属性值为设置的时间。

语法格式:

<meta http-equiv="refresh" content="跳转的时间;URL=跳转的地址">

跳转的时间主要以秒为单位。


网页的主题标记body

网页的主题部分要在浏览器中显示处理的所有的信息。在网页的主题部分也可以设置很多的属性。

(一)、网页的背景色bgcolor

网页的背景,大多数浏览器都是默认白色或者是灰白色。

语法格式:

<body bgcolor="背景颜色">

此处的背景颜色可以是已经命名的颜色,也可以是十六进制的颜色值。

(二)、网页的背景图片background

语法格式:

<body background="图片的地址">

图片的地址可以是相对的地址,也可以是绝对的地址。

(三)、文字的颜色text

通过text标记来设置文字的颜色。

语法格式:

<body text="文字的颜色">

文字颜色的属性值与设置页面背景色的相同。

(四)、链接文字的属性link

超链接时网页中重要的而且也是根本的元素之一。网站的每一个网页都是通过超链接的形式关联在一起的。

在默认情况下,浏览器以蓝色作为超链接文字的颜色, 访问过的文字则颜色变为暗红色。 可以通过link参数修改链接文字的颜色。

语法格式:

<body link="颜色">

a.使用alink可以设置正在访问的文字颜色。
b.使用vlink可以设置访问后链接文字的颜色。

(五)、边距margin

设置边距是因为在网页中页面与浏览器之间的距离。

语法格式:

<body topmargin=上边距的值 leftmargin=左边距的值>

在默认的情况下,边距的值以像素为单位。

一般网站的页面左边距和上边距都设置为0, 这样看起来页面不会有太多的空白。


网页的注释问题

注释是在HTML代码中插入的描述性文本, 用来解释该代码或提示其他信息。注释只出现在代码中, 在浏览器的页面中不显示。

作用:

便于设计者后续的代码修改、维护工作有帮助。也方便设计者能够迅速读懂前者所写的内容。

语法格式:

<! --注释的内容 -->

如果存在嵌套的注释, 则在两个标记结束符号之间的文件将会显示出来。

文字与段落标记

标题字
HTML文档中包含各种级别的标题,各种级别的标题由<h1>到<h6>元素来定义。<h1>时最高级别的标题,<h6>级别是最低的。

标题字对齐方式align

在默认情况下,标题文字都是左对齐格式。当然了,为了切合网页的效果,也有不同的对齐方式。

语法格式:

<align=对齐方式>

对齐方式有三种格式:

|属性值| |含义|
| left | |左对齐|
|right| |右对齐|
|center| |居中对齐|

文字的基本标记

<font>标记用来控制字体、字号和颜色等属性,它是HTML中最基本的标记方式之一。

(一)字体属性face

字体的face属性设置不同的字体,设置的字体效果必须在浏览器中安装相应的字体后才可以浏览。

语法格式:

<font face="字体样式">文字的内容</font>

(二)字号属性size
文字的属性也是字体的重要的属性之一。除了标题文字标记是设置为固定大小的字号之外,使用<font>标记的size属性来设置普通文字的字号。

语法格式:

<font size="文字字号">文字的内容</font>

设置size属性时有绝对和相对两种属性。从1到7的整数, 代表字体大小的绝对字号。 从-4到+4的整数, 字体相对于3号放大和缩小字号。

注意:<font>标记和它的属性可影响周围的文字, 该标记可应用于文本段落、 句子和单词, 甚至单个字母。

(三)颜色属性color

语法格式:

<font color="字体颜色">文字的内容</font>

color属性用来定义文字的颜色, 它可以和<font>元素的其他属性一起配合定义字体的各种样式, 各个属性之间没有先后次序.


文本格式化标记

(一)、粗体标记b、strong

<b>和<strong>是HTML中格式化粗体文本的最基本元素。 在<b>和</b>之间的文字或在<strong>和</strong>之间的文字, 在浏览器中都会以粗体字体显示。 该元素的首尾部分都是必须的, 如果没有结尾标记, 则浏览器会认为从<b>开始的所有文字都是粗体。

语法格式:

<b>文字内容</b>
<strong>文字的内容</strong>

<b>和<strong>是行内元素, 它可以插入到一段文本的任何部分。

代码示例:

<p><b>文字内容</b></p>
<p><strong>文字的内容</strong></p>

(二)、斜体标记i、em、cite

<i>、 <em>和<cite>是HTML中格式化斜体文本的最基本元素。 在<i>和</i>之间的文字、 在<em>和</em>之间的文字或在<cite>和</cite>之间的文字, 在浏览器中都会以斜体字体显示。

语法格式:

<i>斜体文字</i>
<em>斜体文字</em>
<cite>斜体文字</cite>

代码示例:

<p>这是我的<em>工作室</em></p>

(三)上标标记sup

上标字体<sup>的英文原名为superscript, 在各种数学公式、 日常计算应用、 书籍文章注解甚至某些外语脚本里都有广泛的运用。
<sup>元素也是行内元素, 它可以成对出现在一段文字的任何地方, 并且允许嵌套使用。 因此如果在<sup>里再使用<sup>则会变成“上标的上标”。

语法格式:

<sup>上标的内容</sup>

例如:

(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab

(四)下标标记sub

下标字体<sub>的英文原名为subscript, 在各种数学公式、 化学方程式中, 下标字体有着广泛的应用。
<sub>元素是行内元素, 它可以成对地出现在一段文字的任何地方, 并且可以将多个<sub>元素作用于同一段文字。
如果在<sub>元素里继续使用<sub>, 那么被作用的文字将成为“下标的下标”。

语法格式:

<sub>下标的内容<sub>

例如:

H<sub>2</sub>O 化学方程式中的水

(五)大字号标记big和小字号标记small

语法格式:

<big>大字号的内容</big> 大字号标记

<small>小字号的内容</small> 小字i号标记

(六)下划线标记u
<u>标记的使用与粗体和斜体的标记是类似的。主要作用于需加下划线的文字。语法与粗体和斜体的基本相同。

段落标记p

语法格式:

<p>段落文字</p>

段落标记可以没有结束标记</p>,每一个新的段落标记开始的同时也意味着上一个段落的结束。

换行标记br和不换行标记nobr

换行标记<br>的作用是在不另起一段的情况下将当前文本强制换行。一个<br>标记代表一个换行, 连续的多个标记可以实现多次换行。

<br>是惟一可以为文字分行的方法。 其他标记如<p>, 可以为文字分段。

不换行标记nobr

语法格式:

<nobr>不换行的内容<nobr>


水平线

插入水平线hr

水平线的作用就是起到水平分割的作用,并且会在浏览器中显示一条线。

水平线也是有属性值的,例如宽度width、高度size等。

宽度width

语法格式:

<hr width="宽度">

水平线的宽度值可以是确定的像素值, 也可以是窗口的百分比。

高度size

语法格式:

<hr size="高度">

水平线的高度值只能是像素值。

去掉阴影noshade

语法格式:

<hr noshade>

noshade是布尔值的属性,它没有属性值,如果在<hr>元素中写上了这个属性,则浏览器不会显示立体形状的水平线,反之则无需设置该属性,浏览器默认显示一条立体形状带有阴影的水平线。

水平线的颜色color

语法格式:

<hr color="颜色">

这里的颜色代码是十六进制的数值。

水平线的排列方式align

水平线在默认情况下是居中对齐的,如果想让水平线左对齐或右对齐,就需要设置对齐方式。

语法格式:

<hr align="对齐方式">

语法中对齐方式可以有3种,包括center、left和right,其中center的效果与默认的效果相同。

其他的标记

在网页中除了可以输入汉字、英文和其他的语言之外,还可以输入一些空格和特殊的字符,如¥、$、#等。

插入空格:

语法格式:

&nbsp

在网页中可以有多个空格, 一个&nbsp;代表一个半角空格, 多个空格则可以多次使用这一符号。

网页中的图像问题

(一)图像的源文件src
src属性用于图像文件所在的路径,它是图像必不可少的属性。

语法格式:

<img src="图像文件的地址">

src参数用来设置图像源文件所在的路径,此路径可以是相对路径,也可以是绝对路径。

图像的地址可以使用文件和http://关键字作为图像的地址,并且能够用于在网页上载入图像。

(二)图像的提示文字alt

提示文字对的作用,是为了说明或者是描述图像。

这种情况,相信很多人都不陌生。就是把鼠标放在图像上,就会有一些就是说明性的文字,这就是使用alt标记实现的。

语法格式:

<img src="图像文件的地址"alt="提示文字的内容">

提示的文字内容既可以是中文,也可以英文,语言形式不做规定。

(三)图像的宽度width和高度height

width和height属性用来定义图片的高度和宽度, 如果<img>元素不定义高度和宽度, 图片就会按照它的原始尺寸显示。

语法格式:

<img src="图像文件的地址" width="图像的宽度" height="图像的高度">

图像的宽度和高度的单位是像素。


(四)图像的边框border

默认情况下,图像是没有边框的,通过border属性可以为图像添加边框线。可以设置边框的宽度,但边框的颜色是不可以设置的。
当图像上没有添加链接的时候,边框的颜色为黑色;当图像上添加了链接时,边框的颜色和链接文字颜色一致,默认为深蓝色。

语法格式:

<img src="图像文件的地址" border="图像边框的宽度">

边框的宽度border的单位是像素, 值越大边框越宽。

(五)图像的垂直边距vspace

垂直边距vspace用来调整图像与文字的垂直边距。

语法格式:

<img src="图像文件的地址" vspace="垂直边距">

垂直边距vspace属性的单位是像素。

(六)图像的水平间距hspace

图像与文字之间的水平距离可以通过hspace参数进行调整。

语法格式:

<img src="图像文件的地址" hspace="水平边距">

水平边距hspace属性的单位是像素。

(七)图像的排列align

图像和文字之间的对齐是通过align属性来设定的,align的对齐方式有两种: 即绝对对齐和相对对齐。
绝对对齐方式的效果和文字一样, 只有3种: 居中(middle)、居左(left)、居右(right)。
相对对齐方式是指图像与一行文字的相对位置。

语法格式:

<img src="图像文件的地址" align="文字的对齐方式">


属性 描述
bottom---------------------------图片的底部和当前行的文字底部对齐
top--------------------------------图片的顶端和当前行的文字顶端对齐
middle ---------------------------片水平中线和当前行的文字中线对齐
left---------------------------------图片左对齐
center ----------------------------片水平中线和当前行的文字中线对齐
right-------------------------------图片右对齐


图像的超链接

除了对文字可以添加超链接之外,图像也是可以设置超链接属性的。

同一个图像的不同部分也可以链接到不同的文档,这就是热区链接。

图像的链接和文字的链接方法是一样的,都是用<a>标签来完成,只要将<img>标签放在<a>和</a>之间。

语法格式:

<a href="链接地址"><img src="图像文件的地址"></a>

href参数用来设置图像的链接地址。

使用<a>标记, 图像链接和文字链接相同。
创建E-mail链接需要将mailto://添加到E-mail地址的前面。
链接到一个HTTP站点, 需要在网址前使用http://协议。

图像热区链接

在HTML中是可以把图片划分成多个热点区域,每一个热点区域链都是链接到不同的网页。

语法格式:

<img src="图像地址" usemap="映像图像名称">

首先需要在图像文件中设置映像图像名,在图像的属性中使用<usemap>标记添加图像要引用的映像图像的名称.


需要定义热区图像以及热区的链接属性如下:

语法格式:

<map name = "映像图像名称">
<area shape "热区形状" coords="热区坐标" href="链接地址">
</map>

相关推荐