HTML学习

最新推荐文章于 2024-09-05 23:16:39 发布

Thought-bubble

最新推荐文章于 2024-09-05 23:16:39 发布

阅读量45

点赞数

文章标签： html 学习前端

原文链接：https://www.runoob.com/

版权

HTML学习

HTML简介

1.1定义

html是一种标记语言，标记语言是一套标记标签 (markup tag)，其使用标记标签来描述网页，html文档也叫做web页面。

1.2 html页面结构

<!DOCTYPE html>——有助于浏览器中正确显示网页，其为HTML5的通用声明

<html>

<head>

<title>菜鸟教程(runoob.com)</title>——页面标题

</head>

<body>——只有<body>标签里的内容才会显示在浏览器中

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>

</html>

2．HTML基础

2.1 html标题<head></head>

标题是通过<h1> - <h6> 标签来定义的，<h1>→<h6>标题字体越来越小，即<h1> 定义最大的标题。 <h6> 定义最小的标题。

2.2 html段落<p></p>

段落是通过标签 <p> 来定义的

2.3 html链接<a></a>

链接是通过标签 <a> 来定义的，如<a href=“指定的链接地址”>这是一个链接</a>

在 href 属性中指定链接的地址

2.4 html图像< img ></ img >

图像是通过标签 <img> 来定义的，如<img src="/images/logo.png" width="258" height="39" />，在src属性中指定图像位置

3．HTML元素

3.1<开始标签>元素内容</结束标签>

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

HTML 元素以开始标签起始，如<p>

HTML 元素以结束标签终止，如</p>

元素的内容是开始标签与结束标签之间的内容，如这是一个段落。

3.2空元素

某些 HTML 元素具有空内容，空元素在开始标签中进行关闭（以开始标签的结束而结束）。

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

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。

实例：<p>这个<br>段落<br>演示了分行的效果</p>

4.HTML属性

4.1 html属性常用引用属性值

属性一般描述于开始标签。

属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。但是当属性值本身就含有双引号，那么必须使用单引号，如name='John "ShotGun" Nelson'。

4.2 html属性参考手册常用

<!—写上注释内容-->定义注释

<hr>定义水平线，hr元素可用于分隔内容，如

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

<hr>

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

<hr>

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

<html>定义 HTML 文档

<head>定义关于文档的信息

<title>定义文档的标题

<h1> <h6>定义 HTML 标题

<body>定义文档主体

<main>定义文档的主体部分。

<aside>定义页面的侧边栏内容

<br>定义换行

<button>定义一个点击按钮

<caption>定义表格标题

<datalist>定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值

<div>定义文档中的节

<header>定义了文档的头部区域

5.HTML文本格式化

5.1html格式化标签

使用标签 <b> 与 <i>对输出的文本进行格式, 如：粗体(bold)/斜体(italic)

实例：<b>加粗文本</b> <i>斜体文本</i> <b><i>斜体加粗文本</i></b>

通常标签 <strong> 代替加粗标签 <b> 来使用, <em>代替<i>标签使用。然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。

5.2实例：删除字效果、插入字效果

<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

如，<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

5.3实例：文本方向

<bdo> 标签用来覆盖默认的文本方向。

如，<p>该段落文字从左到右显示。</p>

<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

6.HTML链接

6.1 html超链接

HTML使用标签 <a> 来设置超文本链接，在标签 <a> 中使用了 href 属性来描述链接的地址。

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

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

6.2 html链接语法

<a>元素具有以下属性：

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。

如，<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>，表示在新窗口打开文档。

title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

6.3各类链接

"链接文本" 不必一定是文本，图片或其他 HTML 元素都可以成为链接。

文本链接：最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：<a href="https://www.example.com">访问示例网站</a>
图像链接：您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。

例如：<a href="https://www.example.com">

</a>

锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。

例如：<a href="#section2">跳转到第二部分</a>

下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：<a href="document.pdf" download>下载文档</a>

7.HTML头部

7.1 <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

7.2<title> 元素

<title> 标签定义了不同文档的标题，显示在搜索引擎结果页面的标题。

7.3<style> 元素

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

<head>

body {

background-color:yellow;

}

p {

color:blue

}

</style>

</head>

7.4<meta> 元素

如，<meta charset="utf-8">

7.5<link> 元素

<head>

</head>

7.6<script> 元素

7.7<base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接，如，<base href="http://www.runoob.com/images/" target="_blank">

8. HTML 样式- CSS

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

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

内联样式- 在HTML元素中使用"style" 属性

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

外部引用 - 使用外部 CSS 文件（最好的方式）

8.1内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性，如，<p style="color:blue;margin-left:20px;">这是一个段落。</p>

font-family（字体），color（字体颜色），font-size（字体大小），background-color（背景颜色），margin-left（距离左侧边缘的距离），text-align（文字对齐方式）

表示字体样式为arial，字体颜色为红色，字体大小为20px，这个段落的背景颜色为绿色，文字居中。

8.2内部样式表

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

<head>

<style type="text/css">

