一秒钟带你全面了解HTML—CSS的所有的知识

捂月

于 2024-11-16 23:51:54 发布

阅读量967

点赞数 29

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/2403_87236754/article/details/143825680

版权

文章目录

HTML 元素标签详细讲解

基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>
123456789101112

文档元数据

<meta charset="UTF-8">: 设置字符编码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口，使页面在移动设备上正确显示。
<title>网页标题</title>: 设置网页标题。
<link rel="stylesheet" href="styles.css">: 引入外部CSS文件。
<script src="script.js"></script>: 引入外部JavaScript文件。

文本格式化标签

<h1> 至 <h6>: 标题标签，从最重要的 <h1> 到最不重要的 <h6>。
<p>: 段落标签。
<strong> 和 <b>: 加粗文本，<strong> 强调语义上的重要性。
<em> 和 <i>: 斜体文本，<em> 强调情感或重要性。
<u>: 下划线文本。
<s>: 删除线文本。
<mark>: 高亮文本。
<small>: 小号文本，常用于版权声明等。
<abbr title="abbreviation">: 缩写词，鼠标悬停时显示全称。
<cite>: 引用来源，常用于书籍、文章等。
<q>: 短引用，浏览器会自动添加引号。
<blockquote>: 长引用，通常会缩进显示。
<code>: 代码片段。
<pre>: 预格式化文本，保留空格和换行符。

列表标签

<ul>: 无序列表。
<ol>: 有序列表。
<li>: 列表项。
<dl>: 定义列表。
<dt>: 定义术语。
<dd>: 描述术语。

链接与图片

<a href="URL">链接文本</a>: 创建超链接。
<img src="URL" alt="描述性文字">: 插入图片，并提供替代文本。

表格

<table>: 表格容器。
<thead>: 表头部分。
<tbody>: 表格主体部分。
<tfoot>: 表格脚注部分。
<tr>: 表格行。
<th>: 表头单元格，通常加粗并居中。
<td>: 表格单元格。
<caption>: 表格标题。

表单

<form action="提交地址" method="GET|POST">...</form>: 创建表单。
```
<input type="text|password|email|..." name="名称" value="值">
```
: 输入字段。
- type="text": 文本输入。
- type="password": 密码输入。
- type="email": 邮箱输入。
- type="number": 数字输入。
- type="date": 日期选择器。
- type="time": 时间选择器。
- type="checkbox": 复选框。
- type="radio": 单选按钮。
- type="file": 文件上传。
- type="submit": 提交按钮。
- type="reset": 重置按钮。
<button type="submit|reset|button">按钮文本</button>: 按钮。
<textarea>: 多行文本输入框。
<select> 和 <option>: 下拉选择框及其选项。
<label for="inputId">标签文本</label>: 关联表单控件和其说明文字。
<fieldset> 和 <legend>: 组合相关表单控件。

语义化标签

<header>: 页面头部，通常包含导航菜单。
<nav>: 导航链接区域。
<main>: 页面的主要内容区域。
<article>: 独立的内容块，如博客文章。
<section>: 页面的一个部分，通常包含一组相关的元素。
<aside>: 辅助信息或侧栏内容。
<footer>: 页面底部，通常包含版权信息、联系方式等。

多媒体标签

<audio> 和 <video>: 嵌入音频和视频文件。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
1234

CSS 样式详细讲解

基础选择器

类选择器 .class：选择所有具有指定类名的元素。
ID选择器 #id：选择具有特定ID的元素。
标签选择器 tag：选择所有指定类型的元素。
属性选择器 [attr] 或 [attr=value]：选择具有指定属性或属性值的元素。

组合选择器

后代选择器 A B: 选择所有位于A内的B元素。
子选择器 A > B: 选择所有直接位于A内的B元素。
相邻兄弟选择器 A + B: 选择紧接在A后面的B元素。
通用兄弟选择器 A ~ B: 选择所有位于A之后的B元素。

伪类和伪元素

伪类 :hover, :active, :focus, :first-child, :last-child, :nth-child(n), :not(selector) 等。
伪元素 ::before, ::after, ::first-letter, ::first-line 等。

常用属性

color: 设置文本颜色。
background-color: 设置背景颜色。
background-image: 设置背景图像。
background-repeat: 设置背景图像的重复方式。
background-position: 设置背景图像的位置。
background-size: 设置背景图像的大小。
font-size: 设置字体大小。
font-family: 设置字体系列。
font-weight: 设置字体粗细。
font-style: 设置字体风格（如斜体）。
text-align: 设置文本对齐方式（左对齐、右对齐、居中等）。
text-decoration: 设置文本装饰（如下划线、删除线）。
text-transform: 设置文本转换（如大写、小写）。
line-height: 设置行高。
letter-spacing: 设置字母间距。
word-spacing: 设置单词间距。
white-space: 设置空白处理方式。
margin: 设置外边距。
padding: 设置内边距。
border: 设置边框。
border-radius: 设置边框圆角。
width 和 height: 设置宽度和高度。
max-width 和 max-height: 设置最大宽度和高度。
min-width 和 min-height: 设置最小宽度和高度。
display: 控制元素的显示模式（如block, inline, inline-block, none）。
visibility: 控制元素的可见性。
position: 设置元素的位置（静态、相对、绝对、固定）。
top, right, bottom, left: 设置定位元素的位置。
z-index: 设置元素的堆叠顺序。
overflow: 设置溢出内容的处理方式。
opacity: 设置透明度。
transform: 应用变换（如旋转、缩放）。
transition: 添加过渡效果。
animation: 创建动画序列。

实际案例

假设我们要创建一个简单的博客页面，包括导航栏、文章列表和侧边栏。

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>第一篇文章</h2>
            <p>这是第一篇文章的内容...</p>
        </article>
        <article>
            <h2>第二篇文章</h2>
            <p>这是第二篇文章的内容...</p>
        </article>
    </main>
    <aside>
        <h3>最新评论</h3>
        <ul>
            <li>评论1</li>
            <li>评论2</li>
        </ul>
    </aside>
    <footer>
        <p>&copy; 2024 我的博客. 版权所有.</p>
    </footer>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940

CSS 样式

/* 基础样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 20px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

nav li a {
    color: #fff;
    text-decoration: none;
}

main, aside {
    padding: 20px;
}

article {
    background: #fff;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

aside {
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
}

/* 响应式布局 */
@media (min-width: 768px) {
    main {
        float: left;
        width: 70%;
    }
    aside {
        float: right;
        width: 30%;
    }
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566