HTML（复习）

最新推荐文章于 2025-02-27 00:15:00 发布

270年前

最新推荐文章于 2025-02-27 00:15:00 发布

阅读量140

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_49344258/article/details/108856031

版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括HTML的定义、网页基本结构、常用标签如段落、标题、链接、表单等。特别讨论了表单的构成和提交方式，以及GET和POST的区别。此外，还展示了表格的创建，包括不同类型的列表和表格的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发即面向对象开发，万事万物皆可为对象。对象【属性，方法，事件】

例如：person:name 、age、sex、ID.....

1、介绍

HTML（Hypertext Markup Language）即超文本标记语言，只有浏览器可以解析的语言。

浏览器一般由（js引擎，和渲染引擎构成），而解析HTML是由渲染引擎负责。

超文本：意为除了文本之外，还包括视频，音频，链接，图片，列表和表格等等

标记语言是指由标签组成的语言，有两种类型：

双标签<标签名称1> <标签名称1/>
单标签<标签名称2/>

2、网页的基本结构

一般网页由<html>内包含<head>和<body>构成。

<html>
	<head></head>	
	<body></body>
</html>

不同版本HTML声明方式

H4的声明方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

H5的声明方式

<!DOCTYPE html>

3.HTML的基本标签

段落标签 p 块级标签占据文档流的一行显示
标题标签 h1~h6 块级标签占据文档流一行显示
字体标签 font
超链接标签 a
水平线 hr
换行 br
sub 和 sup
图片标签 img
内容 span label div
斜体i
加粗 b
下划线u
pre

4、列表

常用的列表：无序列表(ul-li) 有序列表(ol-li) 自定义列表(dt-dd)

5、表单

表单: 用来收集用户信息提供数据(提交到后台)；

form表单

form表单的内容我们称之为表单类型

form包含两个属性：

action属性: 表示的是表单数据提交到的 url地址(后台地址)

method属性: 表示的是表单数据提交的方式 get/post

注：form表单不手写提交方式的时候默认的是get提交

GET和POST的区别：

get提交表单数据的时候会将数据显示在url地址栏中 , 不安全, get提交的数量小

post提交不会将数据展示url地址栏安全, 提交的数量大

表单类型 type

按钮类型的表单元素如下:

radio[单选框],

button[提交按钮-需要涉及到 JS获取表单数据统一提交到后台 ],

checkBox[复选框],

reset,

submit[提交按钮-不需要js获取表单数据, 会直接提交到 action对应的地址url 中 ],

file....

文本类型的表单元素如下:

text[文本框],

password[密码框],

email[电子邮件],

number,

tel,

textarea[文本域],

datetime[时间]....

下拉选择框: select

日期 : date

6、表格的两种方式

1.表格table:<tr><td>

border边框

align水平对齐方式

cellspacing设置单元格与单元格之间的距离

cellpadding设置单元格内容与单元格边框之间的距离

bgColor 设置背景颜色

borderColor设置边框颜色

background 设置表格的背景图片(单纯添加背景图片，调整大小需使用CSS）

2.表格table：thead<tr><td>、tbody<tr><td>、tfoot<tr><td>

<caption>设置表格标题

<colspan>可以设置表格单元格可横跨的列数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" height="300" width="500" align="center">
			<thead>
				<caption>表格标题</caption>
				<!-- thead 元素用于对 HTML 表格中的表头内容进行分组 -->
				<tr>
					<td>血型</td>
					<td>年龄</td>
					<td>病史</td>
					<td>匹配度</td>
				</tr>
			</thead>
			<!-- tbody 元素应该与 thead 和 tfoot 元素结合起来使用 -->
		    <tbody>
				<tr>
					<td>AB</td>
					<td>38</td>
					<td>无</td>
					<td>60%</td>
				</tr>
				<tr>
					<td>0</td>
					<td>50</td>
					<td>无</td>
					<td>70%</td>
				</tr>
				<tr>
					<td>B</td>
					<td>38</td>
					<td>无</td>
					<td>55%</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="4">建议：</td>
				</tr>
			</tfoot>
		<!-- 如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签 -->
		<!-- tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组 -->
		</table>
	</body>
</html>