内容发布更新时间 : 2024/12/23 20:56:36星期一 下面是文章的全部内容请认真阅读。

黑马程序员：javaweb基础阶段笔记之第一章

WEB01-HTML篇

今日任务

? 网站信息页面案例 ? 网站图片信息页面案例 ? 网站友情链接页面案例 ? 网站首页案例 ? 网站注册页面案例 ? 网站后台页面案例

教学导航

了解什么是标记语言 了解HTML主要特性,主要变化及发展趋势 教学目标 了解HTML的结构标签 掌握HTML的主要标签(字体,图片,列表,链接,表单等标签) 教学方法 案例驱动法 1.1 案例一：网站信息页面的显示：

1.1.1 需求：

在网页中显示网站的信息的页面：效果如下：

黑马程序员郑州中心 编著

1.1.2 分析:

1.1.2.1 技术分析：

【HTML的概述】 ? 什么是HTML

HTML:Hyper Text Markup Language --- 超文本标记语言. * 标记语言：指的是通过一组标签的形式描述事物的一门语言. * 超文本：比普通的文本更强大.

? HTML的作用

HTML是用来制作页面(静态页面).

? HTML在那些地方使用

在设计网站的页面的时候都要使用到HTML.

【HTML的使用】 ? HTML的文件的创建

一个HTML文件,扩展名是.html或者.htm结尾 * 01.html

? HTML的结构标签

* 跟标签: * -- html的头标签 * -- html的体标签

【HTML的字体标签】

? 标签:HTML中的字体标签.

使用：文字 * 标签的属性:

* <标签 属性名=”属性值” 属性名=”属性值”> * 属性:

* color属性:字体颜色

* 英文单词设置:black,red,green,blue... * 使用16进制数设置:#FFFFFF , #FFF * size属性:字体的大小 * face属性:字体 * 基本使用：

黑马程序员郑州中心 编著

我是HTML!

【HTML的排版标签】

? 标题标签：h标签

...

一级标题

二级标题

三级标题

? 段落标签：p标签

一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容

一段内容内容一段内容内容一段内容内容 一段内容内容一段内容内容一段内容内容 一段内容内容一段内容内容一段内容内容 一段内容内容一段内容内容一段内容内容

一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容

一段内容内容 一段内容内容

? 字体加粗标签：b标签

黑马训练营

? 字体斜体标签：i标签

黑马训练营

? 字体下划线：u标签

黑马训练营

? 居中标签：

标签

内容

黑马程序员郑州中心 编著

1.1.2.2 步骤分析:

【步骤一】创建一个HTML的文档 【步骤二】设置标题 【步骤三】设置四个段落

【步骤四】使用字体标签将第一个段落中的某个部分的内容变为红色.

1.1.3 代码实现:

网站信息页面

公司简介

---

是由传智播客

联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。

黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境

和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。

中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管

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

一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，

黑马程序员郑州中心 编著

致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。

1.1.4 总结:

HTML有标准: * HTML4

*

标签：原生标签. 
标签：横线. 
1.2 案例二：网站图片页面显示： 
1.2.1 需求： 
在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理? 效果如下: 
 
1.2.2 分析: 1.2.2.1 技术分析: 
【HTML的图片标签】 
图片标签:     * 属性: 
         * src :图片的来源.          * width 
:图片的宽度. 
         * height:图片的高度.          * alt :图片找不到显示的内容. 图片的引入的路径问题:     * 路径：相对路径. 
        * 如果引入的图片和html文件在同一级路径。 
黑马程序员郑州中心 编著 
1
2
3
4