HTML知识点整理（包含简介、主要页面结构、常用标签、列表、表格、form表单以及表格表单区别等）

已于 2024-06-15 11:55:46 修改
阅读量828 收藏 5
点赞数 1
分类专栏： 笔记 文章标签： html 前端
于 2020-09-18 21:15:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46800546/article/details/108671971
版权
本文详细介绍了HTML的基础知识，包括HTML是什么、页面结构、常用标签，如标题、列表、表格和表单。此外，还探讨了form表单与表格的区别，帮助读者深入理解HTML标记语言。
摘要由CSDN通过智能技术生成

文章目录

HTML简介

1.什么是标签语言？

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

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

2.什么是 HTML？

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签(markup tag)
  • HTML 使用标记标签来描述网页

3.HTML页面的结构

<!DOCTYPE html>  #声明为html5文件，必须是html文档的第一行，在<html>标签之前
<html lang="zh-CN"> #这个lang表示语言，zh-CN中文的意思，整个文档的内容以中文为主，如果以英文为主，就写成lang='en'

<head>
  <meta charset="UTF-8">  #中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码
  <title>标题</title>
</head>

<body>
</body>

</html>

HTML常用标签

基本标签

1.<html>、</html>

文档开始和结束的标记,是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body)。

2.<head>、</head>

定义HTML文档开头部分,内容不会在浏览器窗口显示，<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

3.<title>、</title>

定义文档的标题，通常把它放置在浏览器窗口的标题栏或状态栏上。

4.<body>、</body>

  • 定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
  • 属性：background（规定文档的背景图像）；text（规定文档中所有文本的颜色）等等。

5.<style>、</style>

  • 定义内部样式表。
  • 属性：type（规定样式表的 MIME 类型）等等。

6.<script>、</script>

  • 定义js代码或引入外部js文件。
  • 属性：type（指示脚本的 MIME 类型）；charset（规定在外部脚本文件中使用的字符编码）；src（规定外部脚本文件的 URL）等等。

7.<b></b>

  • 规定粗体文本。
  • 示例：
<!DOCTYPE html>
<html>
<body>

<p>这是普通文本 - <b>这是粗体文本</b>。</p>

</body>
</html>

这是普通文本 - 这是粗体文本。

8.<i>、</i>

  • 显示斜体文本效果。
  • 示例：
<!DOCTYPE html>
<html>
<body>

<p>这是普通文本 - <i>这是粗体文本</i>。</p>

</body>
</html>

这是普通文本 - 这是粗体文本。

9.<u>、</u>

  • 定义下划线文本。
  • 示例：
<html>
<body>

<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>

</body>
</html>

如果文本不是超链接，就不要对其使用下划线。

10.<p>、</p>

  • 定义段落。
  • 属性：align（规定段落中文本的对齐方式）等。
  • 示例：
<html>
<body>

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

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义。

11.<h1> 到 <h6>

  • 定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
  • 属性：align（规定标题中文本的排列）等。
  • 示例：
<html>

<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

This is heading 1

This is heading 2

This is heading 3

This is heading 4
This is heading 5
This is heading 6

12.<br>

  • 插入一个简单的换行符。
  • 示例：
<html>

<body>

<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>

</body>
</html>

To break
lines
in a
paragraph,
use the br tag.

13.<hr />

  • 在 HTML 页面中创建一条水平线。
  • 示例：
<html>

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

hr 标签定义水平线：

这是段落。

这是段落。

这是段落。

14.<div>、</div>

  • 定义文档中的分区或节（division/section）。
  • 属性：align（规定 div 元素中的内容的对齐方式）等。
  • 示例：
<html>
<body>

<h3>This is a header</h3>
<p>This is a paragraph.</p>

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

</body>
</html>

在这里插入图片描述

15.<img>

  • 向网页中嵌入一幅图像。
  • 属性：alt（规定图像的替代文本）；src（规定显示图像的 URL）；border（定义图像周围的边框）；height（定义图像的高度）等等。
  • 示例：
<html>
<body>

<img src="/i/eg_tulip.jpg"  alt="滨州" />

</body>
</html>
滨州