body {background-color:yellow;} <!—整个主体背景颜色 -->

p {color:blue;} 

</style>

</head>

8.3外部引用

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

<head>

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

</head>

9.HTML图像

定义图像的语法是<img src="url" alt="some_text">

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

图像由<img> 标签定义，<img> 是空标签，即它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

9.2Alt属性

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

如，<p>

一个图像:

</p>

<p>

一个动图:

</p>

图像与动图显示不出来，此时就显示可替换文本，告诉读者该处有什么样的图像与动图。

9.3图像高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度，属性值默认单位为像素，这是一个很好的习惯。

10. HTML 表格

表格由 <table> 标签来定义，<tr>表示表格的一行，<td>表示表格的数据单元格，<th>表示表格的表头单元格，<caption >表格标题，<tfoot > 表格页脚，<table border="1"></table>表示表格带边框，<col>表格的列。

<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。

<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题。

<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据。

10.1水平/垂直表头标题的表格

实例1（水平表头标题）：

<tr>

</tr>

<tr>

</tr>

</table>

实例2（垂直表头标题）：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

10.2带有表格标题的表格

实例：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

10.3单元格跨行、跨列

实例1（单元格跨两列）：

<h4>单元格跨两列:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

实例2（单元格跨两行）：

<h4>单元格跨两行:</h4>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

10.4单元格边距（单元格内容与其边框之间的空白）

没有单元格边距：<table border="1"> </table>

有单元格边距：<table border="1" cellpadding="20"> </table>

10.5单元格间距（单元格之间的距离）

有单元格间距：<table border="1" cellspacing="10"> </table>

11.HTML列表

HTML 支持有序、无序和定义列表。

11.1有序列表（列表项使用数字、大写字母、小写字母、罗马数字、小写罗马数字来标记）

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

11.1.1数字列表

<ol>

</ol>

11.1.2.大写字母列表

</ol>

11.1.3.小写字母列表

</ol>

11.1.4.罗马数字列表

</ol>

11.1.5.小写罗马数字列表

</ol>

11.2无序列表（此列项目使用粗体圆点、圆圈、正方形进行标记）

无序列表使用 <ul> 标签。

11.2.1圆点列表（默认）

<ul>

</ul>

或者

</ul>

11.2.2圆圈列表

……..

</ul>

11.2.3正方形列表

……..

</ul>

11.3自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

12. HTML区块

12.1块级元素

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

实例: 标题<h1>, 段落<p>, 列表<ul>, 表格<table>

12.1.1<div> 元素

<div> 元素没有特定的含义。它属于块级元素，可用于组合其他 HTML 元素的容器，且浏览器会在其前后显示折行。还可以用于文档布局。与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的默认样式为块级显示，会以块的形式占据可用空间。

12.2内联元素

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

实例: 加粗文本<b>，超链接<a>，图像<img>

12.2.1<span> 元素

<span> 元素也没有特定的含义。<span> 元素是内联元素，可用作文本的容器。当与CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<span> 元素的默认样式为行内显示，它不会独占一行，只占据其内容的宽度。

13. HTML布局

大多数网站会把内容安排到多个列中。可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

注：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据，表格不是布局工具！

实例：使用五个 div 元素来创建多列布局

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

HTML<br>

CSS<br>

JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

版权 © runoob.com</div>

</div>

14. HTML表单

HTML 表单用于收集用户的输入信息，通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

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

<form> 元素用于创建表单；

action 属性定义了表单数据提交的目标 URL；

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

<label> 元素用于为表单元素添加标签，提高可访问性。

<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。

<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

14.1输入元素

输入标签 <input>，其输入类型是由 type 属性定义。

14.2文本域（Text Fields）

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

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

文本框（可输入文字）：

我是一个文本框。

</textarea>

14.3密码字段

密码字段通过标签 <input type="password"> 来定义。密码字段字符不会明文显示，而是以星号*或圆点.替代

<form>

Password: <input type="password" name="pwd">

</form>

14.4单选按钮（Radio Buttons）

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

<input type="radio" name="sex" value="female">女

</form>

14.5复选框（Checkboxes）

<input type="checkbox"> 定义了复选框。

<form>

<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>

<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车

</form>

14.6提交按钮 (Submit)

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理。

Username: <input type="text" name="user">

</form>

14.7下拉列表

</select>

默认预选的是第一个选项。

注：预选下拉列表需要在标签里添加selected，即如果想要预选的是UK，则<option value="uk">UK</option>应改为 <option value="uk" selected>UK</option>

14.8表单发送邮件

Name:<br>

E-mail:<br>

Comment:<br>

</form>

15. HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

15.1 <iframe> 标签

15.2 iframe-设置高度与宽度

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

15.3 iframe-移除边框

frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框。

15.4使用ifram来显示目标链接页面

iframe 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性。

<p>

<a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a>

</p>

点击链接之前：

点击链接之后，窗口显示的runoob页面：

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

16. HTML颜色

