HTML新手入门笔记整理：HTML基本标签

news2025/1/17 13:56:38

结构标签

<html> </html>

告诉浏览器这个页面是从<html> 开始，到 </html>结束

<head> </head>

网页的头部，用于定义一些特殊内容，如页面标题、定时刷新、外部文件等。

<body> </body>

是网页的身体，大部分代码，都是在这个标签内编写

<title> </title>

定义浏览器栏目的标题

<head> </head>内部标签（了解即可）

在HTML中，只有一些特殊的标签才能在head标签内，一般有6个。

title标签

在HTML中，title标签唯一的作用就是定义网页的标题。

meta标签（单标签）

在HTML中，meta标签，一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta就是用来告诉“搜索蜘蛛”这个页面是做什么的。

name属性

keywords

网页搜索关键字，可以是多个

description

网页的描述与介绍

author

网页的作者

copyright

版权信息

<!--网页关键字-->
<meta name="keywords" content="这个网页是干嘛的，科技互联网，设计开发"/>

<!--网页描述-->
<meta name="description" content="这个网页的作用是什么"/>

<!--本页作者-->
<meta name="author" content="helicopter">

<!--版权声明-->
<meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。"/>

http-equiv属性

  • 定义网页所使用的编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<!--H5中简写-->
<meta  charset=utf-8"/>
  • 定义网页自动刷新跳转
<!--当前页面在6秒后会自动跳转到其他页面-->
<meta http-equiv="refresh" content="6";url="url"/>

style标签

用于定义元素的CSS样式。

  • 语法
<style type="text/css">
/*这里写CSS样式*/
</style>

script标签

用于定义页面Javascript代码，也可引入外部Javascript文件。

  • 语法
<script>
/*这里写JavaScript代码*/
</script>

link标签

用于引入外部样式文件（CSS文件）

  • 语法
<link type="text/css" rel="stylesheet" href="css/index.css

文本标签

标题标签

<h1> 一级标题 </h1>

<h2> 二级标题 </h2>

<h3> 三级标题 </h3>

<h4> 四级标题 </h4>

<h5> 五级标题 </h5>

<h6>六级标题 </h6>

段落标签

<p> </p> 段落标签，用于定义一段文字。（默认字体大小16px）

换行标签

