HTML学习笔记

落淼喵_G

已于 2024-01-02 15:26:46 修改

阅读量414

点赞数 9

文章标签： html 学习笔记

于 2024-01-02 15:23:05 首次发布

本文链接：https://blog.csdn.net/qq_40604302/article/details/135341374

版权

例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<h1>第一个标题</h1>
<p>第一个段落</p>
</body>
</html>

对应代码解析：

	声明为HTML5文档
	为根元素
	包含了文档的元（meta）数据，上述代码中定义网页编码格式为utf-8
	描述文档的标题
	包含可见的页面内容
	定义了一个大标题
	定义了一个段落

一、html基础知识点

html使用来描述网页的一种标记语言，即采用标记标签来描述网页，html文档也叫做web页面。html标签是由尖括号包围的关键词，且其通常为成对出现的，如下所示，开始和结束标签也被称为开放标签和闭合标签。

<标签>内容</标签>

html的网页结构，只有区域才会在浏览器中显示。
在这里插入图片描述
对于设置的后出现网页乱码的问题，问题为：通过meta设置的编码和网页文件在保存时使用的文档编码不相同。

1.1 四个实例

标题（heading）是通过h1-h6标签来定义的；
段落通过标签 p 来定义的。

链接是通过标签 a 来定义的，例如：

<a href="https://www.runoob.com">这是个链接</a>

图像是通过标签 img 来定义的。例如：

<img src="/images/logo.png" width="258" height="39"></img>

常见问题：
a. HTML中的href和src的区别：

href----超文本引用，在link和a等元素上使用；href的内容与该页面有关联，为引用。例如：
```
<link href="reset.css" rel="stylesheet"/>
```
src------表示来源地址，在img、script、iframe等元素上使用；src的内容为页面必不可少的部分，是引入。
b.若图片与html文件目录相关问题：

html文件与图片文件（f盘）不在同一目录下：

<img src="file:///f:/*.jpg" width="300" height="120"/>

html文件与图片文件在相同目录下：

<img src="*.jpg" width="300" height="120"/>

图片*.jpg在image文件夹中，*.html与image在同一目录下：
```
<img src="/image/*.jpg/" width="300" height="120"/>
```
图片在image文件夹中，html在connage文件夹中，image与connage在同一目录下：
```
<img src="../image/*.jpg/" width="300" height="120"/>
```

图片来自于网络，则写绝对路径：

<img src="http://test.com/images.test.png" width="300" height="120"/>

1.2 html属性

html的属性总是以名称/值对的形式出现，例如：name=“value”。
完整的html的属性列表链接为：HTML 标签列表(字母排序) | 菜鸟教程
下面为适用于大多数html元素的属性:

属性	描述
class	为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式(inline style)
title	描述了元素的额外信息（作为工具条使用）

html标题是通过h1 - h6标签进行定义，与word一样，

定义最大最主要的标题，

定义最小的标题，例如：

<h1>标题一</h1>
<h2>标题二</h2>

ps：标题标签只适用于标题，不要为了生成粗体/大号文本使用标题。

hr 标签在html界面中创建水平线，即hr可用于分隔内容，例如：

<p>段落一</p>
<hr />
<p>段落二</p>
<hr />
<p>段落二</p>

html的注释写法如下：

<!--这是个注释-->

1.3 html段落

段落是通过 p 标签进行定义的。

如果希望在不产生一个新段落的情况下进行换行（新行）的效果，则使用 br

<p>这个<br>段落<br>演示了分行的效果<\p>

br 元素是一个空的html元素，因为关闭标签没有任何意义，则没有关闭标签。
html通过标签 b (“blod”)和 i (“italic”)对输出的文本进行格式，即粗体/斜体。
strong或em 意味着需要呈现的文本为重要的。例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<\head>

<body>
<b>加粗</b>
<br />
<strong>重要的</strong>
<br />
<big>放大</big>
<br />
<em>斜体</em>
<br />
<i>斜体2</i>
<br />
<small>缩小</small>
<br />
<sup>上标</sup>
<br />
<sub>下标</sub>
</body>
</html>

HTML文本格式化标签

标签	描述	标签	描述
b	定义粗体文本	sub	定义下标字
em	定义着重文字	sup	定义上标字
i	定义斜体字	ins	定义插入字
small	定义小号字	del	定义删除字
strong	定义加重语气

HTML计算机输出标签

标签	描述
code	定义计算机代码
kbd	定义键盘码
samp	定义计算机代码样本
var	定义变量
pre	定义预格式文本

HTML 引文, 引用, 及标签定义

标签	描述	标签	描述
abbr	定义计算机代码	q	定义短的引用语
address	定义键盘码	cite	定义引用、引证
bdo	定义计算机代码样本	dfn	定义一个定义项目。
blockquote	定义变量

1.4 HTML链接

html中的链接是一种用于在不同网页间导航的元素，即将一个网页与另一个网页/资源（文档、图像、音频等）相关联。

a. html超链接

html使用标签 a 设置超文本链接。采用 href 属性描述链接中的地址。默认情况下，链接将以一下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色带下划线
点击链接时，链接显示为红色带下划线

