HTML基础学习

一、html

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

一、HTML基础

1、HTML标题

HTML 标题(Heading)是通过

-

标签来定义的。

image-20220621170128328

2、HTML段落

HTML 段落是通过标签

来定义的。

image-20220621170217943

3、HTML链接

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

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

image-20220621170635249

四、HTML图像

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

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

image-20220621173659961

二、HTML元素

image-20220621174013869

开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)

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

文档实例:

image-20220621193905273

<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”

属性实例

image-20220621211516970

HTML属性常用引用属性值

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

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

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

提示:使用小写属性

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

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

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

image-20220621211918102

四、HTML标题

HTML标题

标题(Heading)是通过

-

标签进行定义的。

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

</h1>

image-20220621212048251

标题的重要性

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

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

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

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

HTML水平线

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

image-20220621212605592

HTML注释

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

image-20220621212707272

image-20220621212741324

五、HTML段落

HTML段落

段落是通过

标签定义的。

image-20220621212950637

HTML折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 **<br>**标签:

image-20220621213113390

image-20220621213127427

六、HTML文本格式化

image-20220621213313579

image-20220621213327947

image-20220621214030988

image-20220621214047493

七、HTML链接

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

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

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

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

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

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

链接语法

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

<a href=“url”>链接文本</a>

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

image-20220621214358459

target属性

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

image-20220621214832899

id属性

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

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

image-20220621214933773

image-20220621214944897

八、HTML<head>

HTML<head>元素

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

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

HTML<title>元素

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

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

<title> 元素:

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

image-20220621215259694

HTML<base>元素

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

image-20220621215607677

HTML<link>元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

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

HTML<style>

<style> 标签定义了HTML文档的样式文件引用地址.

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

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

HTML<meta>元素

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

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

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

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

<meta> 一般放置于 区域

image-20220621220229203

image-20220621220315071

九、HTML样式-CSS

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

1、如何使用CSSxia

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

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

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

1、内联样式

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

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

image-20220619224407645

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

image-20220619224529560

image-20220619224540119

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

image-20220619224820320

image-20220619224828244

使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:

image-20220619225153284

2、内部样式表

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

image-20220619230600441

3、外部样式表

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

image-20220619231322347

十、HTML图像

1、图像标签( <img>)和源属性(Src)

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

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

image-20220619233139574

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

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

2、Alt属性

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

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

image-20220619234156028

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

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

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

属性值默认单位为像素:

image-20220619234454187

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

4、有用的提示

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

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

5、HTML图像标签

image-20220619234811571

十一、HTML表格

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

image-20220620100030802

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

image-20220620100254478

image-20220620100329632

十二、HTML列表

一、无序列表

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

无序列表使用

  • 标签

image-20220620100829298

二、有序列表

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

  1. 标签。每个列表项始于
  2. 标签。

列表项使用数字来标记。

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

三、自定义列表

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

自定义列表以

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

image-20220620204558169

image-20220620205105027

十三、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> 元素可用于为部分文本设置样式属性。

image-20220620215410424

十四、HTML布局

网站布局

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

大多数网站可以使用

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

一、使用<div>元素

image-20220620222432641

image-20220620222536451

二、使用表格

使用 HTML

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

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

image-20220620223046012

image-20220620223256245

十五、HTML表单和输入

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

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

1、HTML表单

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

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

我们可以使用<form>

image-20220620224825273

2、表单输入元素

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

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

输入类型:

1、文件域

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

image-20220620232856700

image-20220620232951729

2、密码字段

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

image-20220620233512424

image-20220620233528137

3、单选按钮

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

image-20220620234615039

4、复选框

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

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

image-20220621005844933

image-20220621005901199

5、提交按钮

定义了提交按钮。

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

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

image-20220621010541309

image-20220621010558645

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

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

image-20220621012819536

image-20220621114832546

十六、HTML框架

iframe语法:<iframe src=“URL”></iframe>,该URL指向不同的网页。

1、设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如:“80%”)。

image-20220621120427212

image-20220621120509030

2、移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框:

image-20220621120727058

image-20220621120822897

3、使用iframe来显示目标链接页面

iframe 可以显示一个目标链接的页面

目标链接的属性必须使用 iframe 的属性,如下实例:

image-20220621121153819

注意: 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。

image-20220621121212321

十七、HTML颜色

颜色值

HTML 颜色由红色、绿色、蓝色混合而成。

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

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

