Web前端基础（02）

2021-08-23 16:23:22 浏览数 (1)

###课程回顾

  1. 文本标签
  • 内容标题h1-h6： 独占一行 自带上下间距 字体加粗 字体从大到小
  • 段落标签p ： 独占一行 自带上下间距
  • 换行 br
  • 水平分割线hr
  • 字体相关： b加粗 i斜体 small小字 s删除线 u下划线
  1. 列表标签
  • 无序列表： ul：type li
  • 有序列表： ol：type start reversed li
  • 列表嵌套： 有序和无序可以任意无限嵌套
  1. 图片标签img
  • src：路径 相对路径：访问站内资源时使用
    • 图片和页面在同一目录： 直接写图片名
    • 图片在页面的上级目录时：…/图片名
    • 图片在页面的下级目录时：文件夹名/图片名 。。。… 绝对路径:访问站外资源时使用, 称为图片盗链,可以节省本站资源,但是有找不到图片的风险
  • alt: 图片不显示时显示的文本
  • title: 鼠标在图片上悬停时显示的文本
  • width/height: 两种赋值方式:1. 像素 2.百分比 ,如果只设置宽度高度会自动等比例缩放
  1. 超链接a
  • href: 路径, 可以指向页面或其它文件(浏览器支持浏览则浏览,不支持则下载)
  • 包裹文本就是文本超链接,包裹图片就是图片超链接
  • 页面内部跳转, 回到顶部
  1. 表格table
  • 标签: table tr表示行 td表示列 th表头(加粗并居中) caption表格标题
  • 属性: table:border边框 cellspacing单元格间距 cellpadding单元格距内容的距离
  1. 表单form
  • 学习表单就是学习表单中的各种控件
  • 文本框 <input type="text" name placeholder占位文本 value值>
  • 密码框 <input type="password" name placeholder value>
  • 单选<input type="radio" name value checked="checked" id="abc"><lable for="abc">让文本也能点击</label>
  • 多选<input type="checkbox" name value checked="checked">
  • 文件选择器<input type="file" name >
  • 日期选择器<input type="date" name > ###表单续
代码语言：javascript复制
<form action="http://www.tmooc.cn" method="get">
	<!-- 下拉选 -->
	所在城市:<select name="city">
		<option value="bj">北京</option>
		<!-- selected默认选中 -->
		<option value="sh" selected="selected">上海</option>
		<option value="gz">广州</option>
	</select><br>
	<!-- 文本域 rows行  cols列-->
	自我介绍:<textarea name="intro" rows="3" cols="20"
			placeholder="说点儿啥..."></textarea>
	<!-- 提交按钮 -->
	<input type="submit" value="注册"/>
	<!-- 重置按钮 -->
	<input type="reset" />
	<!-- 自定义按钮 -->
	<input type="button" value="按钮" />
	<button type="button">按钮</button>
</form>

###实体引用(特殊字符)

  • 空格:空格折叠现象就是多个空格连续出现只能识别一个
  • 小于号: &lt;
  • 大于号: &gt; ###分区标签
  • 分区标签可以理解成是一个容器,将多个有相关性的标签放进一个容器,可以对多个标签进行统一管理
  • div:块级分区元素,特点:独占一行
  • span:行内分区元素,特点:共占一行
  • html5标准中新增的分区标签 作用和div一样: header头 footer脚 article正文 nav导航 section区域
代码语言：javascript复制
  <div>头</div>
  <div>体</div>
  <div>脚</div>

  <header></header>
  <nav></nav>
  <article></article>或<section></section>
  <footer></footer>

CSS

  • Cascading Style Sheet:层叠样式表,作用:是用于美化页面的
  • 如何在html页面中添加CSS样式代码?
  1. 内联样式:在标签的style属性中添加样式代码,不可以复用 使用较少
  2. 内部样式: 在head标签里面添加style标签 标签体内写样式代码，可以在当前页面复用,这种写法学习使用较多,工作中使用较少
  3. 外部样式: 在单独的css样式文件中写样式代码,通过link标签引入,好处:可以多页面复用,可以将html和css代码分离开