ps：如有css样式文件，则根据css的设定而现实。

b. html链接语法

a 元素为创建链接的主要属性，其基本语法和属性如下所示：

href	指定链接目标的URL
target(可选)	指定链接如何在浏览器中打开。常见的值为：_blank(在新标签/窗口打开链接)和_self（在当前标签/窗口打开链接）
title(可选)	提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示
rel(可选)	指定与链接目标的关系，如：nofollow、noopener等

基本语法为：

<a href="url">链接文本</a>

例如：

<a href="http://www.baidu.com">访问百度首页</a>

显示为：

访问百度首页

上述为文本链接，还可以通过图像进行链接，例如：

<a href="http://www.baidu.com">
    <img src="baidu.jpg" alt="示例图片">
</a>

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度</title>
</head>
<body>
<p>创建图片链接：
<a href="http://www.baidu.com">
	<img border="10" src="baidu.jpg" alt="百度首页" width="32" height="32">
</a>
</p>
<p>无边框的图片链接
<a href="http://www.baidu.com">
	<img border="0" src="baidu.jpg" alt="百度首页" width="32" height="32">
</a>
</p>
</body>
</html>

也可通过锚点链接：即除了链接到其他网站外，还可以在同一页面内创建内部链接，需在目标位置使用 a元素 定义一个标记，并使用#符号引用该标记，例如：

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

将其与id属性一起使用，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>
    <a href="#C2">查看章节2</a>
</p>
<h2>章节1</h2>
<p>内容...</p>
<h2>
    <a id="C2">章节2</a>
<h2>
<p>内容...</p>
<h2>章节3<h2>
<p>内容...</p>
</body>
</html>

下载链接：链接用于下载文件而不是导航到另一个网页，可使用download属性，例如：

<a href="document.pdf" download>下载文档<\a>

发送邮件链接： 创建电子邮件时，可使用关键字mailto进行发送，例如：

<a href="mailto:test@163.com?subject=这是邮件的主题&body=这是内容" rel="nofllow">发送邮件</a>

<a href="mailto:test@163.com?cc=someone@163.com&bcc=somebody@163.com" rel="nofollow">发送邮件</a>

字段说明，多个邮件地址用分号； 隔开，空格用 %20 代替。nofollow是html中a标签的属性，告诉搜索引擎不要追踪该网页上的链接，即告诉搜索引擎该链接不是经过作者信任的，则这个链接不是个信任票。

也可加上

rel="noopener noreferrer"
<!-- 不会打开其他网站，因为恶意病毒可能会修改浏览器的空白网页-->

参数	描述
mailto:name@email.com	邮件接收地址
cc=name@email.com	抄送地址
bcc=name@email.com	密件抄送地址
subject=subject text	邮件主题
body=body text	邮件内容
?	第一个参数分隔符
&	其他参数分隔符

c. target属性

该属性可以定义被链接的文档在何处显示，例如该例子会在新窗口打开文档：

<a href="http://www.baidu.com" target="_blank">访问百度网页</a>

target=“_blank”	在新窗口浏览新的页面
target=“_self”	在同一个窗口打开新的页面
target=“_parent”	在父窗口打开新的页面
target=“_top”	以整个浏览器作为窗口显示新页面

d. id属性

该属性可用于创建一个html文档标签。【书签不会以任何特殊方式显示，即在html界面是不显示的，即是隐藏的】，例如：

<!-- 在html文档中插入id -->
<a id="tips">有用的提示部分</a>
<!-- 在html中创建一个链接到“有用的提示部分（id="tips"）” -->
<a href="#tips">访问有用的提示部分</a>
<!-- 从另一个页面创建一个链接到"有用的提示部分(id="tips"）" -->
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

1.5 html头部 head

元素包含了所有的头部标间元素，可在头部插入脚本（scripts），样式文件（css）,以及各种meta信息。可以添加在头部区域的元素标签为：title、style，meta，link，script，noscript和base.

a. title标签

title标签定义了不同文档的标题，在html/xhtml文档中为必需的。

定义了浏览器的标题
当网页添加到收藏夹中，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<p>此处为文档内容</p>
</body>
</html>

ps：该标签不仅可以显示文本，也可在左侧显示logo等图片，可将标签放入中。例如：

<!DOCTYPE html>
<html>
<head>
<link rel="short icon" href="图片url">
<title>
</head>
</html>

b. base标签

描述了基本的链接地址/链接目标，该标签作为html文档中所有的链接标签的默认链接：

<head>
<base href="http://www.baidu.com" target="_blank">
</head>

c. link标签

link标签定义了html文档与外部资源之间的关系，通常用于链接到样式表。

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

d. style标签

style标签定义了html文档的样式文件引用地址，在style元素中也可直接添加样式渲染html文档。

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

e. meta标签

meta标签描述了一些基本的元数据，元数据不会显示在页面上，但会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者和其他元数据。

元数据可以用于浏览器（如何显示内容/重新加载界面），搜索引擎（关键词），或者其他web服务。

