HTML基础知识简要概括

最新推荐文章于 2024-07-08 17:28:27 发布

ᥫᩣ．Miraitowa

最新推荐文章于 2024-07-08 17:28:27 发布

阅读量863

点赞数 22

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/2401_82930760/article/details/136682476

版权

HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name="value"。

HTML语法

标记不区分大小写
允许属性值不使用引号
允许部分属性值的属性省略

HTML的标记

双标记和单标记

双标记：

<标记名>内容</标记名>

eg：<h1>这是我的第一个标题</h1>

单标记：</标记名>

eg：<hr/>为单标记，用于定义一条水平线

2. 注释标记

<!—注释语句-->

3. 标记的属性

<标记名属性1=“属性值” 属性2 = “属性值2”……><标记名/>

（1）属性之间不分先后顺序，标记名与属性，属性与属性之间均以空格分开。任何标记的属性都有默认值，省略该属性则取默认值。

eg: <h1 align = “center”>标题文本</h1>

其中align为属性名，center为属性值，表示标题文本居中对齐。左对齐右对齐，对应的属性值分别为left和right。

（2）标记的嵌套

eg：

<p>传智云课堂是<strong>传智播客</strong>在教育平台</p>

<strong>将段落文本加粗标记

<em>将段落文本倾斜标记

<h>标记设置文字加粗或更改文字大小

（3）内嵌样式标记<style>

换行标记<br/>,虽然可以实现换行的效果，但是并不能取代结构标记<p>、<h>等。

文本格式化标记：

图像的标记<img/>

<img src=”图像URL”/> src属性用于指定图像文件的路径和文件名。

<img/>标记的属性

vspace调整图像的垂直边距

hspace 调整图像的水平边距

相对路径和绝对路径

路径：表示文件位置的方式

绝对路径：就是网页上的文件或目录在硬盘上的真正路径
相对路径：不带盘符，通常以HTML网页为起点，通过层级关系关系描述目标图像的位置。

超链接标记

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

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

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

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

HTML 链接语法

以下是 HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

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

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

注意：

暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”（即href=“#”），表示该链接暂时为空链接。
不仅可以在文本中创建超链接，还可以在各种网页元素（如图像，音频，视频等）中添加超链接。
图像超链接在低版本的IE浏览器中会自动添加边框效果，去掉链接图像的边框只需要将边框定义为0即可。
文本链接：最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：

<a href="https://www.example.com">访问示例网站</a>

5. 图像链接：您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：

</a>

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

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

7.下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：

列表元素

HTML无序列表

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

无序列表使用 <ul> 标签

示例如下：

结果如下：

HTML 有序列表

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

列表项使用数字来标记。

结果如下：

HTML 自定义列表

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

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

结果如下：

结构元素

HTML <head> 元素

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

可以添加在头部区域的元素标签为: <title>, <style>, <meta>,

HTML <base> 元素

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

实例

HTML <link> 元素

实例

HTML <style> 元素

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

HTML <script> 元素

元素标签及其描述：

<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

HTML 表格

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格示例：

结果如下：

<table>标签常用属性

<td>的常用属性有两个：rowspan用于定义单元格跨列，colspan用于定义单元格跨行。

示例：

结果如下：

HTML 表格标签

<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

HTML <div> 和<span>

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

HTML 区块元素

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

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

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

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

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

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

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

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

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

HTML <span> 元素

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

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

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

HTML 表单和输入

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

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

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

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

代码示例：

结果如下：

文本域（Text Fields）

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

示例：

结果：

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

复选框（Checkboxes）

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

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

示例：

结果：

提交按钮(Submit)

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

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

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

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

HTML 表单标签

标签		描述
<form>		定义供用户输入的表单
<input>		定义输入域
<textarea>		定义文本域 (一个多行的输入控件)
<label>		定义了 <input> 元素的标签，一般为输入标题
<fieldset>		定义了一组相关的表单元素，并使用外框包含起来
<legend>		定义了 <fieldset> 元素的标题
<select>		定义了下拉选项列表
<optgroup>		定义选项组
<option>		定义下拉列表中的选项
<button>		定义一个点击按钮
<datalist>		指定一个预先定义的输入控件选项列表
<keygen>		定义了表单的密钥对生成器字段
<output>		定义一个计算结果

ᥫᩣ．Miraitowa

关注

22
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识简要概括

表单是一个包含表单元素的区域。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”（即href=“#”），表示该链接暂时为空链接。：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。：指定链接目标的URL，这是链接的最重要属性。不仅可以在文本中创建超链接，还可以在各种网页元素（如图像，音频，视频等）中添加超链接。
复制链接

扫一扫