选择器

  1. 标签名选择器
  • 格式: 标签名{样式代码}
  • 作用: 选取页面中所有同名标签
  1. id选择器
  • 格式: #id{样式代码}
  • 作用: 选取页面中指定id的元素(id必须唯一)
  1. class选择器
  • 格式: .class{样式代码}
  • 作用: 选取页面中指定class值得多个元素
  1. 分组选择器
  • 格式: div,#abc,.c1{样式代码}
  • 作用: 将多个选择器合并成一个选择器
  1. 属性选择器
  • 格式: 元素名[属性名=‘值’]{样式代码}
  • 作用:选取页面中所有指定属性名和值得元素
  1. 任意元素选择器
  • 格式: *{样式代码}
  • 作用: 选取页面中所有的元素
  1. 子孙后代选择器
  • 格式: body div span{样式代码}
  • 作用:选取body里面div里面所有span(包括所有后代)
  1. 子元素选择器
  • 格式: body>div>span{样式代码}
  • 作用:选取body里面的div里面的所有子元素span
  1. 伪类选择器
  • 该选择器选择的是元素的状态: 鼠标悬停状态 点击状态 未访问状态 访问过
  • 格式: a:hover/active/link/visited{}

练习要求

  1. 水煮鱼为红色字
  2. 红烧肉 水煮鱼 宫保鸡丁背景蓝色
  3. 文本框背景绿色
  4. d2字体绿色
  5. d3 s3 h3 字体紫色purple
  6. d3 s3 h3 d2 s1 s2 s3 背景绿色
  7. 所有元素添加蓝色实线边框

###选择器回顾

  1. id选择器 #id{}
  2. 标签名选择器 div{}
  3. class选择器 .class{}
  4. 分组选择器 #id,div,.class{}
  5. 属性选择器 input[type=‘button’]{}
  6. 任意元素选择器 *{}
  7. 子孙后代选择器 div span{}
  8. 子元素选择器 div>span{}
  9. 伪类选择器 a:visited访问过/link未访问/hover悬停/active点击{}

颜色赋值方式

  • 三原色: red green blue 任何颜色都是三原色组成,每个颜色的取值0-255
  1. 颜色单词赋值 red
  2. 6位16进制赋值 每两位表示一个颜色 #ff0000
  3. 3位16进制 每一位重复 #f00等效#ff0000
  4. 3位10进制赋值 rgb(255,0,0)
  5. 4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度 值越小越透明 附: 颜色名及其十六进制列表

背景图片

设置背景图片 background-image: url(…/imgs/1.jpg);

  • 设置背景图片尺寸 background-size: 100px 80px; //只给宽度赋值 高度auto 可以保证图片原始宽高比
  • 禁止重复 background-repeat:no-repeat;
  • 背景图片的位置 background-position:横向百分比 纵向百分比

元素的显示方式display

  1. block: 块级元素,独占一行,可以修改宽高 包括:div h1-h6 p hr
  2. inline:行内元素,共占一行,不能修改宽高 包括:span b i small s u 超链接a
  3. inline-block:行内块元素,共占一行,也可以修改宽高: 图片img input

文本和字体相关样式

  1. *水平对齐方式 text-align:left/right/center
  2. *文本修饰:text-decoration: overline上划线/underline下划线/line-through删除线/none去掉文本修饰
  3. 文本阴影:text-shadow: 颜色 x偏移值 y偏移值 浓度(值越小越清晰)
  4. *行高:line-height:30px; 可以通过行高实现文本垂直居中
  5. *文本颜色: color:red;
  6. *字体大小: font-size:20px;
  7. *加粗: font-weight:bold/normal(去掉字体加粗)
  8. 斜体: font-style:italic;
  9. 字体设置: font-family:xxx,xxx,xxx; font:20px xxx,xxx,xxx;

练习

