前端HTML

最新推荐文章于 2024-09-12 15:09:42 发布

m0_46357805

最新推荐文章于 2024-09-12 15:09:42 发布

阅读量83

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_46357805/article/details/115959193

版权

一、HTML部分

标题/段落标签

<hn align="对齐方式">标题文本</hn> /*一般不用*/
<p align="对齐方式">段落文本</p>
/*align可选的值有left right center*/

水平线标签（一般不使用）

<hr 属性="属性值" />
/*
align 设置水平线的对齐方式
size 设置水平线的粗细,以像素为单位，默认是2px
color 设置水平线的颜色
width 设置水平线的宽度
*/

强制换行

<br />

文本样式标签

<font 属性="属性值">文本内容</font>

属性名	含义
face	设置文字字体
size	设置文字大小，可取1-7的整数
color	设置文字颜色

文本格式化标签

标签	显示效果
b,strong	文字以粗体显示
u,ins	文字下方画线
i，em	文字以斜体显示
s,del	文字加删除线

图像标签

<img src="图像URL" />

属性	属性值	描述
alt	文本	图像不能显示时替换文本
title	文本	鼠标指针悬停时显示的内容
width,height	像素	设置图像尺寸

二、CSS部分

行内式

<标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签名>

内嵌式

<head>
<style>
	选择器{属性1:属性值1;属性2:属性值2;}
</style>
</head>

外链式

<head>
<link href="CSS 文件路径" type="text/css" rel="stylesheet" />
</head>

标签选择器

标签名{属性1:属性值1;属性2:属性值2;}

类选择器

.类名{属性1:属性值1;属性2:属性值2;}

id选择器

#id名{属性1:属性值1;属性2:属性值2;}

通配符选择器

*{属性1:属性值1;属性2:属性值2;}

1.设置文本样式

font-size:字号大小

相对长度	说明
em	倍率
px	像素

font-family:字体
可以同时指定多个字体，中间用逗号隔开，如果浏览器不支持第一个，则会尝试第二个，直到找到合适的，当都没有时，会使用浏览器默认字体
注意
1.各种字体之间必须使用英文状态下的逗号隔开
2.中文字体需要加英文引号，英文字体不需要引号，当需要设置英文字体时，英文字体要在中文字体前
font-weight:字体粗细

值	描述
normal	默认值
bold	粗体字
bolder	更粗的字
lighter	更细的字
100~900（100的整数倍）	400=normal，700=bold

font-style

值	描述
normal	默认值
italic	斜体（常用）
oblique	倾斜

font:综合设置字体样式

选择器{font:font-style font-weight font-size/line-height font-family}
/*必须按这个顺序*/

@font-face规则

@font-face{
	font-family:字体名称;
	src:字体路径;
}
/*字体需要下载，可以不安装，放在同一个文件夹*/

2.文本外观属性

color:文本颜色

