HTML基础入门知识-自用笔记

GGBOOM
130 阅读4分钟 
HTML是用来描述网页的一种语言，是超文本标记语言（Hyper Text Markup Language）。它不是编程语言，而是一种标记语言，HTML使用标记标签来描述网页。
HTML标签是由尖括号包围的关键词，通常是成对出现。例如: `<body></body>`。
Ps：HTML 标签对大小写不敏感，例如`<P>`等同于`<p>`。

1 基础语法

<html>与</html>之间的文本描述网页 <body>与</body>之间的文本是可见的网页内容

1.1 标题

<h1>与</h1>之间的文本被显示为标题，<h1>定义最大的标题，<h6>定义最小的标题 示例：

This is a test h1

This is a test h2

This is a test h3

<hr />在HTML页面中创建水平线。

1.2 段落

<p>与</p>之间的文本被显示为段落 源码中的排版（空格、回车）不会被浏览器显示，可以使用<br />进行段落中换行

1.3 链接

通过<a>标签进行定义，href属性中指定链接的地址。 示例：

This is a link1

<a href=“https://www.xxx.com”>This is a link</a>

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

This is a link2

<a href=“https://www.xxx.com” target="_blank">This is a link2</a>

1.4 图像

通过<img>标签进行定义的，图像的名称和尺寸是以属性的形式提供的。src指“source”，指定图像的URL（存储图像的位置）。 示例：

<img src=“1.jpg” width=“100” height=“150” />

替换文本属性（alt）用来为图像定义一串预备的可替换的文本。替换文本属性的值由用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。 演示： 在这里插入图片描述 在这里插入图片描述

1.5 注释

提高代码可读性，不会显示在浏览器上。 示例：

<!-- this is a comment -->

2 HTML元素

指从开始标签到结束标签的所有代码

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

元素内容是：This is a test.

2.1 嵌套的HTML元素

大多数HTML元素可以嵌套（可以包含其他HTML元素）

HTML文档由嵌套的HTML元素构成

示例：

<html>
<body>
<p>This is a test.</p>
</body>
</html>

2.2 空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障

3 HTML属性

HTML标签可以拥有属性，属性总是以名称/值对的形式出现，总是在开始标签中定义。例如：

<a href=“http://www.xxx.com”>This is a link</a>
<h1 align=”center”>Center</h1> //对齐方式定义
<body bgcolor=”yellow”>…</body> //背景颜色定义
<table> border=”1”>…</table> //表格边框的附加信息

Ps:虽然属性和属性值对大小写不敏感，建议使用小写属性。
	始终为属性值加引号，单引号双引号皆可，若属性值本身带有双引号，那么使用单引号。例如：name=‘welcome to “HTML” world’
其他属性用法详见手册

4 HTML样式

Style属性用于改变HTML元素的样式。

在这里插入图片描述

background-color属性为元素定义了背景颜色

font-family、color以及font-size属性分别定义元素中文本的字体系列、颜色和字体尺寸

text-align属性规定元素中文本的水平对齐方式

示例：

This is a test

<h1 style="text-align:center">This is a test</h1>

使用建议

在这里插入图片描述

5 HTML文本格式化

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

6 HTML CSS

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

样式

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

6.1 内联样式

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

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

6.2 内部样式表

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

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

6.3 外部样式表

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

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

该文章摘录至w3school

avatar
文章
阅读
粉丝