HTML、CSS网页入门

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

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

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

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

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

一、基本结构

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

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

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

  1. 表单提交：表单是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>
  2. Ajax（Asynchronous JavaScript and XML）：Ajax是一种在不刷新整个页面的情况下向服务器发送和接收数据的技术。通过使用JavaScript和XMLHttpRequest对象，可以在后台异步地与服务器进行通信，并更新页面的部分内容。这种方式允许用户在不中断当前页面的情况下与服务器进行交互，提高了用户体验。

五、CSS的基础构成

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

基本语法规范如下：

  1. 选择器（Selectors）：用于选择要应用样式的HTML元素。常见的选择器包括标签选择器、类选择器、ID选择器、属性选择器、伪类选择器等。 
    /* 标签选择器 */
p {color: blue;
}/* 类选择器 */
.title {font-size: 24px;
}/* ID选择器 */
#header {background-color: #ccc;
}
  2. 属性（Properties）：指定要修改的样式属性，如颜色、字体、宽度、高度等 
    /* 修改颜色 */
p {color: blue;
}/* 修改字体 */
.title {font-family: Arial, sans-serif;
}/* 修改背景颜色 */
#header {background-color: #ccc;
}
  3. 值（Values）：为样式属性指定的具体值。可以是颜色值、长度值、百分比等 
    /* 颜色值 */
p {color: blue;
}/* 长度值 */
.title {font-size: 24px;
}/* 百分比 */
.container {width: 80%;
}
  4. 声明块（Declaration Blocks）：包含一组属性和值，用大括号{}包围。 
    /* 声明块 */
.title {font-family: Arial, sans-serif;font-size: 24px;color: red;
}
  5. 注释（Comments）：用于在样式表中添加注释，提高可读性。 
    /* 这是一个注释 */
.title {/* 这也是一个注释 */font-family: Arial, sans-serif;font-size: 24px;color: red; /* 这是另一个注释 */
}

    CSS的基本语法规范是相对简单清晰的，但通过合理地运用选择器、属性和值，可以实现丰富多彩的样式效果，从而使网页更加美观和易于阅读。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/843916.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MySQL 重启之后无法写入数据了？

MySQL 重启之后无法写入数据了？

数据库交接后因 persist_only 级别的参数设置引发的故障分析。 作者&#xff1a;不吃芫荽&#xff0c;爱可生华东交付服务部 DBA 成员&#xff0c;主要负责 MySQL 故障处理及相关技术支持。 爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系…
阅读更多...
C++的算法：模拟算法

C++的算法：模拟算法

模拟算法是一种基于事物运动变化过程的模型，通过计算机程序来模拟实际系统行为或过程的方法。在C++中，模拟算法常用于解决复杂系统或过程的建模与仿真问题。本文将介绍模拟算法的实现思路及实际应用，并通过具体的实例来展示如何在C++中实现模拟算法。 一、模拟算法的实现思…
阅读更多...
CentOS配置DNS

CentOS配置DNS

1.打开/etc/resolv.conf文件 sudo vi /etc/resolv.conf2.添加配置 nameserver 114.114.114.1143.保存并关闭文件。 4.为了确保配置生效&#xff0c;重启网络服务或重启系统。例如&#xff1a; 重启网络&#xff1a; sudo systemctl restart network重启系统&#xff1a; …
阅读更多...
【渗透测试】|基于dvwa的CSRF初级，中级，高级

【渗透测试】|基于dvwa的CSRF初级，中级，高级

一、渗透测试 二、渗透测试过程中遇到的问题和解决 在初级csrf中&#xff0c;想要通过伪造一个404页面&#xff0c;达到修改密码的效果 伪造404页面的html代码如下&#xff1a; <html> <head> </head> <body> <img src"http://192.xx.xx.xx/…
阅读更多...
mono3D任务FCOS3D: Fully Convolutional One-Stage Monocular 3D Object Detection

mono3D任务FCOS3D: Fully Convolutional One-Stage Monocular 3D Object Detection

数据 KITTI 在卡尔斯鲁厄采集的数据&#xff0c;包括雷达&#xff08;64线束激光雷达&#xff09;和摄像头&#xff08;灰色彩色&#xff09;。目标为pvb,场景包括农村、城市、高速。3D目标检测任务包含7481 训练图片和7518 测试图片包含80.256 标注目标。同时带有点云信息。…
阅读更多...
C++之类（class）的三种访问修饰符（public、private、protected）----成员变量与函数权限

C++之类（class）的三种访问修饰符（public、private、protected）----成员变量与函数权限

1、背景介绍 在C中&#xff0c;类&#xff08;class&#xff09;的三种访问修饰符&#xff08;access specifiers&#xff09;用于控制类的成员&#xff08;属性和方法&#xff09;的访问权限。这些修饰符决定了类成员在类的外部是否可以被访问。以下是这三种访问修饰符的详细…
阅读更多...
深度学习-语言模型

深度学习-语言模型

深度学习-语言模型 统计语言模型神经网络语言模型语言模型的应用序列模型&#xff08;Sequence Model&#xff09;语言模型&#xff08;Language Model&#xff09;序列模型和语言模型的区别 语言模型&#xff08;Language Model&#xff09;是自然语言处理&#xff08;NLP&…
阅读更多...
信息安全法规和标准

信息安全法规和标准

《全国人民代表大会常务委员会关于维护互联网安全的决定》规定&#xff0c;威胁互联网运行安全的行为&#xff1a;&#xff08;1&#xff09;侵入国家事务、国防建设、尖端科学技术领域的计算机信息系统&#xff0c;&#xff08;2&#xff09;故意制作、传播计算机病毒等破坏性…
阅读更多...
Java 中BigDecimal传到前端后精度丢失问题

