当前位置: 首页 > news >正文

html语法

文章目录

  • 一、html基础
    • 1.什么是html
    • 2.HTML 标签
    • 3.HTML 文档-网页
      • 例子解释
    • 4.html基础
      • 1.HTML 标题
      • 2.HTML 段落
      • 3.HTML 链接
      • 4.HTML 图像
    • 5.html元素
      • 1.嵌套的 HTML 元素
      • 2.空的 HTML 元素
    • 6.HTML 属性
    • 7.html标题
      • 1.HTML 水平线
      • 2.HTML 注释
    • 8.HTML 段落
      • 1.HTML 换行
    • 9.HTML 样式
      • 1.背景颜色
      • 2.字体、颜色和尺寸
      • 3.文本对齐
    • 10.HTML 文本格式化
    • 11.HTML 引用
      • 1.用于短引用
      • **2.用于长引用**
      • 3.用于缩略词的
      • 4.用于定义的
    • 12.HTML 注释
      • 1.注释多行 HTML 代码
      • 2.条件注释
      • 3.注释的快捷键
    • 13.HTML 颜色
      • 1.颜色值
      • 2.颜色名
    • 14.HTML CSS
    • 15.HTML 链接标签
      • 1.HTML 超链接(链接)
      • 2.HTML 链接语法
      • 实例
      • 3.target 属性
      • 4.name 属性
    • 16.HTML 媒体标签
      • 1.图片标签
      • 2.路径
      • 3.音频标签
      • 4.视频标签
    • 17.HTML 列表标签
      • 1.列表的应用场景
      • 2.无序列表
      • 3.有序列表
      • 4.自定义列表
      • 总结
    • 18.HTML 表格标签
      • 1.表格相关属性
      • 2.表格标签
      • 3.表格的结构标签
      • 4.合并单元格
    • 19.表单标签
      • 1.input系列标签
        • 文本框
        • 密码框
        • 单选框
        • 复选框
        • 文件选择
        • 按钮
        • 总结
      • 2.button按钮标签
      • 3.select下拉菜单标签
      • 4.textarea文本域标签
      • 5.label标签
    • 20.语义化标签
      • 1.无语义标签
      • 2.有语义标签
    • 21.字符实体

一、html基础

web标准

构成语言说明
结构HTML页面元素和内容
表现CSS网页元素的外观和位置等页面样式(如:颜色、大小等)
行为JavaScript网页模型的定义与页面交互

HTML5是Web标准的最新版本(2014年正式发布),它整合了HTML4/XHTML,并强调语义化(semantic HTML)。除了结构(HTML)、表现(CSS)和行为(JavaScript),HTML5还内置了更多多媒体和API支持(如Canvas绘图、WebSockets实时通信)。注意HTML5的DOCTYPE声明必须是<!DOCTYPE html>,这简化了旧版的复杂声明。

1.什么是html

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 使用标记标签来描述网页

网页由哪些部分组成?

​ 文字、图片、音频、视频、超链接

HTML骨架结构由哪些标签组成?

  • html标签:网页的整体
  • head标签:网页的头部
  • body标签:网页的身体
  • title标签:网页的标题

2.HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和</b>
  • 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
  • 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。

image-20250711110233034

image-20250711110905531

HTML标签与标签之间的关系可分为:

  • 父子关系(嵌套关系)

    • <html lang="en">
      <head>   
      </head>
      </html>
      
    • <head><title> </title>
      </head>
      
  • 兄弟关系(并列关系)

    • <head>
      </head>
      <body>
      </body>
      

3.HTML 文档-网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

<html>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

image-20250710142700703

例子解释

  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

4.html基础

1.HTML 标题

HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

image-20250710144009308

image-20250710144001962

2.HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

3.HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.baidu.com">This is a link</a>

**注释:**在 href 属性中指定链接的地址。

4.HTML 图像

HTML 图像是通过<img> 标签进行定义的。

<img src="text.jpg" width="104" height="142" />

