HTML基础入门

最新推荐文章于 2022-08-28 10:51:43 发布

yahweh_liu

最新推荐文章于 2022-08-28 10:51:43 发布

阅读量365

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/yahweh_liu/article/details/89534333

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

在程序的世界里，有着这么一群人，我们称他们为“程序员”或“工程师”。他们可以不会流利的英语，却可以华丽的使用26字母和字符。他们可以不精通高等数学，却可以玩转众多逻辑和算法。他们赋予了冷血的机器以生命，他们改变了五彩的世界更多彩。

年轻人，从今天开始，你将加入程序员大家族。使用自己的五指敲出自己的摩天大楼。世界因你而改变，你因今天而腾飞。不惧艰难，勇往直前，如此优秀的你，还有什么可以阻挡你成功的脚步。披荆斩棘，所向披靡，才华横逆的你，正走在辉煌人生的大道上。

HTML基础入门

今日内容介绍

u 使用html的排版标签编写“网站信息页面”

u 使用html的图片标签编写“图片显示页面”

u 使用html的列表标签编写“友情链接页面”

u 使用html的表格标签编写“首页”

u 使用html的框架标签表现“后台页面”

今日内容学习目标

u 能够使用<table><tr><td>进行简单页面布局

u 能够使用<a>完成多个页面之间切换

u 能够使用<img/>显示指定位置的图片

u 能够使用<frameset><frame>标签绘制上左右框架结构

u 能够看懂<p><h1><i>等标签修饰文字信息

u 能够看懂<ul><li>进行列表信息的展示

今日学习标签总览

一天的学习需要使用众多独立没有关联的标签，为了大家更好的吸收，现给出标签总览，以“重要程度”排序。例如：“表格标签”为今天最重要的标签。

第1章网站信息页面显示

1.1 案例需求:

通常在一个网站中都会有关于公司的介绍,那么我们就来完成这样的案例

当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。

1.2 相关知识点

1.2.1 HTML的概述

1.2.1.1 什么是HTML

HTML：超级文本标记语言（HyperText Markup Language）

l “超文本”就是指页面内可以包含图片、链接等非文字内容。

l “标记”就是使用标签的方法将需要的内容包括起来。例如：<a>www.itcast.cn</a>

1.2.1.2 HTML能干什么

HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。

网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。

l HTML代码：用于展示需要显示的数据。

l CSS代码：使显示的数据更佳好看。

l JavaScript代码：使整个页面显示的数据具有动画效果。

网页根据内容是否改变分为：静态页面、动态页面

l 静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。

l 动态页面：会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。

1.2.1.3 HTML语言特点

n HTML文件不需要编译，直接使用浏览器阅读即可

n HTML文件的扩展名是*.html 或 *.htm

n HTML结构都是由标签组成

u 标签名预先定义好的，我们只需要了解其功能即可。

u 标签名不区分大小写

u 通常情况下标签由开始标签和结束标签组成。例如：<a></a>

u 如果没有结束标签，建议以/结尾。例如：<img />

n HTML结构包括两部分：头head和体body

1.2.1.4 创建模板

1. 在任意位置（F盘根目录），创建“文本文档”，重命名“00.模板.html”

文件名自定义，扩展名为html。00.template1表示意思今天案例前的模板1页面。

2. 右键/打开方式/记事本，开发html文件，并编写如下内容

<html>

<head>

</head>

<body>

这里是正文

</body>

</html>

以上使用的标签组成了HTML页面的基本结构，现将所有标签进行陈述：

l <html> 整个页面的根标签，理论上一个页面只需要一个，由头和体组成。

n <head> 头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。

u <title>子标签，用于显示浏览器标题。

n <body> 体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。

3. 使用浏览器打开

1.2.1.5 环境搭建

使用“记事本”开发效率低，现阶段比较流程的前端IDE（集成开发环境）是HBuilder，为了统一环境，要求所有同学的都安装HBuilder，参考“1.HBuilder安装.doc”

提供模板代码，使用“HBuilder”创建01.模板.html页面。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

正文

</body>

</html>

在模板代码中，我们使用到了HTML注释

l 格式：<!—注释内容 -->

l 注释特点：

n 浏览器查看时，不显示。右键查看源码可以看到。

n 注释标签不能嵌套。

n 注释特殊用法，为不同的浏览器提供不同的解决方案（了解）

1.2.2 案例相关标签

本案例中需要使用的标签如下：

l <h1></h1>

l <hr />

