HTML基础2 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第2天 HTML块元素和内联元素通过<div>

这是我参与「第四届青训营」笔记创作活动的第2天

HTML块元素和内联元素

通过<div>和<span>将 HTML元素组合起来。

HTML 块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML `<div>` 元素

HTML<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。

HTML `<span>` 元素

HTML <span> 元素是内联元素，可用作文本的容器。

当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。

HTML类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。即可以为相同的类设置相同的样式，或者为不同的类设置不同的样式。

分类块级元素

HTML <div> 元素是块级元素。设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
    
</body>
</html>

分类行内元素

HTML <span> 元素是行内元素，设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

HTML的id

HTML id 属性用于为HTML元素指定唯一的id，一个 HTML文档中不能存在多个有相同 id 的元素。
id 属性用于指向样式表中的特定样式声明。JavaScript也可使用它来访问和操作拥有特定 ID 的元素。
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性：

有一个 `<h1>` 元素，它指向 id 名称 "myHeader"。这个 `<h1>` 元素将根据 head 部分中的 `#myHeader` 样式定义进行样式设置：

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Class与id的差异

同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：

<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* 设置类名为 "city" 的所有元素的样式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>

<!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

HTML中插入CSS样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>

</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

HTML基础2 | 青训营笔记