HTML 颜色由红色、绿色、蓝色混合而成。HTML 颜色由一个十六进制符号来定义，这个符号由红色red、绿色green和蓝色blue的值组成（RGB）。每种颜色的最小值是0（十六进制：#00），最大值是255（十六进制：#FF）。如，黑色的十六进制符号为#000000，颜色RGB为 rgb(0,0,0)。

16.1十六进制设置颜色

通过十六进制设置背景颜色

</p>

16.2RGB设置颜色

通过 rgb 值设置背景颜色

</p>

16.3颜色名设置颜色

通过颜色名设置背景颜色

</p>

16.4RGBA

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

通过 rbg 值设置背景颜色

</p>

17. HTML颜色名

141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。

18. HTML颜色值

十六进制值的写法为 # 号后跟3个或6个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

19. HTML脚本

19.1<script> 标签

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

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

document.write("Hello World!");

</script>

19.2<noscript> 标签

如：

document.write("Hello World!")

</script>

20. HTML字符实体

20.1实体

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。

如需显示小于号，我们必须这样写：实体名称：&lt或实体编号：&#60

如需显示大于号，我们必须这样写：实体名称：&gt或实体编号：&#62

20.2不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。

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

注：虽然 html 不区分大小写，但实体字符对大小写敏感。

21. HTML统一资源定位器URL

URL 是一个网页地址。URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址：192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。

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

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http。常见的 URL Scheme：①http—超文本传输协议，不加密。②https—安全超文本传输协议，安全网页，加密所有信息交换。③ftp—文件传输协议，用于将文件下载或上传至网站。④file—计算机上的文件。
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com

4 :port - 定义主机上的端口号（http 的默认端口号是 80）

5. path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

6. filename - 定义文档/资源的名称

22. HTML速查列表（常用记住！）

22.1 HTML 基本文档

<!DOCTYPE html>

<html>

<head>

</head>

<body>

可见文本...

</body>

</html>

22.2基本标签

<h1>最大的标题</h1>

<h6>最小的标题</h6>

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

<br> （换行）

<hr> （水平线）

22.3文本格式化

<code>计算机代码</code>

<pre>预格式化文本</pre>

<small>更小的文本</small>

<strong>重要的文本</strong>

<abbr> （缩写）

<address> （联系信息）

<bdo> （文字方向）

<blockquote> （从另一个源引用的部分）

<cite> （工作的名称）

<del> （删除的文本）

<ins> （插入的文本）

<sub> （下标文本）

<sup> （上标文本）

22.4链接

普通的链接：<a href="http://www.example.com/">链接文本</a>

图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>

邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>

书签：

<a href="#tips">跳到提示部分</a>

22.5图片

22.6样式/区块

h1 {color:red;}

p {color:blue;}

</style>

<div>文档中的块级元素</div>

<span>文档中的内联元素</span>

22.7无序列表

<ul>

</ul>

22.8有序列表

<ol>

</ol>

22.9定义列表

<dl>

</dl>

22.10表格（Tables）

<tr>

</tr>

<tr>

</tr>

</table>

22.11框架（Iframe）

22.12表单（Forms）

</select>

</form>

22.13实体

< 等同于 <

> 等同于 >

23. HTML标签简写及全称

alt→ alter→替用(一般是图片显示不出的提示)

b → Bold →粗体（文本）

bdo→Bi-Directional Override→文本显示方向

br→Break → 换行

dd →Definition Description→定义描述

div→Division→分隔

dl →Definition List →定义列表

dt→ Definition Term→定义术语

em→Emphasized→ 加重（文本）

href→hypertext reference→超文本引用

i → Italic→斜体（文本）

iframe→Inline frame→定义内联框架

ins→Inserted→插入（的文本）

kbd→Keyboard →键盘（文本）

li→ List Item→列表项目

nl→navigation lists→导航列表

ol →Ordered List→排序列表

p →Paragraph→段落

pre→Preformatted→预定义格式（文本）

q →Quotation →引用语

rel→Reload→加载

strong→Strong→加重（文本）

sub→Subscripted→下标（文本）

sup→Superscripted→上标（文本）

td→table data cell→表格中的一个单元格

th →table header cell → 表格中的表头

tr →table row→表格中的一行

u →Underlined →下划线（文本）

ul →Unordered List →不排序列表

var→Variable→变量（文本）

24. HTML总结

学习完HTML要学习CSS与JavaScript

24.1学习 CSS

CSS被用来同时控制多重网页的样式和布局。

通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。

24.2学习 JavaScript

JavaScript 可以让你的网页更加生动。

如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。

JavaScript是互联网上最流行的脚本语言，目前所有主流浏览器都支持Javascript。

Thought-bubble

关注

0
点赞
踩
0

收藏

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

学习完HTML要学习CSS与JavaScript24.1学习 CSSCSS被用来同时控制多重网页的样式和布局。通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。24.2学习 JavaScriptJavaScript 可以让你的网页更加生动。如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。JavaScript是互联网上最流行的脚本语言，目前所有主流浏览器都支持Javascript。
复制链接

扫一扫