HTML基础学习

最新推荐文章于 2022-08-16 07:55:13 发布

godfather914

最新推荐文章于 2022-08-16 07:55:13 发布

阅读量892

点赞数 3

分类专栏： HTML 文章标签： html 学习前端

本文链接：https://blog.csdn.net/godfather914/article/details/125401710

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、html

HTML 教程 | 菜鸟教程 (runoob.com)

一、HTML基础

1、HTML标题

HTML 标题（Heading）是通过

-

标签来定义的。

2、HTML段落

HTML 段落是通过标签

来定义的。

3、HTML链接

HTML 链接是通过标签来定义的。

**提示:**在 href 属性中指定链接的地址。

四、HTML图像

HTML 图像是通过标签来定义的.

注意： 图像的名称和尺寸是以属性的形式提供的。

二、HTML元素

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

文档实例：

<p>元素：

<p>这是第一个段落。</p>

这个

元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签

以及一个结束标签

<body>元素：

这是第一个段落。

元素定义了 HTML 文档的主体。这个元素拥有一个开始标签以及一个结束标签。

<html>元素：

这是第一个段落。

元素定义了整个 HTML 文档。这个元素拥有一个开始标签，以及一个结束标签 .

HTML空元素

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

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

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

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

提示：是用小写标签

HTML 标签对大小写不敏感：

等同于

。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

三、HTML属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

属性实例

HTML属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘John “ShotGun” Nelson’

提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

四、HTML标题

HTML标题

标题（Heading）是通过

-

标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

</h1>

标题的重要性

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML水平线

<hr>标签在HTML页面中创建水平线

HTML注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

五、HTML段落

HTML段落

段落是通过

标签定义的。

HTML折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 **<br>**标签：

六、HTML文本格式化

七、HTML链接

HTML使用标签来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

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

链接语法

链接的 HTML 代码很简单。它类似这样：

href 属性描述了链接的目标。

target属性

使用 target 属性，你可以定义被链接的文档在何处显示。

id属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

八、HTML<head>

HTML<head>元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

HTML<title>元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

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

HTML<base>元素

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

HTML<link>元素

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

HTML<style>

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

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

HTML<meta>元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

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

九、HTML样式-CSS

CSS用于渲染HTML元素标签的样式

1、如何使用CSSxia

CSS可以通过一下方式添加到HTML中：

内联样式-在HTML元素中使用“style”属性
内部样式表-在HTML文档头部区域使用

最好的方式使用过外部引用CSS文件

1、内联样式

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

以下实例显示出如何改变段落的颜色和左外边距。

背景色属性（background-color）定义一个元素的背景颜色

可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

2、内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在部分通过

3、外部样式表

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

十、HTML图像

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

是空标签，意思是说它只包含属性并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（sr’c）。src指“source”。源属性的值是图像的URL地址·

URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

2、Alt属性

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

替换文本属性的值是用户定义的。

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

3、设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

4、有用的提示

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

5、HTML图像标签

十一、HTML表格

表格由<table> 标签来定义。每个表格均有若干行由<tr>标签来定义，每行被分割为若干单元格由<td>标签定义。字母td指表格数据（table data），即数据单元个的内容。数据单元格可以包含文本、图片、列表、表单、水平线、表格等等。

表格的表头使用<th>标签进行定义

十二、HTML列表

一、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用

标签

二、有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于
标签。

列表项使用数字来标记。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-anvzv4SY-1655832513117)(https://godfather-1312305150.cos.ap-beijing.myqcloud.com/image%5C202206202038248.png)]

三、自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。

十三、HTML区块

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

大多数HTML元素被定义为块级元素或内联元素

1、HTML区块元素

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

实例：<h1><p><ul><table>

2、HTML内联元素

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

实例: , , ,

3、HTML<div>元素

HTML

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

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

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

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

4、HTML<span>元素

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

<span> 元素也没有特定的含义。

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

十四、HTML布局

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用

或者元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

一、使用<div>元素

二、使用表格

使用 HTML

标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

十五、HTML表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

1、HTML表单

表单时一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

我们可以使用<form>

2、表单输入元素

多数情况下被用到的表单标签输入标签<input>。

输入类型是由 type属性定义。

输入类型：

1、文件域

文件域通过<input type=“text”>标签来设定，当用户要在表单中键入字母、数字等内容，就会用到文本域

2、密码字段

密码字段通过标签<input type=“password”>来定义

3、单选按钮

<input type=“radio”>标签定义了表单的单选框选项

4、复选框

<input type=“checkbox”>定义了复选框

复选框可以选取一个或多个选项：

5、提交按钮

定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理:

以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 **?**作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。