<!-- 为搜索引擎定义关键词 -->
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
<!-- 为网页定义描述内容 -->
<meta name="description" content="免费 web & 编程 教程">
<!--定义网页作者-->
<meta name="author" content="TEST">
<!-- 每30s刷新当前界面-->
<meta http-equiv="refresh" content="30">

f. script元素

script标签用于加载脚本

head与header标签的区别：

head标签用于定义头部文档，他是所有头部元素的容器。该标签中的元素可引用脚本、指示浏览器在哪里找到样式表、提供原信息等。
header标签用于定义文档的页眉（介绍信息）。

<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<header>
<p>段落</p>
<h1>一级标题</h1>
</header>
</body>
</html>

二、样式-CSS

css—是为了渲染html元素引用的，css可通过以下三种方式引入到html文件中：

内联引用--------在html元素中使用“style”属性
内部样式表-----在头部head区域使用style元素来包含css
外部引用--------使用外部css文件

2.1 内联样式

当特殊的样式需要应用到个别元素时，则可使用内联样式。方法：在相关标签中使用样式属性，样式属性可以包含任何CSS属性

<!--显示出如何改变段落的颜色和左外边距-->
<p style="color:blue;margin-left:20px;">段落</p>

2.2 背景样式background-color

用于定义一个元素的背景颜色，例如:

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是个标题</h2>
<p style="background-color:green;">这是个段落</p>
</body>

旧版采用bgcolor属性定义背景色。

2.3 字体格式

字体的格式主要有：

font-family 字体
color 颜色
font-size 字体大小

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落</p>

文本对齐方式采用text-align 属性指定文本的水平与垂直对齐方式

<h1 style="text-align:center;">剧中对齐的标题</h1>
<p>这是个段落</p>

2.4 内部样式表

当单个文件需要特殊的样式时，可使用内部样式表，可在部分通过

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p{
    color：blue;
}
</head>

2.5 外部样式表

当样式需要被用到很多页面时，可使用外部样式表，可更改一个文件来改变整个站点的外观。

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

PS：link与import的区别

link属于xhtml的标签，而@import是css提供的一种方式；
加载顺序的区别： 当页面被加载时，link引用的CSS会同时被加载，而@import引用的css会等到页面全部下载完毕后再被加载。则浏览器浏览@import加载css页面时开始时是没有样式的。
兼容性的差别： @import是CSS2.1提出的，老浏览器不支持，@import只有在IE5上才能识别，link无此问题；
使用dom(document object model文档对象模型）控制样式时的差别：使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import 不是dom可以控制的。

三、HTML图像

在html中，图像由img标签进行定义，他为空标签，即只包含属性，没有闭合标签，语法为：

<img src="图像的地址" alt="图像描述">

浏览器将图像显示在文档中图像标签出现的地方，例如，将图像标签至于两个段落之间，则浏览器会显示第一个段落，图片，第二个段落。

alt的属性是用于为图像定义一串预备的可替换的文本，即在浏览器无法载入图片时，替换文本属性告诉读者信息。

height----设置高度
width-----设置宽度
属性默认------像素

<img src="图片地址" alt="描述" width="304" height="228">

图像相关标签

标签	描述
img	定义图像
map	定义图像地图
area	定义图像地图中的可点击区域

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像显示测试</title>
</head>
<body>
<p>文件夹下的图像</p>
<img src="baidu.jpg" alt="Baidu" width="33" height="33">
<p>网络上的图片</p>
<img src="https://img1.baidu.com/it/u=4270144465,1604793144&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="logo" width="160" height="60">
<p>创建有边框的图片链接:
<a href="http://www.baidu.com">
<img border="10" src="baidu.jpg" alt="Baidu" width="32" height="32">
</a>
</p>
<p>创建无边框的图片链接:
<a href="http://www.baidu.com">
<img border="0" src="baidu.jpg" alt="Baidu" width="32" height="32">
</a>
</p>
<h4>默认对齐的图像</h4>
<p>这是一些文本<img src="baidu.jpg" alt="Baidu" width="32" height="32">这是一些文本</p>
<h4>图片使用 align="middle"</h4>
<p>这是一些文本<img src="baidu.jpg" alt="Baidu" align="middle" width="32" height="32">这是一些文本</p>
<h4>图片使用 align="top"</h4>
<p>这是一些文本<img src="baidu.jpg" alt="Baidu" align="top" width="32" height="32">这是一些文本</p>
<p>
<img src="baidu.jpg" alt="Baidu" style="float:left" width="32" height="32">图片浮动在文本的左边</p>
<p>
<img src="baidu.jpg" alt="Baidu" style="float:right" width="32" height="32">图片浮动在文本的右边</p>
</body>
</html>

四、HTML表格

落淼喵_G

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML学习笔记

h1 > 标题一 < h2 > 标题二标题一 < h2 > 标题二 < h1 > 标题一 < h2 > 标题二标题一 < h2 > 标题二 ps：标题标签只适用于标题，不要为了生成粗体/大号文本使用标题。
复制链接

扫一扫