欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Day1 HTML入门笔记内容

程序员文章站 2022-05-01 17:37:01
HTML的英文全称Hyper Text Markup Language,网页超文本标记语言。HTML并不是什么编程语言,而是一款描述性的标记语言。也是全球广域网上描述网页内容和外观的标准。 作为标记语言,本身不能显示在浏览器中。主要应用于描述超文本中内容的显示方式。 HTML的基本结构 完整的HTM ......

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>