想知道HTML语法结构？看这一篇就够了（超全解析html语法）

最新推荐文章于 2023-06-30 09:03:37 发布
最新推荐文章于 2023-06-30 09:03:37 发布
阅读量3.1k 收藏 33
点赞数 4
分类专栏： Java Web 文章标签： HTML html html基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44826356/article/details/106307465
版权

NTML文档结构

HTML文档由4个主要标记组成，包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。

1.<html>标记
  • <html>标记是HTML文件的开头。
  • 所有的HTML文件都以标记开头，以标记结束，即HTML页面的所有标记都要放置在与标记中。
  • 标记虽然没有实质性的功能，但却是HTML必不可少的部分。
2.<head>标记
  • <head>标记是HTML文件的头标记，用于存放HTML文件的信息，如定义CSS样式的代码可放置在与标记之中。
3.<title>标记
  • <title>标记为标题标记。
  • 可将网页的标题定义在与标记之中。
4.<body>标记
  • 是HTML页面的主体标记。
  • 页面中的所有内容都定义在标记中。
  • 标记本身也具有控制页面的一些特性，如控制页面的背景图片和颜色等。

HTML常用标记

1.换行标记

在HTML中，换行标记是<br>
例：创建一个HTML页面，在页面中输入一首古诗。

<html>
	<head>
		<title>应用换行标记实现页面文字换行</title>
	</head>
	<body>
		<b>
		静夜思
		</b><br>
		举头望明月<br>
		低头思故乡
	</body>
</html>

在这里插入图片描述

2.段落标记
  • 段落标记以<p>标记开头，以</p>标记结束。
  • 段落标记在段前和段后各添加一个空行，而定义在段落标记中的内容不受该标记的影响。
3.标题标记
  • 在HTML标记中设定了6个标题标记，分别为<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
  • 数字越小，表示级别越高，文字的字体也就越大。
4.居中标记
  • 居中标记以<center>标记开头，以</center>结尾。
  • 标记之中的内容居中显示。
5.文字列表标记
  • 无序列表
    无序标记是在每一个列表项的前面添加一个圆点符号。
    通过符号<ul>可以创建一组无序列表，其中每个列表项以<li>表示
<html>
	<head>
		<title>无序列表标记</title>
	</head>
	<body>
		编程词典有以下几种品牌
		<p>
		<ul>
		<li>Java
		<li>C
		<li>C++
		<li>C#
		</ul>
	</body>
</html>

在这里插入图片描述

  • 有序列表
    有序列表的标记为<ol>，每一个列表项前使用<li>。有序列表中的项目是有一定顺序的。
	<html>
	<head>
		<title>无序列表标记</title>
	</head>
	<body>
		编程词典有以下几种品牌
		<p>
		<ol>
		<li>Java
		<li>C
		<li>C++
		<li>C#
		</ol>
	</body>
</html>

在这里插入图片描述

表格标记

表格标记<table>

<table>……</table>标记表示整个表格。
<table>中有很多属性，例如width表示表格的宽度；border属性用来设置表格的边框，align属性设置表格的对齐方式，bgcolor属性用来设置表格的背景色等。

标题标记<caption>

标题标记以<caption>开头，以</caption>结束，它也有一些属性，例如align,valign等属性。

表头标记<th>

表头标记是<th>开头，以</th>结尾也可以通过align,background,colspan,valian等属性来设置表头。

表格行标记<tr>

表格行标记以<tr>开头，一组<tr>标记表示表格的一行。
<tr>标记要嵌套在<table>标记中使用，该标记也具有align,background等属性。

单元格标记<td>

单元格标记<td>又称为列标记，一个<tr>标记中可以嵌入若干个<td>标记。该标记也具有align,background，valign等属性。

例：

<html>
	<body>
	<table width="318" height="167" border="1" align="center" bgcolor="blue">
		<caption>学生考试成绩表</caption>
		<tr>
			<td align="center" valign="middle">姓名</td>
			<td align="center" valign="middle">语文</td>
			<td align="center" valign="middle">数学</td>
			<td align="center" valign="middle">英语</td>
		</tr>
		<tr>
			<td align="center" valign="middle">张三</td>
			<td align="center" valign="middle">90</td>
			<td align="center" valign="middle">89</td>
			<td align="center" valign="middle">84</td>
		</tr>
		<tr>
			<td align="center" valign="middle">李四</td>
			<td align="center" valign="middle">89</td>
			<td align="center" valign="middle">99</td>
			<td align="center" valign="middle">100</td>
		</tr>
	</table>
	</body>
