HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/ast_224/article/details/88336587

本文详细介绍了HTML的基本语法和常用标签，包括文档结构、文本格式化、列表、图像、超链接及表格设计等内容。

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

HTML(Hypertext Marked Language) 超文本标记语言。

常用的HTML语言标签：

<head></head> 声明网页文件头

<title></title> 声明网页的标题

<body></body> 声明文件主体，包括所有的文本、图片及文档中其它标记

<font color=""></font> 声明文字颜色

<br> 插入一个空行

<ul></ul> 声明一个无序列表

<ol></ol> 声明一个有序列表

<li></li 声明一个列表项

<b></b> 声明其包含部分中的文字使用粗体

<i></i> 声明其包含部分中的文字使用斜体

<u></u> 下划线

<strike></strike> 删除线

<sup></sup> 上标文字

<sub></sub> 下标文字

<img src=""> 插入一个图片文件，等号后面是图片文件的URL

<hr> 插入一个水平分隔线

超级连接：

<a href=""></a> 说明其包含的部分是一个超链接，等号后面是连接内容的URL

<a href="http://www.sina.com.cn">新浪</a> 可以通过单击网页上的“新浪”而跳转到href后的url

<a href="http://www.sina.com.cn"><img src="sina.jpg"></a> 可以通过单击网页上的链接图像跳转

<body bgcolor="blue"> 定义了网页页面的背景颜色

<h1></h1> <h1>定义了最大的标题元素 <h6>定义了最小的

<p></p> 用于段落的分段

<p align="left/right/center"></p> （段落对齐）

<br> 用于段落的换行

<pre></pre> 预格式化标签

表格设计：

<table></table> 表格的整体设置

<caption></caption> 设置标题

<th></th> 设置表头

<tr></tr> 设置表格的行

<td></td> 设置行中的每个具体的单元格

HTML文件结构：

文件头标签：<title>和<meta>

<title>标签用于指定文档标题： <title> 文档标题 </title>

　　1、name属性:主要用于描述网页，与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

　　语法：＜meta name="参数" content="具体的参数值"＞。

　　name属性参数：

　　A、keywords(关键字)：用来告诉搜索引擎你网页的关键字是什么。

　　举例：＜meta name ="keywords" content="science, education,culture,politics, human"＞

　　B、description(网站内容描述)：用来告诉搜索引擎你的网站主要内容。

　　举例：＜meta name="description" content="This page is about the meaning of science, education,culture."＞

　　C、robots(机器人向导)：用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

　　 content的参数有all,none,index,noindex,follow,nofollow。默认是all。

　　举例：＜meta name="robots" content="none"＞

　　D、author(作者)：标注网页的作者

　　举例：＜meta name="author" content="root,root@21cn.com"＞

　　2、http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

　　语法：＜meta http-equiv="参数" content="参数变量值"＞

http-equiv属性参数：

　　A、Expires(期限)：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

　　用法：＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞

　　注意：必须使用GMT的时间格式。

　　B、Pragma(cache模式)：禁止浏览器从本地计算机的缓存中访问页面内容。

　　用法：＜meta http-equiv="Pragma" content="no-cache"＞

　　注意：这样设定，访问者将无法脱机浏览。

　　C、Refresh(刷新)：自动刷新并指向新页面。

　　用法：＜meta http-equiv="Refresh" content="2;URL=http://www.root.net"＞

　　注意：其中的2是指停留2秒钟后自动刷新到URL网址。

　　D、Set-Cookie(cookie设定)：如果网页过期，那么存盘的cookie将被删除。

　　用法：＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞

　　注意：必须使用GMT的时间格式。

　　E、Window-target(显示窗口的设定)：强制页面在当前窗口以独立页面显示。

　　用法：＜meta http-equiv="Window-target" content="_top"＞

　　注意：用来防止别人在框架里调用自己的页面。

　　F、content-Type(显示字符集的设定)：设定页面使用的字符集。

　　用法：＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞

例如：定时刷新

<!-- flushtime.jsp -->
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.util.Date"%>

<html>
	<head>
		<meta http-equiv="refresh" content="5">
		<meta http-equiv="pragram" content="no-cache">
	</head>
	
	<body>
	<h1 align="center">定时刷新</h1>
	<% Date d = new Date(); %>
	现在时间是<%=d%>
	</body>
</html>

HTML基本概念