HTML/CSS笔记1-html入门-优快云博客

本文链接：https://blog.youkuaiyun.com/PIUYIXIU/article/details/109219529

本文详细介绍了HTML的基本结构和常用标签，包括标题、段落、图像、链接等元素的使用，并展示了如何创建和跳转页面。同时，还提到了元信息如编码、关键词和描述的设置，以及特殊字符的表示方法。

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

HTML超文本标记语言

示例代码（eclipse的jsp文件）：
a、index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- DOCTYPE声明可有可无 -->
<!DOCTYPE html>
<html>
<!-- head中的东西除了title标题，其它基本不能显现 -->
<head>
<!-- 设置网页编码 -->
<meta charset="UTF-8">
<!-- 关键词：决定是否能背搜索引擎搜到 -->
<meta name="keywords" content="关键字">
<!-- 描述：如果搜到本网页时展示的描述内容-->
<meta name="description" content="这里是网页简介">
<title>MyWeb</title>
</head>
<body>
	<h1>一级标签</h1>
	<strong>今日推荐</strong><!-- 加粗标签 -->
	<b>2020/10/21</b><!-- 同样是加粗标签 -->
	<br><!-- 换行标签 -->
	<em>Have A Nice Day</em>  <!-- 斜体标签 -->
	<b><em>David</em></b>  <!-- 嵌套 -->
	<br>
	<hr><!-- 水平线标签 -->
	<!-- 在HTML输出特殊字符 -->
	引号：&quot
	小于号：&lt
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	大于号：&gt
	&quot
	<br>
	版权符号：&copy:xxxx;2020-10-21 xxxx
	<p>这里分段</p><!-- 分段标签 -->
	<!-- 鼠标悬浮文字   相对路径        宽度         高度 -->
	<img title="玛奇玛" src="img/1.png" width="300px" height="200"/><!-- 图片一般采用相对路径 -->
	<!-- 文件无法找到时显示的文字 -->
	<br>
	<img alt="找不到该图片"  src="img/0.png">
	<h2>二级标签</h2>
	<!-- 普通超链接 -->
	<a href="https://www.baidu.com/">百度超链接</a><br>
	<a href="b.jsp">这里是b页面</a>
	<!-- 锚链接跳转 原超链接加#后跳转锚标识-->
	<a href="b.jsp#here">锚链接跳转</a>
	<br>
	<!-- 功能性链接 -->
	<a href="mailto:1597167270@qq.com">点我发邮件</a>
	<a href=>
	<h3>三级标签</h3>
	<h4>四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>
</body>
</html>

b、b.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>这里是b页面</h1>
	<br><br><br><br><br>
	<br><br><br><br><br>
	<br><br><br><br><br>
	<br><br><br><br><br>
	<br><br><br><br><br>
	<br><br><br><br><br>
	<br><br><br><br><br>
	<br><br><br><br><br>
	<!-- name为锚标识 -->
	<a name="here"><h1>跳转此处</h1></a>
</body>
</html>