HTML、CSS

Day29

HTML

前端：展示页面、与用户交互 — HTML

后端：数据的交互和传递 — JavaEE/JavaWeb

网页的组成部分(HTML+CSS+JAVASCRIPT)

HTML：页面结构
CSS：页面样式表现
JavaScript：交互行为

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标记，如段落标记p、标题标记 h1-h6、超链接标记 a、图片标记 img等，网页中需要定义什么内容，就用相应的HTML标记描述即可。

常用标签

h1~h6:标题标签

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
			h1~h6 标题标签
			
			无效标签认为是纯文本去展示内容
        -->
		
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<h7>七级标签</h7>
		教育
	</body>
</html>

p:段落标签

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<p>用良心</p>
		<p>做自己</p>
	</body>
</html>

span：文本标签

br：换行标签

hr：分割线标签

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
			span：文本标签
			br：换行标签
			hr：分割线标签
        -->
		
		<span>用良心</span>
		<br />
		<span>做自己</span>
		
		<hr />
	</body>
</html>

列表

ul：无序列表
type - 类别（circle-空心圆 disc-实心圆 square-实心方块）

ol：有序列表
type - 类别（1-阿拉伯数字 a-小写英文 A-大写英文 i-小写罗马数字 I-大写罗马数字）

li：项

dl：定义列表
dt：列表头
dd：列表体

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<ul>
			<li>
				<h3>荤菜</h3>
				<ol>
					<li>回锅肉</li>
					<li>小炒肉</li>
					<li>红烧肉</li>
					<li>宫保鸡丁</li>
					<li>火爆腰花</li>
					<li>糖醋排骨</li>
					<li>鱼香肉丝</li>
				</ol>
			</li>
			<li>
				<h3>素菜</h3>
				<ol>
					<li>清炒土豆丝</li>
					<li>家乡豆腐</li>
					<li>地三鲜</li>
					<li>清炒空心菜</li>
				</ol>
			</li>
			<li>
				<h3>汤类</h3>
				<ol>
					<li>紫菜蛋花汤</li>
					<li>西红柿煎蛋汤</li>
					<li>皮蛋黄瓜汤</li>
					<li>珍珠翡翠白玉汤</li>
				</ol>
			</li>
		</ul>
	</body>
</html>

img：图片标签
src - 图片资源地址
width - 宽度
height - 高度
alt - 图片加载失败后展示的文本内容

a：超链接
href - 链接地址
target - 目标（_self-本页面跳转 _blank-新增页面跳转）

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
			a：超链接
				href - 链接地址
				target - 目标（_self-本页面跳转 _blank-新增页面跳转）
        -->
		
		<a href="08_列表案例.html" target="_self">链接到本地页面</a>
		<a href="08_列表案例.html" target="_blank">链接到本地页面</a>
		<a href="http://www.baidu.com" target="_blank">链接到百度页面</a>
		
		<a href="http://www.baidu.com" target="_blank">
			<img src="../img/衣.jpg" width="100px" height="100px" />
		</a>
	</body>
</html>

name=" "：锚链接

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<a href="#new01">法治</a><!--链接到锚点的位置-->
		<a href="#new02">国际</a><!--链接到锚点的位置-->
		<a href="#new03">娱乐</a><!--链接到锚点的位置-->
		
		<a name="new01"></a><!--下锚点-->
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<a name="new02"></a><!--下锚点-->
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<a name="new03"></a><!--下锚点-->
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
	</body>
</html>

table：表格
border-边框

tr：行

th：列（居中、加粗）

td：列（向左对齐）

rowspan=“2” 占2行
colspan=“2” 占2列
注意：1.只能先写tr再写th
2.在表格中不是中的内容会默认放在表格之前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<ul>
			<li>
				<h3>荤菜</h3>
				<ol>
					<li>回锅肉</li>
					<li>小炒肉</li>
					<li>红烧肉</li>
					<li>宫保鸡丁</li>
					<li>火爆腰花</li>
					<li>糖醋排骨</li>
					<li>鱼香肉丝</li>
				</ol>
			</li>
			<li>
				<h3>素菜</h3>
				<ol>
					<li>清炒土豆丝</li>
					<li>家乡豆腐</li>
					<li>地三鲜</li>
					<li>清炒空心菜</li>
				</ol>
			</li>
			<li>
				<h3>汤类</h3>
				<ol>
					<li>紫菜蛋花汤</li>
					<li>西红柿煎蛋汤</li>
					<li>皮蛋黄瓜汤</li>
					<li>珍珠翡翠白玉汤</li>
				</ol>
			</li>
		</ul>
		<dl>
			<dt>
				<h3>价格</h3>
			</dt>
			<dd>
				<li>荤菜一个8块</li>
				<li>素菜一个5块</li>
				<li>汤一个3块</li>
			</dd>
		</dl>
		<h3>菜单</h3>
		<table border="10px" width="600px" heigth="800px">
			<tr>
				<th>荤菜</th>
				<th>素菜</th>
				<th>汤</th>
			<tr>
			<tr>
				<td>回锅肉</td>
				<td>清炒土豆丝</td>
				<td>紫菜蛋花汤</td>
			<tr>
			<tr>
				<td>小炒肉</td>
				<td>家乡豆腐</td>
				<td>西红柿煎蛋汤</td>
			<tr>
			
			<tr>
				<td>红烧肉</td>
				<td>地三鲜</td>
				<td>皮蛋黄瓜汤</td>
			<tr>
			<tr>
				<td></td>
				<td>清炒空心菜</td>
				<td>珍珠翡翠白玉汤</td>
			<tr>
			
		</table>
	</body>