5.html元素

HTML 文档是由 HTML 元素定义的。

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

开始标签元素内容结束标签
<p>This is a paragraph</p>
<a href=“default.htm” >This is a link</a>
<br/>

开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。

HTML 元素语法:

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

1.嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

HTML 文档由嵌套的 HTML 元素构成。

2.空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

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

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

6.HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息

属性总是以名称/值对的形式出现,比如:name=“value”

属性总是在 HTML 元素的开始标签中规定。

属性实例:

HTML 链接由<a> 标签定义。链接的地址在 href 属性中指定:

<a href="http://www.baidu.com">This is a link</a>

<h1> 定义标题的开始。

<h1 align=“center”> 拥有关于对齐方式的附加信息。

<html><body><h1 align="center">This is heading 1</h1><p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p></body>
</html>

image-20250710145449383

<body> 定义 HTML 文档的主体。

<body bgcolor=“yellow”> 拥有关于背景颜色的附加信息。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head><body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body></html>

image-20250710145630167

<table> 定义 HTML 表格。

<table border=“1”>

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='Bill "HelloWorld" Gates'

7.html标题

标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

标题很重要

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

特点:

  • 文字都有加粗
  • 文字都有变大,并且从h1 → h6文字逐渐减小
  • 独占一行

1.HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<html><body>
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。

2.HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

注释是这样写的:

<!-- This is a comment -->

开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

8.HTML 段落

可以把 HTML 文档分割为若干段落。

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

<html>
<body><p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p><p>段落元素由 p 标签定义。</p> </body>
</html>

浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)

image-20250710150748421

使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它

特点:

  • 段落之间存在间隙

  • 独占一行

1.HTML 换行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

特点:

  • 单标签
  • 让文字强制换行
<html><body><p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p></body>
</html>

image-20250710151232898

换行+水平线

image-20250711132755219

image-20250711132808755

9.HTML 样式

style 属性用于改变 HTML 元素的样式

<html>
<body style="background-color:PowderBlue;"><h1>Look! Styles and colors</h1><p style="font-family:verdana;color:red">
This text is in Verdana and red</p><p style="font-family:times;color:green">
This text is in Times and green</p><p style="font-size:30px">This text is 30 pixels high</p></body>
</html>

image-20250710151540792

style 属性的作用:

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。

1.背景颜色

background-color 属性为元素定义了背景颜色:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

image-20250710152344010

2.字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

image-20250710153048220

3.文本对齐

<html>
<body><h1 style="text-align:center">This is a heading</h1>
<p>上面的标题相对于页面居中对齐。</p></body>
</html>

image-20250710153215544

10.HTML 文本格式化

场景:需要让文字加粗、下划线、倾斜、删除线等效果

HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。

image-20250711133100286

突出重要性的强调语境

image-20250711133111579

标签描述
<b>定义粗体文本。
<big>定义大号字。
<em>定义着重文字。
<i>定义斜体字。
<small>定义小号字。
<sub>定义下标字。
<sup>定义上标字。
<ins>定义插入字。
<del>定义删除字。
<html>
<body><b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup></body>
</html>

image-20250710154931046

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><strong>加粗strong</strong> <em>倾斜em</em> <ins>下划线ins</ins> <del>删除线del</del>
</body>
</html>

image-20250711133523832

11.HTML 引用

标签描述
<abbr>定义缩写或首字母缩略语。
<address>定义文档作者或拥有者的联系信息。
<bdo>定义文本方向。
<blockquote>定义从其他来源引用的节。
<dfn>定义项目或缩略词的定义。
<q>定义短的行内引用。
<cite>定义著作的标题。

1.用于短引用

HTML <q> 元素定义短的引用

浏览器通常会为 <q> 元素包围引号

<html>
<body><p>浏览器通常会在 q 元素周围包围引号。</p><p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p></body>
</html>

image-20250710163418685

2.用于长引用

HTML <blockquote>元素定义被引用的节。