</html>

在这里插入图片描述

HTML表单标记

1.<form>…</form>表单标记

表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。标记的基本语法如下：

<form action = "url" method = "get"|"post" name = "name" onSubmit = "" target = "">
</form>

<form>标记的各属性说明如下。

  • action属性
    action属性用来指定处理表单数据程序的URL地址。
  • method属性
    method属性用来指定数据传输到副武器的方式。该属性有两种属性值，分别为get与post。【1）get属性值表示将输入的数据追加在action指定的地址后边，并传送到服务器。2）当属性值为post时，会将输入的数据按照HTTP中的post传输方式传送到服务器中。】
  • name属性
    name属性用于指定表单的名称，该属性值可以由程序员自定义。
  • onSubmit属性
    onSubmit属性用于指定当用户单击提交按钮时触发的事件。
  • target属性
    target属性用于指定输入数据结果显示在哪个窗口中，该属性的属性值可以设置为“_blank”、“_self”、“_parent”、“_top”。【_blank表示在新窗口中打开目标文件、_self表示在同一窗口上打开这项一般不用配置、_parent表示在上一级窗口中打开，一般使用框架页时经常使用、_top表示在浏览器的整个窗口中打开，忽略任何框架】
2.<input>表单输入标记

表单输入标记是使用最频繁的表单标记，通过这个标记可以向页面中添加单行文本、多行文本、按钮等。标准语法格式如下：

<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox" value="checkbox">

标记的属性如下图所示：

属性描述
type用于指定添加的是哪种类型的输入字段，共有10个可选值
disabled用于指定输入字段不可用，即字段变成灰色。其属性值可以为空，也可以指定为disabled
checked用于指定输入字段是否处于被选中状态，用type属性值为radio和checkbox的情况下，其属性值可以为空值，也可以指定为checkbox
width用于指定输入字段的宽度，用于type属性为image的情况下
height用于指定输入字段的高度，用于type属性为image的情况下
maxlength用于指定输入字段可输入文字的个数，用于type属性值为text和password的情况下，默认没有字数限制
readonly用于指定输入字段是否为只读。其属性值可以为空值，也可以指定为readonly
size用于指定输入字段的宽度，当type属性为text和password时，以文字个数为单位，当type属性为其他值时，以像素为单位
src用于指定图片的来源，只有当type属性为image时有效
usemap为图片设置热点地图，只有当type为image时有效。属性值为URI，URI格式为“#+标记的name属性值”。例如，标记的name属性值为Map，该URI为#Map
alt用于指定当图片无法显示时显示的文字，只有当type属性为image时才有效
name用于指定输入字段的名称
value用于指定输入字段默认的数据值，当type属性为checkbox和radio时，不可省略此属性，为其他值时可以省略。当type属性为button、reset和submit时，指定的是按钮上的显示文字；当type属性为checkbox和radio时，指定的是数据项选定时的值

type属性是标记中非常重要的内容，决定输入数据的类型。该属性值的可选项如下所示：

type属性的属性值
可选值描述可选值描述
text文本框submit提交按钮
password密码域reset重置按钮
file文件域button普通按钮
radio单选选项hidden隐藏域
checkbox复选框image图像域

例：创建一个index.html的文件，在该文件的标记中添加一个表单，并且在该表单中应用标记中添加文本框、密码域、单选选项、复选框、文本域、隐藏域、提交按钮、重置按钮、普通按钮和图像域共10个输入字段。

<html>
	<body>
	<form action="" method="post" enctype="multipart/form-data" name="form1">
	文本框：<input name="user" type="text" id="user" size="39" maxlength="39"><br>
	密码域：<input name="password" type="password" id="password" size="40" maxlength="40"><br>
	单选按钮：
	<input name="sex" type="radio" value="男" checked>男
	<input name="sex" type="radio" value="女">女<br>
	复选框：
	<input name="checkbox" type="checkbox" value="1" checked>1
	<input name="checkbox" type="checkbox" id="checkbox" value="2">2<br>
	文件域：<input type="file" name="file"><br>
	隐藏域：<input type="hidden" name="hiddenField"><br>
	提交按钮：<input type="submit" name="Submit1" value="提交"><br>
	重置按钮：<input type="reset" name="Submit2" value="重置"><br>
	普通按钮：<input type="button" name="Submit3" value="按钮"><br>
	图像域：<input type="image" name="imageField" src="C:\Users\lenovo\Pictures\1577379103973.png" width="108" height="61">
	</form>
	</body>
