前端与HTML标题 ｜ 青训营；

用户5781195829555
68 阅读7分钟

前端与HTML

什么是前端

前端通常指的是网页开发中负责构建用户界面的部分。它涵盖了用户在浏览器中直接与之交互的所有内容，包括网页的布局、样式、交互效果等。前端开发主要使用HTML、CSS和JavaScript来实现网页的结构、样式和交互功能。

什么是前端开发

具体来说，前端开发包括以下几个方面的工作：

  1. HTML（超文本标记语言）：用于定义网页的结构和内容，通过标签来描述页面中的各个元素。
  2. CSS（层叠样式表）：用于设置网页的样式和布局，可以控制页面的颜色、字体、大
  3. JavaScript：一种编程语言，用于实现网页的动态交互和功能，可以操作网页元素、响应用户操作、发送AJAX请求等。
  4. 前端框架和库：如React、Angular、Vue等，提供了一些预设的模块和函数，简化了开发过程，并提供更好的性能和用户体验。

前端开发的起源可以追溯到互联网的早期。在互联网发展的初期，网页主要由HTML（超文本标记语言）构建，HTML仅包含基本的结构和内容。然而，随着时间的推移，人们对网页的设计和交互性要求越来越高，需要一种能够控制网页外观和行为的方式

Tim Berners-Lee提出关于信息管理建议被公认为Web开发的起源,"设想存储在任何一台计算机上的信息都是相互链接的,再设想一下我可以在计算机上写一个程序,创造一个空间让所有的事情可以相互联系"

具体详情论文网页版[The original proposal of the WWW, HTMLized (w3.org)]

什么是HTML

HTML（Hypertext Markup Language）是一种用于创建网页的标准语言。它由一系列的标签（tag）和属性（attribute）组成，用于描述网页的结构和内容。HTML标签可以用于创建文本、图像、链接、表格、表单、多媒体等各种元素，以及定义网页的布局和样式。HTML文档可以通过浏览器解析，并按照标记的指示进行显示。HTML是Web开发的基础，与CSS和JavaScript一起构成了Web技术的三大基石。

  • HTML(网页的内容结构)作者：蒂姆·伯纳斯-李（Tim Berners-Lee）

HTML（Hypertext Markup Language）的发展史可以简要概括如下：

  1. HTML 1.0：于1993年发布，用于描述基本的文本和链接结构。
  2. HTML 2.0：于1995年发布，引入了更多的标记和功能，包括表格、图像和表单等元素。
  3. HTML 3.2：于1997年发布，引入了更多的标记和特性，如框架、嵌入式对象和样式表。
  4. HTML 4.01：于1999年发布，增加了一些新的标签和属性，支持国际化和访问性，加强了对样式表和脚本的支持。
  5. XHTML 1.0：于2000年发布，是HTML向XML过渡的版本，更强调结构和语义的准确性。
  6. HTML5：于2014年发布，引入了许多新的特性和功能，如语义标签、多媒体支持、Canvas绘图功能、本地存储和响应式设计等。
  7. 后续版本：HTML5.1、HTML5.2和HTML5.3的发布对HTML5进行了细化和扩展，修复了问题并添加了新的功能和API。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

1690457243330.png

HTML语法

  • 标签和属性不区分大小写,推荐小写
  • 空标签可以不闭合
  • 属性值推荐用双引号
  • 某些属性值可以省略

HTML元素

  • 常用的元素:

    • p元素、h元素;
    • img元素、a元素、iframe元素;
    • div元素、span元素;
    • ul、ol元素
    • button元素、input元素
    • table、thead、tbody、th、tr、td
常见元素-h元素
  • 在一个页面中通常会有一些比较重要的文字作为标题,这个时候我们可以使用h元素
  • <h1>-<h6>标题(Heading)元素呈现6个不同级别的标题
  • h1级别最高,h6级别最低
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>
常见元素-p元素

  • 如果我们想表示一个段落，这个时候我们可以使用p元素

  • HTML<p>元素表示文本的一个段落

    • P元素是paragraph的缩写，是段落、分段
    • p元素多个段落之间有一定的间距