浏览器通常会对 <blockquote> 元素进行缩进处理。

<html>
<body><p>浏览器通常会对 blockquote 元素进行缩进处理。</p><blockquote>
五十年来,WWF 一直致力于保护自然界的未来。
WWF 工作于 100 个国家,并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote></body>
</html>

image-20250710170308759

3.用于缩略词的

HTML <abbr> 元素定义缩写或首字母缩略语。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

<html>
<body><p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p><p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p></body>
</html>

image-20250710170440180

4.用于定义的

HTML <dfn> 元素定义项目或缩写的定义

<html>
<body><p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p><p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p></body>
</html>

image-20250710170816566

12.HTML 注释

注释标签 <!-- 与 --> 用于在 HTML 插入注释。

1.注释多行 HTML 代码

<!DOCTYPE html>
<html>
<body><!-- 什么也不显示
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
<111111111>
<h1> 22222 </h1>
<p> aaaaa </p>
--></body>
</html>

2.条件注释

您也许会在 HTML 中偶尔发现条件注释:

<!--[if IE 8]>.... some HTML here ....
<![endif]-->

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

3.注释的快捷键

在VS Code中:ctrl + /

13.HTML 颜色

颜色由红色、绿色、蓝色混合而成。

1.颜色值

颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是 0(十六进制:#00)。最大值是 255(十六进制:#FF)。

这个表格给出了由三种颜色混合而成的具体效果:

image-20250710171248672

2.颜色名

大多数的浏览器都支持颜色名集合。

**提示:**仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

如果需要使用其它的颜色,需要使用十六进制的颜色值。

14.HTML CSS

通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。

<html><head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head><body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body></html>

image-20250710171524568

15.HTML 链接标签

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

1.HTML 超链接(链接)

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

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

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式:

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

2.HTML 链接语法

链接的 HTML 代码很简单。它类似这样:

<a href="url">Link text</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

特点:

  • 双标签,内部可以包裹内容
  • 如果需要a标签点击之后去指定页面,需要设置a标签的href属性

实例

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

上面这行代码显示为:访问百度

点击这个超链接会把用户带到 百度 的首页。

提示:“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

显示特点:

  • a标签默认文字有下划线
  • a标签从未点击过,默认文字显示蓝色
  • a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)

空链接

<a href="#">空链接</a>

功能:

  • 点击之后回到网页顶部
  • 开发中不确定该链接最终跳转位置,用空链接占个位置

3.target 属性

使用 Target 属性,设置a标签的跳转方式。

image-20250711141352784

下面的这行会在新窗口打开文档:

<a href="http://www.baidu.com/" target="_blank">访问百度</a>

4.name 属性

name 属性规定锚(anchor)的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法:

<a name="label">锚(显示在页面上的文本)</a>

**提示:**锚的名称可以是任何你喜欢的名字。

**提示:**您可以使用 id 属性来替代 name 属性,命名锚同样有效。

实例

首先,我们在 HTML 文档中对锚进行命名(创建一个书签):

<a name="tips">基本的注意事项 - 有用的提示</a>

然后,我们在同一个文档中创建指向该锚的链接:

<a href="#tips">有用的提示</a>

在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。

<html><body><p>
<a href="#C4">查看 Chapter 4。</a>
</p><h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p><h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p><h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p><h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p><h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p></body>
</html>

image-20250710172629861

16.HTML 媒体标签

1.图片标签

通过使用 HTML,可以在文档中显示图像。

<img src="" alt="">

特点:

  • 单标签
  • img标签需要展示对应的效果,需要借助标签的属性进行设置!

image-20250711135633238

属性注意点:

  1. 标签的属性写在开始标签内部
  2. 标签上可以同时存在多个属性
  3. 属性之间以空格隔开
  4. 标签名与属性之间必须以空格隔开
  5. 属性之间没有顺序之分
属性说明
src指定图片的路径
alt替换文本
title提示文本
width宽度
height高度

