HTML基础(一)

本文详细介绍了HTML的基本概念,包括它作为标记语言的角色,网页文件的结构,如DOCTYPE声明、HTML标签、标题、段落、图片和超链接的使用。此外,还讲解了列表和内联框架的实现,提供了相关代码示例。通过本文,读者可以掌握构建基本网页的必备知识。
摘要由CSDN通过智能技术生成

理解网页文件

  1. 每一个网页对应一个网页文件。
  2. 在浏览器中看到的网页实质为:网页文件
  3. 网页文件:
    文本文件;
    扩展名:.html或.htm
    文件内容为:HTML代码和文本内容

HTML简介

  1. 超文本标记语言
  2. HTML不是一种编程语言,而是一种标记语言
  3. 标记语言是一套标记标签,HTML使用标记标签来描述网页。
  4. HTML 标记标签通常被称为HTML标签,它是由尖括号包围的关键词
  5. HTML标签三要点:
    (1)词汇(标签)
    (2)语法(标签的使用规定)
    (3)语义(浏览器“理解”的标签含义)

HTML基本结构

HTML基本结构(所有网页必须有的):
<!DOCTYPE html>文档的声明
<html>开始标签(所有的内容,一个网页文件,只有一对html标签)
    <head>头部
        <title>xxx</title>
        <meta charset = "utf-8"/> 设置编码方式等
    </head>
    <body>文件的体部

    </body>

</html>结束标签

在这里插入图片描述

标签

  1. 双标签:由“开始标签”和“结束标签”两部分构成。结束标签比开始标签多了一个“/”(比如<body></body>),必须成对使用。
  2. 单标签:在开始标签中进行关闭,即以开始标签的结束而结束(比如<meta/>)。
  3. 双标签:代表标签作用范围
    单标签:无需表达范围,仅在标签出现处有效(不用限定范围)
    所有标签必须全部闭合/。
  4. <br/>作用:换行。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  1. 网页元素 是指构成网页的各项内容(列表、超链接、文字、图片)
  2. 标题:<h1>...</h1> h1-h6 h1表示1级标题,可以同时有多个h1标题。
  3. 段落<p>...</p>
  4. 图片标签
    在这里插入图片描述
    src:指明存储图像的位置(图片的路径)
    alt:为图片添加替换文本(当找不到指定图片时,会显示alt中的话)
    (1)绝对路径:
    本机绝对路径:即从盘符开始的完整路径
    网络绝对路径:网络可访问的地址。
    优点:真实路径、定位清晰
    缺点:本机绝对路径长,容易出错;如果站点文件夹被移动,就需要重新修改路径
    (2)相对路径:
    图片和网页在同一级: src = "./图片名"
    图片在网页的下一级目录src = "目录名称/图片名"
    图片在网页的上一级目录src = "../图片名"
    优点:文件夹被移动,其内部文件的相对路径不变

注意事项:
不要使用本机绝对路径,推荐使用相对路径
图片文件单独存放在一个文件夹中
图片文件夹与页面文件放在同一个目录下

超链接

在这里插入图片描述

列表标签和内联框架

列表

  1. HTML支持无序列表、有序列表。(有无前后顺序的信息列表)
  2. 一对标签
    无序列表:
    在这里插入图片描述

有序列表:

在这里插入图片描述

效果:
在这里插入图片描述

内联框架

  1. 用于在网页内显示另一个网页文件。

在这里插入图片描述
示例主要代码及效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Xuhx&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值