day01_HTML

今日任务

  • 网站信息页面案例

  • 网站图片信息页面案例

  • 网站友情链接页面案例

  • 网站首页案例

  • 网站后台页面案例

教学目标

  • 了解什么是标记语言

  • 了解HTML的框架标签

  • 掌握HTML的主要标签(字体,图片,列表,链接,表格等标签)

案例一:网站信息页面案例

一,案例需求

二,技术分析

1.什么是html
  • 超文本标记语言

  • 超文本: 超出了文本的范畴, 功能要比文本强大

  • 标记语言 : 语法由标签组成的

  • 学习HTML核心就是标签

2.html可以做什么
  • 设计页面,做网页

3.html语法规范
  • 扩展名是html或者htm

  • html标签不区分大小写

  • html由头(head)和体(body)组成

  • 标签是可以嵌套的,标签里面可以放标签

    • 标签一般由起始标签开始,结束标签终止。但是如果标签不修饰内容,可以在标签里结束。eg: <br/> <hr/>

4.标签属性
  • 属性是属于标签的,修饰标签,让标签有更多的效果

  • 属性一般定义在起始标签里面。

  • 属性一般以 属性=属性值的形式存在

  • 属性值一般用 ‘’或者“ ”括起来。 不加引号也是可以的.(不建议使用)

5.html入门demo

1)Hbuilder的使用

IDE快捷键

  • 复制上一行:Ctrl+Shift+R

  • 删除一行:Ctrl+D

  • 格式化:Ctrl+Shift+F

  • 注释:Ctrl+Shift+/

2)字体标签

<font color="red" size="3" face="微软雅黑">hello world!!!</font>
    <font color="red" size="1">hello world!!!</font>
    <font color="red" size="7">hello world!!!</font>
  • 以font定义

常用属性:

  • color:字体颜色

  • size:字体大小,取值1~7

  • face:字体类型

6.排版标签

1)标题标签

<hn>标题<hn> n取值1~6

2)段落标签

<p>段落</p>

注意:

  • 段落之间自动进行换行

3)粗体标签

<b>内容</b>

4)斜体标签

<i>内容</i>

5)下划线标签

<hr/>

6)换行标签

<br/>

三,思路分析

  • 创建一个html页面

  • 创建一个标题标签

  • 创建一个下划线标签

  • 创建四个段落标签

  • 在第一个段落前面几个文字嵌套一个字体标签, 设置color属性为red

四,代码实现

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

 

posted @ 2017-11-26 20:51  三毛他哥  阅读(119)  评论(0编辑  收藏  举报