HTML/CSS学习记录（3）-CSDN博客

本文链接：https://blog.csdn.net/Ascine/article/details/74931944

HTML CSS

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，可以通过更改一个文件来改变整个站点的外观。

<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链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
1. 通过使用 href 属性 - 创建指向另一个文档的链接。
2. 通过使用 name 属性 - 创建文档内的书签。

HTML链接语法

href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示：
<a href="url">Link text</a>
例如：
<a href="http://blog.csdn.net">欢迎浏览CSDN博客</a>
显示出来就是欢迎浏览 CSDN博客
点击这个链接可以跳转到CSDN博客首页。

如果想要定义链接在何处显示，我们需要使用HTML链接-target属性
例如：

<html>

<body>

<a href="http://blog.csdn.net" target="_blank">欢迎浏览CSDN博客</a>

<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

</body>

</html>

这个就会在新窗口打开链接。

HTML链接-name属性

name 属性规定锚（anchor）的名称。
可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
实例：

<html>

<body>

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h4>Chapter 1</h4>
<p>This chapter explains ···</p>

<h4>Chapter 2</h4>
<p>This chapter explains ···</p>

<h4>Chapter 3</h4>
<p>This chapter explains ···</p>

<h4><a name="C4">Chapter 4</a></h4>
<p>This chapter explains ···</p>

<h4>Chapter 5</h4>
<p>This chapter explains ···</p>

<h4>Chapter 6</h4>
<p>This chapter explains ···</p>

<h4>Chapter 7</h4>
<p>This chapter explains ···</p>

</body>
</html>

HTML 图像

通过使用 HTML，可以在文档中显示图像。

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" />
URL 指存储图像的位置。