16.<a>、</a>

  • 定义超链接，用于从一张页面链接到另一张页面。
  • 属性：href（规定链接指向的页面的 URL）；rel（规定当前文档与被链接文档之间的关系）；type（规定被链接文档的的 MIME 类型）等。
  • 示例：
<html>
<body>

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

</body>
</html>

百度

特殊标题

1.  空格    &nbsp;
2.  >   &gt;
3.  <  &lt;
4.  &  &amp;
5.  ©  &copy;
6.  ®  &reg;

列表

1.<ol>、</ol>

  • 定义有序列表。
  • 属性：type（规定在列表中使用的标记类型）；start（规定有序列表的起始值）等。
  • 示例：
<!DOCTYPE html>
<html>
<body>

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 
</body>
</html>
  1. 咖啡
  2. 牛奶
  3. 茶
  1. 咖啡
  2. 牛奶
  3. 茶

2.<ul>、</ul>

  • 定义无序列表。
  • 属性：type（规定列表的项目符号的类型）等。
  • 示例：
<html>

<body>

<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>
一个无序列表：
  • 咖啡
  • 茶
  • 牛奶

3.<dl>、</dl>;<dd>、</dd>;<dt>、</dt>

  • 定义了定义列表（definition list）。
  • 示例：
<html>

<body>

<h2>一个定义列表：</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>

一个定义列表：

计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...

表格

1.基本结构

<table border="1">
            <thead> <!-- 标题部分 -->
                <tr> <!-- 表示一行 -->
                    <th>序号</th> <!-- 一个单元表格 -->
                    <th>姓名</th>
                    <th>爱好</th>
                </tr>
            </thead>
            <tbody> <!-- 内容部分 -->
                <tr>
                    <td>1</td> <!-- 一个单元表格 -->
                    <td>老王</td>
                    <td>小张</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>爬墙</td>
                    <td>爬山</td>
                </tr>
            </tbody>
        </table>

在这里插入图片描述

2.属性

  • border: 表格边框
  • cellpadding: 内边距 （内边框和内容的距离）
  • cellspacing: 外边距（内外边框的距离）
  • width: 像素 百分比（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

form表单

1.基本结构

  • id不可重复，name可重复。
  • get提交有长度限制，并且编码后的内容在地址栏可见；post提交没有长度限制，且编码后内容不可见。
  • 示例：
<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>
</html>

在这里插入图片描述
2.文本输入

  • 文本框<input type="txt" name="" id="" value="" />
  • 密码框<input type="password" name="" id="" value="" />
  • 文本域<textarea name="" id="" cols=""(字符多少) rows=""(几行高)></textarea>
  • 隐藏域<input type="hidden" name="" id="" value="" />
<html>

<body>

文本框<input type="txt" name="1" id="1"/>
密码框<input type="password" name="2" id="2"/>
文本域<textarea cols="4" rows="3"></textarea>
隐藏域<input type="hidden"/>

</body>
</html>

在这里插入图片描述
3.按钮

  • 提交按钮<input type="submit" name="" id="" disabled="disabled" value="" />点击后转到form内的提交服务器的地址
  • 重置按钮<input type="reset" name="" id="" disabled="disabled" value="" />
  • 普通按钮<input type="button" name="" id="" disabled="disabled" value="" />
  • 图片按钮<input type="image" name="" id="" disabled="disabled" src="图片地址" />

注意：disabled使按钮失效；enable使按钮可用

<html>

<body>

　 提交按钮 <input type="submit" name="" id="" disabled="enable" value="提交" />

　　重置按钮 <input type="reset" name="" id="" disabled="enable" value="重置" />

　　普通按钮 <input type="button" name="" id="" disabled="disabled" value="普通" />

</body>
</html>

在这里插入图片描述
4.选择输入

  • 单选框<input type="radio" name="" value="">
  • 复选框<input type="checkbox" name="" value="">
  • 文件上传<input type="file" name="" id="" />
<!DOCTYPE html>
<html>
<body>

<div> 性别:
		<label><input type="radio" name="sex" value="男生">男生</label>
		<label><input type="radio" name="sex" value="女生">女生</label>
	</div>
	<!-- 复选框 -->
	<div>
		爱好：
		<label><input type="checkbox" name="like" value="0">音乐</label>
		<label><input type="checkbox" name="like" value="1">旅游</label>
	</div>

