HTML的基础入门

最新推荐文章于 2022-10-02 14:46:20 发布

VIP文章 Spashi

最新推荐文章于 2022-10-02 14:46:20 发布

阅读量324

点赞数

分类专栏： Notes

本文链接：https://blog.csdn.net/Spashi/article/details/81782709

版权

Day-01 HTML的基础部分通过几个实例来演示
网站信息页面案例

网站图片信息页面案例

网站友情链接页面案例

网站首页案例

网站注册页面案例

网站后台页面案例

目标
- 了解什么是标记语言
- 了解HTML主要特性，主要变化以及发展趋势
- 了解HTML的结构标签
- 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签）

1.网站信息页面

1.1需求分析:

我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息

1.2技术分析:

HTML概述:

HTML: Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

HTML的主要作用:

设计网页的基础,HTML5

HTML语法规范

<!--
    1. 上面是一个文档声明 
    2. 根标签 html
    3. html文件主要包含两部分. 头部分和体部分
        头部分 : 主要是用来放置一些页面信息
        体部分 : 主要来放置我们的HTML页面内容
    4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成  
    5. 标签不区分大小写, 官方建议使用小写
-->

1.3步骤分析:

公司简介需要标题
水平分割线
四个段落
第一个段落字体需要红色

1.4代码实现:

<html>
    <head>
        <meta charset="UTF-8">
        <title>网站信息页面</title>
    </head>
    <body>
        <!--
            1. 公司简介 需要标题
            2. 水平分割线
            3. 四个段落
            4. 第一个段落字体需要红色
        -->
        <h3>公司简介</h3>

        <hr />
        <p>
        <font color="red">CSDN
        </p>
        <p>
        <strong>csdn
        </p>

</html>

1.5 扩展内容

b : 加粗

i : 斜体

strong: 加粗, 带语义标签

em:  斜体, 带语义

2.网站图片信息

2.1需求分析:

在我们的网站中通常需要显示LOGO图片,显示效果如下

2.2技术分析

img 标签:

常用的属性;

    width : 宽度

    height: 高度

    src :  指定文件路径

    alt:  图片加载失败时的提示内容

2.3步骤分析

2.4代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            常用属性:
                src : 指定图片路径
                width : 指定图片宽度
                height : 图片高度
                alt : 文件加载失败时的提示信息
        -->
        <img src="../img/22.jpg" width="500px" alt="这张图片可能加载问题" />
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--在网页中显示图片-->
        <img src="../img/logo2.png" width="30%"/>
        <img src="../image/header.jpg" width="30%" />
    </body>
</html>

2.5 扩展-文件路径

相对路径

    ./      代表的是当前路径
    ../     代表的上一级路径
    ../../  上上一级路径

3.网站友情链接页面

3.1需求分析

在我们的网站中,通常会显示友商公司的网站链接

百度
新浪微博
黑马程序员

3.2技术分析

列表标签:

无序列表:  ul

    type: 小圆圈,小圆点, 小方块

有序列表: ol

    type: 1,a ,A,I,

    start : 指定是起始索引

3.3步骤分析

3.4代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--
        1.使用无序列表
            百合网
            世纪家园
            珍爱网
            非诚勿扰
    -->
    <body>
        <ul>
            <li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
            <li><a href="http://www.jiayuan.com">世

最低0.47元/天解锁文章

Spashi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的基础入门

Day-01 HTML的基础部分通过几个实例来演示网站信息页面案例网站图片信息页面案例网站友情链接页面案例网站首页案例网站注册页面案例网站后台页面案例目标 - 了解什么是标记语言 - 了解HTML主要特性，主要变化以及发展趋势 - 了解HTML的结构标签 - 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签）1.网站信息页面1.1需求分析:...
复制链接

扫一扫