1	英文单词
2	十六进制 #FF0000
3	RGB代码 rgb(值,值,值）/rgb(100%,0%,0%)

letter-spacing:字间距
word-spacing:单词间距（对中文字无效）
line-height:行间距
1.em2.px3.百分比
text-transform:文本转换

none	不转换
capitalize	首字母大写
uppercase	全部大写
lowercase	全部小写

text-decoration:文本装饰

none	默认
underline	下划线
overline	上划线
line-through	删除线

text-align:水平对齐方式

left	左对齐
right	右对齐
center	居中对齐

text-align仅适用于块级元素，对行内元素无效

text-indent:首行缩进
一般使用em作为设置单位
white-space:空白符处理

normal	常规
pre	按文档的书写格式保留空格、空行，原样输出
nowrap	强制文本不能换行

text-shadow:阴影效果

选择器{text-shadow:h-shadow v-shadow blur color;}
/*水平阴影距离 垂直阴影距离 模糊半径 阴影颜色*/

3.选择器

后代选择器
后代选择器用来选择元素或元素组的后代，外层标签写在前面，内层标签写在后面，中间用空格分隔
并集选择器
各个选择器通过逗号连接
子元素选择器

<h1><strong></strong></h1>
h1>strong就选到了strong

first-child和last-child选择器

p:first-child{
	color:
	font:
}
p:last-child{
	color:
	font:
}
<body>
	<p>xxxxxxx</p>
	<p>xxxxxxx</p>
	<p>xxxxxxx</p>
	<p>xxxxxxx</p>
</body>

4. 优先级

标签选择器权重为1
类选择器权重为10
id选择器权重为100
行内样式优先
权重相同时，CSS遵循就近原则

5.盒子模型

边框属性

设置内容	样式属性
border-style	none,solid,dashed虚线,dotted点线,double
border-width
border-color
border
border-top-style
border-top-width
border-top-color
border-bottom-style
border-left-style
border-right-style

内边距属性

属性	内容	取值
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距
padding		auto,相对于父元素的百分比，单位

外边距属性

属性	取值
margin-top
margin-right
margin-bottom
margin-left
margin	auto可使块级元素居中

6.背景属性

设置背景颜色

background-color:

设置背景图像

background-image:url();

设置背景图像平铺

repeat	默认值，沿水平和竖直方向平铺
no-repeat	不平铺
repeat-x	只沿水平方向平铺
repeat-y	只沿竖直方向平铺

设置背景图像的位置
使用像素值：background-position，设置的是图像左上角的坐标
使用关键字：
水平方向：left,center,right
垂直方向：top,center,bottom
使用百分比：背景图像和元素指定点对齐
设置背景图像固定
background-attachment属性
scroll：图像随页面一起滚动
fixed：图像固定在屏幕上
综合设置元素的背景
background属性
盒子的宽与高
width属性和height属性
仅适用于块级元素，对行内元素无效

7.盒子模型

rgba模式

rgba(r,g,b,alpha)
/*alpha透明度*/

opacity属性

opacity:参数;

圆角

border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

8.元素类型

块元素
常见块元素h1~h6,p,div,ul,ol,li,table
行内元素
常见行内元素strong（加粗标签）,b,em（倾斜标签）,i,del,s,ins,u,a,span,img,td
行内元素可以嵌套在块元素中，但块元素不可以嵌套在行内元素中
div标签
span标签
元素类型转换

display属性
inline	将元素显示为行内元素
block	将元素显示为块元素
inline-block	显示为行内块元素，不会独占一行
none	此元素将被隐藏，相当于该元素不存在

8.块元素垂直外边距合并

相邻块元素垂直外边距合并
当上下相邻的两个块元素相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直距离不是margin-bottom与margin-top之和，而是两者中的较大者
嵌套块元素垂直外边距的合并
父元素上外边距和子元素上外边距没有隔开，就会发生合并，合并后为两者中较大者

9.列表

无序列表ul

<ul type="">
	<li></li>
	<li></li>
	<li></li>
</ul>

type属性值	显示效果
disc	黑色圆
circle	空心圆
square	黑色正方形

有序列表ol

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

列表dl

<dl>
	<dt>标题1</dt>
	<dd>内容</dd>
	<dd>内容</dd>
	<dd>内容</dd>
	<dt>标题2</dt>
	<dd>内容</dd>
	<dd>内容</dd>
	<dd>内容</dd>
</dl>

列表样式
list-style-type属性

属性值	描述
disc	实心圆
circle	空心圆
square	实心方块
decimal	阿拉伯数字
lower-roman	小写罗马数字
lower-alpha	小写英文字母
lower-latin	小写拉丁字母
none	不使用项目符号

list-style-image属性

<style>
	ul{list-style-image:url();}
</style>
<ul>
	<li></li>
</ul>

list-style-position
设置项目符号位置
inside:列表项目符号位于列表文本内
outside:列表项目符号位于列表文本外
list-style属性

.one{list-style:outside url();}

10.超链接

创建超链接

<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

锚点链接

<a href="#one">柯南</a>
<h3 id="one">柯南</h3>

伪类控制超链接

超链接标签a的伪类	描述
a:link{CSS样式规则;}	超链接的默认样式
a:visited{CSS样式规则;}	超链接被访问之后的样式
a:hover{CSS样式规则;}	鼠标指针经过、悬停时超链接的样式
a:active{CSS样式规则;}	鼠标点击不放时超链接的样式

通常按照a:link,a:visited,a:hover,a:active顺序书写

11.表格

<table>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

table标签常用属性

属性	描述	常用属性值
border	设置表格的边框	像素
cellspacing	单元格之间的空间	像素
cellpadding	内容与单元格之间的空间	像素
width	设置表格宽度	像素
height	设置表格高度	像素
align	表格对齐方式	left,center,right
bgcolor	表格背景颜色	英文单词，十六进制
background	表格背景图像	url

tr标签的属性

属性	描述	属性值
height	行高	像素
align	一行内容的水平对齐方式	left，center，right
valign	一行内容垂直对齐方式	top，middle，bottom
bgcolor	设置行背景颜色	单词，十六进制
background	行背景图像	url

td标签的属性

属性	含义	属性值
width	单元格宽度	像素
height	单元格高度	像素
align	单元格内容的水平对齐方式	left，center，right
valign	单元格内容的垂直对齐方式	top，middle，bottom
bgcolor	单元格背景颜色	单词，十六进制
background	单元格背景图像	url
colspan	单元格横跨的列数	正整数
rowspan	单元格竖跨行数	正整数

如果要去掉单元格之间的空间，使用border-collapse属性

border-collapse:collapse; /*边框合并*/

12.布局

浮动float属性

属性	描述
left	标签向左浮动
right	标签向右浮动
none	标签不浮动

清除浮动clear

属性	描述
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除两侧浮动的影响

定位position属性
（1）定位模式

值	描述
static	自动定位
relative	相对于原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父标签进行定位
fixed	固定定位，相对于浏览器窗口定位

（2）边偏移

属性	描述
top	顶端偏移量，定义标签相对于其父标签上边线的距离
bottom	底部偏移量，定义标签相对于其父标签下边线的距离
left	左侧偏移量，定义标签相对于其父标签左边线的距离
right	右侧偏移量，定义标签相对于其父标签右边线的距离

定位类型
（1）静态定位
当position属性取static时，是静态定位
（2）相对定位
（3）绝对定位
将父标签设置为相对定位，但不对其设置偏移量，然后在对子标签应用绝对定位，并通过偏移属性对其进行精准定位
overflow属性
当盒子内的标签超出盒子自身大小时，内容就会溢出

属性	描述
visible	内容不会被修剪，会呈现在标签框外（默认值）
hidden	会被修剪，被修剪得内容是不可见的
auto	产生滚动条
scroll	内容会被修剪，浏览器始终会显示滚动条