欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Web前端基础(02)

程序员文章站 2024-02-01 10:05:52
...

###课程回顾

  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 >
    ###表单续

<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区域

  <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. 水煮鱼为红色字
  2. 红烧肉 水煮鱼 宫保鸡丁背景蓝色
  3. 文本框背景绿色
  4. d2字体绿色
  5. d3 s3 h3 字体紫色purple
  6. d3 s3 h3 d2 s1 s2 s3 背景绿色
  7. 所有元素添加蓝色实线边框
    ###选择器续
  8. 子孙后代选择器
  • 格式: body div span{样式代码}
  • 作用:选取body里面div里面所有span(包括所有后代)
  1. 子元素选择器
  • 格式: body>div>span{样式代码}
  • 作用:选取body里面的div里面的所有子元素span
  1. 伪类选择器
  • 该选择器选择的是元素的状态: 鼠标悬停状态 点击状态 未访问状态 访问过
  • 格式: a:hover/active/link/visited{}
    ###选择器回顾
  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
    ###文本和字体相关样式
  4. *水平对齐方式 text-align:left/right/center
  5. *文本修饰:text-decoration: overline上划线/underline下划线/line-through删除线/none去掉文本修饰
  6. 文本阴影:text-shadow: 颜色 x偏移值 y偏移值 浓度(值越小越清晰)
  7. *行高:line-height:30px; 可以通过行高实现文本垂直居中
  8. *文本颜色: color:red;
  9. *字体大小: font-size:20px;
  10. *加粗: font-weight:bold/normal(去掉字体加粗)
  11. 斜体: font-style:italic;
  12. 字体设置: font-family:xxx,xxx,xxx; font:20px xxx,xxx,xxx;

练习

1.表单练习

<!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>

显示效果:
Web前端基础(02)
2.CSS引入方式

<!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中的代码:

h2{
	color:green
}

测试结果:
Web前端基础(02)

3.选择器练习

<!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>

测试结果:
Web前端基础(02)
4.选择器练习:

<!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>

测试结果:
Web前端基础(02)
5.选择器练习(续):

<!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>

显示效果:
Web前端基础(02)
6.颜色

<!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>

显示效果:
Web前端基础(02)
7.背景图片:

<!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的位置Web前端基础(02)
显示效果:
Web前端基础(02)
8.显示方式:

<!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>

测试效果:Web前端基础(02)
9.文本和字体相关

<!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>

测试效果:
Web前端基础(02)


未完,待续,,,