src属性:

属性值:目标图片的路径

当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可

alt属性:

属性值:替换文本

当图片加载失败时,才显示alt的文本

title属性:

属性值:提示文本( 当鼠标悬停时,才显示的文本 )

title属性不仅仅可以用于图片标签,还可以用于其他标签

width和height属性:

属性值:宽度和高度

如果只设置width或height中的一个,另一个没设置的会自动等比例缩放。

如果同时设置了width和height两个,若设置不当此时图片可能会变形。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./cat.gif" alt=""><img src="" alt="这个图片不见了"><img src="./images/dog.gif" alt="" title="这是一只狗">
</body>
</html>

image-20250711142510117

2.路径

场景:页面需要加载图片,需要先找到对应的图片

  • 绝对路径
  • 相对路径(常用)

3.音频标签

场景:在页面中插入音频

<audio src="" controls></audio>

常用属性:

image-20250711140815087

注意: 音频标签目前支持三种格式:MP3、Wav、Ogg

4.视频标签

场景:在页面中插入视频

<video src="" controls></video>

常用属性:

image-20250711141001731

注意: 视频标签目前支持三种格式:MP4 、WebM 、Ogg

17.HTML 列表标签

1.列表的应用场景

在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等

特点:按照行的方式,整齐显示内容

种类:无序列表、有序列表、自定义列表

image-20250711154528725

image-20250711154541374

image-20250711154550848

2.无序列表

在网页中表示一组无顺序之分的列表,如:新闻列表。

标签组成:

标签名说明
ul表示无序列表的整体,用来包裹li标签
li表示无序列表的每一项,用来包含每一行的内容

显示特点:

列表的每一项前默认显示圆点标识

注意点:

  • ul标签中只允许包含li标签
  • li标签可以包含任意内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>苹果</li><li>香蕉</li><li>草莓</li><li>榴莲</li></ul>
</body>
</html>

3.有序列表

在网页中表示一组有顺序之分的列表,如:排行榜。

标签组成

标签名说明
ol表示有序列表的整体,用来包裹li标签
li表示有序列表的每一项,用来包含每一行的内容

显示特点:

列表的每一项前默认显示序号标识

注意点:

  • ol标签中只允许包含li标签
  • li标签可以包含任意内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ol><li>小明</li><li>张三</li><li>李四</li></ol>    
</body>
</html>

image-20250714095529936

4.自定义列表

在网页的底部导航中通常会使用自定义列表实现。

标签名说明
dl表示自定义列表的整体,用来包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表针对主题的每一项内容
标签英文全称
dldefinition list
dtdefinition term
dddefinition description

显示特点:

dd前会默认显示缩进效果

注意点:

  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd><dt>服务支持</dt><dd>售后政策</dd><dd>自助服务</dd><dt>线下门店</dt><dd>服务网点</dd><dd>授权体验店</dd><dt>关于</dt><dd>企业社会责任</dd><dd>举报</dd></dl>
</body>
</html>

image-20250714100131230

总结

无序列表最常用,有序列表偶尔用,自定义列表底部导航用

18.HTML 表格标签

在网页中以行+列的单元格的方式整齐展示和数据

基本标签:

标签名说明
table表格整体,可用于包裹多个tr
tr表格每行,可用于包裹td
td表格单元格,可用于包裹内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="800" height="200"><tr><td>姓名</td><td>成绩</td><td>评语</td></tr><tr><td>张三</td><td>100分</td><td>真棒</td></tr><tr><td>李四</td><td>80分</td><td>还行</td></tr></table>  
</body>
</html>

image-20250714101144709

1.表格相关属性

注意:

​ 实际开发时针对于样式效果推荐用CSS设置

属性名属性值效果
border数字边框宽度
width数字表格宽度
height数字表格高度

2.表格标签

表格标题和表头单元格标签:在表格中表示整体大标题和一列小标题

标签名名称说明
caption表格大标题表示表格整体大标题,默认在表格整体顶部居中位置显示
th表头单元格表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

