HTML&CSS---HTML常见标签

在HTML中，标签通常定义了文档的结构和内容。以下是一些常用的HTML标签：

<h1> 到 <h6> - 定义标题
<p> - 定义段落
<a> - 定义超链接
<img> - 定义图像
<div> - 定义文档章节
<span> - 定义文档内的一部分
<ul> 和 <li> - 定义无序列表
<ol> 和 <li> - 定义有序列表
<table> - 定义表格
<form> - 定义表单

CSS用于描述网页的布局、颜色、字体、背景等外观样式。以下是一些常用的CSS属性：

color - 文本颜色
background-color - 背景颜色
font-size - 字体大小
font-family - 字体类型
padding - 内边距
margin - 外边距
border - 边框
width 和 height - 宽度和高度
display - 显示类型（如 'block', 'inline', 'none'）
position - 定位（如 'static', 'relative', 'absolute', 'fixed'）

示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  header, footer {
    background-color: #f8f8f8;
    padding: 10px 0;
    text-align: center;
  }
  nav {
    float: left;
    width: 30%;
    color: white;
    background-color: #333;
    padding: 10px;
  }
  section {
    margin-left: 33%;
    padding: 10px;
  }
  h1 {
    color: blue;
  }
  img {
    display: block;
    margin: 0 auto;
  }
  ul {
    list-style-type: square;
  }
</style>
</head>
<body>
 
<header>
  <h1>My First Heading</h1>
</header>
 
<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>
 
<section>
  <h2>Section 1</h2>
  <p>This is some text.</p>
  <img src="image.jpg" alt="Image" width="200" height="200">
</section>
 
<footer>
  All Rights Reserved.
</footer>
 
</body>
</html>

这个示例展示了如何使用HTML标签和CSS样式来创建一个简单的网页结构。其中包括标题、导航、文章区块、图片和列表，并且有一个简单的样式定义。

HTML&CSS---HTML常见标签

评论已关闭

推荐阅读