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

时间:2022-07-24
本文章向大家介绍想知道HTML语法结构？看这一篇就够了（超全解析html语法），主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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:UserslenovoPictures1577379103973.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

用于指定当图片无法显示是显示的文字

随机文章
WEB前端知识点必读
最近更新