0基础带你学前端（1）

大家好，欢迎来到无限大的频道。

今天带领大家开始0基础学前端。

关于编译器和编译环境的问题，我在此就不过多的进行赘述，网络上有很多视频和文章都比较详细。

一、什么是前端？

前端开发是Web开发的一个分支，它主要负责网站或Web应用程序中用户直接交互的部分。简单来说，前端就是你在浏览器中看到和操作的部分。前端开发涉及HTML、CSS和JavaScript等技术，这些技术协同作用，创造出用户友好的、功能齐全的Web界面。

- HTML（超文本标记语言）：负责页面的结构和内容。

- CSS（层叠样式表）：负责页面的样式和布局。

- JavaScript：用于增加页面的交互性和动态效果。

前端开发不止是“让东西看起来不错”，它还涉及用户体验设计（UX）、页面的响应式设计以及浏览器兼容性等多个维度。一个优秀的前端开发人员需要将这些方面有机地结合起来，为用户提供流畅、快捷的使用体验，一切的开发都要基于用户。

二、HTML的基础语法和常用标签

HTML，即超文本标记语言，是构建网页的核心语言。它通过标签的方式来定义网页中的各种元素。

1. HTML文档结构

一个基本的HTML文档由以下结构组成：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>我的第一个页面</title>

</head>

<body>

    <!-- 页面内容将在这里 -->

</body>

</html>

- `<!DOCTYPE html>`：定义文档类型，帮助浏览器解析页面。

- `<html>`：HTML文档的根元素。

- `<head>`：包含文档的元数据，例如标题（`<title>`）、字符集（`<meta charset="UTF-8">`）等。

- `<body>`：页面的主体内容。

2. 常用的HTML标签

- 标题标签：`<h1>`到`<h6>`，用于定义标题，`<h1>`最大，`<h6>`最小。

 <h1>这是一级标题</h1>

  <h2>这是二级标题</h2>

- 段落标签：`<p>`用于定义文本段落。

  <p>这是一个段落。</p>

- 链接标签：`<a>`用于创建超链接。

 <a href="https://www.example.com">这是一个链接</a>
 <a href="https://www.example.com" target="_blank">这是一个链接</a>

在 <a> 标签内添加 target="_blank" 属性后，当用户点击链接时，页面将会在新标签页中打开。

- 图片标签：`<img>`用于嵌入图片。

 <img src="image.jpg" alt="这是一张图片">

- 列表标签：`<ul>`和`<ol>`用于创建无序和有序列表，`<li>`是列表项。

<ul>

      <li>苹果</li>

      <li>香蕉</li>

  </ul>

  

  <ol>

      <li>第一条</li>

      <li>第二条</li>

  </ol>

3. 示例

结合以上标签，我们可以创建一个简单的HTML页面：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>我的简单页面</title>

</head>

<body>

    <h1>欢迎来到我的网站</h1>

    <p>这是一个用HTML编写的简单页面示例！</p>

    

    <h2>导航链接</h2>

    <p>你可以访问以下链接：</p>

    <ul>

        <li><a href="https://www.baidu.com/">百度（此页面）</a></li>

        <li><a href="https://www.baidu.com/" target="_blank">百度（新建页面）</a></li>

    </ul>

    

    <h2>看看这张图片</h2>

    <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/f58bcba0c711e9e8a411746ee098bbb.png" alt="示例图片">
    //我用的是我图床的页面图片，大家可以自行更改
</body>

</html>

三、创建一个简单的HTML页面

现在，我们将基于上述概念来创建一个属于你自己的简单页面。这个页面将包含一个标题、一个段落、一组导航链接，以及一张图片。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>我的个人主页</title>

</head>

<body>

    <header>

        <h1>欢迎来到我的个人主页</h1>

    </header>



    <main>

        <section>

            <h2>关于我</h2>

            <p>你好！我是一个前端开发的初学者，正在学习如何创建美观且有用的网页。</p>

        </section>



        <section>

            <h2>爱好与兴趣</h2>

            <ul>

                <li>编程</li>

                <li>阅读</li>

                <li>旅行</li>

            </ul>

        </section>



        <section>

            <h2>查看我的作品</h2>

            <p>以下是一些我最近完成的项目：</p>

            <ul>

                <li><a href="https://我的项目链接.com">我的第一个项目</a></li>

                <li><a href="https://一个有趣的项目.com">一个有趣的项目</a></li>

            </ul>

        </section>



        <figure>

            <img src="https://via.placeholder.com/300" alt="我的个人写真">

            <figcaption>摄影：张三</figcaption>

        </figure>

    </main>



    <footer>

        <p>联系我：<a href="mailto:myemail@example.com">myemail@example.com</a></p>

    </footer>

</body>

</html>

在这个页面中，我们使用了不同的HTML标签来组织结构和内容。通过这种方式，即使是编程新手，也可以很快地掌握HTML的基本用法。