HTML简介
HTML 是用来描述网页的一种语言。指的是超文本标记语言 (Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言 (markup language)。或许你有迷惑了,什么是标记语言呢?标记语言是一套标记标签 (markup tag),而HTML 使用标记标签来描述网页。HTML 文档也被称为网页,包含 HTML 标签和纯文本。HTML 标签是由尖括号包围的关键词,比如 。HTML 标签通常是成对出现的,比如 和 。标签对中的第一个标签是开始标签,第二个标签是结束标签。开始和结束标签也被称为开放标签和闭合标签。也就是说,网页=HTML标签语言。
HTML编辑器
简单地说,我们应在哪些专业专业里面做网页呢?小编在这里推荐三款专业的HTML编辑器来编辑HTML:Adobe Dreamweaver、Microsoft Expression Web、Coffee Cup HTML Editor。下面我们将用记事本来做一个最简单的网页:
首先打开记事本(开始所有程序Windows附件记事本),第二步是在记事本中编辑HTML语言,如下图:
第三步,保存文档为HTML格式(在记事本的文件菜单选择“另存为”)。当保存HTML文件时,既可以使用.htm,也可以使用.html扩展名。
第四步,在浏览器中运行这个HTML文件(启动浏览器,然后选择“文件”菜单的“打开文件”命令,或者双击该HTML文件),结果如下:
这样,一个简单的网页就做成了。
HTML代码
一、标题
网页制作时用什么来表示标题呢?下面我们来看看:
标题(Heading)是通过
-
等标签进行定义的。
定义最大的标题。
定义最小的标题。
注释:浏览器会自动地在标题的前后添加空行。注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
二、水平线
标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
提示:使用水平线 (
标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。
三、注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释是这样写的:
注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。提示:合理地使用注释可以对未来的代码编辑工作产生帮助。
四、段落
段落是通过
标签定义的。
注释:浏览器会自动地在段落的前后添加空行。(
是块级元素)提示:使用空的段落标记
标签代替它!(但是不要用
标签去创建列表。不要着急,您将在稍后的篇幅学习到 HTML 列表。)
五、折行
折行的主要目的是调整网页布局,让它看起来更美观简洁。
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
标签:
元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
HTML样式
一、背景颜色
background-color属性为元素定义了背景颜色:
代码为:
This is a heading
This is a paragraph.
二、字体、颜色以及尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:
代码为:
A heading
A paragraph.
三、文本对齐
text-align 属性规定了元素中文本的水平对齐方式。
居中对齐:
左对齐:
右对齐:
HTML引用
1、HTML 元素定义短的引用。
浏览器通常会为 元素包围引号。
2、用于长引用的 HTML
。HTML
元素定义被引用的节。浏览器通常会对元素进行缩进处理。
HTML超链接
什么是超链接?超链接就是从一个页面到另一个页面之间跳转的方式。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。我们通过使用 标签在 HTML 中创建链接。
有两种使用 标签的方式:
通过使用 href 属性 - 创建指向另一个文档的链接通过使用 name 属性 - 创建文档内的书签Visit Baidu
上面这行代码显示为:Visit Baidu
点击这个超链接会把用户带到 Baidu 的首页。
提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
链接属性:使用 Target 属性,你可以定义被链接的文档在何处显示。
查看结果:
HTML图像
在我们制作的网页中如何插入图片或视频?我们进入下面的学习。
图像标签()和源属性(Src)
在 HTML 中,图像由 标签定义。
是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
替换文本属性(Alt):alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。即图片在网络不佳时,图片加载不出来就用替换文本代替。
上图是图片插入及其大小的调整。
上图展示了替换文本。
HTML图片链接
这节中我们把前面两节联合起来,直接在图片上链接。下面看看例子:
HTML表格
如何在网页中创建表格呢?这是我们接下来要看到的内容。
表格由
标签定义)。字母td指表格数据(tabledata),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML表格属性
1.表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
2.表格的表头
表格的表头使用
标签进行定义。 3.表格中的空单元格
在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。
上面用一个例子说明上面三个属性:两个表一个有边框,一个没有,原因是第二个表格没有设置边框属性;表头有横竖之分,一目了然;空单元格应该是图一红点处加 。
HTML列表
第一,无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于
- 标签。每个列表项始于
- 。
第二,有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于
- 标签。每个列表项始于
- 标签。
上面是一个无序的嵌套列表,代码稍做改动就有了下面有序和无序的嵌套列表。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
HTML css样式
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:
第一,外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
第二,内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过
第三,内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
This is a paragraph
HTML删除和插入字效果
有些时候,我们制作的网页为了让使用者一目了然,我们可以用删除或插入效果。
下面我们看看代码:
HTML块
第一.HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:
,
,
- ,
第二.HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子:,
, , 第三.HTML
元素HTML
元素是块级元素,它是可用于组合其他 HTML 元素的容器。元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,
元素可用于对大的内容块设置样式属性。元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。第四.HTML 元素
HTML 元素是内联元素,可用作文本的容器。
元素也没有特定的含义。
当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。
HTML块-div的使用
定义和用法
可定义文档中的分区或节(division/section)。标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记
,那么该标签的作用会变得更加有效。用法
是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是固有的唯一格式表现。可以通过的 class 或 id 应用额外的样式。不必为每一个
都加上类或 id,虽然这样做也有一定的好处。可以对同一个
元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。提示和注释:
注释:
是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。提示:请使用
元素来组合块级元素,这样就可以使用样式对它们进行格式化。
正如您看到的,上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起,也就是说,div 为文档添加了额外的结构。同时,由于这些 div 属于同一类元素,所以可以使用 class="news" 对这些 div 进行标识,这么做不仅为 div 添加了合适的语义,而且便于进一步使用样式对 div 进行格式化,可谓一举两得。
HTML块-span的使用
定义和用法 标签被用来组合文档中的行内元素。
eg:
some text.some other text.
例子解释
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
可以对同一个 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
两种表示
HTML:
提示:... ... ...
CSS:p.tip span {
font-weight:bold;color:#ff9955;}
由于篇幅有限,本次教程就讲到这里。如果对你有所帮助,还请收藏转发!
举报/反馈