2019/9/4 HTML复习回顾

最新推荐文章于 2021-06-20 03:48:16 发布

chengxunai

最新推荐文章于 2021-06-20 03:48:16 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/chengxunai/article/details/100549015

版权

登陆界面复习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="">
			<p>
			 <label for="user"><!--与后面的框建联系 点文字也会选到用户名框中-->用户名：</label><input type="text" name="user" id="user" value="" placeholder="请输入用户名"/>
			</p>
			<p>
			<label for="phone">手机号：</label><input type="text" name="phone" id="phone" placeholder="可用于登陆和找回密码"/>
			</p>
			<p>
			<label for="paw">密码：</label><input type="password" name="paw" id="paw"/>
			</p>
			<p>
				<input type="text" name="yanzhengma" id="yanzhengma" value="" placeholder="请输入验证码"/><input type="button" value="获取短信验证码" />
			</p>
			<p>
				<input type="radio" name="sex" id="" value="man" />男
				<input type="radio" name="sex" id="" value="woman" />女
			</p>
			<p>
				<input type="checkbox" name="test" id="test" value="" />
				<label for="test">获取并同意 <a href="">考试协议</a></label>
			</p>
			<p>
				<input type="submit" value="提交"/>
			</p>
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--标题-->
		<h1>人民日报钟声：在改革中取制胜之道</h1>
		<!--段落-->
		<p></p>
		<!--图片 -->
		<img src="img/news.jpg"/>
		<!--超链接 anchor-->
		<a href="https://www.baidu.com">百度一下，你就知道</a>
		<a target="_blank" href=""></a> <!--打开网页保存原本网页-->
		<!--列表-->
		<!--unordered list无序的列表-->
		<ul>
			<!--list item 列表项-->
			<li></li>
		</ul>
		<!--ordered list有序的列表-->
		<ol>
			<li></li>
		</ol>
		<!--布局 division-->
		<div></div>
		<!--表单-->
		<form action="" method="get"><!--action后面接的是后台的地址 点击提交按钮会把这些内容提交到后台 用get方式提交-->
			<!--表单元素-->
			<input type="text" name="user" placeholder="请输入用户名"/><!--文本--><!--name后面会接收到名字叫user的文档 收到的东西会集中在user--><!--placeholder会在框内有用户名三个字-->
			<input type="password" name="paw" placeholder="请输入密码"/><!--密码-->
			<input type="radio" name="sex" value="man"/>男<!--单选框 要取名字不然功能无法实现-->
			<input type="radio" name="sex" value="woman"/>女<!--外面的男女其实无关 真正提交的是man和woman-->
			<input type="checkbox" name="course"value=""/>
			<input type="checkbox" name="course"value=""/>
			<input type="checkbox" name="course"value=""/>
			<input type="checkbox" name="course"value=""/>
			<!--复选框-->
			<input type="submit" value="提交"/>
			<input type="button" value="按钮" />
		</form>
		
	</body>
</html>

NAV复习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
				/*用标签选择器把下划线都去掉*/
			}
			.nav li{
				width:224px;
				height: 42;
				border: 1px solid #d1b4a7;
				text-align: center;
				line-height: 42px;
				background:#eee url(img/nav1.png) no-repeat;
			}
			
			.nav li:link{
				background-color: red;
			}
			
			.nav li:visited{
				background-color: blue;
			}
			.nav li:hover{
				background-color: plum;
			}
			.nav li:active{
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="">学科专业</a></li>
			<li><a href="">学科专业</a></li>
			<li><a href="">学科专业</a></li>
			<li><a href="">学科专业</a></li>
			<li><a href="">学科专业</a></li>
			<li><a href="">学科专业</a></li>
		</ul>
	</body>
</html>

表格复习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
	</head>
	<body>
		<!--border设置表格边框-->
		<!--cellspacing设置单元格和单元格之间的距离-->
		<!--cellpadding设置单元格和内容之间的距离-->
		<!--width/height设置表格的宽度/高度-->
		<!--align设置表格对齐方式-->
		<!--bgcolor设置表格背景色-->
		<!--列合并 colspan-->
		<!--行合并 rowspan-->
		<table  bgcolor="aquamarine" align="center" bordercolor="red" width="800"  border="5px" cellspacing="0"><!--cellspacing表内间隔为0-->
			<tr align="center">
				<th colspan="4">商品类目</th><!--表头-->
				
				<!--td是tr的一个小单元格-->
			</tr>
			<tr align="center">
				<td rowspan="7">移动</td><!--表头-->
				
				<!--td是tr的一个小单元格-->
			</tr>
			<tr align="center">
				<td>移动</td><!--表头-->
				<td>移动</td>
				<td>移动</td>
				<td>移动</td>
				<!--td是tr的一个小单元格-->
			</tr>
			<tr align="center">
				<td>移动</td><!--表头-->
				<td>移动</td>
				<td>移动</td>
				<td>移动</td>
				<!--td是tr的一个小单元格-->
			</tr>
			<tr align="center">
				<td>移动</td><!--表头-->
				<td>移动</td>
				<td>移动</td>
				<td>移动</td>
				<!--td是tr的一个小单元格-->
			</tr>
			<tr align="center">
				<td>移动</td><!--表头-->
				<td>移动</td>
				<td>移动</td>
				<td>移动</td>
				<!--td是tr的一个小单元格-->
			</tr>
			<tr align="center">
				<td>移动</td><!--表头-->
				<td>移动</td>
				<td>移动</td>
				<td>移动</td>
				<!--td是tr的一个小单元格-->
			</tr>
		</table>
	</body>
</html>

今日刘老师总结复习内容

CSS(层叠样式表)

使用方法
行内样式（1000）
外联样式
内部样式

基本选择器
标签选择器（1）
类选择器（class）（10）
id选择器（100）

选择器优先级
id > 类选择器 > 标签选择器

派生选择器
包含选择器（后代选择器）
子选择器
通配符选择器

字体样式
font-size
font-style : italic/oblique;
font-weight : bold/bolder;
font-family : “宋体”

文本样式
（水平对齐方式）text-align : center / left / right;
（设置字体颜色）color : red;
（设置首行缩进）text-indent : 2em;
（行高/设置文字垂直对齐方式）line-height : 30px;
（文本修饰）text-decoration : none/underline/overline/line-through;

背景样式
background-color : #ccc;
background-image : url( );
background-repeat : no-repeat;
background-position :
background : red url() no-repeat 100px center;

列表样式
list-style : none;

超链接样式（伪类选择器）
:link 只有超链接可以用（未被访问之前）
:visited 只有超链接可以用（访问过后）
:hover 可用于任意标签（鼠标经过时）
:active（鼠标点击时）

今日上课小心情

刘老师讲课很细致，把一些容易犯错的地方都演示并且告诉大家解决方法，复习以前内容的同时又掌握了一些代码技巧，还学会了连续打多行代码，运用ps测量，用代码还原图片内容，能自己做出来感觉信心十足。还要继续加油！冲啊

chengxunai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019/9/4 HTML复习回顾

登陆界面复习<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""> <p> <label fo...
复制链接

扫一扫