</html>

表单

请求方式：get、post

get：http://127.0.0.1:8020/Day29/01_常用标签/14_表单.html?键=值&键=值&…
post：http://127.0.0.1:8020/Day29/01_常用标签/14_表单.html + 数据包

经验：表单数据具有一定的隐私性，一般选择post请求

注意：表单数据要想传输给服务器，必须有name属性

文本、密码、单选、多选、下拉列表、上传文件、提交按钮、重置按钮、图片按钮、普通按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
			请求方式：get、post
				get：http://127.0.0.1:8020/Day29/01_常用标签/14_表单.html?键=值&键=值&....
				post：http://127.0.0.1:8020/Day29/01_常用标签/14_表单.html + 数据包
				
			经验：表单数据具有一定的隐私性，一般选择post请求
			
			注意：表单数据要想传输给服务器，必须有name属性
        -->
		
		<form action="服务器地址" method="get">
			
			<input type="image" src="img/头像.jpg" width="100px" height="100px"/><br/><!--图片按钮等同于提交按钮-->
			账号：<input type="text" name="username" /><br />
			密码：<input type="password" name="password" /><br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball" />篮球
				<input type="checkbox" name="hobbies" value="shop" />购物
				<br />
			省份：
				<select name="province">
					<option value="hn">湖南</option>
					<option value="hb">湖北</option>
					<option value="sc" selected="selected">四川</option>
					<option value="gd">广东</option>
				</select>
				<br />
			
			<input type="submit" value="提交" /><!--提交按钮：将表单数据提交给服务器-->
			<input type="reset" value="重置按钮" /><br />
			<input type="button" value="普通按钮" onclick="fun01()"/><br />
			<button type="button" onclick="fun02()">普通按钮</button><!--定义按钮的第二种方式-->
		</form>
		<script type="text/javascript">
			
			function fun01(){
				alert("用良心做教育");
			}
			
			function fun02(){
				alert("做真实的自己");
			}
		</script>
		上传文件：<input type="file" /><br />
	</body>
</html>

CSS

通配符选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 通配符选择器
			 */
			*{
				color: red;
			}
		</style>
	</head>

标签选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 标签选择器
			 */
			p{
				color: red;
			}
		</style>
	</head>

类选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 类选择器
			 */
			.myclass{
				color: red;
			}
		</style>
	</head>
<body>
		
		<h1 class="myclass">一级标签</h1>
		<h2>二级标签</h2>
		<h3 class="myclass">三级标签</h3>
		<h4>四级标签</h4>
		
	</body>

ID选择器

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * ID选择器
			 * 
			 * 注意：ID唯一
			 */
			#myid{
				color: red;
			}
		</style>
	</head>
    <body>
		
		<h1 id="myid">一级标签</h1>
		
	</body>

基本选择器的优先级别：ID > Class > 标签

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 基本选择器的优先级别：ID > Class > 标签
			 */
			
			h1{
				color: red;
			}
			
			.myclass{
				color: green;
			}
			
			#myid{
				color: blue;
			}
			
		</style>
	</head>
	<body>
		
		<h1 class="myclass" id="myid">123456</h1>
		
	</body>
</html>

群组选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 群组选择器
			 */
			h1,h3,h5,p{color: red;}
		
		</style>
	</head>

派生选择器/上下文关系选择器 – 后代选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 派生选择器/上下文关系选择器 -- 后代选择器
			 */
		
			ul a{color: red;}
		
		</style>
	</head>

派生选择器/上下文关系选择器 – 子代选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 派生选择器/上下文关系选择器 -- 子代选择器
			 */
		
			li>a{color: red;}
		
		</style>
	</head>

派生选择器/上下文关系选择器 – 相邻兄弟选择器

注意：样式作用在后者

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 派生选择器/上下文关系选择器 -- 相邻兄弟选择器
			 * 注意：样式作用在后者
			 */
		
			a+a{color: red;}
		
		</style>
	</head>

属性选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 属性选择器
			 * 
			 * 一个属性的情况
			 * input[placeholder]{color: red;}
			 * 
			 * 一个属性+值的情况
			 * input[placeholder='请输入昵称']{color: red;}
			 * 
			 * 多个属性的情况
			 * input[name][placeholder]{color: red;}
			 * 
			 * 多个属性+值的情况
			 * input[type='password'][name='repassword']{color: red;}
			 */

		</style>
	</head>

锚伪类

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link {color: #66ff99}		/* 未访问的链接 */
			a:visited {color: #660033}	/* 已访问的链接 */
			a:hover {color: #00ccff}	/* 鼠标移动到链接上 */
			a:active {color: #33ffff}	/* 选定的链接 */
		</style>
	</head>
	<body>
		
		<a href="http://www.jd.com">跳转</a>

	</body>
</html>

样式的优先级别：
行内样式表 > 内外部样式表
注意：内外部样式表要看加载顺序

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--
			样式的优先级别：
				行内样式表 > 内外部样式表
				注意：内外部样式表要看加载顺序
        -->
		
		<!--内部样式表-->
		<style type="text/css">
			h1{color: red;}
		</style>
		
		<!--外部样式表-->
		<link rel="stylesheet" type="text/css" href="../css/new_file.css"/>
		
	</head>
	<body>
		
		<!--行内样式表-->
		<h1 style="color: blue;">初心至善</h1>
	</body>
</html>

Day29

HTML

常用标签

列表

表单

CSS

练习：

悦读