HTML、CSS网页入门

最新推荐文章于 2024-08-21 20:15:01 发布

想进大厂的小王

最新推荐文章于 2024-08-21 20:15:01 发布

阅读量685

点赞数 7

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_74209411/article/details/139279103

版权

HTML（超文本标记语言）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签用来描述网页的结构和内容。HTML通过这些标签来标识文本、图片、链接、表格等元素，从而使浏览器能够正确地渲染和显示网页内容。

HTML的基本工作原理是通过在文本中插入标记来标识不同的元素。这些标记通常由尖括号组成，例如<p>代表段落，<img>代表图片。每个标记通常都有开始标签和结束标签，以及一些属性，用于指定元素的特性。例如：

<p>This is a paragraph.</p>

在这个例子中，<p>是段落的开始标签，</p>是段落的结束标签，而This is a paragraph.是段落的内容。

HTML可以与CSS（层叠样式表）和JavaScript一起使用，以增强网页的样式和交互性。CSS用于控制网页的外观和布局，而JavaScript用于实现动态效果和用户交互。这三种技术通常一起使用，构建出功能丰富、外观精美的现代网页。

一、基本结构

HTML文件的基本结构通常由以下几个部分组成：

<!DOCTYPE>声明：这是HTML文档的第一行，用于指定文档类型。它告诉浏览器使用哪个HTML版本解析页面。例如：
```
<!DOCTYPE html>
```
<html>元素：HTML文档的根元素，包含了整个HTML文档的内容。它通常包含两个子元素：<head>和<body>。例如：
```
<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>
```
<head>元素：包含了文档的元信息（metadata），如标题、字符集、样式表和脚本等。这些信息不会直接显示在页面上，但对页面的显示和行为有重要影响。例如
```
<head>
  <title>页面标题</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  
</head>
```
<body>元素：包含了页面的主要内容，如文本、图片、链接等。这部分内容会直接显示在浏览器中。例如：
```
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
  
</body>
```

二、HTML标签的层次结构

HTML标签的层次结构是指标签之间的嵌套关系。HTML文档中的标签可以相互包含，形成不同层次的结构，这种结构决定了页面的布局和组织方式。

HTML标签的层次结构可以用树状结构表示，其中根节点是<html>元素，它包含了整个HTML文档的内容。在<html>元素内部，通常有两个主要子节点：<head>和<body>。<head>元素用于包含文档的元信息和引用外部资源，而<body>元素用于包含页面的实际内容。

<head>和<body>元素中可以包含各种其他标签，这些标签也可以相互嵌套。例如，<head>元素内部可以包含<title>、<meta>和<link>等标签，用于定义文档的标题、字符集、样式表等元信息。而<body>元素内部通常包含页面的主要内容，如标题、段落、图片、链接等标签，如<h1>、<p>、<img>、<a>等。

标签的层次结构可以有多层嵌套，这意味着某些标签可以包含其他标签，而被包含的标签又可以进一步包含其他标签，以此类推。通过合理地使用标签的层次结构，可以实现复杂的页面布局和组织，同时保持代码的结构清晰和易于维护。

三、常见标签

以下是HTML中一些常见的标签及其作用：

<html>：定义HTML文档的根元素。
<head>：定义文档的头部，包含了文档的元信息，如标题、字符集、样式表和脚本等。
<title>：定义文档的标题，显示在浏览器的标题栏或标签页上。
<body>：定义文档的主体内容，包含了页面的实际显示内容。
<h1> - <h6>：定义标题，有六个级别，依次为从最高级到最低级的标题。
<p>：定义段落。
<a>：定义超链接，用于链接到其他页面或文件。
<img>：定义图像，用于在页面中显示图片。
<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表项，用于包裹列表中的每个项目。
<div>：定义文档中的块级容器，常用于组织和布局页面的结构。
<span>：定义文档中的行内容器，常用于为文本添加样式或标识特定内容。
<table>：定义表格。
<tr>：定义表格中的行。
<td>：定义表格中的单元格。
<form>：定义表单，用于用户输入和提交数据。
<input>：定义表单中的输入控件，如文本框、复选框、单选按钮等。
<textarea>：定义文本输入域，用于多行文本输入。
<button>：定义按钮，用于触发事件或提交表单等操作。