Java 中BigDecimal传到前端后精度丢失问题

1.用postman访问接口&#xff0c;返回的小数点精度正常 2.返回到页面里的&#xff0c;小数点丢失 3.解决办法&#xff0c;在字段上加注解 JsonFormat(shape JsonFormat.Shape.STRING) 或者 JsonSerialize(using ToStringSerializer.class) import com.fasterxml.jackson.a…
阅读更多...
SpringJDBC

SpringJDBC

1.前言 Spring JDBC可以帮助开发者节省大量开发工作 自动去处理一些低级细节 比如&#xff1a;异常处理、打开和关闭资源(Connection、PreparedStatement、Statement、ResultSet) 需要下载的jar包&#xff1a; spring-jdbc(普通jar包、源码jar包)由于没有依赖其他的jar包 所以只…
阅读更多...
绩效考核是否适合所有企业？

绩效考核是否适合所有企业？

绩效考核作为人力资源管理中重要的一环&#xff0c;不仅能够反映出员工的工作状态和工作能力&#xff0c;还能对人力资源的其他各板块起到连接和控制作用。科学有效的绩效考核&#xff0c;能够帮助企业对员工进行科学的评价&#xff0c;激发员工的工作主动性和积极性。近年来&a…
阅读更多...
Echarts 实现线条绘制

Echarts 实现线条绘制

文章目录 需求分析 需求 用 Echarts 实现如下效果 分析
阅读更多...
【优选算法】分治 {三分快排：三指针优化，随机选key，快速选择算法；归并排序：统计数组中的逆序对，统计数组中的翻转对；相关编程题解析}

【优选算法】分治 {三分快排：三指针优化，随机选key，快速选择算法；归并排序：统计数组中的逆序对，统计数组中的翻转对；相关编程题解析}

一、经验总结 1.1 三分快排 优化一&#xff1a;三指针优化 之前学习的快速排序无法妥善处理相等或重复序列的排序问题&#xff08;有序且三数取中无效&#xff09;&#xff0c;使快速排序的效率无法达到最优。 为了解决重复序列的问题&#xff0c;我们将原先的双指针法&…
阅读更多...
云计算-无服务器计算与AWS Lambda (Serverless Computing with AWS Lambda)

云计算-无服务器计算与AWS Lambda (Serverless Computing with AWS Lambda)

AWS Lambda 无服务器计算与AWS Lambda AWS Lambda支持无服务器计算&#xff0c;不需要任何预配置和管理&#xff0c;同时还能最大限度地降低成本。我们将看到如何创建一个简单的Lambda函数&#xff0c;以及如何将其与AWS事件映射。在现实生活中&#xff0c;任何托管在线的应用…
阅读更多...
Java中的死锁及其避免策略

Java中的死锁及其避免策略

一、技术难点&#xff1a; 在Java中&#xff0c;死锁是一个常见的并发问题&#xff0c;它指的是两个或更多的线程无限期地等待一个资源&#xff0c;而这些资源又被其他等待线程所持有。死锁通常发生在多个线程互相等待对方释放资源时&#xff0c;形成一个循环等待的条件。技术…
阅读更多...
每天学点小知识：图床搭建 + CDN简介

每天学点小知识：图床搭建 + CDN简介

前言&#xff1a; 本章内容帮你解决&#xff0c;本地图片不能分享到网上的问题。需要工具github JSDelivr 知识点 Q&#xff1a;什么是JSDelivr&#xff1f; JSDelivr是一个免费且公开的内容分发网络&#xff08;CDN&#xff09;&#xff0c;专门用于加速开源项目和静态网站…
阅读更多...
构建php环境、安装、依赖、nginx配置、ab压力测试命令、添加php-fpm为系统服务

构建php环境、安装、依赖、nginx配置、ab压力测试命令、添加php-fpm为系统服务

目录 php简介 官网php安装包 选择下载稳定版本 &#xff08;建议使用此版本&#xff0c;文章以此版本为例&#xff09; 安装php解析环境 准备工作 安装依赖 zlib-devel 和 libxml2-devel包。 安装扩展工具库 安装 libmcrypt 安装 mhash 安装mcrypt 安装php 选项含…
阅读更多...
2024年软件设计师备考复习资料（应用技术）

2024年软件设计师备考复习资料（应用技术）

应用设计&#xff0c;考试时间为120分钟&#xff1b;总共需做5道题&#xff0c;满分75分&#xff08;每题15分&#xff09;。前4题为必答题&#xff0c;最后2题为要求选答一题&#xff08;C或Java&#xff09;&#xff0c;45及格 目录 1. 数据流图&#xff08;需求分析&#…
阅读更多...
javascript的typeof返回哪些数据类型

javascript的typeof返回哪些数据类型

在JavaScript中&#xff0c;typeof 是一个一元运算符&#xff0c;它返回表示一个未计算的操作数类型的字符串。以下是 typeof 可能返回的数据类型字符串&#xff0c;以及如何使用它们&#xff1a; "undefined"&#xff1a; 如果变量已声明但未被赋值&#xff0c;则…
阅读更多...
部署Docker玩转Docker

部署Docker玩转Docker

Docker部署 文章目录 Docker部署资源列表基础环境一、安装最新版Docker依赖环境二、配置Docker加速器三、查看Docker版本四、Docker镜像操作4.1、搜索镜像4.2、获取镜像4.3、查看镜像信息4.4、给镜像打标签4.5、删除镜像4.6、存出镜像和载入镜像4.6.1、存出镜像4.6.2、载入镜像…
阅读更多...
最新文章

Copyright @ 2022~2023