HTML 颜色名 | 菜鸟教程 (runoob.com)

HTML 颜色值 | 菜鸟教程 (runoob.com)

十八、HTML脚本

<script>标签

<script>标签用于定义客户端脚本,比如javascript。

<script>元素既可以包含脚本语句,也可通过属性指向外部脚本文件。

javascript做常用于照片操作、表单验证及内容动态更新。

下面的脚本会向浏览器输出"Hello World!":

image-20220621122835833

<noscript>标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时,才会显示 元素中的内容:

image-20220621152152975

image-20220621152207616

十九、HTML字符实体

HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。

1、HTML实体

在 HTML 中,某些字符是预留的。

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。

image-20220621153440145

提示: 使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

2、不间断空格

HTML中常使用字符实体是不间断空格(&nbsp;)

浏览器总是会截短HTML页面中的空格。如果您在文本中写10个空格,在显示该页面之前,浏览器会删除它们中的9个。如果在页面中增加空格数量,您需要使用&nbsp;字符实体

3、结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。

变音符号可以出现字母的上面和下面,或者字母里面,或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

image-20220621154357824

4、HTML字符实体表

image-20220621154443913

image-20220621154503932

二十、统一资源定位器URL

URL是一个网页地址。URL可以字母组成如"runoob.com",或者互联网协议IP地址:192.168.1.1。

1、URL-统一资源定位器

Web浏览器通过URL从Web服务器请求页面。当你点击HTML页面中的某个链接时,对应<a>标签指向的万维网上的一个地址。一个统一资源定位器(URL)用于用于定位万维网的文档。

实例:

http://www.runoob.com/html/html-tutorial.html

scheme://host.domain:port/path/filename

说明

  • scheme-定义因特网服务类型。常见的类型时HTTP 、HTTPS
  • host-定义域主机(http的默认主机是www)
  • domain-定义因特网域名,比如baidu.com
  • :port-定义服务器的服务端口号(http:80、https:443)
  • path-定义服务器的文件,(如果省略,则文档必须位于网站的根目录中)。
  • filename-定义文档或资源的名称

二、常见的URL scheme

image-20220621155929732

三、URL字符编码

URL只能使用ASCII字符集。

来通过因特网进行发送。由于URL常常会包含ASCII集合之外的字符,URL必须转换为有效的ASCII格式。

URL编码使用%其后跟随两位十六进制数来替换非ASCII字符。URL不包含空格。URL编码通常使用+来替换空格。

四、URL编码参考手册HTML URL 编码参考手册 | 菜鸟教程 (runoob.com)

二十一、HTML速查列表

一、HTML基本文档

image-20220621161236969

二、基本标签

image-20220621161459597

三、文本格式化

image-20220621161949559

四、链接

image-20220621162057740

五、照片

image-20220621162140203

六、样式/区块

image-20220621162216939

七、列表

image-20220621162456532

image-20220621162514266

image-20220621162540945

八、表格

image-20220621162850546

九、框架

image-20220621163024289

十、表单

image-20220621163217049

十一、实体

image-20220621163240623

二十二、HTML标签简写及全称HTML 标签简写及全称 | 菜鸟教程 (runoob.com)

二十三、XHTMLXHTML 简介 | 菜鸟教程 (runoob.com)

)]

三、文本格式化

[外链图片转存中…(img-KLFQ2Axn-1655832513136)]

四、链接

[外链图片转存中…(img-NFarVRsh-1655832513136)]

五、照片

[外链图片转存中…(img-46kFaQ7O-1655832513137)]

六、样式/区块

[外链图片转存中…(img-Y3EVE5OG-1655832513137)]

七、列表

[外链图片转存中…(img-QqQDUFd1-1655832513138)]

[外链图片转存中…(img-h3kXErmg-1655832513139)]

[外链图片转存中…(img-CXxw9zsn-1655832513139)]

八、表格

[外链图片转存中…(img-xf9yWpvE-1655832513140)]

九、框架

[外链图片转存中…(img-E7TYN5em-1655832513141)]

十、表单

[外链图片转存中…(img-HbTrjvAo-1655832513142)]

十一、实体

[外链图片转存中…(img-7Bad0dxp-1655832513142)]

二十二、HTML标签简写及全称HTML 标签简写及全称 | 菜鸟教程 (runoob.com)

二十三、XHTMLXHTML 简介 | 菜鸟教程 (runoob.com)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值