1.表单练习

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action= "http: //www. tmooc.cn
		method="get ">
		<!--- 下拉选-->
		所在城市: <select name= "city">
		<option value="bj">北京</option>
		<option value="sh" selected="selected">上海</option>
		<option value="gz">广州</option>
		</select><br>
		<!-- 文本域 rows行 cols列 -->
		自我介绍: <textarea name="intro" rows="3" cols="20
		placeholder="说点儿啥..."></textarea>
		<!-- 提交按钮 -->
		<input type= "submit" value="注册"/>
		<!-- 重置按钮 -->
		<input type="reset"/>
		<!-- 自定义按钮 -->
		<input type = "button" value="按钮"/>
		<button type="button">按钮</button>
		</form>
		<p>测试&nbsp;&nbsp;&nbsp;空格&lt;abc&gt;</p>
		<div id="">div1</div><div id="">div2</div>
		<div id="">div3</div>
		<span>span1</span>
		<span>span2</span>
		< span>span3</span>

	</body>
</html>

显示效果:

2.CSS引入方式

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 通过选择器选择到标签后 再添加样式 */
			/* 标签名选择器:通过标签的名称选择标签*/
			h4{
				color:blue;
				}
		</style>
		<!-- 引入外部css样式文件 -->
		<link rel="stylesheet" type="text/css" href="first.css"/>
	</head>
	<body>
		<!-- 内敛样式:不能复用 -->
		<h3 style="color:red;">测试内联样式1</h3>
		<h3 style="color:red;">测试内联样式2</h3>
		<!-- 内部样式:好处:可以当前页面复用 -->
		<h4>测试内部样式1</h4>
		<h4>测试内部样式2</h4>
		<!--外部样式:好处:可以多页面复用,可以将css样式代码和html代码分离--> 
		<h2>测试外部样式1</h2>
		<h2>测试外部样式2</h2>

	</body>
</html>

first.css中的代码:

代码语言：javascript复制
h2{
	color:green
}

测试结果:

3.选择器练习

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* id选择器 */
			#p2{
				color:red;
			}
			/* class选择器 */
			.c1{
				color:blue;
			}
			/* 分组选择器 
				将多个选择器通过逗号合并成一个*/
			h3,#p2,.c1{
				background-color:yellow;
			}
			/* 属性选择器 */
			input[type='button']{
				color:red;
			}
			/* 任意元素选择器 
			border:边框粗细 样式(solid实线) 颜色*/
			*{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<input type="button" value="按钮"/>
		<input type="submit" value="按钮"/>
		<p>p1</p>
		<p id="p2">p2</p>
		<p class="c1">p3</p>
		<div>div1</div>
		<div>div2</div>
		<div class="c1">div3</div>
		<span>span1</span>
		<span>span2</span>
		<span class="c1">span3</span>
		<h3>h3</h3>
	</body>
</html>

测试结果:

4.选择器练习:

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#l2{
				color:red;
			}
			li{
				background-color:blue;
			}
			input[type='text']{
				background-color:green
			}
			#d2{
				color:green;
			}
			*{
				border: 1px solid blue;
			}
			.c1{
				color:purple;
			}
			.c1,#d2,span{
				background-color:green;
				}
		</style>
	</head>
	<body>
		<div>d1</div><div id="d2">d2</div><div class="c1">d3</div>
		<h3 class="c1">这是h3</h3>
	    <span>s1</span><span>s2</span><span class="c1">s3</span>
		<input style="background-color:green;" type="text"/>
		<input type="password"/>
		<ul>
			<li>红烧肉</li>
			<li id="l2">水煮鱼</li>
			<li>宫保鸡丁</li>
		</ul>
	</body>
</html>

测试结果:

5.选择器练习(续):

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 子孙后代选择器:body里面的div里面的div里面
			的所有的span(包括子元素span和所有后代) */
			/* body div div span{
				color:red;
			} */
			/* 子元素选择器:
			 body里面的div里面的div里面
			 的所有子元素*/
			body>div>div>span{
				color:blue;
			}
			body>span{
				color:yellow;
			}
			/* 伪类选择器 */
			a:visited{/* 访问过 */
				color:red
			}
			a:link{/* 未访问 */
				color:yellow
			}
			a:hover{/*悬停*/
				color:blue;
			}
			a:active{/*点击*/
				color:green
			}
		</style>
	</head>
	<body>
		<a href="../imgs/1.jpg">超链接1</a>
		<a href="../imgs/2.jpg">超链接2</a>
		<a href="../imgs/3.jpg">超链接3</a>
		<a href="../imgs/4.jpg">超链接4</a>
		<hr>

		<span>s1</span>
		<div>
			<span>s2</span>
			<div>
				<span>s3</span>
			</div>
			<div>
				<span>s4</span>
			    <div>
					<span>s5</span>
				</div>
			</div>
		</div>
	</body>
