html元素
常用标签
-
div:块标签
-
p:块标签,段落标签
-
span:行标签,一行可以放多个
-
a:超链接,
<a href="#"></a> <a href="#" target= " _blank"></a> <a href="#"></a>
href :链接的地址
target = “_blank”:设置在新窗口打开链接地址
-
img:插入图片
<img src="" alt= "">
src:图片地址
alt:图片加载不出来显示内容
-
u:下划线
-
i:斜体
-
br:换行标签
-
hr:分割线
列表
-
ul…li:无序列表
-
ol…li:有序列表
-
dl…dt/dd:自定义列表
<dl> <dt>列表标题</dt> <dd>列表内容</dd> </dl>
di:列表标题
dd:列表内容
表格
-
table:表格定义标签
-
thead:头部
-
tbody:身体
-
tfooter:底部
-
tr:行
-
th:头单元格
-
td:标准单元格
注意:
-
设置table元素的大小会影响单元格宽高尽量不设置
-
th单元格默认文本加粗,水平居中
-
设置某单元格的大小会影响一行/一列的单元格大小
-
表格的合并
-
设置单元格之间的间距,默认为2px ,0没有,1有*/
border-spacing: 0;
设置单元格边框是否合并 separate不合并,collapse合并
border-collapse: collapse;
表单
-
form:表单
- 表单是一个包含表单元素的区域
- 表单元素是允许用户在表单中(文本域,下拉列表,单选框,复选框等等)输入信息元素
- 表单使用表单元素from定义
-
input: 用户输入数据时使用的文本框、复选框、单选按钮等都是通过元素创建的,元素只能在里面使用,用来创建表单的输入元素
<input type="text"> <input type="radio"> <input type="checkbox"> <input type="password"> <input type="submit"> <input type="button"> <input type="reset"> <input type="time"> <input type="date"> <input type="month"> <input type="week"> <input type="datetime-local"> <input type="email"> <input type="tel"> <input type="search"> <input type="url"> <input type="color"> <input type="file"> <input type="imag"> <input type="number"> <input type="range"> <input type="hidden">
type:核心属性,值不同对应input的功能,样式都会发生相对应的改变
type属性 描述
- text :input将会接受文本输入
- password 可用于一些私密性和隐私性的内容(例如:密码)
- button、submit、reset 实现一个按钮形式,但用于的内容不同,实质上都是实现一个钮形式,此时可以为input元素设置value值为按钮贴上文字
- radio 实现单选框(注意:同一组单选框name属性需要相同,否则无法实现单选)
- checkbox 实现复选框
- search 实现搜索框
- color 实现颜色选择框
- image 实现图像按钮
- number 设置为此属性输入框只能输入数字
- range 实现数值滚动条
- hidden 将i元素给隐藏
- email、tel、url 对邮箱、电话号码、网址等数据进行把关,但是把关方面需要 正则表达式来
- time 时间框
- week 星期框
- month 年月框
- date 日期框
- datetime_local 本地日期和时间
-
lable:给input添加标注,扩大input的适用范围
<label for = "user"/* id 的名字*/>备注</label> <input type = "text" id = "user" value = "asdad">
作用:label的for值和input的id值一致,点击label会让input获取焦点
-
select:定义下拉菜单
-
optgroup:定义下拉菜单的选项组
-
option:定义列表中一个选项内容
<select name="skill" id="skill"> <optgroup label="客户"> <option value="">帮助中心</option> <option value="">售后服务</option> <option value="" selected>在线客服</option> </optgroup> <optgroup label="商户"> <option value="">合作招商</option> <option value="">学习中心</option> </optgroup> </select>
label:增加选择项的描述
selected属性: 在页面加载的时候预先选中的选项
-
fieldset:将表单的元素进行分组,会产生一个边框
-
legend:为fieldset元素定义标题
<fieldset> <legend>请选择:</legend> </fieldset>
html属性
通用属性
- class:设置标签的类 class属性用于指定元素属于何种样式的类。
- id:设置标签的标识 id属性用于定义一个元素的独特的样式
概念上:
id是先找到结构/内容,再给它定义样式;用于区分不同的结构和内容, id是具有唯一性的
class是一个样式,先定义好, 然后可以套给多个结构/内容, 便于复用。也就是说class名称可以相同。
注意:id的优先级要高于class,
style:提供了一种改变所有 HTML 元素的样式的通用方法。
表单属性
- type:核心属性,值不同对应input的功能,样式都会发生相对应的改变
type属性 描述
- text :input将会接受文本输入
- password 可用于一些私密性和隐私性的内容(例如:密码)
- button、submit、reset 实现一个按钮形式,但用于的内容不同,实质上都是实现一个钮形式,此时可以为input元素设置value值为按钮贴上文字
- radio 实现单选框(注意:同一组单选框name属性需要相同,否则无法实现单选)
- checkbox 实现复选框
- search 实现搜索框
- color 实现颜色选择框
- image 实现图像按钮
- number 设置为此属性输入框只能输入数字
- range 实现数值滚动条
- hidden 将i元素给隐藏
- email、tel、url 对邮箱、电话号码、网址等数据进行把关,但是把关方面需要 正则表达式来
- time 时间框
- week 星期框
- month 年月框
- date 日期框
- datetime_local 本地日期和时间
- name:定义input名字
name:讲解
name属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过JS引用表单数据.
只有设置了name属性的表单元素才能在提交表单的时候传递它们的值,因为服务器端获取表单数据通过元素的name属性的值而得到的,没有name属性就无法得到表单元素提交给服务器的值。
- value:定义input的值
input标签的value属性的作用是由input标签type属性的值决定的。
- 当type值为 button,reset,submit中的其中一个时,value的值表示按钮上的文本描述。
- 当type值为 text,password,hidden中的其中一个时,value的值表示输入框中的初始值,初始值可以更改在提交表单的时候可以把value属性的值发送给服务器(即是初始值,也是提交至服务器的值)。
- 当type值为 checkbox,radio中的其中一个时,value的值表示提交给服务器的值“携带的数据”,或者复选框被勾选的状态,默认为on。
- 当type值为 image, value的值表示用户的点击位置“鼠标位于图片的x和Y坐标”并提交给服务器。
- placeholder:input输入框的提示语“只能用在输入框”。
- autofocus:自动成为输入焦点
- autocomplete:是否启用自动完成功能,on开启"默认值",off关闭。
- required:输入框的字段是必填的。
- readonly:只读模式。
- disabled:禁用一个input。
- enabled:选择元素启用后的状态
- checked:选择被选中的input元素
- selected: 在页面加载的时候预先选中的选项
- label:增加选择项的描述
表格属性
- colspan:跨列合并
- rowspan:跨行合并
功能元素属性
-
hred:链接地址
-
target:
1.target=“_self”
内容在当前页面显示。
2.target=“_blank”
内容在新页面显示。
3.target=“three”
内容在对应窗口显示
4.target=“_top”
在当前窗体打开链接,并替换当前的整个窗体(框架页),清除所有包含的框架补充:(:target当我们点击链接()时,对应id的元素显示在当前页面。)
-
src:图片、资源路径
css属性
常用
-
width:宽
-
geight:高
-
background:背景
-
background-color:背景颜色
-
background-position:在css中用来设置背景图片的位置
-
background-size:规定背景图片的尺寸
- 设置的宽高小于图片的宽高时,图片会被压缩,然后平铺压缩后的图片,直到填满整个盒子容器;
- 设置的宽高大于图片的宽高时,图片会被拉伸,然后平铺拉伸后的图片,直到填满整个盒子容器
-
background-repeat:定义了图像的平铺模式。
repeat 默认将图片沿X,Y两个方向平铺,知道填满整个盒子区域; repeat-x 只进行横向平铺 repeat-y 只进行纵向平铺 no-repeat 不平铺 inherit 从父元素继承background-rapeat属性 - background-image:属性为元素设置背景图片
- 如果盒子的宽高大于图片的宽高,则默认图片会在盒子中平铺,直到填满整个盒子;
- 如果盒子的宽高小于图片的宽高,则默认图片会被剪裁,只显示图片一部分;
-
-
word spacing :词间距
-
line-height:行高
-
font-size:字体大小
-
font-family:字体 :字体类型
-
font-weight:bold :字体加粗
-
letter-spacing :字间距
-
text-align:文本对齐默认left左对齐 center居中 right右对齐
-
border : 5px solid 颜色;:边框 宽度 solid实现 dashed虚线 颜色
-
text-decoration: underline line-through; :text-decoration添加到文本的[修饰],underline下划线,line-through删除线
-
text-decoration: none; :取消超链接下划线
-
border :none取消自带边框
-
outline:none:取消轮廓线
-
list-style:none:取消列表样式
-
position:定位
-
display:转元素
-
float:浮动
-
colspan:合并列
-
rowspan:合并行
-
text-indent:首行缩进
盒子
- margin:外边距
- padding:内边距
- border:边框
- box-sizing
- content-box 标准盒子(元素大小 = content + padding + border)
2. border-box 怪异盒子(元素大小 = content(content + padding + border) )
- border-radius: 10%; :圆角
选择器
标准选择器
-
标签选择器
-
类名选择器
-
id选择器
-
通配符选择器
复合选择器
后代选择器
<style>
/* 把ol的li改成红色*/
ol li{
list-style:none;
color:red;
}
/* 把ol的a改成blue*/
ol li a{
color:blue;
}
</style>
<body>
<ol>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li><a href "#">ol的孙子</a></li>
</ol>
<ul>
<li>ul的孩子</li>
<li>ul的孩子</li>
<li>ul的孩子</li>
</ul>
</body>
- 元素ol 和元素li 中间用空格隔开
- 元素li可以是儿子也可以是孙子
子代选择器
<style>
div>a{
}
</style>
<body>
<div>
<a href= "#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
- 元素div和元素a 用> 隔开
- 元素a必须是元素div儿子级的其他的不归他管
并集选择器
<style>
/* 把鸡狗改成红色 */
div,p{
color:red;
}
/* 把鸡狗改成红色 小猪一家改红色*/
div,p,.pig li{
color:red;
}
</style>
<body>
<div>
鸡
</div>
<p>
狗
</p>
<span> 兔</span>
<ul class="pig">
<li>小猪</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
- 并集选择器可以多组标签
- 元素用英文逗号隔开
伪类选择器
a:link:选择所有未被访问的链接
a:visited:选择所有已被访问的链接
a:hover:选择鼠标位于其上的链接
a:active:选择活动链接
<style>
/* 未访问的链接*/
a:link{
color:#333;
}
/*访问过的链接*/
a:visited{
color:red;
}
/* 选择鼠标经过的那个链接*/
a:hover{
color:blue;
}
/* 选择是我们的鼠标按下还没有弹起的链接*/
a:active{
color:#369;
}
</style>
<doby>
<a href="#">链接</a>
</doby>
- 为了确保生效,清按照LVHA的顺序声明:link :visited :hover :active.
:focus :伪类选择器用于选取获得焦点元素
<style>
/*获得光标的input表单元素选取出来*/
input:focus{
background-color: red;
color: blue;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
伪元素选择器
伪元素选择器:
简称:伪元素,相当于创建了一个html元素。
伪类选择器 和 伪元素选择器的区别:
-
前缀不同,伪类: , 伪元素:: 。
-
伪类用于向选择器添加特殊的效果。伪元素将特殊的效果添加到某些元素上进行操作。
- ::berfore 增加前缀
- ::after 增加后缀
- :: fist-letter 第一行第一个文本
- ::first-line 第一行
- ::-webkit-input-placeholder 设置input元素内的placeholder属性的文本
- ::selection 用户选中的文本内容
定位
-
定位的由来,将盒子定在某一位置上,所以定位也是摆放盒子,按照定位的方式移动盒子
定位的组成:定位=定位模式+边偏移
定位模式:用于指定一个元素在文档中的定位方式
定位模式他是通过css的position属性来设置的,值可以分为五个:static静态定位
relative相对定位,absoulute 绝对定位,fixed固定定位,sticky 粘性定位
边偏移:定位的盒子移动到最终位置。有top.bottom.left.right四个属性
静态定位(了解)static
是元素默认的定位方式,简单理解无定位的意思
静态定位按照标准流特性摆放位置,它是没有偏移的
相对定位 :position:relative
1.他是相对于子级原来的位置来移动的
(移动位置的时候参照点是原来的位置)
2.原来在标准流位置继续占有,后面的盒子依然
以标准流方式对他(不脱离文档流,继续保留
原来的位置)
绝对定位 : positive:absolut
1.如果没有祖先元素或者祖先元素没有定位
择以浏览器为准定位
2.如果这个父元素有定位(相对.绝对.固定)
则以最近一级的有定位的祖先元素为参考点移动位置
3.不占有原来的位置(脱离文档流,不保留原来位置)
相对定位和绝对定位倒是有什么使用场景
子绝夫相:子级使用绝对定位,父级则需要使用相对定位
子绝:子级用绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,
不会影响盒子里的其他兄弟
父相:父盒子布局时,需要占有位置,因此父亲只能是相对定位
总结:因为父级需要占有位置,因此是相对定位,
子盒子不需要占有位置,则使用绝对定位
**子绝父相不是永远不变的,也可以子绝父绝,子绝父固,子绝父粘 **
固定定位:positive:fixed
固定定位使用场景:可以在浏览器页面滚动时
元素的位置不会改变
特点1.以浏览器的可视窗口为参照点移动元素。跟父元素
没有任何关系,不随滚动条滚动
特点2.固定定位不占有原先位置(脱离文档流)
粘性定位:positive:sticky
特点1.以浏览器的可视窗口为参照点移动元素(固定定位)
特点2.占有原先的位置不脱离文档流(相对定位)
特点3.必须添加top.left.bottom.right.其中一个才有效果
小知识点
父元素的塌陷
margin穿透问题:“第一个子元素的上margin和最后一个元素的下margin会穿透父元素”。
会造成父盒子塌陷问题,
解决方案三个:
overflow: hidden; (推荐,溢出内容的部分会隐藏)
padding:0.1px; (值不小于等于0即可)
border:1px solid; (麻烦)
隐藏和显示
- display实现隐藏
隐藏,清除元素。 隐藏后不占据原来的位置。
display: none;
- display显示元素
配合display none; 作为显示元素使用“值是除了none以外的任何一个均可
display: block;
- visibility实现隐藏
隐藏元素:隐藏后还占据原来的位置。
visibility: hidden;
- visibility:显示元素
配合 visibility: hidden; opacity透视度
visibility: visible;
- opacity透视度实现隐藏
设置元素的透视度,取值范围0-1,0为完全透视,1为完全不透视
opacity: 0;
- opacity透视度:显示元素
配合opacity: 0; 作为显示元素使用
opacity: 1;
基线对齐
基线:多个元素水平方向排列,元素的垂直方向按照基线进行对齐
出现情况:空快或图片默认的的基线在底部
文本元素基线在四线三格的第三线“文本的中下部分”
解决方案:vertical-align:middle;“基线调整 之中线"top"基线调整值顶部"bottom"基线调整至底部"baseline"四线三格的第三线”
使用场景:1.流式布局中元素一行排列2.图片和文本在一行片列不对其的问题
顶线对齐
vertical-align: top;
中线对齐 :利用中线对齐 来实现基线对齐
vertical-align: middle;
底线对齐
vertical-align: bottom;
鼠标样式
鼠标样式:就是更改一些用户操作样式,以便提高更好的用户体验
<ul>
<li style="cursor:default;">我是默认的鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
z-index堆叠
<style>
img {
width: 200px;
height: 150px;
position: absolute;
z-index: 49;
}
h1 {
position: absolute;
z-index: 50;
}
/*
拥有最高堆叠顺序的元素总是出于堆叠顺序较低的元素的前面。元素可以拥有负的z-indx属性值
z-index仅能在定位元素上奏效
*/
</style>
</head>
<body>
<!-- z-inder 属性指定一个元素的堆叠顺序 -->
<h1>This is a heading</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-10-15%2F5f87e84f24b60.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665631391&t=955d3ce00636ebe52344cbd623731543"
alt="">
<p>该吃饭了</p>
</body>
描点
锚点:像迅速定位器,可以迅速找到与之绑定的元素
使用方式:
a标签的herf,和元素的id值绑定
<style>
ul {
position: fixed;
top: 200px;
left: 20px;
}
ul a {
display: block;
width: 100px;
height: 40px;
background-color: aqua;
text-align: center;
line-height: 40px;
text-decoration: none;
}
ul li:nth-child(odd) a {
background-color: azure;
}
div {
height: 500px;
}
</style>
</head>
<body>
<ul>
<li><a href="#box1">1</a></li>
<li><a href="#box2">2</a></li>
<li><a href="#box3">3</a></li>
<li><a href="#box4">4</a></li>
</ul>
<div id="box1" style="background-color: purple;">1</div>
<div id="box2" style="background-color: olive;">2</div>
<div id="box3" style="background-color: orangered;">3</div>
<div id="box4" style="background-color: orchid;">4</div>
</body>
雪碧精灵图
什么是精灵图:
就是将很多个图片放置到一个大的图片上面,精灵图主要是当做背景图使用的。
之所以要将多个图片放到一张大图上,是因为很多时候我们的背景图片都是放在服务器上的,当需要使用某个图片时需要向服务器发送请求资源,如果图片过多服务器压力会比较大,所以精灵图可以减轻服务器压力。
使用方式:背景插入
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
/* 大图的尺寸:652 * 553 */
/* 方式一:跟距图片的大小设置精灵图片的大小 */
.part1 li{
width: calc(652px / 6);
height: calc(553px / 5);
border: 1px solid;
background-image: url(”精灵图“);
}
.part1 li:nth-child(1){
/* 默认背景图平铺
x为正值,显示的是左侧拼接的图片“Y轴同理”
查找某个精灵图:遵循正值“倒着找”,负值“正着找”*/
background-position:-200% 300%;
}
/* 方式二:窗口的大小给定情况。
原理:设置显示范围的固定大小,设置背景图的大小符合一张小图的显示宽高即可*/
.part1 li:nth-child(3){
width: 50px;
height: 50px;
background-size: 300px 250px;
background-position: 200% -200%;
}
</style>
</head>
<body>
<ul class="part1">
<li></li>
<li></li>
<li></li>
</ul>
</body>