<br>
文件上传<input type="file" name="" id="" />
</body>
</html>

在这里插入图片描述
5.下拉列表框

<select>
<option value=""></option>
<option value=""></option>

<option value=""></option>

<option value=""></option>
</select>

<!DOCTYPE html>
<html>
<body>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>

在这里插入图片描述

表单与表格的区别

表格用于按行列的方式展示数据；表单用于搜集不同类型的用户输入。

今天你头秃了吗33
关注
专栏目录
HTML简介（网页的基本组成，什么是HTML，Web标准的三大组成部分），HTML标签（HTML语法规范，标签关系），HTML结构标签（第一个HTML）
shy的博客
02-22 3994
网页的基本组成 网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，通常我们看见的网页都是.htm和.html后缀结尾的文件，因为都称为HTML文件 什么是HTML HTML是一种超文本标记语言，是一种用来描述网页的一种语言 HTML不是编程语言，而是标记语言，是一套标记标签 超文本: 可以加入声音，视频，动画，多媒体等（超越了文本限制） 可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本） Web标准的三大组成部分 主要包括结构、表现、行为 三个方
HTML基础知识点整理
m0_48622990的博客
08-02 263
一、标签解释： 1.<html></html>：是html的根元素，用来包含html文档的所有元素。 2.<head></head>：包含在head元素里的内容，不会显示在网页上，这里面通常放一些配置信息，包含编码，作者，页面描述信息还有js,css的导入。 3.<body></body>:是html文档的内容显示区。 4.标签和元素通常意思相同，但是严格来讲，一个元素通常又是由两个标签组成。 5.HTML标签一般成对出现，.
页面结构
aohaoxing3762的博客
07-05 396
*Web前端汇总 1、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 　　-行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 　　-块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 　　-空元素：即系没有内容的HTML元素，例如：br、meta、h...
HTML 知识点简介
Skye's Blog
03-10 245
HTML 是什么？ HTML（htyper text markup language） 即超文本标记语言 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 标记语言: 标记（标签）构成的语言. 网页==HTML文档，由浏览器解析，用来展示的 静态网页：静态的资源，如xxx.html 动态网页：html代码是由某种开发语言根据用户请求动态生成的 标签 什么是标签？ 是由...
HTML简介
FZUMRWANG的博客
01-21 211
HTML的的概念 HTML是一种超文本标记语言，注意，不是编程语言，而是一种标记语言，它含有一套标记标签，使用这些标记标签来描述网页 HTML tag HTML tags are keywords surrounded by Angle(尖的) brackets(括号),such as HTML tags usually come in pairs, such as and The fir...
HTML基本知识点
weixin_61628116的博客
11-16 998
html篇 一、HTML文档组成 开头文档声明<！DOCTYPE="html">。文档声明不属于HTML标签。 <html><html/>在最外面，放文档所有内容。<html>标签的lang属性，表面这个网页使用的语言，是英文（EN），中文（zh-CN）或者其它语言。有利于浏览器的搜索。<html lang='En'></html>或者<html lang='zh-CN'></html> <he..
HTML5知识点思维导图(手工整理）
10-16
以下是一些核心的HTML5知识点： 1. **基本结构与标签**：HTML5文档的基础是`<!DOCTYPE html>`声明，它告诉浏览器使用HTML5规范解析文档。`<html>`标签定义了整个文档的根元素，而`<head>`和`<body>`分别代表元数据...
【HTML基础篇002】HTML之form表单超详解_html form表单
最新发布
2401_84182392的博客
04-17 1180
(img-JrIfd5b3-1713343289604)]p204888 （备注大数据）**
html表单存储功能,纯前端实现保存表单数据功能
weixin_30596151的博客
06-19 2592
本文作者：IMWeb zzbozheng未经同意，禁止转载最近在用管理后台配置数据时，发现辛辛苦苦配置好的表单无缘无故地被覆盖，之后了解到由于我们都是在同一台开发机上做开发，难免会遇到其他同学做数据变更时覆盖掉自己的配置数据。于是我决定在表单配置里增加一项“配置操作”功能来解放自己双手以及惠及他人。用什么方式保存?找后端同学去帮忙做保存？把配置数据都保存到 localStorage?把配置数据都保...
html知识点.zip
04-29
7. **表单控件**：HTML表单是用户交互的核心，`<form>`定义表单，`<input>`用于创建各种输入框（如文本、密码、复选、单选等），`<textarea>`定义多行文本输入，`<select>`和`<option>`用于创建下拉列表，`<button>`...
HTML表单3（下拉列表、多行文字输入）—零基础自学网页制作
web前端入门基础进阶教程-htmlcssjs
05-24 1235
带有下拉列表的表单 题目只能有30个字，不能写全，其实今天我们要学习的内容有三个，第一，下拉列表表单，第二，多行文字输入表单，第三，数据集表单。 开始学习吧！ 前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践，今天我们来学习其他包含在<form></form>之间的元素。 。 带有下拉列表的表单 我们在一些网站填写注册信息时，经常会遇
HTML常用知识点整理四（表单标签及其控件）
weixin_41452476的博客
09-26 360
<!-- 表单控件： 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息： 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。 表单域： 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。 input 控件(重点) 在上面的语法中，in...
HTML页面的基本结构
什似的专栏
07-02 1049
这是我第一次在CSDN写博客，而我想写的内容蓄积已久，这次主要是放在网上是想与你们一起来分享我的经验，我相信这些对初学者是很有帮助的，对基础不扎实的也能进一步的巩固，希望能够帮助到你们。 我主要写的主题有，HTML、JavaScript、Jquery、Java及三大框架、数据库，Objective-c等。
网页的组成与HTML标签简介
Dasy_R的博客
11-26 593
网页的组成： 结构：网页的组成部分（html、xhtml ） 表现：网页的样式（css） 行为：网页要实现的交互功能（js） w3c标准：网页制作的标准，由w3c协（万维网）会制定 结构：网页的组成部分（html、xhtml ） 表现：网页的样式（css） ecma(欧洲厂商联盟)制定： 行为：网页要实现的交互功能（js） 网页元素：elements元素，style样式 文件的命名规范 小写英文字母、数字、下划线的组合， 其中不得包含汉字、空格和特殊字符； 必须以英文字母开头。 HTML开始 1：HTML架
HTML学习之网页制作基础和常用标签及标签属性
DanEmpress的博客
04-12 4213
静态网页的制作 静态网页是由html、css、JavaScript三种元素构成； HTML的作用是将数据信息在网页中显示； CSS的作用是对页面进行修饰； JavaScript的作用是让用户可以和页面进行简单的交互； HTML 超文本标记语言（Hyper Text Markup Language）， “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素； 超文
HTML技术(基础/列表/表格/表单)
晓葉斑比
05-02 912
HTML技术前言一、HTML介绍1.1 发展1.2 HTML文件的基本结构1.3 HTML标签常用标签1.4 HTML元素HTML元素属性二、识别表单元素三、样式表的三种形式 前言 ubuntu下写HTML文本使用工具VS Code,win可使用H Builder 快速生成标准的html代码： （1）在第一行输入！ （2）按Tab键或者选择代码提示中的！ Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展
HTML（基础、表单、表格）
gogaogao的博客
11-28 454
HTML 超文本标记语言 HyperText Markup Language HTML基础 基本结构 1、头部信息 – head 2、网页内容 网页主体内容 – body 3、整个html文件 – html <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body&g
html 「table」表格基本结构
weixin_43362233的博客
07-02 545
建立一个基本的表格，就必须包含一组table 一组tr 以及一组td 这是最简单的单元格标记 table是定义一个表格 tr是定义一行 td是定义一个单元格 <html> <head> <title>单元格</title> </head> <body> <center> <table border="1"> <tr> <td>A1</td&gt
HTML基础标签详解：布局与显示
在这个整理的基础HTML知识点中，我们将探讨以下几个核心元素及其功能： 1. `<meta>`标签：`http-equiv="refresh"`属性用于设置页面自动刷新，`content`属性指定刷新时间和跳转的URL。这常用于简单的网页重定向。 2...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值