JavaWeb---Day 01

小麦穗呀

已于 2023-04-26 20:10:46 修改

阅读量86

点赞数

分类专栏： JavaWeb 文章标签： java html 前端

于 2023-04-26 19:57:54 首次发布

本文链接：https://blog.csdn.net/qq_49544301/article/details/130393203

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、HTML介绍

HTML(Hyper Text Markup Language): 超文本标记语言。以 .html 结尾的文件。

HTML标签规则：

1.单标签 < 标签名 />

2.双标签 < 标签名 ></ 标签名 >

HTML基本结构

<!DOCTYPE html><!--声明是一个html文档-->
<!-- html基本结构-->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的第一个html程序</title>
    </head>
    <body>
        hello world!!!!!!!
    </body>
</html>

二、HTML标签

（一）HTML标题标签

hn（1——6）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

（二）HTML加粗标签

<b>我的第一个首页</b>
我是一个对比
<strong>加粗</strong>

（三）HTML斜体标签

<i>斜体</i>
<em>斜体2</em>

（四）HTML段落标签

<p>我是一个段落</p>
<p>我是另一个段落</p>

（五）HTML换行标签

我是双皮奶
<br/>
我今年两岁了<br>
性别为男

（六）HTML字体标签

我是<font color="red">双皮奶</font>

（七）HTML分割标签

<hr width="50%" align="left"/>
<hr width="200px" align="right">
<!--
width:宽度
align:水平方向的位置
-->

（八）HTML上、下标签

<--上标签-->
H<sub>2</sub>O
<--下标签-->
2<sup>3</sup><br>

（九）HTML删除标签

原价：<del><font color="red">999</font></del> 现价：<b>9.9</b>

（十）HTML链接标签

<!--超链接：跳转页面-->
<!--href:跳转的链接 #:空跳转
target:跳转的方式
_self:当前页面打开，默认
_blank:新开页面打开-->
<a href="https://www.baidu.com/" target="_blank">点击一下，跳转百度</a><br>
<!--
相对路径和绝对路径
相对路径：从当前的文件出发寻找 ../上级 /下级
绝对路径：从盘符开始
-->
<a href="../poem.html">点击一下，跳转诗的页面</a>

<!-- 锚链接：返回希望的位置-->
<a name="top">我是顶部</a>
<a href="#top">回到顶部</a>

（十一）HTML图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习2</title>
	</head>
	<body>
		<a href="https://www.baidu.com" target="_blank""><img src="../img/01.jpg" width="100px" title="项目图片" align="找不到图片"/></a>
		<img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0921%2F0be2a159j00rijm72002od200n0019ng00it011b.jpg&thumbnail=660x2147483647&quality=80&type=jpg" title="网页图片" height="200px"/>
		<ol type="1" start="1">
			<li>23,张三,未婚</li>
			<li>45,李四,未婚</li>
			<li>12,王五,已婚</li>
		</ol>
		<ul type="circle">
			<li>语文</li>
			<li>英语</li>
			<li>数学</li>
		</ul>
		<dl>
			<dt>课表</dt>
			<dd>语文</dd>
			<dd>数学</dd>
			<dd>英语</dd>
		</dl>
	</body>
</html>

（十二）HTML表格标签

常用的标签	描述
table	定义表格
caption	表格的标题
th	表头
tr	行
td	单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课程表</title>
	</head>
	<body>
		<table border="1px" width="500px" height="10px">
			<caption>课程表</caption>
			<tr>
				<th></th>
				<th>周一</th>
				<th>周二</th>
				<th>周三</th>
				<th>周四</th>
				<th>周五</th>
			</tr>
			<tr align="center">
				<td rowspan="2">上午</td>
				<td colspan="2">语文</td>
				<td rowspan="3">数学</td>
				<td rowspan="2">英语</td>
				<td>英语</td>
			</tr>
			<tr align="center">
				<td>地理</td>
				<td>语文</td>
				<td>物理</td>
			</tr>
			<tr align="center">
				<td rowspan="3">下午</td>
				<td >数学</td>
				<td >政治</td>
				
				<td >地理</td>
				<td rowspan="3">数学</td>
			</tr>
			<tr align="center">
				<td >地理</td>
				<td rowspan="2">数学</td>
				<td >化学</td>
				<td >物理</td>
			</tr>
			<tr align="center">
				<td >语文</td>
				<td >美术</td>
				<td >科学</td>
			</tr>
		</table>
	</body>
</html>

（十三）HTML文本标签

<span><font color="red">用户名或密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &g错误</font>
</span>
<span><font color="red">用户名或密码错误</font></span>

（十四）HTML块标签

<div style="color: red; background-color: aqua; width: 200px; height:
200px;">111</div>
<div>222</div>

三、HTML常用的转义字符

<!--转义字符
空格：&nbsp;
> &gt;
>= &ge;
< &lt;
<= &le;
版权符 &copy;
-->

四、HTML5常用的语义标签

<!--表示一个缩写-->
<abbr title="Hyper Text Markup Language">HTML</abbr>
<!--表事一个地址-->
<address>西安市雁塔区科技路创业大厦</address>
<!--表事引用-->
<span>培根说：<q>读史使人明智，读诗使人巧慧，数学使人精细，物理学使人深刻，伦理学使人
高尚，逻辑修辞使人善辩。</q></span>
<br>
床前明月光
疑是地上霜
<!--表示纯文本-->
<pre>
举头望明月
低头思故乡
</pre>
<!--表示定义作品的标题-->
<cite>《富春山居图》</cite>