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的效果与默认的效果相同。
其他的标记
在网页中除了可以输入汉字、英文和其他的语言之外,还可以输入一些空格和特殊的字符,如¥、$、#等。
插入空格:
语法格式:
 
在网页中可以有多个空格, 一个 代表一个半角空格, 多个空格则可以多次使用这一符号。
网页中的图像问题
(一)图像的源文件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>