</html>

显示效果:

6.颜色

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
	h1{color: red;}
	h2{color: #ff0000;}
	h3{color: #f00;}
	h4{color: rgb(255,0,0);}
	h5{color: rgba(255,0,0,0.5);}
	</style>
	</head>
	<body>
	<h1>这是h1</h1>
	<h2>这是h2</h2>
	<h3>这是h3 </h3>
	<h4>这是h4</h4>
	<h5>这是h5</h5>
	</body>
</html>

显示效果:

7.背景图片:

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 200px;
				height: 150px;
				background-color: cadetblue;
				/*设置背景图片*/
				background-image: url(../imgs/1.jpg);
				/*设置图片尺寸*/
				background-size: 100px 80px;
				/*禁止重复*/
				background-repeat: no-repeat;
				/*设置背景图片的位置:横向百分比和纵向百分比*/
				background-position: 50% 50%;
				}
			#d2{
				width: 611px;
				height: 376px;
				background-color: #e8e8e8;
				/*设置背景图片*/
				background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png);
				background-size: 318px 319px;
				background-repeat: no-repeat ;
				background-position: 90% 70%;
				}
		</style>
	</head>
	<body>
		<div id="d1">
		</div>
		<div id="d2">
		</div>
	</body>
</html>

注:图片的url路径要取到正确位置,"../“为所在文件夹的上一级,”/"为所在文件夹下,下图为1.jpg的位置

显示效果:

8.显示方式:

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width:100px;
			}
			span{
				background-color: green;
				width: 100px;
				/* span本来是不能修改宽高的
				 但是显示方式改成block或inline-block
				 就可以修改了*/
				display:block;
			}
			div{
				width:50px;
				height:50px;
				background-color: #5F9EA0;
				/*块级元素修改成行内块
				即修改了宽高又能在一行之内显示*/
				display: inline-block; 
			}
			a{
				width:80px;
				height:80px;
				background-color:yellow;
				/*块级元素修改成行内块
				即修改了宽高又能在一行之内显示*/
				display: inline-block;
				}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.youku.com">优酷</a>
		<a href="http://www.qq.com">腾讯</a>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
		<span>s1</span>
		<span>s2</span>
		<span>s3</span>
		<img src="../imgs/1.jpg" >
		<img src="../imgs/2.jpg" >
		<img src="../imgs/3.jpg" >
	</body>
</html>

测试效果:

9.文本和字体相关

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 150px;
				height: 40px;
				border: 1px solid red;
				/* 文本修饰 overline underline line-throuth none*/
				text-decoration: line-through;
				/* 水平对齐方式 center right */
				text-align: center;
				/* 阴影:颜色 x偏移值 y偏移值 浓度(值越小越清晰)*/
				text-shadow: green -15px -15px 0px;
				/*行高可以控制垂直居中*/
				line-height: 40px;
				/*字体大小*/
				font-size: 20px;
				/*字体加粗*/
				font-weight: bold;
				/* 斜体 */
				font-style: italic;
			}
				h1{
					font-weight: normal;/*去掉加粗效果*/
					/* 设置字体 */
					/* font-family: cursive; */
					font:20px cursive;
				}
			a{
				text-decoration: none;/*去掉下划线*/
			}
		</style>
	</head>
	<body>
		<h1>这是h1</h1>
		<a href="#">超链接</a>
		<div>文本测试</div>
	</body>
</html>

测试效果:

附所有代码：https://download.csdn.net/download/qq_44273429/12705870 未完，待续，，， 下一节链接: Web前端基础（03）

background class input table text

0 人点赞