前端和HTML

Camellia956
129 阅读4分钟

前端与 HTML

什么是前端？

  • 解决GUI人机交换问题
  • 跨终端
    • PC/移动浏览
    • 客户端/小程序
    • VR/AR等
  • web技术栈

前端通常通过三大核心技术来实现：

  1. HTML (HyperText Markup Language) - 定义网页的内容和结构。
  2. CSS (Cascading Style Sheets) - 用于美化页面并定义其布局。
  3. JavaScript - 添加页面交互和动态效果。

前端的技术栈包括什么？

前端技术栈指的是开发前端所需的一组工具和框架，以下是常见的组成部分：

73242dee7637bbdc18d1ae0ed7ad72e2.jpg

HTML 语法简介

HTML 是一种标记语言，用于定义网页内容的结构。HTML 的语法是由标签组成的，标签用尖括号包裹，比如 ，通常分为起始标签和结束标签，例如：

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

HTML 结构通常包含以下部分：

    <!DOCTYPE html>

<html>

<head>

    <title>网页标题</title>

</head>

<body>

    <!-- 网页内容 -->

</body>

</html>

HTML 的基本标签

  **标题**： HTML 提供了六级标题标签 <h1> 到 <h6>，字体依次减小。
  <h1>一级标题</h1>
   <h2>二级标题</h2>
   **段落**： 使用 <p> 标签创建段落：
 <p>这是一个段落。</p>
  **链接**： 使用 <a> 标签定义超链接。
  <a href="https://www.example.com">访问示例网站</a>
  **图片**： 使用 <img> 标签插入图片。
  <img src="image.jpg" alt="图片描述" width="300" height="200">
  **音频与视频**： HTML 支持直接嵌入音频和视频内容：
  <audio controls>
     <source src="audio.mp3" type="audio/mpeg">
  </audio>
  
  <video controls width="320">
   <source src="video.mp4" type="video/mp4">
   </video>
  **表单输入**： 表单是获取用户输入的重要部分，常用的输入控件包括：
   <form action="/submit" method="post">
      <label for="name">姓名：</label>
       <input type="text" id="name" name="name"><br>
    
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email"><br>
   
      <input type="submit" value="提交">
  </form>
  **日历选择**： 使用 <input type="date"> 创建日期选择器：
  <label for="date">选择日期：</label>
  <input type="date" id="date" name="date">
  **引入外部资源**： 使用 <link> 引入 CSS，使用 <script> 引入 JavaScript 文件：
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>

什么是语义化？

语义化（Semantic HTML）是指在编写 HTML 代码时，选择使用具有明确含义的标签来表示页面内容的结构和功能，而不是仅仅使用外观或样式的目的标签。这种方式能够更好地表达内容的意义，使页面的结构更加清晰，同时也更易于被搜索引擎和其他工具（如屏幕阅读器）理解。

为什么需要语义化？

语义化的主要目的是让 HTML 代码不仅对人类开发者易于理解，同时对机器（如搜索引擎和辅助工具）也更友好。以下是语义化的主要优势：

  1. 增强可读性：

    • 开发者可以通过语义化标签快速了解页面结构和内容。
    • 团队协作时，代码更易于维护和扩展。

  2. 有利于 SEO（搜索引擎优化） ：

    • 搜索引擎爬虫可以更准确地分析网页内容，提高内容的排名和可见性。

  3. 提升可访问性：

    • 屏幕阅读器等辅助工具能够更好地解析网页内容，方便视障用户浏览网页。

  4. 便于样式化：

    • 使用语义化标签可以更直观地为不同部分的内容定义样式规则。

  5. 标准化和未来可扩展性：

    • 遵循 W3C 标准，语义化代码更具适应性和可扩展性。

常见的语义化标签

HTML5 引入了大量语义化标签，用于替代非语义化的 <div> 和 <span>，以下是一些常见的语义化标签：

标签含义
<header>页面或内容块的头部，通常包含导航栏或标题。
<nav>定义导航链接的区域。
<main>页面主体的主要内容（一个页面只能有一个 <main>）。
<article>表示独立的文章内容（如博客文章、新闻条目）。
<section>表示一个内容分组或主题区域，通常有标题。
<aside>表示与主要内容无关的附属信息（如侧边栏、广告）。
<footer>表示页面或内容块的底部，通常包含版权声明、相关链接等。
<h1> ~ <h6>表示从一级标题到六级标题，按重要性递减。
<time>表示时间或日期。
<mark>表示需要高亮显示的文本（通常用于搜索结果）。
<figure>表示独立的多媒体内容（如图片、图表）。
<figcaption>定义 <figure> 的标题或说明。

语义化代码与非语义化代码对比

非语义化代码：
<div id="header">网站标题</div>
<div id="nav">导航栏</div>
<div id="content">主要内容</div>
<div id="footer">底部信息</div>
语义化代码：
<header>网站标题</header>
<nav>导航栏</nav>
<main>主要内容</main>
<footer>底部信息</footer>

小结

HTML 是前端开发的基石，它提供了创建网页所需的基本结构。

avatar
文章
阅读
粉丝