以上是HTML中一些常见的标签，它们用于定义文档的结构、内容和行为，是构建网页的基础。以下是一个简单的HTML示例，演示了一些常见的HTML标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
        }
        p {
            color: green;
        }
        .container {
            border: 1px solid black;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML示例</h1>
        <p>这是一个包含常见HTML标签的示例。</p>
        
        <h2>标题</h2>
        <h3>段落</h3>
        <p>这是一个段落。这是 <a href="https://www.example.com">一个链接</a>。</p>
        
        <h2>列表</h2>
        <ul>
            <li>无序列表项 1</li>
            <li>无序列表项 2</li>
            <li>无序列表项 3</li>
        </ul>
        
        <ol>
            <li>有序列表项 1</li>
            <li>有序列表项 2</li>
            <li>有序列表项 3</li>
        </ol>
        
        <h2>图片</h2>
        <img src="https://via.placeholder.com/150" alt="示例图片">
        
        <h2>表格</h2>
        <table border="1">
            <tr>
                <th>表头1</th>
                <th>表头2</th>
            </tr>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
            </tr>
        </table>
        
        <h2>表单</h2>
        <form>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username">
            <br>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password">
            <br>
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

四、HTML的信息传递

HTML发送信息的主要方式包括使用表单（form）提交和使用Ajax技术。

表单提交：表单是HTML中用于收集用户输入信息并将其发送到服务器的一种标准方式。当用户在表单中输入数据并点击提交按钮时，表单数据会以HTTP请求的形式发送到服务器，然后由服务器处理。通常，表单提交会导致页面刷新，显示服务器响应的新内容。
```
<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br>
    <input type="submit" value="提交">
</form>
```
Ajax（Asynchronous JavaScript and XML）：Ajax是一种在不刷新整个页面的情况下向服务器发送和接收数据的技术。通过使用JavaScript和XMLHttpRequest对象，可以在后台异步地与服务器进行通信，并更新页面的部分内容。这种方式允许用户在不中断当前页面的情况下与服务器进行交互，提高了用户体验。

五、CSS的基础构成

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档的外观和样式的语言。通过CSS，可以控制文档中元素的布局、字体、颜色、大小、边框、背景等外观属性，从而实现页面的美化和样式的统一。

基本语法规范如下：

选择器（Selectors）：用于选择要应用样式的HTML元素。常见的选择器包括标签选择器、类选择器、ID选择器、属性选择器、伪类选择器等。
```
/* 标签选择器 */
p {
    color: blue;
}

/* 类选择器 */
.title {
    font-size: 24px;
}

/* ID选择器 */
#header {
    background-color: #ccc;
}
```

属性（Properties）：指定要修改的样式属性，如颜色、字体、宽度、高度等

/* 修改颜色 */
p {
    color: blue;
}

/* 修改字体 */
.title {
    font-family: Arial, sans-serif;
}

/* 修改背景颜色 */
#header {
    background-color: #ccc;
}

值（Values）：为样式属性指定的具体值。可以是颜色值、长度值、百分比等

/* 颜色值 */
p {
    color: blue;
}

/* 长度值 */
.title {
    font-size: 24px;
}

/* 百分比 */
.container {
    width: 80%;
}

声明块（Declaration Blocks）：包含一组属性和值，用大括号{}包围。

/* 声明块 */
.title {
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: red;
}

注释（Comments）：用于在样式表中添加注释，提高可读性。
```
/* 这是一个注释 */
.title {
    /* 这也是一个注释 */
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: red; /* 这是另一个注释 */
}
```
CSS的基本语法规范是相对简单清晰的，但通过合理地运用选择器、属性和值，可以实现丰富多彩的样式效果，从而使网页更加美观和易于阅读。