内容、URL、SVG和CSS

内容

在Web开发中，“内容”一词通常指网站的文本、图片、视频等媒体元素。内容是网站的核心，因为它为用户提供了信息和价值。

Web开发者可以利用HTML和CSS来组织、布局和样式化内容，以便让用户更轻松地阅读和交互。另外，JavaScript可以用来动态地修改和增强内容。

下面是HTML和CSS示例，展示如何创建和样式化内容：

<div class="article">
  <h1>如何使用HTML和CSS创建内容</h1>
  <p>在Web开发中，内容是至关重要的。以下是一些示例，演示如何创建和布局内容：</p>
  
  <ul>
    <li>使用<h1>到<h6>标签来组织标题</li>
    <li>使用<p>标签来呈现段落文字</li>
    <li>使用<ul>和<li>标签来创建无序列表</li>
    <li>使用<ol>和<li>标签来创建有序列表</li>
    <li>使用<img>标签来显示图片</li>
    <li>使用<a>标签来创建链接</li>
  </ul>
</div>

<style>
  .article {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }
  
  h1 {
    font-size: 36px;
    font-weight: bold;
    margin: 30px 0 20px;
  }
  
  p {
    margin-bottom: 20px;
  }
  
  ul, ol {
    margin: 20px 0;
  }
  
  li {
    margin-bottom: 5px;
  }
  
  img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  
  a {
    color: #428bca;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
</style>

URL

URL是“统一资源定位器”的缩写。它是一种标准格式的Web地址，可以用于定位到特定的网站、页面、文件或资源。

URL通常由协议、主机名、端口、路径和查询参数等组成。例如，http://www.example.com:80/path/to/page.html?query=1。

在Web开发过程中，URL通常用于定义资源的位置和定位。例如，在JavaScript中使用URL对象来获取当前页面的URL，或者在CSS中使用URL函数来指定图片或其他资产的位置。

下面是一个URL对象的JavaScript示例：

const url = new URL('http://www.example.com:80/path/to/page.html?query=1');
console.log(url.protocol); // "http:"
console.log(url.hostname); // "www.example.com"
console.log(url.port); // "80"
console.log(url.pathname); // "/path/to/page.html"
console.log(url.search); // "?query=1"

下面是CSS中使用URL函数的示例：

background-image: url("/images/background.jpg");

SVG

SVG是“可缩放矢量图形”的缩写。它是一种以XML标记语言写成的2D图形图像，可以在浏览器中缩放而不失真。

SVG在Web开发中非常有用，可以创建各种各样的图标、图表和动画效果。它还可以用于替代像素图像，在高分辨率屏幕上显示良好。

下面是一个简单的SVG图形示例：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#428bca" />
</svg>

该SVG图形绘制一个蓝色填充的圆形。

CSS

CSS是“层叠样式表”的缩写。它是一种用于定义网站的外观和样式的语言。CSS可以控制页面的布局、字体、颜色、大小、背景和动画等方面。

CSS通过为HTML元素应用样式来工作。开发者可以使用不同的选择器来选择HTML元素，并为它们应用不同的样式。例如，可以使用“选择器”选择所有段落，并应用特定的字体和颜色。

下面是一个CSS示例，展示如何样式化HTML段落：

p {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

该CSS代码会将所有段落的字体设置为sans-serif，大小为16像素，并设置颜色为#333。该段代码应该在