常见元素-img元素

  • HTML转存失败，建议直接上传图片文件元素将一份图像嵌入文档

    • img是image，是图像的意思
    • img是一个可替换元素

  • img有两个常见的属性:

    • src属性：是source缩写，表示源,是必须的，它包含你想嵌入的图片路径

    • alt属性：不是强制性

      • 作用一:当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本：
      • 作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义
  • 设置img的src时，需要给图片设置路径：

网络图片：一个URL地址；

网络图片的设置非常简单，给一个地址即可；

本地图片：本地电脑上的图片，后续会和html一起部署到服务；

  • 本地图片的路径有两种方式

    • 方式一：绝对路径（几乎不用）；

从电脑的根目录开始一直找到资源的路径；

  • 方式二：相对路径（常用）；

✓ 相当于当前文件的一个路径；

✓ . 代表当前文件夹（1个.），可以省略

✓ .. 代表上级文件夹（2个.）

常见元素-a元素

HTML<a>元素（或称锚（anchor）元素）：

定义超链接，用于打开新的URL；

a元素有两个常见的属性：

  • href：Hypertext Reference的简称

    • 指定要打开的URL地址；
    • 也可以是一个本地地址；

  • target：该属性指定在何处显示链接的资源。

    • self：默认值，在当前窗口打开URL；
    • blank：在一个新的窗口中打开URL；

内容划分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容划分</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            background-color: rgb(255, 230, 205);
            width: 100%;
            height: 200px;
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;

        }

        nav {
            width: 900px;
            height: 50px;
            background-color: rgb(254, 204, 203);
            display: flex;
            align-items: center;
            align-content: flex-start;
            flex-direction: column;
            justify-content: space-evenly;
        }

        main {
            width: 1000px;
            height: 400px;
            background-color: aqua;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            flex-wrap: nowrap;

        }

        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        article {
            width: 800px;
            height: 70px;
            background-color: aquamarine;

        }


        aside {
            width: 500px;
            height: 400px;
            background-color: rgb(124, 127, 130);
            margin-top: 20px;

        }


        footer {
            width: 100%;
            height: 80px;
            background-color: plum;
            margin-top: 20px;
        }
    </style>
</head>



<body>
    <header>
        <nav></nav>
    </header>

    <div class="container">
        <main>
            <article></article>
            <article></article>
        </main>
        <aside></aside>
    </div>

    <footer></footer>
</body>

</html>

1690463086024.png

语义化是什么

语义化是指在设计HTML标记时，使用符合文档结构、内容含义和语义规范的元素，以增强网页的可读性、可访问性和搜索引擎优化。

HTML中，使用语义化的标记可以使网页的结构更加清晰明了，并且有助于浏览器、搜索引擎和辅助技术等解析和理解页面内容。而不仅仅是使用div和span等无语义的标签。

见的语义化元素包括<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等，它们在命名和用法上能够直观地表达其在页面中所代表的内容结构。例如，使用<header>元素表示页面的顶部，使用<nav>元素表示导航栏，使用<article>元素表示文章内容等。

语义化的好处

  1. 可读性：语义化的标记使网页结构更加清晰，使开发人员和其他人员更容易理解和维护网页的结构和内容。
  2. 可访问性：语义化的标记有助于辅助技术（如屏幕阅读器）更好地解析网页内容，提供更好的可访问性，使残障人士能够更好地浏览和使用网页。
  3. 搜索引擎优化：搜索引擎更加善于理解语义化的标记，使用语义化的标记可以使网页内容更易于被搜索引擎索引和理解，提高网页在搜索结果中的排名。
  4. 跨平台兼容性：不同设备和浏览器对于HTML标记的解析支持可能有差异，使用语义化标记可以更好地适应各种平台和浏览器，确保页面在不同环境下的一致性和正确性。
avatar
文章
阅读
粉丝