• HTML零基础入门（上）

    一、什么是HTML

    html是一门标记性语言

    全称是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。

    HTML 不是一种编程语言，而是一种标记语言 (markup language)。

    html只是用来制作网页的一种语言，由各种各样的标签组成

    html制作网页，而很多个网页聚集在一起，构成网站

    二、HTML基本用法

    1、标题标签

    共   h1到h6  6种

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5. <head>
    6.  
    7.     <meta charset="UTF-8">
    8.  
    9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    10.  
    11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    12.  
    13.     <title>标题标签title>
    14.  
    15. head>
    16.  
    17. <body>
    18.  
    19.     <h1>一级标题h1>
    20.  
    21.     <h2>二级标题h2>
    22.  
    23.     <h3>三级标题h3>
    24.  
    25.     <h4>四级标题h4>
    26.  
    27.     <h5>五级标题h5>
    28.  
    29.     <h6>六级标题h6>
    30.  
    31. body>
    32.  
    33. html>

                                       

    2、段落标签

    分为  p标签  和  br标签

    在p标签中每个p标签单独一行，而且每个p标签间都有一定的间距

    而br标签只是换行，不存在两个br标签间的间距

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5. <head>
    6.  
    7.     <meta charset="UTF-8">
    8.  
    9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    10.  
    11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    12.  
    13.     <title>段落标签title>
    14.  
    15. head>
    16.  
    17. <body>
    18.  
    19.     <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落p>
    20.  
    21.  
    22.  
    23.  
    24.  
    25.     <p>这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落p>
    26.  
    27.  
    28.  
    29.     br标签之间中间不存在空隙<br>
    30.  
    31.     不像p标签那样，对吧<br>
    32.  
    33. body>
    34.  
    35. html>

     

    3、文本格式化标签

    主要作用是突出重要性，一般情况下全称的，语义更强烈，如：strong、em、ins、del标签语义强于对应的简写b、i、s、ins

    实现加粗，删除，倾斜，下划线的作用

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5. <head>
    6.  
    7.     <meta charset="UTF-8">
    8.  
    9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    10.  
    11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    12.  
    13.     <title>文本格式化标签title>
    14.  
    15. head>
    16.  
    17. <body>
    18.  
    19.     <strong>加粗strong>
    20.  
    21.     <b>加粗b>
    22.  
    23.     <hr>
    24.  
    25.     <em>倾斜em>
    26.  
    27.     <i>倾斜i>
    28.  
    29.     <hr>
    30.  
    31.     <del>删除del>
    32.  
    33.     <s>删除s>
    34.  
    35.     <hr>
    36.  
    37.     <ins>下划线ins>
    38.  
    39.     <u>下划线u>
    40.  
    41. body>
    42.  
    43. html>

    4、文本标签

    分为div标签和span标签两种

    div主要用于布局，但一行只能放一个div标签，div独占一行，是个大盒子

    span也是用来布局的，但是一行上可以放多个span，更像是个小盒子

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5. <head>
    6.  
    7.     <meta charset="UTF-8">
    8.  
    9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    10.  
    11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    12.  
    13.     <title>文本标签title>
    14.  
    15. head>
    16.  
    17. <body>
    18.  
    19.     <div>我是div标签div>
    20.  
    21.     <div>我是div标签div>
    22.  
    23.  
    24.  
    25.     <span>我是span标签span>
    26.  
    27.     <span>我是span标签span>
    28.  
    29. body>
    30.  
    31. html>

     5、图像标签

    使用img标签

    需要些别的属性，例如：src属性为图片地址，这里实例中的图片使用的是本地文件，相对路径

    alt标签是在图片加载不出来时，出现的提示文字，提示我们这个图片原本是什么的，加入我图片地址写错的话，alt标签就会发挥作用，如图

     title标签是当我鼠标悬停，放在图片上时显示的文字，如图

     我们还能自定义图片的大小，可以添加width宽度属性，或者高度hight属性，当然两者应该选一个添加就可以了，那样的话，图片会自动等比例缩放或扩大，不会改变宽高比例

    还能加border属性，添加图片的边框

    这是我添加了10像素的边框的样子

     这是一条猫

    不过这里不推荐使用border来添加边框，我们可以通过CSS代码来控制边框的大小和颜色 

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5. <head>
    6.  
    7.     <meta charset="UTF-8">
    8.  
    9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    10.  
    11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    12.  
    13.     <title>图像标签title>
    14.  
    15. head>
    16.  
    17. <body>
    18.  
    19.     
    20.  
    21.     
    22.  
    23.     <img src="cat.gif" alt="这是一条猫" title="这是title文字，鼠标悬停的时候显示" width="500">
    24.  
    25. body>
    26.  
    27. html>

     6、路径

    分为相对路径和绝对路径，（在本机上）

    还有个网络路径（素材，照片视频等来自网络）

  • 相关阅读:
    软件测试最全的面试八股文（2023最新版）
    力扣每日一题48：旋转图像
    【牛客 - 剑指offer】JZ28 对称的二叉树 两种方案 Java实现
    深入理解蓝牙BLE之“扩展广播”
    前端基础——HTML傻瓜式入门（1）
    dreamweaver郑州旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
    【WebSocket】工具wscat安装和使用
    【c++】运算符重载实例
    Vue3最佳实践 第七章 TypeScript 创建Trello 任务管理器
    Prometheus+Grafana监控系统
  • 原文地址：https://blog.csdn.net/wujianrenn/article/details/127446053