l <font>

l <b></b>

l <i></i>

l <p></p>

l <br />

下面我们开始一个一个的介绍，为了方便演示，创建一个“01.demo.html”文件

1.2.2.1 标题标签：<h1>

HTML提供<hn>系列标签，用于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1> 定义最大的标题。<h6> 定义最小的标题

例如：

<h2>Java学院</h2>

1.2.2.2 标题标签： <hr>

<hr /> 标签在 HTML 页面中创建一条水平分隔线，用于定义内容中的主题变化。

size属性：水平线的高度，单位像素

noshade属性：没有阴影，取值：noshade，表示显示纯色

例如：

<hr />

1.2.2.3 字体标签：<font>

<font> 用于设置字体尺寸、字体颜色等。

size属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。

color属性：设置字体的颜色

颜色的取值：#xxxxxx 或 colorname

#xxxxxx 表示使用红绿蓝三原色设置颜色。

红绿蓝分别取值：00 -- FF，此处使用16进制。（FF就是十进制的255）

#000000 表示黑色，#FFFFFF白色

#FF0000红色，#00FF00绿色，#0000FF蓝色

红绿蓝2位取值相同可以省略成1位。例如：#112233 简化成#123

colorname 使用英文单词确定颜色。red 红色，blue 蓝色，green绿色

例如：

<font color="blue">我是蓝色的</font>

1.2.2.4 格式化标签： <b> <i>

<b> 粗体

<i> 斜体

例如：

1.2.2.5 段落标签：<p> <br/>

<p> 定义段落。p 标签会自动在其前后创建一些空白。

<br /> 插入单个换行。

1.3 案例分析

1.3.2 步骤分析

1. 创建03.案例：显示信息页面.html

2. 复制需要编写的内容

3. 使用标题标签<h1>修饰“公司简介”

4. 使用标题标签<hr>添加分隔线

5. 使用段落标签<p>和<br>划分区域

6. 使用字体标签<font> 修饰“中关村黑马程序员训练营”

7. 使用格式化标签<b> <i> 修饰“传智播客”

1.4 代码实现

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<hr/>

<p>

<font color="red">“中关村”</font>是由<b><i>你好</i></b>联合中关村软件园、CSDN，并委托进行实施的软件开发，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。<br/>

目前，“中关村”已成长为行业“”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。

</p>

<p>

这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，都是精挑细选出来的。并降低企业的用人风险。

</p>

<p>

更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。

</p>

<p>

一直以来，关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、开放和协作，努力打造高质量的IT人才服务平台。

</p>

</body>

</html>

第2章网站图片页面显示案例

2.1 案例介绍

在上面的案例中，我们发现这个页面都是文字的内容，而我们看到的页面往往文字和图片是并存的，或者很多地方都是图片的效果，那么我们如何在页面中显示图片呢？那么我们来实现这样的案例：

当然，大家现在还不知道怎么来完成这个案例，因为我们还没有学习HTML中的图片标签，那么我们现在就来学习一下吧。

2.2 相关知识点

2.2.1 案例相关标签

2.2.1.1 图片标签：<img>

<img> 在html页面中引用一张图片

n src ：指定需要显示图片的URL（路径）。

n alt ：图片无法显示时的替代文本。

n width ：设置图像的宽度。

n height ：定义图像的高度。

<img src="img/registImg.jpg" alt="剁手不够解恨"

width="200px" height="200px" title="鼠标移上显示"/>

<img src="img/registImg2.jpg" alt="剁手不够解恨"

width="200px" height="200px" title="鼠标移上显示"/>

2.3 案例分析:

2.3.1 知识点分析

2.3.2 步骤分析

1.创建案例二:网站图片页面显示.html

2.使用图片标签<img>标签的src属性引入图片

2.4 代码实现

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

第3章网站列表页面显示

3.1 案例介绍

在页面中显示文字和图片我们已经完成了，那么如果想在页面中显示一组友情链接信息，效果如下：

点击这几个链接，可以跳转到相应的网站上.那么现在我们就来实现这样的效果

3.2 相关知识点

3.2.1 列表标签：<ol><ul>

l <ol> 定义有序列表。

n type 列表类型，取值：A、a 、I 、i 、1 等

l <ul> 定义无序列表。

n type 符号的类型，取值：disc 实心圆、square 方块、circle 空心圆

l <li> 定义列表项。是<ul> 或 <ol> 的子标签

例如：

</ul>

</ol>