注意:

  • caption标签书写在table标签内部
  • th标签书写在tr标签内部(用于替换td标签)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="300" height="50"><caption>学生成绩单</caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>张三</td><td>100分</td><td>真棒</td></tr><tr><td>李四</td><td>80分</td><td>还行</td></tr></table>  
</body>
</html>

image-20250714101400400

3.表格的结构标签

让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰

image-20250711171143231

image-20250711171155325

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="300" height="100"><caption><strong>学生成绩单</strong></caption><thead><th>姓名</th><th>成绩</th><th>评语</th></thead><tbody><tr><td>小哥哥</td><td>100分</td><td>小哥哥真帅气</td></tr><tr><td>小姐姐</td><td>100分</td><td>小哥哥真漂亮</td>       </tr></tbody><tfoot><tr><td>总结</td><td>郎才女貌</td><td>郎才女貌</td>       </tr>    </tfoot></table>
</body>
</html>

4.合并单元格

将水平或垂直多个单元格合并成一个单元格

image-20250711171417998

合并原则

  • 上下合并:只保留最上的,删除其他
  • 左右合并:只保留最左的,删除其他
属性名属性值说明
rowspan合并单元格的个数跨行合并(上下合并),将多行垂直合并
colspan合并单元格的个数跨列合并(左右合并),将多列水平合并

注意:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)

Document
学生成绩单
姓名成绩评语
小哥哥100分小哥哥真帅气
小姐姐小哥哥真漂亮
总结郎才女貌

image-20250714102840685

19.表单标签

表单(Form)是网页中一个 专门用来收集用户输入数据 的区域,它可以把这些数据发送到服务器,让网站根据这些数据做出响应。(搜索、登录、注册)

1.input系列标签

在网页中显示收集用户信息的表单效果,如:登录页、注册页

input标签可以通过type属性值的不同,展示不同效果。

标签名type属性值说明
inputtext文本框,用于输入单行文本
inputpassword密码框,用于输入密码
inputradio单选框
inputcheckbox多选框
inputfile文件选择
inputsubmit提交按钮
inputreset重置按钮
inputbutton普通按钮,默认无功能,之后配合js添加功能
文本框

在网页中显示输入单行文本的表单控件

type属性值:text

常用属性:

​ placeholder:占位符,提示用户输入内容的文本

​ value:用户输入的内容,提交之后会发送给后端服务器

​ name:当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义

后端接收到数据的格式为: name的属性值 = value的属性值

密码框

在网页中显示输入密码的表单控件

type属性值:password

常用属性:

​ placeholder:占位符,提示用户输入内容的文本

单选框

在网页中显示多选一的单选表单控件

type属性值:radio

常用属性:

​ name:分组,有相同name属性的单选框为一组,一组中同时只能有一个被选中

​ checked:默认选中

复选框

在网页中显示多选多的多选表单控件

type属性值:checkbox

常用属性:

​ checked:默认选中

文件选择

在网页中显示文件选择的表单控件

type属性值:file

常用属性:

​ multiple:多文件选择

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>我是: <input type="radio" name="我是"><input type="radio" name="我是" checked><br><br>常住地: <input type="text" placeholder="请输入住址"><br><br>密码: <input type="password" placeholder="请输入密码"><br><br>婚姻状况: <input type="checkbox"> 未婚<input type="checkbox"> 已婚<input type="checkbox"> 丧偶<br><br>上传文件: <input type="file" multiple>
</body>
</html>

image-20250714105927095

按钮

在网页中显示不同功能的按钮表单控件

type属性值:

标签名type属性值说明
inputsubmit提交按钮
inputreset重置按钮
inputbutton普通按钮,默认无功能,之后配合js添加功能

如果需要实现以上按钮功能,需要配合form标签使用

