【Java Web】前置HTML和CSS

最新推荐文章于 2024-05-30 15:07:12 发布

夏太热小小夏

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量1.1k

点赞数 18

文章标签：前端 java html

本文链接：https://blog.csdn.net/m0_73027263/article/details/136460024

版权

1.1 HTML

HTML，即超文本标记语言。HTML文本是由HTML命令组成的描述性文件，HTML命令可以是说明文字、图形、动画、声音、表格、链接等。

HTML5的文档的结构：

<!DOCTYPE html>                 //文档类型说明
<html>                          //根标签
	<head>                      //头部标签
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>                      //主体标签
	</body>
</html>

1.2 HTML5的常用标签

<div>和<span>：<div>是一个块级元素，它包含的元素会自动换行；而<span>是行内元素，在它的前后不会换行。<span>没有结构上的意义，只是单纯的应用样式。

<b></b>和<strong></strong> 文字以粗体方式显示(HTML推荐使用<strong>标签)

<i></i>和<em></em> 文字以斜体方式显示(HTML推荐使用<em>标签)

<s></s>和<del></del> 文字以加删除线方式显示(HTML推荐使用<del>标签)

<u></u>和<ins></ins> 文字以加下画线方式显示(HTML不赞成使用<u>标签)

<p>成对出现，是块元素会自动换行

<h1>~<h6> 是从1~6字体大小递减的标题标签

<img src="图像URL" /> 是图像标签，用来显示图片

HTML5新增的语义标签表：

标签	说明
<header>	标签头部区域的内容，包含网站名称、主题或主要信息
<nav>	用于定义页面的导航链接部分区域
<section>	将页面中的内容划分为独立区域，用于显示章节或段落
<artiele>	标签页面中独立的主题内容区域，通常使用<section>划分
<aside>	定义页面主区域之外的内容，比如侧边栏
<footer>	标签页面或一个区域的底部，位于页脚，通常包含文档的作者、著作权信息、链接的使用条款、联系信息等
<figure>	标签独立的流内容，包括图像、图表、照片、代码等
<address>	标签文档中的联系信息，包括文档作者、电子邮箱、地址、电话

创建表格的基本语法格式：

<table>
	<tr>
		<td>单元格内容</td>
	</tr>
</table>

例题：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="500" frame="hsides" rules="rows">
			<caption>计算机学习</caption>
			<tr>
				<th>核心课</th>
				<th>限选课</th>
				<th>公共课</th>
			</tr>
			<tr>
				<td>数据结构</td>
				<td>移动应用开发</td>
				<td>高等数学</td>
			</tr>
			<tr>
				<td>软件工程</td>
				<td>SQL Server</td>
				<td>大学英语</td>
			</tr>
		</table>
	</body>
</html>

运行效果：

列表标签，基本语法格式：

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ul>

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		编程语言：
		<br/>
		<ul>
			<li type="circle">Python</li>
			<li type="circle">C</li>
			<li type="circle">Java</li>
			<li type="disc">C++</li>
			<li type="disc">C#</li>
			<li type="square">PHP</li>
			<li type="square">SQL</li>
		</ul>
	</body>
</html>

效果：

有序列表，例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		编程语言：
		<br/>
		<ol>
			<li>Python</li>
			<li>C</li>
			<li>Java</li>
			<li>C++</li>
			<li>C#</li>
			<li>PHP</li>
			<li>SQL</li>
		</ol>
	</body>
</html>

效果：

超链接标签例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com" target="_blank">在新窗口中打开</a> <br />
		<a href="https://www.baidu.com" target="_self">在原窗口中打开</a>
	</body>
</html>

效果：

表单标签基本语法：

<form action="url地址" method="提交方式" name="表单名称">
表单控件
</form>

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>form表单标记</title>
	</head>
	<body bgcolor="yellow">
		<form action="/1.jsp" method="get">
			用户名：<input type="text" name="userName"><br>
			密码：<input type="text" nama="password"><br>
			<input type="submit" value="登录">
		</form>
	</body>
</html>

效果：

1.3 CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）。

1.3.1 CSS选择器

类别选择器例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的属性</title>
		<style>
			.b{
				text-indent: 3em;
				font-family: 宋体;
				font-size: 30px;
				color: green;
				}
			.c{
				text-indent: 2em;
				font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
				font-size: 40px;
				color: maroon;
			}
			.a{
				text-indent: 3em;
				font-size: 40px;
				color: green;
			}
		</style>
	</head>
	<body bgcolor="yellow">
		<p class="a">江山如此多娇，引无数英雄竞折腰。</p>
		<p style="text-indent: 2em; font-size: 30px;color: red;" class="c">风吹云动天不动，水推船移岸不移.刀切莲藕丝不断，山高水远情不离</p>
		<p class="a">花开山岗红艳艳，绿水青山不知是何年</p>
	</body>
</html>

效果：

ID选择器例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的属性</title>
		<style type="text/css">
			#b{
				text-indent: 3em;
				font-family: 宋体;
				font-size: 30px;
				color: green;
				}
			#c{
				text-indent: 2em;
				font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
				font-size: 40px;
				color: maroon;
			}
			#a{
				text-indent: 3em;
				font-size: 40px;
				color: green;
			}
		</style>
	</head>
	<body bgcolor="yellow">
		<p id="a">江山如此多娇，引无数英雄竞折腰。</p>
		<p style="text-indent: 2em; font-size: 30px;color: red;" id="c">风吹云动天不动，水推船移岸不移.刀切莲藕丝不断，山高水远情不离</p>
		<p id="a">花开山岗红艳艳，绿水青山不知是何年</p>
	</body>
</html>

效果：

1.3.2 CSS样式引入方式

行内式：

<div style="color: red; width: 200px; height: 100px;"></div>

内嵌式：

<head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           div{
               width: 200px;
               height: 100px;
               color: red;
           }
       </style>
   </head>

链接式：

<link type="text/css" rel="stylesheet" href="CSS样式文件的地址"/>

夏太热小小夏

关注

18
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
【Java Web】前置HTML和CSS

：<div>是一个块级元素，它包含的元素会自动换行；而<span>是行内元素，在它的前后不会换行。<b></b>和<strong></strong> 文字以粗体方式显示(HTML推荐使用<strong>标签)<s>
复制链接

扫一扫