HTML学习总结

最新推荐文章于 2024-10-02 17:15:49 发布

_wrenGhost_

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量491

点赞数

分类专栏：前端学习文章标签： html 前端 css

本文链接：https://blog.csdn.net/wREN_GHOST/article/details/122886916

版权

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本结构，包括head和body标签的使用，以及CSS样式如何定义网页外观。涵盖了常用HTML标签、CSS选择器（如class和id）的应用，还有外部、内部和内联样式的区别。此外，还提到了HTML5前端框架和一些关键概念，如CSS3的类扩展。

摘要由CSDN通过智能技术生成

HTML定义网页的结构，
CSS定义网页的样式，
JS定义网页的动作。

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <title>....</title>
  </head>
  <body>
  </body>
</html>

HTML的结构主要分为两部分：head 和 body 。

<head>放网页的描述。
如：<link>、<meta>、<tittle>、<style>等。
它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<body>放网页的内容。
如：<h1>、<p>、<div>等。

网页内容类放在<body>，网页描述类放在<head>。

1. 外部样式表
当样式需要被应用到很多页面时，外部样式表是理想的选择。

<head>
	<link rel="stylesheet" type="text/css" href="xxx.css">
</head>

2. 内部样式表
对单个文件进行设置，在head部分通过<style>定义内部样式表。

<head>
	<style type="text/css">
		...CSS_code...
	</style>
</head>

3. 内联样式
应用到个别元素。
如：<p style="color=red; magin-left=20px">abcd</p>

1. class选择器 – 定义类
2. id选择器

对HTML进行分类（设置类），使我们能为元素的类定义CSS样式，并为相同的类设置相同的样式/不同的类设置不同的样式。
定义类的方式：
使用<div>的class属性

<div class="class-name">
	...
</div>

使用<span>的class属性

<span class="class-name"> xxx </span>

关注

专栏目录