3.2.2 超链接标签 <a>

<a> 标签是超链接，是在html页面提供一种可以访问其他位置的实现方式。

n href：用于确定需要显示页面的路径（URL）

n target：确定以何种方式打开href所设置的页面。常用取值：_blank、_self 等

u _blank 在新窗口中打开href确定的页面。

u _self 默认。使用href确定的页面替换当前页面。

例如：

访问“”官网，以默认方式打开

</a><br />

访问“”官网，以新窗口方式打开

</a><br />

3.3 案例分析

3.3.1 知识点分析

3.4 案例实现

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</body>

</html>

第4章网站首页显示

4.1 案例介绍

在之后的开发中，div+css布局非常常见，但对于更熟悉服务器端开发的Java程序员来说，没有相应的知识底蕴。我们更侧重功能的完成，页面的美观展示就交予UI工程师。所以在之后的学习和开发中，我们使用表格<table>布局更多。

为了让大家熟练的应用表格布局，本案例我们将使用表格完成比较复杂的首页编写。

4.2 相关知识点

4.2.1 案例相关标签

在整个首页页面中，第二行的右边使用到表单，此处暂时省略，下一个案例我们单独讲解。

本案例使用的标签，如下：

<table>

<tr>

<td>

惯例，我们将创建“案例三:网站首页.html”页面进行演示。

4.2.1.1 表格标签<table><tr><td>

HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。

n <table> 是父标签，相当于整个表格的容器。

u border 表格边框的宽度。

u width 表格的宽度。

u cellpadding 单元边沿与其内容之间的空白。

u cellspacing 单元格之间的空白。

u bgcolor 表格的背景颜色。

n <tr>标签用于定义行

n <td>标签用于定义表格的单元格（一个列）

u colspan 单元格可横跨的列数。

u rowspan 单元格可横跨的行数。

u align 单元格内容的水平对齐方式, 取值：left 左、right 右、center 居中。

u nowrap 单元格中的内容是否折行。

n <th>标签用于定义表头。单元格内的内容默认居中、加粗。

a) 实例1：编写3*3表格，使用<td>修饰表头

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

b) 实例2：编写3*3表格，将第一行全部合并

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

c) 实例3：编写3*3表格,将第一列全部合并

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

4.3 案例分析

4.3.1 知识点分析

根据对首页页面的分析，我们将采用表格嵌套的方式绘制。首页绘制一个7*1的表格用于作为外围的整体结构，然后给每一行分别添加表格绘制自己的模块，有1*3表格，有2*7表格。对于第三行轮播条暂时不编写，需要使用js。（第4天和第5天讲解）

4.4 案例实现

4.4.1 整体布局

绘制整体布局，使用border标记边框，定位之后再删除。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

4.4.2 完整案例，填充数据

填充数据，将数字替换真实案例的数据

<!DOCTYPE html>

<html>

<head>

<title>itheima商城</title>

</head>

<body>

<tr>

<td>

</td>

</tr>

</td>

</tr>

<tr>

</tr>

</table>

</td>

<td >

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

</tr>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

</tr>

</table>

</td>

<td >

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

</tr>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

</tr>

</table>

</tr>

</td>

</tr>

</table>

</body>

</html>

第5章网站后台页面显示

5.1 案例介绍

平时我们看到的电商网站，其实只是其前台页面，提供给普通用户进行查询商品，购买商品等操作的。实际上，还有后台页面，提供给管理员使用的，用于添加商品，发货等操作。

一般情况，后台页面都采用的框架方式进行呈现。效果如下图：

5.2 相关知识点

5.2.1 案例相关标签

5.2.1.1 框架标签：<frameset>

<frameset> 标签，是多个窗口页面整合在一起的一个集合（框架集）。每一个页面（框架）都是单独文档，需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个<frameset>可以嵌套使用。

l <frameset>和<body>两个不能共存。

l rows属性和cols属性取值：值1,值2,值3,….. 一个值表示一行（列），多值使用逗号分隔，值可以是 10px、10% 等，最后一个值如果不想计算可以使用*匹配剩余量。

5.2.1.2 框架子标签：<frame>

<frame>标签，用于设置<frameset>框架集中的一个页面（框架）。

l src属性：确定页面的路径

l noresize属性：框架分隔先不能移动

l target属性：确定需要显示的页面在何处显示

5.3 案例分析

5.4 案例实现

<!DOCTYPE html>

<html>

<head>

</head>

</frameset>

</html>

yahweh_liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录