</html>

在这里插入图片描述

3.<select>…</select>下拉列表标记

<select>标记可以在页面中创建下拉列表，此时的下拉列表是一个空的列表，要使用<option>标记向列表中添加内容。<select>标记的语法格式如下：

<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>

<select>标记的属性说明如下表所示：

属性描述
name用于指定下拉列表框的名称
size用于指定下拉列表框中显示的选项数量，超出该数量的选项可以拖动滚动条查看
disabled用于指定当前下拉列表框不可使用（变成灰色）
multiple用于让多行列表框支持多选

例：

<html>
	<body>
	<select name="select">
		<option>C</option>
		<option>C++</option>
		<option>C#</option>
		<option>Java</option>
	</select>
	&nbsp;多行列表框（不可多选）：
	<select name="select2" size="2">
		<option>C</option>
		<option>C++</option>
		<option>C#</option>
		<option>Java</option>
	</select>
	&nbsp;多行列表框（可多选）：
	<select name="selec3" size="3" multiple>
		<option>C</option>
		<option>C++</option>
		<option>C#</option>
		<option>Java</option>
	</select>
	</body>
</html>

在这里插入图片描述

<textarea>多行文本标记

为多行文本标记。与单行文本标记相比，多行文本可以输入更多的内容。通常情况下，标记出现在标记的标记内容中。标记的语法格式如下：

<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值</textarea>

标记的属性说明如下表所示：

属性描述
name用于指定多行文本框的名称，当表单提交后，在服务端获取表单数据时应用
cols用于指定多行文本框显示的列数（宽度）
rows用于指定多行文本框显示的行数（高度）
disabled用于指定当前多行文本框不可使用（变为灰色）
readonly用于指定多行文本框为只读
wrap用于设置多行文本中的文字是否自动换行

warp属性的可选值如下表

可选值描述
hard默认值，表示自动换行，如果文字超过cols属性所指的列数就自动换行，并且提交到服务器时，换行符被提交
soft表示自动换行，如果文字超过cols属性所指的列数就自动换行，并且提交到服务器时，换行符不被提交
off表示不自动换行，如果想让文字换行，只能按下Enter键强制换行

超链接与图片标记

1.超链接标记

超链接标记是页面中非常重要的元素，用于实现在网站中从一个页面跳转到另一个页面。超链接标记的语法非常简单，语法如下：

<a href = ""></a>

属性href用来设定连接到哪个页面中

2.图像标记

在页面中添加图片是通过<img>标记来实现的。<img>标记的语法格式如下：

<img src="uri" width="value" height="value" border="value" alt="提示文字">

<img>标记的属性说明如下表所示：

