当前位置：首页 > article >正文

前端知识——HTML基础

article 2025/1/26 15:16:48

Html简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

Html基本结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		 <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>标题</title>
	</head>
	<body>
	</body>
</html>

Html超链接

基础语法

<a href="URL">链接文本</a>

a 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。

Html链接属性

href：定义链接目标。

这是超链接最重要的属性，用来指定链接的目的地，可以是另一个网页、文件、邮件、电话号码或 JavaScript。

target：定义链接的打开方式

_blank: 在新窗口或新标签页中打开链接。
_self: 在当前窗口或标签页中打开链接（默认）。
_parent: 在父框架中打开链接。
_top: 在整个窗口中打开链接，取消任何框架。

rel：定义链接与目标页面的关系

nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。
noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题，尤其是使用 target=“_blank” 时。
- noopener: 防止新的浏览上下文（页面）访问window.opener属性和open方法。
- noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）。
- noopener noreferrer: 同时使用noopener和noreferrer。例子: 安全链接

download：提示浏览器下载链接目标而不是导航到该目标。

如果指定了文件名，浏览器会提示下载并保存为指定文件名。

实例
<a href="file.pdf" download="example.pdf">下载文件</a>

title：定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示。

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

id：用于链接锚点，通常在同一页面中跳转到某个特定位置。

实例

<!-- 链接到页面中的某个部分 -->
<a href="#section1">跳转到第1部分</a>
<div id="section1">这是第1部分</div>

hreflang: 指定链接的目标URL的语言

实例
<a href="https://www.example.com/es" hreflang="es">访问西班牙语网站</a>

type: 指定链接资源的MIME类型

实例
<a href="style.css" type="text/css">样式表</a>

class: 用于指定元素的类名（CSS中定义）

实例
<a href="https://www.example.com" class="external-link">外部链接</a>

style: 直接在元素上定义CSS样式

实例
<a href="https://www.example.com" style="color: red;">红色链接</a>

Html表格

HTML 表格由

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

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

简单表格：

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

HTML 表格和边框属性

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

HTML 表格表头

表格的表头使用标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

实例

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <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>

HTML列表

ul : 无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

ol : 有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML div 和 span

HTML 区块元素

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

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

实例: h1, p, ul, table

HTML 内联元素

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

实例: b, td, a, img

HTML div 元素

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

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

如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。

div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用

元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。

HTML span 元素

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

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

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

HTML 表单

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

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

HTML 表单 - 输入元素

文本框

<form>
	First name: <input type="text" name="firstname"><br>
	Last name: <input type="text" name="lastname">
</form>

密码字段

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

单选按钮

<form action="">
	<input type="radio" name="sex" value="male">男<br>
	<input type="radio" name="sex" value="female">女
</form>

复选框

<form>
	<input type="checkbox" name="vehicle[]" value="Bike">我喜欢自行车<br>
	<input type="checkbox" name="vehicle[]" value="Car">我喜欢小汽车
</form>

提交按钮

<form name="input" action="html_form_action.php" method="get">
	Username: <input type="text" name="user">
	<input type="submit" value="Submit">
</form>

文本域

<textarea rows="10" cols="30">
	我是一个文本框。
</textarea>

HTML 框架

基础语法：

<iframe src="URL"></iframe>

iframe - 设置高度与宽度

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

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

iframe - 移除边框

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

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

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

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

HTML字符实体

在这里插入图片描述

Html标签

标签	描述
基础
!DOCTYPE	定义文档类型。
html	定义一个 HTML 文档
title	为文档定义一个标题
body	定义文档的主体
h1 to h6	定义 HTML 标题
p	定义一个段落
br	定义简单的折行。
hr	定义水平线。
!–…–	定义一个注释
格式
acronym	HTML5不再支持。定义只取首字母的缩写。
abbr	定义一个缩写。
address	定义文档作者或拥有者的联系信息。
b 定义粗体文本。
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置。
bdo	定义文本的方向。
blockquote	定义块引用。
cite	定义引用(citation)。
code	定义计算机代码文本。
del	定义被删除文本。
dfn	定义定义项目。
em	定义强调文本。
i	定义斜体文本。
ins	定义被插入文本。
kbd	定义键盘文本。
mark	定义带有记号的文本。
meter	定义度量衡。仅用于已知最大和最小值的度量。
pre	定义预格式文本
progress	定义运行中的任务进度（进程）。
q	定义短的引用。
rp	定义不支持 ruby 元素的浏览器所显示的内容。
rt	定义字符（中文注音或字符）的解释或发音。
ruby	定义 ruby 注释（中文注音或字符）。
s	定义加删除线的文本。
samp	定义计算机代码样本。
small	定义小号文本。
strong	定义语气更为强烈的强调文本。
sub	定义下标文本。
sup	定义上标文本。
time	定义一个日期/时间
u	定义下划线文本。
var	定义文本的变量部分。
wbr	规定在文本中的何处适合添加换行符。
表单
form	定义一个 HTML 表单，用于用户输入。
input	定义一个输入控件
textarea	定义多行的文本输入控件。
button	定义按钮。
select	定义选择列表（下拉列表）。
optgroup	定义选择列表中相关选项的组合。
option	定义选择列表中的选项。
label	定义 input 元素的标注。
fieldset	定义围绕表单中元素的边框。
legend	定义 fieldset 元素的标题。
datalist	规定了 input 元素可能的选项列表。
keygen	规定用于表单的密钥对生成器字段。
output	定义一个计算的结果
框架
iframe	定义内联框架。
图像
img	定义图像。
map	定义图像映射。
area	定义图像地图内部的区域。
canvas	通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
figcaption	定义一个 caption for a figure element
figure	figure 标签用于对元素进行组合。
Audio/Video
audio	定义声音，比如音乐或其他音频流。
source	定义media元素 (video 和 audio)的媒体资源。media
track	为媒体(video 和 audio)元素定义外部文本轨道。
video	定义一个音频或者视频
链接
a	定义一个链接
link	定义文档与外部资源的关系。
main	定义文档的主体部分。
nav	定义导航链接
列表
ul	定义一个无序列表
ol	定义一个有序列表
li	定义一个列表项
dir	HTML5不再支持。 HTML 4.01 已废弃。定义目录列表。
dl	定义一个定义列表
dt	定义一个定义定义列表中的项目。
dd	定义定义列表中项目的描述。
menu	定义菜单列表。
command	定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
表格
table	定义一个表格
caption	定义表格标题。
th	定义表格中的表头单元格。
tr	定义表格中的行。
td	定义表格中的单元。
thead	定义表格中的表头内容。
tbody	定义表格中的主体内容。
tfoot	定义表格中的表注内容（脚注）。
col	定义表格中一个或多个列的属性值。
colgroup	定义表格中供格式化的列组。
样式/节
style	定义文档的样式信息。
div	定义文档中的节。
span	定义文档中的节。
header	定义一个文档头部部分
footer	定义一个文档底部
section	定义了文档的某个区域
article	定义一个文章内容
aside	定义其所处内容之外的内容。
details	定义了用户可见的或者隐藏的需求的补充细节。
dialog	定义一个对话框或者窗口
summary	定义一个可见的标题。当用户点击标题时会显示出详细信息。
元信息
head	定义关于文档的信息
meta	定义关于 HTML 文档的元信息。
base	定义页面中所有链接的默认地址或默认目标。
程序
script	定义客户端脚本。
noscript	定义针对不支持客户端脚本的用户的替代内容。
embed	定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
object	定义嵌入的对象。
param	定义对象的参数。