Web前端基础（02）
程序员文章站
2024-02-01 10:05:52
...
###课程回顾
- 文本标签
- 内容标题h1-h6： 独占一行 自带上下间距 字体加粗 字体从大到小
- 段落标签p ： 独占一行 自带上下间距
- 换行 br
- 水平分割线hr
- 字体相关： b加粗 i斜体 small小字 s删除线 u下划线
- 列表标签
- 无序列表： ul：type li
- 有序列表： ol：type start reversed li
- 列表嵌套： 有序和无序可以任意无限嵌套
- 图片标签img
- src：路径
相对路径：访问站内资源时使用- 图片和页面在同一目录： 直接写图片名
- 图片在页面的上级目录时：…/图片名
- 图片在页面的下级目录时：文件夹名/图片名 。。。…
绝对路径:访问站外资源时使用, 称为图片盗链,可以节省本站资源,但是有找不到图片的风险
- alt: 图片不显示时显示的文本
- title: 鼠标在图片上悬停时显示的文本
- width/height: 两种赋值方式:1. 像素 2.百分比 ,如果只设置宽度高度会自动等比例缩放
- 超链接a
- href: 路径, 可以指向页面或其它文件(浏览器支持浏览则浏览,不支持则下载)
- 包裹文本就是文本超链接,包裹图片就是图片超链接
- 页面内部跳转, 回到顶部
- 表格table
- 标签: table tr表示行 td表示列 th表头(加粗并居中) caption表格标题
- 属性: table:border边框 cellspacing单元格间距 cellpadding单元格距内容的距离
- 表单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>
###实体引用(特殊字符)
-
空格:空格折叠现象就是多个空格连续出现只能识别一个
-
小于号:
< -
大于号:
>
###分区标签 -
分区标签可以理解成是一个容器,将多个有相关性的标签放进一个容器,可以对多个标签进行统一管理
-
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样式代码?
- 内联样式:在标签的style属性中添加样式代码,不可以复用 使用较少
- 内部样式: 在head标签里面添加style标签 标签体内写样式代码，可以在当前页面复用,这种写法学习使用较多,工作中使用较少
- 外部样式: 在单独的css样式文件中写样式代码,通过link标签引入,好处:可以多页面复用,可以将html和css代码分离开
###选择器
- 标签名选择器
- 格式: 标签名{样式代码}
- 作用: 选取页面中所有同名标签
- id选择器
- 格式: #id{样式代码}
- 作用: 选取页面中指定id的元素(id必须唯一)
- class选择器
- 格式: .class{样式代码}
- 作用: 选取页面中指定class值得多个元素
- 分组选择器
- 格式: div,#abc,.c1{样式代码}
- 作用: 将多个选择器合并成一个选择器
- 属性选择器
- 格式: 元素名[属性名=‘值’]{样式代码}
- 作用:选取页面中所有指定属性名和值得元素
- 任意元素选择器
- 格式: *{样式代码}
- 作用: 选取页面中所有的元素
####练习要求
- 水煮鱼为红色字
- 红烧肉 水煮鱼 宫保鸡丁背景蓝色
- 文本框背景绿色
- d2字体绿色
- d3 s3 h3 字体紫色purple
- d3 s3 h3 d2 s1 s2 s3 背景绿色
- 所有元素添加蓝色实线边框
###选择器续 - 子孙后代选择器
- 格式: body div span{样式代码}
- 作用:选取body里面div里面所有span(包括所有后代)
- 子元素选择器
- 格式: body>div>span{样式代码}
- 作用:选取body里面的div里面的所有子元素span
- 伪类选择器
- 该选择器选择的是元素的状态: 鼠标悬停状态 点击状态 未访问状态 访问过
- 格式: a:hover/active/link/visited{}
###选择器回顾
- id选择器 #id{}
- 标签名选择器 div{}
- class选择器 .class{}
- 分组选择器 #id,div,.class{}
- 属性选择器 input[type=‘button’]{}
- 任意元素选择器 *{}
- 子孙后代选择器 div span{}
- 子元素选择器 div>span{}
- 伪类选择器 a:visited访问过/link未访问/hover悬停/active点击{}
###颜色赋值方式
- 三原色: red green blue 任何颜色都是三原色组成,每个颜色的取值0-255
- 颜色单词赋值 red
- 6位16进制赋值 每两位表示一个颜色 #ff0000
- 3位16进制 每一位重复 #f00等效#ff0000
- 3位10进制赋值 rgb(255,0,0)
- 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
- block: 块级元素,独占一行,可以修改宽高 包括:div h1-h6 p hr
- inline:行内元素,共占一行,不能修改宽高 包括:span b i small s u 超链接a
- inline-block:行内块元素,共占一行,也可以修改宽高: 图片img input
###文本和字体相关样式 - *水平对齐方式 text-align:left/right/center
- *文本修饰:text-decoration: overline上划线/underline下划线/line-through删除线/none去掉文本修饰
- 文本阴影:text-shadow: 颜色 x偏移值 y偏移值 浓度(值越小越清晰)
- *行高:line-height:30px; 可以通过行高实现文本垂直居中
- *文本颜色: color:red;
- *字体大小: font-size:20px;
- *加粗: font-weight:bold/normal(去掉字体加粗)
- 斜体: font-style:italic;
- 字体设置: 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>测试 空格<abc></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引入方式
<!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
}
测试结果:
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>
测试结果:
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>
测试结果:
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>
显示效果:
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>
显示效果:
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的位置
显示效果:
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>
测试效果:
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>
测试效果:
未完，待续，，，
上一篇： 几道经典js面试题