📌  相关文章
📜  html css - Html (1)

📅  最后修改于: 2023-12-03 14:41:45.533000             🧑  作者: Mango

HTML CSS - HTML

HTML (Hyper Text Markup Language)是一种用于创建网页的标记语言，而CSS (Cascade Style Sheet)则用来添加样式和格式。在现代web开发中，HTML和CSS是两种必须掌握的基础技能。

HTML

HTML是一种标记语言，通过标签和属性来描述网页的结构和内容。每个HTML文档由多个嵌套的标签和文本组成，文本和图片等素材嵌入到标签中，形成了网页的内容。

常用标签

以下是HTML中一些常用的标签：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>网页标题</title>
</head>
<body>
   <h1>一级标题</h1>
   <h2>二级标题</h2>
   <p>段落</p>
   <ul>
      <li>无序列表1</li>
      <li>无序列表2</li>
   </ul>
   <ol>
      <li>有序列表1</li>
      <li>有序列表2</li>
   </ol>
   <img src="image.jpg" alt="图片">
   <a href="http://www.example.com">链接</a>
</body>
</html>
HTML5

HTML5是最新的HTML标准，它引入了许多新特性和API。比如可以使用<video>和<audio>标签添加视频和音频元素，可以使用<canvas>标签绘制图形，可以使用<input type="date">标签添加日期选择器等功能。

CSS

CSS是一种用来控制HTML元素展示样式的语言。通过将CSS代码添加到HTML文档中的<style>标签或外部的CSS文件中，可以设置网页的布局、颜色、字体等样式。

CSS选择器

CSS选择器用来匹配HTML元素，以应用样式。以下是一些常见的CSS选择器：

/* 通过标签名选择元素 */
div {
   font-size: 16px;
}

/* 通过类名选择元素 */
.myclass {
   color: #ccc;
}

/* 通过ID选择元素 */
#myid {
   background-color: red;
}

/* 通过属性选择元素 */
a[href="http://www.example.com"] {
   text-decoration: none;
}

/* 通过伪类选择元素 */
a:hover {
   color: red;
}
CSS盒模型

CSS盒模型将HTML元素抽象成一个方块状盒子，包括内容、内边距、边框以及外边距。以下是CSS盒模型的示意图：

CSS盒模型

响应式设计

随着移动设备的普及，越来越多的网站需要支持响应式设计。响应式设计可以通过CSS媒体查询和弹性布局来适应不同的设备尺寸。

以下是一个响应式设计的示例：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>响应式设计</title>
   <style>
      /* 默认样式 */
      body {
         margin: 0;
         padding: 0;
         font-size: 16px;
      }

      /* 小屏幕样式 */
      @media screen and (max-width: 480px) {
         body {
            font-size: 14px;
         }
      }

      /* 大屏幕样式 */
      @media screen and (min-width: 1200px) {
         body {
            font-size: 18px;
         }
      }
   </style>
</head>
<body>
   <h1>响应式设计</h1>
   <p>这是一个响应式网站。</p>
</body>
</html>

以上就是HTML和CSS的基础知识，希望能够对你有所帮助。