【Java Web】前置HTML和CSS

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.***" target="_blank">在新窗口中打开</a> <br />
		<a href="https://www.baidu.***" 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样式文件的地址"/> 

转载请说明出处内容投诉
CSS教程_站长资源网 » 【Java Web】前置HTML和CSS

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买