<br/> (单标签）

<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p >

预览效果

格式标签

常用

粗体标签

<strong></strong> / <b></b>

斜体标签

<i></i> / <em></em> / <cite></cite>

上标标签

<sup></sup>

下标标签

<sub></sub>

中划线标签

<s></s>

下滑线标签

<u></u>

大字号标签

<big></big>

小字号标签

<small></small>

其他

定义已经被插入文档中的文本

<ins> </ins>

定义文档中已删除的文本

<del> </del>

表示一个缩写词或者首字母缩略词

<abbr> </abbr>

定义文字方向

<bdo> </bdor>

定义短的引用语

<q> </q>

水平线标签

<hr/> (单标签）

超链接标签

<a href=“url"> </a> （在 href 属性中指定链接的地址。）

属性

href

指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。

target（可选）

指定链接如何在浏览器中打开，值包括：

_blank（在新标签或窗口中打开链接）

_self（在当前标签或窗口中打开链接）

_parent（在父窗口打开链接）

_top（在顶层窗口打开链接）

title（可选）

提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。

rel（可选）

指定与链接目标的关系，如 nofollow、noopener 等。

锚点链接

在HTML中，锚点链接其实是内部链接的一种，它的链接地址（也就是href）指向的是当前页面的某个部分。所谓锚点链接，简单地说，就是单击某一个超链接，它就会跳到当前页面的某一部分。

想要实现锚点链接，需要定义以下2个参数。

  • 目标元素的id
  • a标签的href属性指向该id。

给a标签的href属性赋值时，需要在id前面加上“#”（井号），用来表示这是一个锚点链接。

语法

<a href="#abcd"> </a>

图片标签

<img> (单标签）

<img src="/images/logo.png"  alt="图片提示信息"  width="258" height="39" />

属性

src

src 指 "source"。源属性的值是图像的 URL 地址。

alt

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

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

title

title属性也用于图片描述，不过这个描述文字是给用户看的。当鼠标指针移到图片上时，会显示title中的文字。

height

高度

width

宽度

div标签

全称division（分区）用于划分HTML结构，使代码更具有逻辑性。

表格标签

基本结构

表格由三部分组成

  • 表格：table标签
  • 行：tr标签
  • 单元格：tb标签
  • <table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示单元格的开始和结束。
  • 在表格中，有多少组“<tr></tr>，就表示有多少行

语法

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

默认情况下，表格是没有边框的。

表格标题：caption

一个表格只能有一个标题，也就只能有一个caption标签。默认标题位于表格的第一行。

语法

<table>
    <caption>表格标题</caption>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

表头单元格：th

  • 在HTML中，单元格有两种，一种是“表头单元格”，使用th标签；另外一种是“表行单元格”，使用的是td标签。
  • th指的是table header cell（表头单元格）。td指的是table data cell（表行单元格）。
  • 列表标签

  • 显示上：浏览器会以“粗体”和“居中”来显示标签中的内容，但td标签不会。
  • 语义上：th标签用于表头，而td标签用于表行。

表头thead、表身tbody、表脚tfoot

  • thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。
  • 表脚（tfoot）往往用于统计数据。对于thead、tbody和tfoot标签，不一定需要全部都用上，如tfoot就很少用。一般情况下，我们根据实际需要来使用这些标签。
  • 此外，thead、tbody和tfoot除了可以使代码更具有语义，还有另外一个重要作用：方便分块来控制表格的CSS样式。
  • 可以让你的代码更具有逻辑性，并且还可以很好地结合CSS来分块控制样式。

语法

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格3</td>
            <td>表行单元格4</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格5</td>
            <td>标准单元格6</td>
        </tr>
    </tfoot>
</table>

合并行：rowspan

在HTML中，我们可以使用 rowspan属性 来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。

语法

<td rowspan="跨域的行数"></td>

合并列：colspan

在HTML中，我们可以使用 colspan属性 来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

语法

<td colspan="跨域的列数"></td>

列表标签

有序列表

  • 有序列表各个列表项是有顺序的。从<ol>开始，到</ol>结束。一般采用数字或字母作为顺序。默认采用数字顺序。
  • ol，即ordered list（有序列表）。li，即list（列表项）。
  • ol 标签和 li 标签需要配合一起使用，不可以单独使用，而且 <ol> 标签的子标签也只能是li标签，不能是其他标签。

语法

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

type属性

属性值

列表项符号

1

阿拉伯数字：1、2、3······

a

小写英文字母：a、b、c······

A

大写英文字母：A、B、C······

i

小写罗马数字：i、ii、iii······

I

大写罗马数字：I、II、III······

不同类型的有序列表

无序列表

  • 无序列表的列表项是没有顺序的。从<ul>开始，到</ul>结束。默认情况下，无需列表的列表项目符号是。
  • ul，即unordered list（无序列表）。li，即list（列表项）。
  • ul标签和li标签也需要配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。

语法

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

type属性

属性值

列表项符号

disc

实心圆

circle

空心圆

square

失信正方形

不同类型的无序列表

自定义列表

  • 定义列表由两部份组成：名词和描述。
  • dl即definition list（定义列表），dt即definition term（定义名词），而dd即definition description（定义描述）。
  • 在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。
<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

自定义列表

嵌套列表 嵌套列表 2

表单标签

form标签

所有的表单标签必须放在form标签内部才可有效。

属性

属性

值

描述

action

URL

提交地址：规定当提交表单时向何处发送表单数据。

name

text

规定表单的名称。

enctype

application/x-www-form-urlencoded
multipart/form-data
text/plain

编码方式：规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）

method

get
post

提交方式：规定用于发送表单数据的 HTTP 方法。

target

_blank
_self
_parent
_top

打开方式：规定在何处打开 action URL。

input标签

input是自闭合标签（单标签），它是没有结束符号的。

语法

<input type="表单类型"/>

type属性

属性值

浏览器效果

说明

text

单行文本框

password

密码文本框

radio

单选框

checkbox

多选框

button/submit/reset

普通/提交/重置按钮

file

文本上传

单行文本

语法

<input type="text" />

属性

属性

属性值

说明

value

text

设置文本框的默认值（占位文字）

size

10

设置文本框的长度

maxlenght

10

设置单行文本框中最多可以输入的字符数

密码文本框

在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。

语法

<input type="password" />

属性

属性

属性值

说明

value

text

设置文本框的默认值（占位文字）

size

10

设置文本框的长度

maxlenght

10

设置单行文本框中最多可以输入的字符数

单选框

语法

<input type="radio" name="组名" value="取值"/>

属性

属性

属性值

说明

name（必加）

text

选项组名

value（必加）

text

选项取值

checked

空值/checked

默认选中

复选框

语法

<input type="ceckbox" name="组名" value="取值"/>

属性

属性

属性值

说明

name（必加）

text

选项组名

value（必加）

text

选项取值

checked

空值/checked

默认选中

按钮

常见的按钮有3种：普通按钮（button），提交按钮（submit），重置按钮（reset）。

普通按钮

语法

<input type="button" value="取值"/>

提交按钮

用于给服务器提交数据。

语法

<input type="submit" value="取值"/>

重置按钮

用于清除用户在表单中输入的内容。

只能清除当前“所在form标签”内表单中内容，对于外部表单清除是无效的。

语法

<input type="reset" value="取值"/>

按钮标签 button

<button>按钮</button>

文件上传

语法

<input type="file" />

多行文本框 textarea

语法

<textarea rows="行数" cols="列数" value="取值" >默认内容</textarea>

下拉列表

语法

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

size属性

  • 设置下拉列表可以选择多项
  • 默认情况下，下拉列表只能选择一项。如果想要同时选取多项，首先要设置multiple属性，然后使用“Ctrl+鼠标左键”来选取。
  • 下拉列表multiple属性没有属性值

语法

<select multiple>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

size属性

设置下拉列表显示几个列表项，取值为整数。

语法

<select size="5">
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

Chrome浏览器要求最低是4个选项，因此我们只能设置4及以上的数字。

option标签属性

属性

属性值

说明

selected

无

是否选中

value

text

选项值

表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素，必须放在form标签内才有效。如果表单元素不需要与服务器进行交互，那就没必要放在form标签内。

内嵌框架 iframe

内嵌框架，是指在当前页面再嵌入另外一个网页。

语法

<iframe src="url" width="宽度值" height="高度值"> </iframe>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1239456.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2023年G2电站锅炉司炉证考试题库及G2电站锅炉司炉试题解析

2023年G2电站锅炉司炉证考试题库及G2电站锅炉司炉试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年G2电站锅炉司炉证考试题库及G2电站锅炉司炉试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试大纲…
阅读更多...
MySQL 事务的底层原理和 MVCC（二）

MySQL 事务的底层原理和 MVCC（二）

7.2. undo 日志 7.2.1. 事务回滚的需求 我们说过事务需要保证原子性&#xff0c;也就是事务中的操作要么全部完成&#xff0c;要么什么也不做。但是偏偏有时候事务执行到一半会出现一些情况&#xff0c;比如&#xff1a; 情况一&#xff1a;事务执行过程中可能遇到各种错误&a…
阅读更多...
Differences between package.json and pnpm-lock.yaml

Differences between package.json and pnpm-lock.yaml

1.pnpm-lock.yaml 是pnpm包管理工具生成的确保依赖包的版本在所有的环境里面都相同对依赖包的任何操作都会更新在该文件中&#xff0c;因此&#xff0c;需要确保提交到代码仓库中。包含了解析的依赖项和版本号。如下图&#xff1a; 2.package.json 列出应用所需的依赖和元数…
阅读更多...
LeetCode算法题解（动态规划）|LeetCode343. 整数拆分、LeetCode96. 不同的二叉搜索树

LeetCode算法题解（动态规划）|LeetCode343. 整数拆分、LeetCode96. 不同的二叉搜索树

一、LeetCode343. 整数拆分 题目链接&#xff1a;343. 整数拆分 题目描述&#xff1a; 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 示例 1: 输入…
阅读更多...
MySQL 8.2 Command Line Client打开时一闪而过闪退问题

MySQL 8.2 Command Line Client打开时一闪而过闪退问题

MySQL8.2安装成功后&#xff0c;发现打开MySQL 8.0 Command Line Client时出现一闪而过&#xff0c;打不开的情况。 解决方案&#xff1a; 1、打开MySQL 8.2 Command Line Client文件位置 2、右键选择属性 3、复制它的目标 4、我复制下来的目标路径是这样的&#xff0c;"…
阅读更多...
每日一题：LeetCode-589.N叉树的前序遍历

每日一题：LeetCode-589.N叉树的前序遍历

每日一题系列&#xff08;day 01&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50e…
阅读更多...
linux ld 链接器学习笔记

linux ld 链接器学习笔记

ld链接器笔记 1. 首先编写一段汇编代码 这里的汇编语法时 AT&T语法,是gcc原生支持的语法,底层使用 gas(gnu assembler) 完成汇编,相较于 Intel x86语法, AT&T 语法要更加古老,因此大多数人更加偏向于使用 Intel 的语法. nasm 编译器支持x86语法.自从2.10版本&#xf…
阅读更多...
四、文件包含漏洞

四、文件包含漏洞

一、文件包含漏洞 解释&#xff1a;文件包含漏洞是一种注入型漏洞&#xff0c;其本质就是输入一段用户能够控制的脚本或者代码&#xff0c;并让服务端执行&#xff1b;其还能够使得服务器上的源代码被读取&#xff0c;在PHP里面我们把可重复使用的函数写入到单个文件中&#x…
阅读更多...
Python 提高篇学习笔记(一)：深拷贝和浅拷贝

Python 提高篇学习笔记(一)：深拷贝和浅拷贝

文章目录 一、什么是对象的引用二、深拷贝和浅拷贝2.1 浅拷贝(Shallow Copy)2.2 深拷贝(Deep Copy)2.3 copy.copy和copy.deepcopy的区别 一、什么是对象的引用 在 Python 中&#xff0c;对象的引用是指变量指向内存中某个对象的地址或标识符。当你创建一个新的对象(比如一个整…
阅读更多...
Spring Boot创建和使用（重要）

Spring Boot创建和使用（重要）

Spring的诞生是为了简化Java程序开发的&#xff01; Spring Boot的诞生是为了简化Spring程序开发的&#xff01; Spring Boot就是Spring框架的脚手架&#xff0c;为了快速开发Spring框架而诞生的&#xff01;&#xff01; Spring Boot的优点&#xff1a; 快速集成框架&#x…
阅读更多...
代码随想录算法训练营第28天|93.复原IP地址 78.子集 90.子集II

代码随想录算法训练营第28天|93.复原IP地址 78.子集 90.子集II

JAVA代码编写 93 .复原IP地址 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 "192.168.1.1" 是 有效 IP 地址&…
阅读更多...
【Web实战】浅谈reactor netty httpclient请求解析过程

【Web实战】浅谈reactor netty httpclient请求解析过程

目录 0x00 前言 0x01 "畸形scheme"HTTP请求 0x02 其他 0x00 前言 Reactor Netty HttpClient 是 Reactor Netty 框架提供的一个用于进行异步 HTTP 请求的客户端库。它基于 Reactor 框架&#xff0c;采用响应式编程模型&#xff0c;允许以非阻塞的方式执行 HTTP 请…
阅读更多...
Audition 2024 24.0.0.46(音频剪辑)

Audition 2024 24.0.0.46(音频剪辑)

Audition 2024是一款非常棒的音频编辑和混合软件&#xff0c;提供了广泛的工具和功能&#xff0c;用于创建、编辑、混合和设计音效。这款软件旨在加速音频和视频制作工作流程&#xff0c;提供具有原始音效的高质量混音。其界面构成清晰&#xff0c;操作简便&#xff0c;适合专业…
阅读更多...
合并区间问题

合并区间问题

以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;intervals [[1,…
阅读更多...
七天.NET 8操作SQLite入门到实战 - 第三天SQLite快速入门

七天.NET 8操作SQLite入门到实战 - 第三天SQLite快速入门

前言 今天我们花费一个小时快速了解SQLite数据类型、SQLite常用命令和语法。 七天.NET 8操作SQLite入门到实战详细教程 第一天 SQLite 简介第二天 在 Windows 上配置 SQLite环境 EasySQLite项目源码地址 GitHub地址&#xff1a;https://github.com/YSGStudyHards/EasySQLite&…
阅读更多...
第2关：可变长整型数组类（成长版）

第2关：可变长整型数组类（成长版）

题目&#xff1a; 给出的头文件&#xff1a; #include <iostream> #include "array.h" using namespace std;int main() {Array a1;int n;cin >> n;for (int i 0;i ! n; i) {int t;cin >> t;a1.Push_back(t);}Array a2(a1);cout << "…
阅读更多...
12 分布式锁加入看门狗

12 分布式锁加入看门狗

1、看门狗的流程图 2、看门狗的代码实现 /****类说明&#xff1a;Redis的key-value结构*/ public class LockItem {private final String key;private final String value;public LockItem(String key, String value) {this.key key;this.value value;}public String getKey…
阅读更多...
opengl制作天空盒

opengl制作天空盒

首先创建顶点数组 unsigned int m_uiVaoBufferID; glGenVertexArrays(1, &m_uiVaoBufferID); 然后创建顶点缓冲区 float skyboxVertices[] {// positions-1.0f, 1.0f, -1.0f,-1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,1.0f, 1.0f, -1.0f,-1.0f, 1.…
阅读更多...
Spring cloud - Hystrix源码

Spring cloud - Hystrix源码

其实只是Hystrix初始化部分&#xff0c;我们从源码的角度分析一下EnableCircuitBreaker以及HystrixCommand注解的初始化过程。 从EnableCircuitBreaker入手 我们是通过在启动类添加EnableCircuitBreaker注解启用Hystrix的&#xff0c;所以&#xff0c;源码解析也要从这个注解…
阅读更多...
实时错误’-2147217887‘多步OLB DB 操作产生错误。如果可能，请检查OLE DB状态值

实时错误’-2147217887‘多步OLB DB 操作产生错误。如果可能，请检查OLE DB状态值

目录 背景问题问题分析问题解决 错误解决与定位技巧总结 背景 仍旧是学生信息管理系统的问题&#xff0c;当时做的时候没发现这么多问题呢&#xff0c;只能说明一件事&#xff0c;做的时候没有站在用户的角度考虑需求&#xff0c;设置了什么内容&#xff0c;就按照设置好的去测…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023