今日任务

  • 网站信息页面案例

  • 网站图片信息页面案例

  • 网站友情链接页面案例

  • 网站首页案例

  • 网站后台页面案例

教学目标

  • 了解什么是标记语言

  • 了解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>

day01_HTML的更多相关文章

  1. web前端知识day01_HTML

    一.HTML入门案例(静夜思) 1.概述 HTML:Hyper Text Markup Language 超文本标记语言超文本:比普通文本功能强大,能实现不同样式(比如加粗,居中,斜体)标记语言:使用 ...

  2. HTML的学习笔记

    一.HTML的概述(了解) a.html是什么 : hypertext markup language 超文本标记语言           超文本:音频,视频,图片称为超文本..           ...

  3. HTML教程详解

    HTML学习笔记 目录 一.html简介 1.html是什么? 2.html能做什么(html的作用)? 3.html书写规范 二.html基本标签 1.标签的语法 2.标签的分类 3.常用标签: 1 ...

  4. HTML基础汇总

    一.HTML的概述(了解) a.html是什么 : hypertext markup language 超文本标记语言           超文本:音频,视频,图片称为超文本..           ...

随机推荐

  1. shell编程/字库裁剪(1)

    我写这个帖子的意图,在于三个: 1.用代码生成代码的思维. 2.shell编程的思路. 3.裁剪字库的具体程序. 我打算分为三节来说: 第一节讲裁剪裁剪词库的意义以及使用场合: 第二节讲如何用shel ...

  2. 关于使用连接器arm-linux-ld时指定链接地址的作用

    首先,记住一句话:程序的链接地址必须等于运行地址! 在学习exynos 4412的启动过程时,发现自己对链接地址的作用不是很了解,于是上网查找了资料做了基本了解,在此做个总结. 上图是exynos 4 ...

  3. UWP 手绘视频创作工具技术分享系列 - 手绘视频导出

    手绘视频最终的生成物是视频文件,前面几篇主要讲的是手绘视频的创作部分,今天讲一下手绘视频的导出问题.主要以 UWP 为例,另外会介绍一些 Web 端遇到的问题和解决方法. 如上所述,手绘视频在创作后, ...

  4. 翻译：MLAPP（2.3节 一些常见的离散分布）

    笔者:尝试翻译MLAPP(Machine Learning: a Probabilistic Perspective)一书,供机器学习的学者参考,如有错误理解之处请指出,不胜感激!(如需转载,请联系本 ...

  5. LeetCode 219. Contains Duplicate II （包含重复项之二）

    Given an array of integers and an integer k, find out whether there are two distinct indices i and j ...

  6. echarts教程-asp.net+ashx实现堆积柱状

    说说看.崔西莲夫人紧接着说. 想不到史春吉是这种人. 你会这样说倒是有趣,因为这正是我当时的感觉.这跟奈维尔的个性不合.奈维尔,就像大部分男人一样,通常都是尽量避开任何可能造成尴尬或不愉快的场面.我怀 ...

  7. HDFS的接口（命令行接口和Java接口）--笔记

    HDFS 文件的系统访问的接口 1.Hadoop的shell命令脚本 hadoop fs -ls   列出某一个目录下的文件 hadoop fs -lsr 递归的方式列出所有文件 hadoop fs ...

  8. 0_Simple__matrixMulDrv

    使用CUDA的 Driver API 来计算矩阵乘法. ▶ 源代码: #include <stdio.h> #include <cuda.h> #include <bui ...

  9. lynｘ---CentOS终端访问IP

    1.官网 http://lynx.isc.org 2.稳定版本 http://invisible-mirror.net/archives/lynx/tarballs/lynx2.8.8rel.2.ta ...

  10. input光标高度问题

    input输入框光标高度问题IE:不管该行有没有文字,光标高度与font-size大小一致 FF:该行没有文字时,光标大小与input的 height 大小一致:该行有文字时,光标大小与font-si ...