form使用方法:用form标签把表单标签包裹起来即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="">用户名: <input type="text"><br><br>密码: <input type="password"><br><br><input type="submit" value="注册"><input type="reset"><input type="button" value="普通按钮"></form>
</body>
</html>

image-20250714113441613

总结

image-20250711174849302

2.button按钮标签

同input的按钮

标签名type属性值说明
buttonsubmit提交按钮
buttonreset重置按钮
buttonbutton普通按钮,默认无功能,之后配合js添加功能

3.select下拉菜单标签

在网页中提供多个选择项的下拉菜单表单控件

标签组成:

  • select标签:下拉菜单的整体
  • option标签:下拉菜单的每一项

常见属性:

​ selected:下拉菜单的默认选中

4.textarea文本域标签

在网页中提供可输入多行文本的表单控件

标签名:textarea

常见属性:

  • cols:规定了文本域内可见宽度
  • rows:规定了文本域内可见行数

注意:

  • 右下角可以拖拽改变大小
  • 实际开发时针对于样式效果推荐用CSS设置

image-20250714132050961

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><select name="" id=""><option value="">小猫</option><option value="">小狗</option><option value="">小牛</option><option value="" selected>小马</option></select><br><br><textarea name="" id=""></textarea>
</body>
</html>

5.label标签

常用于绑定内容表单标签的关系。

标签名:label

使用方法①:

  1. 使用label标签把内容(如:文本)包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值

使用方法②:

  1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
  2. 需要把label标签的for属性删除即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>选择性别:<input type="radio" name="sex" id="man"> <label for="man"></label><label><input type="radio" name="sex" ></label>
</body>
</html>

image-20250714140528809

点击文字即可选中radio

20.语义化标签

1.无语义标签

div标签:一行只显示一个(独占一行)

span标签:一行可以显示多个

2.有语义标签

image-20250714135058257

image-20250714135110011

21.字符实体

字符实体可以在网页中显示特殊符号

在网页中展示特殊符号效果时,需要使用字符实体替代

image-20250714140139924

http://www.lryc.cn/news/588811.html

相关文章:

  • C++题解(37) 信息学奥赛一本通1318:【例5.3】自然数的拆分
  • 测试tcpdump,分析tcp协议
  • 服务器端安全检测与防御技术概述
  • 力扣25.7.15每日一题——有效单词
  • 微信小程序入门实例_____从零开始 开发一个每天记账的微信小程序
  • 深入理解C++11 std::iota:从原理到实践
  • 深度学习·目标检测和语义分割基础
  • 【PTA数据结构 | C语言版】根据前序序列重构二叉树
  • Docker安装升级redis,并设置持久化
  • 【Java篇】IntelliJ IDEA 安装与基础配置指南
  • 零基础入门物联网-远程门禁开关:代码调试
  • 深度学习 Pytorch图像分类步骤
  • vscode输出中文乱码问题的解决
  • [BrowserOS] Nxtscape浏览器核心 | 浏览器状态管理 | 浏览器交互层
  • TiD2025 | openKylin基础设施平台创新实践分享,构筑开源质量根基
  • 内存栅栏(std::atomic_thread_fence)
  • Redis学习系列之——Redis Stack 拓展功能
  • 深度学习中的激活函数:从原理到 PyTorch 实战
  • C++11:constexpr 编译期性质
  • 【Python3-Django】快速掌握DRF:ModelViewSet实战指南
  • AJAX 入门到精通
  • JavaScript中关于环境对象的拓展
  • GaussDB 数据库字符编码与兼容模式
  • 操作系统笔记:进程调度(Process Scheduling)
  • 纸板加工制造学习1
  • Listener(监听器)
  • 【监控实战】Grafana自动登录如何实现
  • 【prometheus+Grafana篇】基于Prometheus+Grafana实现SQLserver数据库的监控与可视化
  • 半导体制造流程深度解析:外观缺陷检测的AI化路径与实践
  • 批量制作Word:如何根据表格数据的内容批量制作word,根据Excel的数据批量制作word文档的步骤和注意事项