网页制作入门 - Html的学习
本篇所授任务
- 网站信息页面案例
- 网站图片信息页面案例
- 网站友情链接页面案例
- 网站首页案例
- 网站注册页面案例
- 网站后台页面案例
教学导航
| 教学目标 | 了解什么是标记语言 |
| 教学目标 | 了解HTML主要特性,主要变化及发展趋势 |
| 教学目标 | 了解HTML的结构标签 |
| 教学目标 | 掌握HTML的主要标签(字体,图片,列表,链接,表单等标签 |
| 教学方法 | 案例驱动法 |
1.1 网站信息页面显示案例：
1.1.1 需求分析：
在网页中显示一个文字信息页面，显示效果如下：
1.1.2 分析：
1.1.2.1 技术分析
【HTML的概述】
- 什么是HTML
HTML：Hyper Text Markup Language 超文本标记语言
l 超文本：比文本功能更加强大
l 标记语言：通过一组标签对内容进行描述的一门语言
- 为什么学习HTML
HTML是设计页面基础，是一个网页最起码的骨架内容
- 在哪些地方可以使用HTML
设计页面的时候都可以使用HTML，可以是网站，可以是淘宝店铺的装修…
- 如何使用HTML
HTML的语法和规范
l HTML文件的扩展名是.html或者是.htm
HTML文件是由头和体组成
l HTML这组标签是不区分大小写
l HTML的标记通常是由开始标签和结束标签组成：内容
【HTML的字体标签】
<font>标签 <font 属性名=”属性值”>文字</font>
l size:控制字体大小.最小1 最大7
l color：控制字体颜色. 使用英文设置 ，使用16进制数设置
l face：控制字体.
【HTML的排版标签】
<hn>标题标签 <h1>b标题</h1> <p>段落标签 <p>一段文字</p> <br/>换行标签 <br/>代表换行 <hr/>水平线标签 <hr/>水平线标签 <b>字体加粗 <b>文字</b> <i>斜体标签 <i>斜体</i>
1.1.2.2 步骤分析
- 步骤一：创建一个html文件
- 步骤二：创建标题标签
- 步骤三：标题下面会有一个水平线
- 步骤四：创建段落标签创建四个段落
- 步骤五：将某些文字设置为红色
1.1.3 代码实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面标题</title> </head> <body> <!-- 创建标题标签 --> <h2>公司简介</h2> <!-- 作者：Mr.yang 时间：2018-09-01 描述：水平线 --> <hr /> <!-- 作者：Mr.yang 时间：2018-09-01 描述：创建段落标签 --> <p> <font color="#FF0000"><b>“杨老师课堂”</b></font>是由Java讲师<b>杨校</b>个人进行开设的公开性学习平台、并且在CSDN的博客进行了发表每个技术的基础知识点，并且在CSDN及网易云上进行了诸多实战技术的视频讲解，致力于辅助更多年轻人学习，更快的适应企业级大开发。极大的方面解决了企业招不到优秀人才的困扰。 </p> <p> 杨老师课堂的读者多为在线大学生，一群有理想、有梦想，想从事IT行业，而因为外在环境和个人机遇问题无法改变自己命运的年轻人。 在杨老师的博客中经常会有自己对该行业的个人见解和对未来发展趋势的预想，可以让更多的年轻人有所了解，更快的确立的职业生涯发展目标。 而且杨老师还会发表一些在面试前夕的话术剖析。 </p> <p> 铭扬教育-杨老师课堂不仅着重培养学生的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保更多的学生进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。 </p> <p> 一直以来，杨老师都是以技术视角去关注IT产业的发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。 </p> </body> </html>
1.2 网站的图片页面显示
1.2.1 需求分析：
在网页中显示带有图片的页面效果如下：
1.2.2 分析：
以上图片为两个图片显示，只不过是处于一行中
1.2.2.1 技术分析：
【HTML的图片标记】
<img />
其中的可以选择的属性有
l— src：图片的路径
l— width：图片宽度
l— height：图片的高度
l— alt：图片提示
图片路径：
l— 分成相对路径和绝对路径
l— 相对路径:
|— ./ :代表当前路径
|— ../ :代表上一级路径
1.2.2.2 步骤分析：
- 创建一个img标签引入logo图片
- 创建一个img标签引入header图片
1.2.3 代码实现
<html> <head> <meta charset="utf-8"> <title>网站图片页面</title> </head> <body> <img src="img/logo.png"/><img src="img/header.png" /> </body> </html>
1.3 网站的列表显示页面
1.3.1 需求分析：
在页面中列表显示友情链接：
1.3.2 分析：
1.3.2.1 技术分析
【HTML的列表标签】
无序列表 <ul> <li>内容1</li> <li>内容2</li> </ul>
有序列表 <ol> <li>内容1</li> <li>内容2</li> </ol>
1.3.2.2 步骤实现
- 创建一个无序列表显示友情链接
- 但是并没有实现点击后有连接跳转到的效果(原因是缺少a标签)
1.3.3 代码实现
```
- 百度
- 安博
- 百合网
- 世纪佳缘
```
1.3.4 总结：
【超链接标签】
<a>超链接</a>
其中可以选择的属性有：
l href：超链接跳转的路径
l target：打开方式
n _self：在自身页面打开
n _blank：打开一个新窗口
杨老师课堂之网页制作HTML的学习入门-含有案例2：https://developer.aliyun.com/article/1542749
