HTML三天入行不是梦！冲冲冲

阅读量：3961 次

发布时间：2019-05-24

本文共 3502 字，大约阅读时间需要 11 分钟。

文章目录

前言

在我们的生活中在浏览器的地址栏中输入一个网址，就会查阅到相应的网页内容。在网页中包含很多内容，如文字、图片、动画，以及声音和视频等。既然网页这么方便，那么网页技术到底有哪些知识呢？那么作为一名刚刚入行的web小白，我总结了关于HTML的学习经验，主要分为三天，希望能对和我一样的入行小白有一定帮助。

第一天目标

能够写出基本的页面（里面包含图片、各种标签和链接）

主流的浏览器有哪些？

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

关于浏览器的内核

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

认识网页

网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

何为web标准

WEB标准不是某一个标准，而是一系列标准的集合。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准

Web 标准构成

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

HTML文档的结构

其中包括的标签有：

1 HTML标签：

作用所有HTML中标签的一个根节点。最大的标签根标签

2 head标签：

文档的头部,描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

3.title标签：文档的标题

作用：让页面拥有一个属于自己的标题。

4.body标签：文档的主体以后我们的页面内容基本都是放到body里面的

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

HTML常用标签

1. 换行标签

要使网页中的文字实现换行，在 HTML 文件中输入换行符(Enter键)是没有用的，必须用一个标签告诉浏览器在哪里要实现换行操作。在 HTML 语言中，换行标签为<br>

与前面介绍的 HTML 标签不同，换行标签是一个单独标签，不是成对出现的。下面通过实例来介绍换行标签的使用。

[例1] 创建 HTML 页面，实现在页面中输出一首古诗。代码如下:

    
       
       
       应用换行标签实现页面文字换行            静夜思    
             作者：李白
       床前明月光，疑是地上霜。
       举头望明月，低头思故乡。

运行本实例，结果如下所示:

静夜思

作者：李白

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

2. 段落标签

HTML 中的段落标签也是一个很重要的标签，段落标签以<p>标签开头，以</p>标签结束。段落标签在段前和段后各添加一个空行，而定义在段落标签中的内容不受该标签的影响。

3. 标题标签

在 Word 文档中，可以很轻松地实现不同级别的标题。如果要在 HTML 页面中创建不同级别的标题，可以使用 HTML 语言中的标题标签。在 HTML 中设定了6个标题标签，分别为<h1>~<h6>，其中<h1>代表1级标题，<h2>代表2级标题······<h6>代表6级标题。数字越小，表示级别越高，文字的字号也就越大。

[例2] 在 HTML 页面中定义文字，并通过标题标签和段落标签设置页面布局。代码如下:

设置标题标签

Java开发的3个方向

Java SE

主要用于桌面程序的开发。它是学习Java EE和Java ME的基础，也是Java的重点内容。

Java EE

主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强企业。

Java ME

主要用于嵌入式系统程序的开发。

运行本实例，结果如下图所示:

4. 居中标签

HTML 页面中的内容有一定的布局方式，默认的布局方式是从左到右依次排序。如果想让页面中的内容在页面的居中位置显示，可以使用 HTML 中的<center>标签。<center>标签以<center>标签开头，以</center>标签结尾。标签中的内容为居中显示。

对例2中的代码进行修改，使用居中标签将页面内容居中。

[例3] 使用居中标签对页面中的内容进行居中处理。代码如下:

    
       
       
       设置标题标签    
       
    Java开发的3个方向
    
    Java SE
    
    主要用于桌面程序的开发。它是学习Java EE和Java ME的基础，也是Java的重点内容。
    
    Java EE
    
    主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强企业。
    
    Java ME
    
    主要用于嵌入式系统程序的开发。

将页面中的内容进行居中后的效果如下图所示:

超链接与图片标签

HTML 语言的标签有很多，由于实力有限。。。只能介绍一些简单的常用标签，除了上面介绍的常用标签外，还有两个标签需要介绍，即超链接标签与图片标签。

超链接标签

超链接标签是页面中非常重要的元素，在网站中实现从一个页面跳转到另一个页面，这个功能就是通过超链接标签来完成的。超链接标签的语法非常简单。其语法格式如下:

属性 href 用来设定链接到哪个页面中。

图片标签

在浏览网站时通常会看到各式各样的漂亮图片，在页面中添加的图片是通过<img>标签来实现的。<img>标签的语法格式如下:

<img>标签的属性如表6所示。

属性	描述
src	用于指定图片的来源
width	用于指定图片的宽度
height	用于指定图片的高度
border	用于指定图片外边框的宽度，默认值为 0
alt	用于指定当图片无法显示时显示的文字

下面给出具体实例，为读者演示超链接和图片标签的使用。

[例11] 在页面中添加表格，在表格中插入图片和超链接。代码如下:

    
       
       
       超链接与图片标签    
   
                                                                                                                          
                                               查看详情                                              查看详情                         
                                                                                                                      
                                               查看详情                                              查看详情