属性描述
src用于指定图片的来源
width用于指定图片的宽度
height用于指定图片的高度
border用于指定图片外边框的宽度，默认值为0
alt用于指定当图片无法显示是显示的文字
海盗船长没有船y
关注
  • 4
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML教程（看完这篇就够了）
孙叫兽的博客
06-01 1万+
目录结构 HTML教程 HTML 简介 HTML 编辑器 HTML基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML head HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 块级元素 HTML 布局 HTML 表单 HTML iframe HTML 颜色 HTML 颜色值 HTML 颜色名 HTML 脚本 HTML 字符实体 HTML URL HTML 速查..
小书匠语法说明之html属性配置decorate1
08-04
2. 语法结构：在需要添加属性的块级或行内语法后面，使用`<!-- {...} -->`包裹内容。内容中，class前缀`.`，id前缀`#`，其他HTML属性以键值对形式书写，如`key=attr`，多个属性间以空格分隔。 三、示例说明 1. ...
编译原理总结，看这一篇就够了！
LeeDuoZuiShuai的博客
03-15 10万+
编译原理总结第一章 编译概述一.翻译程序的三种方式二.编译程序的五个阶段第二章 文法与语言2.1 符号串和语言2.1.1 字母表2.1.2 符号串2.1.3 语言2.2 文法和语言的形式化定义2.2.1 文法的形式化定义2.2.2 语言的形式化定义2.2.3 短语、直接短语、句柄2.2.4 规范推导和规范归约2.3 语法分析树与文法的二义性2.3.1 语法分析树2.3.2 文法的二义性2.3.4 ...
Redis从青铜到王者，从环境搭建到熟练使用，看这一篇就够了，超全整理详细解析，赶紧收藏吧
热门推荐
北慕辰的博客，欢迎各位大佬光临！！
08-25 21万+
一、常见的非关系型数据库NOSQL分类 二、了解Redis 三、Redis的单节点安装教程 四、Redis的常用命令 五、BITMAP位图 六、Redis的数据模型 七、Redis持久化 八、idea使用Jedis连接Redis
学习MySQL这一篇就够了
轻松的小希
11-25 21万+
第一章 数据库概述 1.1、数据库的好处 将数据持久化到本地 提供结构化查询功能 1.2、数据库的常见概念 DB：数据库，存储数据的仓库 DBS：数据库管理系统，又称为数据库软件或者数据库产品，用于创建和管理DB，常见的有MySQL、Oracle、DB2、SQL Server SQL：结构化查询语言，用于和数据库通信的语言，不是某个数据库软件特有的，而是几乎所有的主流数据库软件通用的语言 1.3、数据库的存储特点 数据存放到表中，然后表再放到库中 一个库中可以有多张表，每张表具有唯一的表名用来标识
HTML5 面试题大全（持续更新） 看这一篇就够了
Hassan的小博客!
06-29 5917
HTML5 经典面试题 1.请描述一个网页从开始请求到最终显示的完整过程？ 一个网页从请求到最终显示的完整过程一般可分为如下7个步骤 ： 在浏览器中输入网址 发送至DNS服务器并获得域名对应的web服务器的IP地址 与web服务器建立TCP连接 浏览器向web服务器的IP地址发送相应的HTTP请求 web服务器响应请求并返回指定URL的数据，或错误信息，如果设定重定向，则重定向到新的URL地址 ...
Vue3+TypeScript？看这一篇就够了
淮城一只猫
01-10 4万+
TypeScript和Vue3组合Api学习文档
《Python编程：从入门到实践》语法知识点总结 这一篇就够了
枯木何日可逢春
03-27 8958
《Python编程：从入门到实践》语法知识点总结 第二章：变量和简单的数据类型 python可以直接使用变量而不用声明 message="hello!" print(message) 使用方法修改字符串的大小写 name="hello python" print(name.title()) #title()以首字母大写的方式显示每个单词 name="Hello Python" print...
webpack看这一篇就够了
一个前端开发者
06-20 5万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
JSON百科全书：学习JSON看这一篇就够了
最新发布
青春木鱼的博客
06-30 1万+
JSON 对象包含两个方法：用于解析 JavaScript Object Notation（JSON）的 parse() 方法，以及将对象/值转换为 JSON 字符串的 stringify() 方法。除了这两个方法，JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。
Yufa.rar_语法解析
09-24
3. **抽象语法树（Abstract Syntax Tree, AST）**：这是解析过程的产物，它是源代码结构的树形表示，每个节点都代表一个语法构造。AST有助于后续的语义分析和代码生成。 在Java中，解析器通常使用递归下降解析...
英语语法练习及答案解析共33篇
04-12
这个资源包包含了一系列的英语语法练习题目，每篇练习后都附有详细的答案解析，便于自我检验和提升。 首先，我们要明确英语语法的重要性。它不仅有助于我们正确地构造句子，避免表达上的错误，还能提高我们的阅读...
Java中Lambda表达式之Lambda语法与作用域解析
08-31
Lambda表达式的语法结构主要包括参数列表和 Lambda体两部分。参数列表位于Lambda表达式的左侧，用括号包围，可以包含零个或多个参数，参数之间用逗号分隔。Lambda体位于右侧，由一个箭头符号 "->" 分割，可以是一个...
解析带有html标签的json数据
03-17
本篇文章将深入探讨如何解析带有HTML标签的JSON数据，以及使用HTML json parser来解决这个问题。 首先，我们需要理解JSON的基本结构。JSON是一种基于文本的、人可读的格式，用于存储和传输数据。它以键值对的形式...
JSP基本语法
海盗船长y的博客
05-29 5629
1.JSP页面的基本构成 JSP页面是指拓展名为.jsp的文件。 在一个JSP页面中，可以包括指令标识、HTML代码、JavaScript代码、嵌入的Java代码、注释和JSP动作标识等内容。但这些内容并不是一个JSP页面所必需的。下面将通过一个简单的JSP页面说明JSP页面的构成。 2.指令标识 指令标识主要用于设定整个JSP页面范围内都有效的相关信息，它是被服务器解释并执行的，不会产生任何输出到网页中的内容，也就是说指令标识对客户端浏览器是不可见的。 JSP指令标识的语法格式如下： <%@ 指令名
Java Script脚本语言入门（上）
海盗船长y的博客
05-25 3451
了解Java Script 1.什么是Java Script？ JavaScript是一种基于对象和事件驱动并具有安全性能的解释性脚本语言，在Web应用中应用广泛。 他不需要编译，而是直接嵌入到HTTP页面中，把静态页面转换成支持用户交互并相应应用事件的动态页面。 2.Java Script的主要特征 解释性：Java Script是一种脚本语言，采用小程序段的方式实现编程。 基于对象：他是一种基于对象的语言，它可以应用自己已经创建的对象，因此许多功能来自于脚本环境中对象的方法与脚本的相互作用。 事件
JavaBean技术
海盗船长y的博客
06-04 1088
1.JavaBean技术简介 1.JavaBean概述 JavaBean的应用简化了JSP页面，在JSP页面中只包含了HTML代码、CSS代码等，但JSP页面可以引用JavaBean组件来完成某一业务逻辑，如字符串处理、数据库操作等。 2.JavaBean种类 在传统应用中，JavaBean主要用于实现一些可视化界面，如一个窗体、按钮和文本框等，这样的JavaBean被称为可视化的JavaBean。 随着技术的发展与项目的需求，现在的JavaBean主要用于实现一些业务逻辑或封装一些业务对象，由于这样的J
一文了解CSS样式表结构
海盗船长y的博客
05-25 819
1.CSS规则 在CSS样式表中包括三个部分的内容：选择符、属性和属性值。语法样式如下： 选择符{属性：属性值;} 语法说明如下： 选择符：又称选择器，是CSS中很重要的概念，所有HTML中的标记都是通过不同的CSS选择器进行控制的。 属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此使用CSS属性的使用变得更加复杂。 属性值：某属性的有效值。属性与属性值之间以“:”号分割。当有多个属性值时，使用“;”分隔。 2.CSS
写一篇400字左右的简单算术语法式到抽象语法树转换的总结
06-02
在编译原理中，抽象语法树（Abstract Syntax Tree，AST）是一种重要的数据结构，用于表示程序的语法结构。在编写编译器或解释器时，通过将程序的代码解析成抽象语法树的形式，可以更方便地对程序进行分析和处理。下面将简单介绍算术语法式到抽象语法树的转换过程。 算术语法式是一种基本的数学表达式，由数字、运算符和括号组成。例如，表达式“2 + 3 * 4”可以表示为： ``` (2) + ((3) * (4)) ``` 将这个算术语法式转换为抽象语法树，需要按照以下步骤进行： 1. 将表达式中的数字和运算符分别转换为AST的节点。例如，数字2、3、4可以表示为AST的叶子节点，而加号和乘号可以表示为AST的内部节点。 2. 将AST的节点按照运算符的优先级和结合性进行组合。在本例中，乘法运算优先级高于加法运算，因此需要先将“3 * 4”这个子表达式转换为AST，并将其作为一个子节点添加到加法运算的节点下。 3. 在AST中添加括号节点。在本例中，由于“3 * 4”是一个子表达式，因此需要将其添加为一个括号节点，以确保其优先级高于加法运算。 最终，将算术语法式转换为的抽象语法树如下所示： ``` + / \ 2 * / \ 3 4 ``` 在这个抽象语法树中，加法运算节点是根节点，其左子节点是数字2，右子节点是一个乘法运算节点。乘法运算节点的左子节点是数字3，右子节点是数字4。 总之，将算术语法式转换为抽象语法树的过程是根据语法规则，将表达式中的数字和运算符转换为AST节点，并按照优先级和结合性组合节点的过程。抽象语法树作为程序语法结构的一种抽象表示方式，是编译原理中重要的概念之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值