W3C 程序学习笔记

HTML

1. 基本结构

在 HTML 中，页面的基本结构包括 <!DOCTYPE>、<html>、<head> 和 <body> 四个部分。其中，

<!DOCTYPE> 声明文档类型；
<html> 包裹整个 HTML 文档；
<head> 包含页面中所需要的元数据；
<body> 包含实际显示的内容。

htmlCopy Code
<!DOCTYPE html> 
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

2. 常用标签

HTML 中常用的标签有很多，这里只列出一些常见的：

标题：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
段落：<p>
图片：<img>
链接：<a>
列表：<ul>、<ol>、<li>
表格：<table>、<tr>、<td>
表单：<form>、<input>、<label>、<button>

3. 实例

以下是一个简单的 HTML 页面，包含了上述基本结构和常用标签的使用：

htmlCopy Code
<!DOCTYPE html> 
<html>
<head>
  <meta charset="UTF-8">
  <title>My first HTML page</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first HTML page.</p>
  <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools">
  
  <h2>Links</h2>
  <ul>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.baidu.com">Baidu</a></li>
  </ul>
  
  <h2>Forms</h2>
  <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
  
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
  
    <button type="submit">Submit</button>
  </form>
</body>
</html>

CSS

1. 样式的引入

CSS 样式可以通过以下方式引入：

在 HTML 文件中使用 <style> 标签嵌入样式；
在 HTML 文件中使用 <link> 标签引用外部 CSS 文件。

htmlCopy Code
<!DOCTYPE html> 
<html>
<head>
  <meta charset="UTF-8">
  <title>My first HTML page</title>
  <style>
    h1 {
      color: red;
    }
    
    p {
      font-size: 18px;
    }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first HTML page.</p>
</body>
</html>

2. 常见样式属性

CSS 中有很多样式属性，这里只列出一些常见的：

文字样式：color、font-size、font-family、text-align
背景样式：background-color、background-image
边框样式：border、border-radius
布局样式：width、height、margin、padding、display、position

3. 实例

以下是一个简单的 CSS 文件，为上述 HTML 页面设置了样式：

cssCopy Code
body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}

h1 {
  color: red;
  text-align: center;
}

img {
  display: block;
  margin: auto;
  width: 50%;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

button {
  background-color: green;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}