html部分标签
input标签
输入框标签
常用属性:
type 类型,声明输入框的类别
text:文本输入框,专门用来输入文本的
password:暗文输入,常用于输入密码等隐私数据
date:日期输入框,用来输入日期
datetime-local:用来输入年月日 时分
email:当用户提交数据到后台时会检查该输入框是不是邮箱格式
color: 选择颜色
radio:单选框
checkbox:复选框
file:上传文件
<!-- 输入框标签
常用属性:
type 类型,声明输入框的类别
text:文本输入框,专门用来输入文本的
password:暗文输入,常用于输入密码等隐私数据
date:日期输入框,用来输入日期
datetime-local:用来输入年月日 时分
email:当用户提交数据到后台时会检查该输入框是不是邮箱格式
color: 选择颜色
radio:单选框
checkbox:复选框
file:上传文件-->
账号:<input type="text"><br>
密码:<input type="password"><br>
出生日期: <input type="date"><br>
时分秒的日期:<input type="datetime-local"><br>
邮箱: <input type="email"><br>
喜欢的颜色: <input type="color"><br>
性别: 男: <input type="radio"> 女:<input type="radio"><br>
职业: 学生: <input type="checkbox"> 志愿者 <input type="checkbox"> 程序员<input type="checkbox"><br>
选择头像图片: <input type="file">
input的placeholder可以在输入框里加入提示信息
value属性是相当于在输入框提前写下了某些值
placeholder只是提示信息,不影响用户填写内容
邮箱<input type="email" placeholder="请输入邮箱"><br>
密码<input type="password" placeholder="请输入密码"><br>
验证码<input type="text" value="1234">
radio多选一时是input为同意name
name=“可以随意起名” id="随意起名,不能以数字开头
性别: 男<input type="radio" name="first"> 女<input type="radio" name="first"><br>
爱情: 初恋<input type="radio" name="second"> 热恋<input type="radio" name="second">
textarea标签
多行文本区域标签 类似QQ空间留言
<!-- 多行文本区域标签 -->
<!-- 类似QQ空间留言 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
label标签
使点击label内的内容可以到for所指定的地方
<!-- label标签 -->
<!-- 使点击label内的内容可以到for所指定的地方 -->
<label for="account">账号:</label><input id="account" type="text"><br>
<label for="pwd">密码:</label><input id="pwd" type="password">
<label for="select">男</label><br><br><br><br>
<input id="select" type="radio">
select标签
select是下拉框标签
option是下拉框的选项标签
<!-- select是下拉框标签 -->
地址:
<select>
<!-- option是下拉框的选项标签 -->
<option value="">河南</option>
<option value="">河北</option>
<option value="">北京</option>
</select>
button标签
按钮标签 设置一个按钮
<!-- 按钮标签 -->
<button>登录</button>
<!-- input也可以作为按钮使用 -->
<input type="button">
<input type="submit">
img标签
图片标签
img是图片标签 属性为了描述修饰这个标签 <开始标签 属性=“属性值”></结束标签>
src是img标签的一个属性,声明图片的地址
alt是当图片路径错误时图片加载出来出现的提示信息
title是当鼠标移动到图片上时出现的提示信息
width:控制图片的宽度,大多数html标签都有的属性
height: 控制图片的高度,
当图片只设置了高宽的其中一个属性,那么另外一个没有设置的属性也会等比例缩放
img可以引入网络资源图片,也可以引入本地资源图片
网页中的计量单位比较常用的是像素px
引入资源方式
引入图片资源、音乐资源、视频资源、外部css或者js或者html文件资源都有两种方式
1、绝对路径 从磁盘开始的路径,直到图片文件名的完整路径
2、相对路径 相对于当前这个文件,要引入的图片其所在的路径
绝对路径
<img src="C:\Users\ASUS\Desktop\mouse.png">
相对路径
…/ 代表是跳到上一级(父级)目录
<img width="300px" height="100px" src="../mouse.png" alt="你的图片丢了" title="点击一下,了解更多">
还有引入网络资源 src herf里面填资源网址
b u等文字标签
b标签是加粗标签,让文字加粗
u是下划线
i em斜体
strong标签是着重语气,在一些朗读软件里用strong修饰的文字会有重音
strong经常作为搜索用的语义标签
标签是可以嵌套使用的
<b>你好世界</b> 你好世界 <strong>你好世界</strong>
<i>哈喽</i> 哈喽 <em>哈喽</em>
<u>添加下划线</u>
<u><b>添加下划线</b></u><!-- 加粗加下划线 -->
a标签
a标签是超链接
href属性类似于img的src属性,都是用来填写资源路径
<a href="https://www.baidu.com/">百度网页</a>
span标签
span是一个无语义标签,但是常和样式结合使用
<span>我是一个span标签,但是我的直接功效作用是没有的</span>
br标签
换行标签
世界这么大,
<br>我想去看看
<br> 床前明月光,
<br>疑似地上霜。
<br>举头望明月,
<br>低头思故乡。
p标签
p标签是一个段落标签,用来放一段文字的,类似于小学语文中的自然段
独占一行,自带换行 常用于新闻、小说
<p>世界这么大,</p>我想去看看
h标签
h1-h6 标题标签,常用于新闻标题或者文字章节名 将文字加粗放大
h系列的标签独占一行
<h1>俄乌战争几时休</h1>
<h2>俄乌战争几时休</h2>
<h3>俄乌战争几时休</h3>
<h4>俄乌战争几时休</h4>
<h5>俄乌战争几时休</h5>
<h6>俄乌战争几时休</h6>
hr标签
hr水平线标签 常用于将新闻标题和正文分开
床前明月光,
<hr>
疑似地上霜。
audio标签
audio 音频调用
<audio src="1.mp3" ></audio>
没有controls 音频没有显示
属性等于属性名的时候可以不用写等号后后面的内容
<audio src="1.mp3" controls="controls"></audio>
<audio src="1.mp3" controls></audio>
form标签
form标签 表单标签,可以向后端发起请求,将请求数据传给后端
action:指定发送的请求地址
method:请求方式
<form action="">
账号:<input type="text" name="account">
密码:<input type="text" name="password">
</form>
form是一个表单标签,和前后端对接时常用的一个标签
action是后端接口地址
method是请求方式:
get post put patch delete 等请求
get请求会把用户的填写参数放到url网址上
登录注册一般使用的是post请求,会把参数封装起来传送,不会展示到url上。
<!--boss工作搜索接口-->
找工作,来boss <br>
<form action="https://www.zhipin.com/web/geek/job" method="get">
职位:<input type="text" placeholder="请输入你想找的工作" name="query"><br>
城市:<select name="city" id="">
<option value="101030100">天津</option>
<option value="101010100">北京</option>
<option value="101020100">上海</option>
</select>
<button>点我搜索</button>
</form>
<!--智联工作搜索接口-->
找工作,来智联
<form action="https://sou.zhaopin.com/">
职位: <input type="text" name="kw">
<input type="submit">
</form>
<br>
<br>
<br>
<form action="https://www.zhipin.com/web/geek/job">
职位:<input type="text" name="query"><br>
城市: <select name="city" id="">
<option value="101010100">北京</option>
<option value="101020100">上海</option>
<option value="101280100">广州</option>
</select><br>
页数:<input type="hidden" name="page" value="2"><br>
<button>搜索</button>
</form>
<br><br><br>
<!-- 百度的接口 -->
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>百度一下</button>
输入框 name=query
城市 name=city
页数 name=page
点击按钮提交from
复合标签
1、 父元素 子元素{} 控制父元素里的所有的该子元素
2、 父元素 > 子元素{} 控制父元素里所有的一级该子元素的样式
3、 标签1,标签2{} 标签1和标签2都使用{}里的样式
如果出现属性冲突就开始比权重
就近原则,当权重相同时根据就近原则
如果是一样的近的标签权重也一样就比先后顺序,最新的指令生效
子元素会继承有些父元素的标签
<style>
div{
color: aqua;
}
div p{
font-size: 20px;
}
div>p{
background-color: red;
}
<div class="haha d1">
哈哈
<p>你好</p>
<p>
hello
<span>hi
</span>
</p>
</div>
行内元素行,内块元素,块元素
标签元素大致分三种(三种类型可以相互转换,使用display):
1、行内元素(inline): 允许与其它元素在同一行显示。
行内元素的宽高默认是内容的宽高,如果没有内容就是0*0
行元素一般是不能设置宽高的
不能使用margin-top
例子:<span> <a> <b> <u> <i>
行元素都能放同一行,除非这一行放满了
2、行内块元素(inline-block): 允许与其它元素在同一行显示
行内块元素的宽高默认是初始大小宽高
行内块是能设置宽高的
行内块可以使用margin值
例如 input button textarea
3、块元素(block): 不允许与其它元素在同一行展示
默认高度是0,可以被内容撑开
默认宽度是父元素的宽度
如果块元素的宽度被设置不是一行的宽度,也是不允许其它元素放置在一行的
块元素可以设置宽高
块元素可以使用margin值
例如: div p h1~h6 hr
img其实是一个行内元素,但是比较特殊,可以设置宽高
css样式
颜色
1、英文单词表示颜色
2、用rgb光学三原色 红绿蓝
每种颜色可以调配一定的比例,比例范围是0~255
3、用十六进制表示颜色 #000000 #FFFFFF
123456789ABCDEF
#world{
/* 1、英文单词表示颜色 */
color: blue;
}
#my{
/* 2、用rgb光学三原色 红绿蓝
每种颜色可以调配一定的比例,比例范围是0~255 */
color: rgb(255, 0, 0);
}
#news{
/* 3、用十六进制表示颜色 #000000 #FFFFFF*/
/* 123456789ABCDEF */
color: #F0069A;
}
margin属性
外边距叫做margin A标签与B标签之间的距离叫做外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.d1{
height: 200px;
width: 200px;
background-color: red;
/* 距离左边另外一个元素的外边距 */
margin-left: 100px;
}
.d2{
background-color: blue;
height: 100px;
width: 100px;
margin-left: 100px;
/* 的距离上边的外边距 */
margin-top: 20px;
margin-bottom: 30px;
}
span{
margin-left: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 外边距叫做margin A标签与B标签之间的距离叫做外边距 -->
<div class="d1">你好</div>
<div class="d2"></div>
<span>世界很多大</span><span>世界很好</span>
</body>
</html>
body自带距离浏览器窗口上下左右8px的外边距margin
p自带上下12px margin
水平对齐方式
针对文字和图片的对齐方式,是左对齐还是居中还是右对齐呢
该样式属性在父元素使用,是让文字或图片在父元素的宽度里水平对齐方式
text-align: 位置;
center right left(默认)等
垂直对齐方式
主要让图片和文字垂直方向的对齐
vertical-align: 位置;
baseline(默认) bottom top middile 等
行高line-height:当行高和盒子的高度一样时文本垂直居中
字体样式
font-family 规定文本的字体系列 (字体—宋体等)
font-size 规定文本的字体尺寸 (字体大小)
font-style 规定文本的字体样式 (字体类型 斜体 下划线等)
font-weight 规定字体的粗细 (400正常)
块 行内块
宽
width:10px;
高
height:100px;
背景颜色
background-color: red;
transparent:颜色是父元素的背景色
不让背景图片重复 background-repeat: no-repeat;
背景图设置 背景图默认会铺满整个屏幕,如果图片小铺不满就重复显示
如果图片大就展示一部分
背景图片大小可以写值 可以写百分比 可以写覆盖形式
background-size: 300px 300px;
background-size: 60% 60%;
background-size: 100% 100%;
contain是图片的高度刚好是标签元素的宽度
高宽其中一个方向变化的时候,另外一个也在等比例缩放
cover
background-size: cover;
调整图片位置 水平方向 垂直方向
这个属性精灵图比较常用
background-position: left top;
图片两种引入方式
1、img标签引入
img标签如果不设置大小,默认的图片大小
可以控制宽高,是通过通过img标签大小控制宽高的width,height,可以使用百分比
img标签的图片会占用位置
2、背景图片引入
背景图片如果不设置大小,默认将背景图片填满放背景图片的标签元素
可以控制宽高,是通过在放背景图片的标签样式里写background-size属性控制,可以使用百分比
背景图片只会占用背景空间,不会影响放入的内容
a标签的文字样式需要a标签去控制,不能让他的父标签去控制
边框
基本所有的标签都有border边框,有margin外边距
border:四个边框的宽度 边框线的类型,solid是实现 边框线的颜色
border: 1px solid red;
border是一个复合属性,将多个属性整合到一起了
border-width: 1px;
border-color: red;
border-style: solid;
边框有上下左右四个边框
border-left: 100px solid blue;
border-left-color: red;
border-left-style: solid;
border-left-width: 1px;
border-top: 100px solid black;
border-right: 100px solid red;
border-bottom: 100px solid aqua;
边框弧度 使用百分比: 取长宽的百分之50作为半径画弧度
border-radius: 50%;
边框弧度 使用具体值,如果一条边的该数值做半径,如果值已经是宽高中最小哪个值的一半了,就画半圆,值再大也不会改变了
border-radius: 150px;
border-radius: 150px;
border-radius: 50%;
字体间距
字体间距 单位可以是em,也可以是px
letter-spacing: 2em;会把每个字母当成一个字
单词间隔word-spacing:
/* 字体间距 单位可以是em,也可以是px */
/* letter-spacing: 2em;会把每个字母当成一个字 */
letter-spacing: 10px;
/* 单词间隔 */
word-spacing: 10px;
渐变色
linear-gradient()线性渐变函数
渐变默认是从上往下
/* background:linear-gradient(blue,red); */
background: linear-gradient(to right bottom,blue,red);
/* background: linear-gradient(to right bottom,blue,red,yellow); */
/* background: linear-gradient(45deg,blue,red,yellow); */
/* */
/* background: radial-gradient(circle,blue,aqua,red); */
deg是倾斜角度
to 是渐变方向 to right bottom,blue,red由蓝色向红色渐变方向右下
阴影
- 盒子阴影 box-shadow
该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。 - 字体阴影text-shadow
伪类伪元素
- 伪类
伪类是选择器的一种,它用于选择处于特定状态的元素,比如当它们是这一类型的第一个元素时,或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样,帮你在你的标记文本中减少多余的类,让你的代码更灵活、更易于维护。
伪类就是开头为冒号的关键字 :
一些例子:
<a href="#">点击登录</a>
/* 超链接的四个伪类选择器。遵循顺序 “否则可能会导致hover样式失效” */
/* :link 超链接未被访问的状态*/
a:link{
color: red;
}
/* :visited 超链接被访问后的状态 */
a:visited{
color: blue;
}
/* :hover 鼠标移入的状态*/
a:hover{
color: pink;
}
/* :active 用于活动链接,跳转状态“鼠标按下与释放之间” */
a:active{
color: yellow;
}
<!-- 锚点活跃元素
:target 锚点活跃元素
作用:当点击a标签,与之绑定的块元素发生改变。 -->
<a href="#box1">open</a>
<section id="box1">弹出块
<a href="#">close</a>
</section>
#box1{
display: none;
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
margin: auto;
width: 300px;
height: 300px;
background-color: brown;
}
#box1:target{
display: block;
}
<input type="checkbox" id="check">
<input type="text" id="ipt1" disabled>
<input type="text" id="ipt2" >
/* input的操作 */
/* :checked 适用于单选或复选框*/
#check:checked{
outline: 2px solid red;
}
/* 禁用状态 */
#ipt1:disabled{
background-color: red;
}
/* 启用状态 */
#ipt2:enabled{
background-color: blue;
}
/* 获取输入焦点的状态 */
#ipt2:focus{
background-color: #ccc;
}
- 伪元素
伪元素以类似方式表现,不过表现得是像你往标记文本中加入全新的 HTML 元素一样,而不是向现有的元素上应用类。伪元素开头为双冒号::。
例子:
<p class="pl">,周一</p>
<input type="text" placeholder="请输入内容" id="ipt3">
<p class="p2">
第一行<br>
第二行
</p>
.pl::before{
content: "你好";
color: blue;
}
.pl::after{
content: "后缀";
color: blue;
}
/* ::-webkit-input-placeholder 设置input内的placeholder属性 */
#ipt3::-webkit-input-placeholder{
font-size: 12px;
color: red;
}
/* 第一行的第一个字 */
.p2::first-letter{
font-size: 20px;
}
/* 第一行 */
.p2::first-line{
background-color: rosybrown;
}
/* 用户选中文本效果 */
.p2::selection{
background-color: yellow;
}
布局语义化
<nav>导航条</nav>
<header>页面的头部,包含logo,搜索框,主导航等……</header>
<main>核心内容,展示页面的主体内容,只能使用一次</main>
<aside>侧边栏</aside>
<section>块,一部分,代替div使用</section>
<footer>底部,父元素为body,代表整个页面的底部信息</footer>