前端Web学习笔记-HTML基础学习

Esensen

已于 2023-08-09 22:04:56 修改

阅读量244

点赞数

文章标签：前端 html 学习

于 2022-12-20 18:13:01 首次发布

本文链接：https://blog.csdn.net/qq_43646405/article/details/128374512

版权

1.HTML概述

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML文档后缀名：

.html
.htm

HTML5代码实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
</head>
<body>

</body>
</html>

1.<!DOCTYPE html> 声明为 HTML5 文档
2.<html> 元素是 HTML 页面的根元素
3.<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
4.<title> 元素描述了文档的标题
5.<body> 元素包含了可见的页面内容

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

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

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

HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:

HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

HTML <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

HTML <script> 元素
<script>标签用于加载脚本文件，如： JavaScript。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">

2.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
属性：是 HTML 元素提供的附加信息。属性一般描述于开始标签。属性总是以名称/值对的形式出现，比如：name=“value”。

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

3.HTML常见标签

3.1标题标签

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。

示例代码：
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

在这里插入图片描述

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

<h1>h1标题</h1>
<hr />
<h2>h2标题</h2>
<hr />

在这里插入图片描述

3.2段落标签

HTML 可以将文档分割为若干段落。段落是通过 <p> 标签定义的。
注意：浏览器会自动地在段落的前后添加空行。

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

在这里插入图片描述

HTML换行

不产生一个新段落的情况下进行换行（新行），使用 <br> 标签

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

在这里插入图片描述

3.3文本格式化

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

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

在这里插入图片描述

3.4超链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
在标签<a> 中使用了href属性来描述链接的地址。

<a href="https://www.baidu.com/">访问百度!</a>

在这里插入图片描述

属性	值	描述
href	URL	规定链接的目标URL。
hreflang	language_code	规定目标URL的基准语言。仅在href属性存在时使用。
target	_blank、_parent、_self、_top、framename	规定在何处打开目标 URL。仅在 href 属性存在时使用。_blank：新窗口打开、_parent：在父窗口中打开链接、_self：默认，当前页面跳转、_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
charset	char_encoding	HTML5 不支持。规定目标 URL 的字符编码。
download	filename	指定下载链接。
media	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。

3.5图片

在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

<img src="https://www.baidu.com/img/bdlogo.png" >

在这里插入图片描述

属性	值	描述
align	top\bottom\middle\left\right	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的文本来排列图像。
loading	eager:立即加载 lazy:延迟加载	指定浏览器是应立即加载图像还是延迟加载图像。
alt	text	规定图像的替代文本（无法加载到图片显示的文本）。
border	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像周围的边框。
crossorigin	anonymous\use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度。
width	pixels	规定图像的宽度。
src	URL	规定显示图像的 URL。

3.6表格

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

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在这里插入图片描述

3.6.1 th

<th> 标签定义 HTML 表格中的表头单元格。

HTML 表格有两种单元格类型：
	表头单元格 - 包含头部信息（由 <th> 元素创建）
	标准单元格 - 包含数据（由 <td> 元素创建）
<th> 元素中的文本通常呈现为粗体并且居中。
<td> 元素中的文本通常是普通的左对齐文本。

如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性！

3.6.2 tr

<tr> 标签定义 HTML 表格中的行。
一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。

3.6.3 td

<td> 标签定义 HTML 表格中的标准单元格。

如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性！

3.6.4 caption

<caption> 标签定义表格的标题。
<caption> 标签必须直接放置到 <table> 标签之后。
您只能对每个表格定义一个标题。
提示：通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

3.6.5 colgroup

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。
提示：如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签

3.6.6 col

<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。
通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

3.6.7 thead

<thead> 标签用于组合 HTML 表格的表头内容。
<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。
通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

3.6.8 tbody

<tbody> 标签用于组合 HTML 表格的主体内容。
<tbody> 元素应该与 <thead> and <tfoot> 元素结合起来使用，用来规定表格的各个部分（主体、表头、页脚）。
<tbody> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后。

3.6.9 tfoot

<tfoot> 标签用于组合 HTML 表格的页脚内容。
<tfoot> 元素应该与 <thead> 和 <tbody> 元素结合起来使用，用来规定表格的各个部分（页脚、表头、主体）。
<tfoot> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。

3.6列表

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

3.6.1 无须列表

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

3.6.2 有序列表

有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。

3.6.3 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

3.7区块

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

3.7.1 div

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

3.7.2 span

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

3.8表单

HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

可以使用 <form> 标签来创建表单

<form> 标签用于创建供用户输入的 HTML 表单, <form> 元素包含一个或多个如下的表单元素：
<input>  <textarea>  <button>  <select>  <option>  <optgroup>  <fieldset>  <label>

3.8.1 input

多数情况下被用到的表单标签是输入标签 <input>。输入类型是由 type 属性定义。

文本域

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

密码字段

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

单选按钮（Radio Buttons）

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

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框。复选框可以选取一个或多个选项

提交按钮(Submit)

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

3.9脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

Esensen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端Web学习笔记-HTML基础学习

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。.html.htmHTML5代码实例DOCTYPE html > 声明为 HTML5 文档2. < html > 元素是 HTML 页面的根元素3. < head > 元素包含了文档的元（meta）数据，如 < meta charset = " utf-8 " > 定义网页编码格式为 utf-8。4. < title > 元素描述了文档的标题。
复制链接

扫一扫