1-网站信息案例

1.1 案例需求

img
1
2
3
4
“中关村黑马程序员训练营”是由传智播客联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。

1.2 技术分析

1,什么是html

  • html是超文本标记语言
  • 超文本: 超出了文本的范畴, 功能比文本强大
  • 标记语言: 语法由标签组成.

学习HTML的核心就是学习标签

2.html作用

  • 设计页面,做网页

3.HTML结构

img

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<html>
    <head>
        <title>标题</title>
        //外部的引入文件 css, js
        //配置: eg 编码
    </head>
    <body>
        //展示的内容
    </body>
</html>
3.1head标签

​ 一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到.

  • 作用

​ 指定网站的标题

​ 指定网站的关键字/指定网站的描述信息

​ 引入一些外部的css/js文件

​ 添加一些浏览器适配相关的内容

3.2title标签
  • 作用

​ 专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题

  • 注意点:

​ title标签必须写在head标签里面

3.3body标签
  • 作用

​ 专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)

  • 注意点

​ 虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中.

​ 一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

4.html语法规范

  • 扩展名是html或者htm

  • html标签不区分大小写

  • html由头(head)和体(body)组成
  • 标签是可以嵌套的,标签里面可以放标签
  • 标签一般由起始标签开始，结束标签终止。但是如果标签不修饰内容，可以在标签里结束。br, hr, img

5.标签属性

img

  • 属性是属于标签的，修饰标签，让标签有更多的效果
  • 属性一般定义在起始标签里面。
  • 属性一般以 属性=属性值的形式存在
  • 属性值一般用 ‘’或者“ ”括起来。 不加引号也是可以的.(不建议使用)

6.使用IDEA创建HTML

  1. 创建静态Web模块

img

  1. 指定模块名和保存位置

img

  1. 创建HTML文件，选择html5的版本

img

7.排版标签

  • 字体标签
1
<font color="字体颜色" size="字体大小(1~7)" face="字体风格">哈哈</font>
  • 标题标签
1
<hn>标题<hn>  n取值1~6, 1是一级标题, 2是二级标题...
  • 段落标签
1
2
3
<p>段落</p>
注意：
    段落之间自动进行换行
  • 粗体标签
1
<b>内容</b>
  • 斜体标签
1
<i>内容</i>
  • 下划线标签
1
<hr/>
  • 换行标签
1
<br/>

1.3 思路分析

  • 创建html
  • 创建一个标题标签
  • 创建一个下划线标签
  • 创建4个段落标签, 在第一个段落的前面几个文字, 嵌套一个font 设置为红色的字体

1.4 代码实现

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <!--1.创建一个html页面
    2.创建一个标题标签
    3.创建一个下滑线标签
    4.创建4个段落标签
    5.在第一个段落前面几个文字,嵌套一个font标签,设置color属性为red-->
    <body>
        <h1>公司简介</h1>
        <hr />
        <p><font color="red">“中关村黑马程序员训练营”</font>是由传智播客联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。</p>
        <p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。</p>
        <p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p>
        <p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>

    </body>
</html>