📌  相关文章
📜  Tab Html CSS [Bootstrap] - Html (1)

📅  最后修改于: 2023-12-03 15:20:26.999000             🧑  作者: Mango

Tab Html CSS [Bootstrap] - Html

HTML (HyperText Markup Language)是Web的基础，它是一种描述网页内容的语言。它由各种标记（tag）组成，这些标记指定了如何展示文本、图像和多媒体等内容。HTML 让开发者可以自由地创建和设计自己的网站，而Bootstrap则提供了一种简单、易于使用的框架，以便于开发者更快速地创建现代化的响应式网站。

Html

HTML是一种用于创建Web页面的标记语言。它的基本格式是这样的：

<!DOCTYPE html>
<html>
<head>
  <title>页面标题</title>
</head>
<body>
  <h1>页面标题</h1>
  <p>这是一个段落。</p>
</body>
</html>

以上代码片段表示一个基本的HTML页面。

  • <!DOCTYPE html> 声明文档类型
  • <html> 根元素
  • <head> 页面元信息
  • <title> 标题
  • <body> 页面主体
CSS

CSS（Cascading Style Sheets）是用来为HTML页面添加样式的语言。它可以控制文本的颜色、字体、大小、背景、边框等各种样式。CSS具有以下特点：

  • 分离内容与样式
  • 全局定义样式
  • 样式可以被继承和重用

以下是一个基本的CSS样式设置示例：

body {
  color: blue;
  background-color: #efefef;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 12px;
}

以上代码设置了body背景颜色为efefef，文字颜色为蓝色，h1字体大小为24像素，字体加粗，p字体大小为12像素。

Bootstrap

Bootstrap是一个用于开发响应式布局的框架。响应式布局可以让网站在不同的设备上自适应屏幕大小，以提供更好的用户体验。

Bootstrap为开发者提供了丰富的CSS和JavaScript组件，以帮助您快速开发现代化的网站。以下是Bootstrap Navigation栏的一个示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">主页<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

以上代码片段显示了一个简单的导航栏。

  • navbar 创建导航栏
  • navbar-brand 显示网站LOGO
  • navbar-toggler 用于显示折叠的导航栏
  • nav-item 导航栏中的单个条目
  • active 标记当前活动的导航栏条目
  • sr-only 用于隐藏屏幕阅读器中的元素

总结

HTML和CSS是Web开发中最基础的两项技术。Bootstrap则是一个很好的补充，它可以帮助开发者更快速地创建现代化的响应式网站。以上是一个简单的介绍，无论是新手还是有经验的开发者，都一定要熟悉这些基础知识。