HTML基础标签详解：结构、标题与文本格式化

需积分: 0 41 浏览量更新于2024-07-01 收藏 31.3MB PDF 举报

在本文档中，我们将深入探讨HTML和CSS的基础概念，以及如何使用它们来构建和格式化网页。首先，我们了解到HTML（Hypertext Markup Language）是网页开发的核心语言，其结构通常包括根元素`<html>`，该标签定义了整个页面的起点。`<head>`部分包含了文档的元数据，如文档类型声明`<!DOCTYPE html>`，确保浏览器以正确的版本解析文档，`<meta charset="UTF-8">`用于指定字符编码，避免乱码问题，以及`<meta name="viewport">`用于响应式设计，确保页面在不同设备上正确显示。 `<title>`标签是文档的标题，对于SEO和用户体验至关重要，它会在浏览器标签页和搜索引擎结果中显示。页面内容主要由`<body>`标签包裹，这是网页的主体部分，包含了所有可见的网页内容。接下来，关于标题标签`<h1>`到`<h6>`的介绍，它们代表了从最重要的主标题到最小的副标题的语义层次，使用这些标签可以增强文档结构的可读性和搜索引擎优化。每个级别标题都会使文本加粗并变大，其中`<h1>`最大，`<h6>`最小。此外，HTML还提供了其他文本格式化标签，如`<strong>`、`<em>`、`<del>`、`<u>`，它们分别用于加粗、斜体、删除线和下划线，虽然`<b>`和`<i>`标签也可以实现相同效果，但使用语义标签能更好地传达内容的含义。 `<p>`标签用于定义段落，具有自动换行和段落间留空的特点，有助于阅读体验。而`<br>`标签则用于强制换行，与段落不同，它仅表示新的一行，不会增加垂直间距。 CSS（Cascading Style Sheets）在这个过程中起着关键作用，通过定义样式规则，控制文本颜色、布局、尺寸等视觉呈现。然而，这部分内容并未在提供的片段中直接提及，但理解了HTML的结构和语义后，CSS就成了增强页面外观和交互的重要工具。总结来说，这篇笔记详细介绍了HTML的基本结构和一些关键元素的使用，强调了语义标签在编写清晰文档结构中的作用，同时提到了CSS的基础作用。对于初学者来说，理解这些基础概念是构建和优化网页设计的基石。

多类名使用

id选择器

id选择器可以为标有特点id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以" # "来定义

id选择器和类选择器的区别

类选择器好比人的名字，可以被多次使用。

id选择器好比人的身份证号码，全中国唯一，不能重复。

id选择器和类选择器最大的不同在于使用次数上。

类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

<!--

1、在标签class属性中写多个类名

2、多个类名中间必须用空格分开

3、这个标签就可以分别具有这些类名的样式

优点：

节省CSS代码，统一修改方便

-->

#id名{

属性1：属性值1；

...

}

<style>

 将id为nav元素中的内容设置为红色。

 #nav{

   color:red;

 }

</style>

<!DOCTYPE html>

<head>

 <meta charset="UTF-8" />

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 <title>Document</title>

 <style>

   /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */

   #pink{

     color: pink;

   }

 </style>

</head>

<body>

  <div id="pink">麦克</div>

</body>

</html>

剩余179页未读，继续阅读

西西里的小裁缝

粉丝: 33
资源: 292

HTML基础标签详解：结构、标题与文本格式化

参考笔记1

大胖.cpp

挞挞不要胖的护导笔记.rar

挞挞不要胖的护导笔记.pdf

pangliang.github.com:胖梁的技术笔记

Oracle笔记

EJB笔记

我的大胖子不同的屁股「My Big Fat Diverse Ass」-crx插件

doobie:一个极简的双向数据绑定库，适用于那些正在寻找比Angular.js等大型胖框架更精简的东西的人

统计学习方法笔记（1）—感知机

最新资源