HTML、CSS

最新推荐文章于 2024-05-31 10:24:04 发布

m0_70552692

最新推荐文章于 2024-05-31 10:24:04 发布

阅读量88

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_70552692/article/details/129808895

版权

Web前端基础

应用程序分类

客户端/服务器

Client/Server C/S模式

用户需要下载客户端才能使用，如微信 qq 游戏等

特点：功能丰富，安装繁琐，需要更新，开发成本高

浏览器/服务器

Browser/Server B/S模式

用户只需浏览器就可以使用，如网页qq、商业网站等

特点：功能较为丰富，无需安装软件，只需一个浏览器，无需更新，平台无关，开发时只需设计一套页面

B/S模式下，用户访问便捷，无需安装多余软件，企业开发文本低

所有B/S模式是Java主要开发模式，一个web项目，需要浏览器、服务器、数据库

用户通过浏览器访问服务器上的某个地址或页面，将数据传递到后端，在将数据提交到数据库进行访问和维护

整个系统中，页面部分起着承接的作用，可以用于收集用户数据和呈现服务端的内容

程序员既要开发服务端的内容，也要掌握如何将数据渲染在页面，如何通过页面获取用户数据

学习web基础，就是学习如何编写页面，如何通过浏览器呈现数据

web前端基础学习路线

HTML-->CSS-->JJavaScript-->Jquery

HTML

Hyper Text Markup Languge 超文本标记语言

超文本

可以理解为超级文本：超越了文本的限制，如图片、音频、视频等

也可以理解为超链接文本：通过某个链接可以访问互联网中的任意地址

标记

可以称为标签，用<>括起来的特定的单词，

标签可以分为单标签和双标签

单标签：<mete /> 双标签：<body 属性名=''属性值''><body/>

标签中可以加入属性，双标签中可以继续嵌套标签

用HTML标签写的文件保存为.HTML文件，称为页面文件

标签中的属性

在标签中，通过加入属性名="属性值"，就可以让某个标签拥有指定的特征

<!-- HTML中的注释 -->
<!-- DOC文档TYPE类型  说明当前页面的文档类型 -->
<!DOCTYPE html>
<html>
	<head>
		<!-- meat元  设置页面的属性 charset 就是一个属性，utf-8是属性值  -->
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    src就是属性  
    <img src="图片路径">
	</body>
</html>

浏览器

浏览器是用于运行HTML页面的平台

用HTML语言写出来的网页文件，需要浏览器对其解释渲染

浏览器与HTML文件的关系类似于jvm与Java文件的关系

常用浏览器

Chrome 谷歌浏览器

edge Windows自带的浏览器

Firefox 火狐浏览器

Safari iOS平台自带浏览器

页面的基本组成结构

<!-- HTML中的注释 -->
<!-- DOC文档TYPE类型  说明当前页面的文档类型 -->
<!DOCTYPE html>
<html>
	<head>
		<!-- meat元  设置页面的属性 charset 字符集  -->
		<meta charset="utf-8">
		<title>页面标题</title>
	</head>
	<body>
        页面主体内容
	</body>
</html>

html中表示颜色的方式

颜色的单词

red、green、blue、pink、gold、gray、orange、brown、purple、skybiue。。。

颜色的十进制rgb

rgb表示红蓝绿，每个颜色通过0-255范围内的数字表示其颜色的深浅

RGB(0,0,0) 黑色

RGB(255,255,255) 白色

RGB(255,0,0) 红色

RGB(255,0,255) 紫色

颜色的十六进制RGB

#000000 黑色

#FF0000 红色，可以简写为#F00

#00FF00 绿色

#00FFFF 青色

常用标签

页面中的标签，也称为页面中的元素或节点，所有的元素可以分为两大类

标签的类型

块级元素

如果一个标签占满整行，称这个标签为块级元素

行内元素

如果一个标签占一行中的一部分，称这个标签为行内元素

单标签

常用单标签	作用	类型
<input />	表单元素	主要以行内元素为主
<img src="图片路径" alt="替换图片的文字" title="鼠标悬停时提示文件" width="图片宽度" height="图片高度"/>	图片	行内元素
<br />	换行	块级元素
<hr />	水平线	块级元素

双标签

文字

常用标签	作用	类型
<h1></h1>~<h6></h6>	一级标题~六级标题，文字加粗，一级标题最大	块级元素
<p></p>	段落	块级元素
<span></span>	行内标签	行内元素
<sup></sup>	文字上标	行内元素
<sub></sub>	文字下标	行内元素
<i></i>	倾斜	行内元素
<b></b>	加粗	行内元素
<u></u>	下划线	行内元素
<font color=" " size=" "></font>	已过时，字体

图片

<img>单标签，行内元素

<img src="图片路径" alt="无法显示图片时的文字" title="鼠标悬停时的文字" width="宽度" height="高度">

图片路径可以使用相对路径或绝对路径

绝对路径：文件在计算机中的完整路径
相对路径：从当前页出发，找到图片所在位置
- 使用"../"跳出当前目录
- 使用"xxx/"进入xxx目录

列表ul/ol/li

双标签，都是块级元素，li写在ul和ol标签中

无序列表ul

默认每个li前用实心圆修饰，通过type修改属性

square 正方形

dist 默认实心圆

cirele 空心圆

none 去掉修饰

有序列表ol

默认每个li前用数字修饰，通过type属性修改

a/A

i/I

<!-- 无序列表 -->
		<ul type="none">
			<li>列表中的一项</li>
			<li>列表中的一项</li>
			<li>列表中的一项</li>
		</ul>
		<!-- 有序列表 -->
		<ol type="a">
			<li>列表中的一项</li>
			<li>列表中的一项</li>
			<li>列表中的一项</li>
		</ol>

表格table

双标签，table是块级元素，tr、th、td是行内元素

表格相关标签	作用
tbale	定义一个表格
tr	表格中的行
td	一行中的单元格
th	特殊的td，文字加粗局中，使用th实现表头

绘制3行3列的表格
<table border="1" width="400">
			<tr>
				<th>第一列</th>
				<th>第二列</th>
				<th>第三列</th>
			</tr>
		    <tr>
		        <td>1,1</td>
				<td>1,2</td>
				<td>1,3</td>
			<tr>
			<tr>
				<td>1,1</td>
				<td>1,2</td>
				<td>1,3</td>
			<tr>
			<tr>
				<td>1,1</td>
				<td>1,2</td>
				<td>1,3</td>
			<tr>
		<table>

合并行rowspan="n"

给td添加该属性，表示n行合1行

合并列colspan="n"

给td添加该属性，表示n列合1列

<table border="1" width="400">
			<tr>
				<td rowspan=""></td>
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
			</tr>
		    <tr>
				<td rowspan="2">上午</td>
		        <td>语文</td>
				<td>数学</td>
				<td>科学</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
			    <td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<th colspan="5">午休</th>
			</tr>
			<tr>
				<td rowspan="2">下午</td>
				<td>数学</td>
				<td>科学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>科学</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
		<table>

a标签

<a>显示文字</a> 行内元素

核心属性
href	访问某个链接，如果要访问锚点，#开头
target	_self默认自身页面访问，_blank空白页面访问，_parent：父页面访问，某个iframe的name：在指定的iframe中访问
name	定义锚点

超链接

<a href="http://baidu.com">跳转到百度</a>
       
       <a href="列表与表格.html">跳转到指定页面</a>
       
       <a href="../imgs/01.webp">跳转到指定页面</a>

锚点

1.设置锚点

<a name="锚点"></a>

2.访问锚点

<a href="#锚点名">访问锚点</a>

浮动框架iframe

在页面中嵌入一个页面。

<a target="某个iframe的名称" href="某个路径">访问</a>

<iframe width="100%" height="600px" name="该iframe的名称"></iframe>

marquee标签

<!--scrollamount移动速度-->
<!--direction方向 left right up down-->
<!--behavior行为 alternate往复移动  scoll重复滚动  slide滑到顶端-->
<marquee scrollamount="10" direction="right" behavior="scoll">
    一段文字
</marquee>

多媒体

音频

公用属性：

controls：显示控制器

muted：静音

autoplay：自动播放 chrome浏览器视频需要添加muted属性后才能使用autoplay

loop：循环

<audio controls autoplay loop>
			<source src="../歌曲/楚念辞 - 不会有时差 （夏鸣星.mp3"/>
		</audio>

视频

<audio controls autoplay loop>
			<source src="视频文件路径"/>
		</audio>

表单与表单元素

表单from

双标签，块级元素，用于接受用户输入的数据

<form action="表单提交路径" method="表单提交方式">
    
</form>

核心属性	值	作用
action	某个页面或某个控制器的路径	将表单中的数据提交到指定路径
method	post/get	默认为get，提交的数据会暴露在地址栏中，数据长度有限制。post不会出现这些情况

表单元素

常用表单元素	说明
input	单标签，行内元素，通过改变type属性值，变化为不同的表单元素
select	双标签，行内元素，下拉框
option	双标签，select的子标签，下拉菜单中的选项，value属性表示该选项的值，如果不设置，value值默认为option标签中的文本
textarea	双标签行内元素文本域

input标签的type值	作用
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
date	日历
number	数字选择
file	提交文件
hidden	隐藏域
button	普通按钮
reset	重置按钮
submit	提交按钮

表单元素的属性	作用
name	用于提交表单时设置提交的参数名
vlaue	用于输入框的默认值或单选复选按钮的默认值
required	用于输入框或按钮设置为必填项或必选项
placehoder	用于输入框的默认提示文字
checked	用于单选按钮和复选框默认选中
selected	用于下拉菜单默认选中
readonly	只读
disabled	让某个元素失效
min/max/stop	number独有，设置最小/最大/步长
rows/cols	textarea独有，设置行数/列数

css

cascading style sheets 层叠样式表

用于控制HTML中标签样式的语言

可以精确到像素，用于美化HTML标签

css语法

样式名：样式值；

选择器

用于选中页面中元素（标签）的工具

ID选择器

1.给某个标签添加id的属性，对其命名

2.通过#id名获取

通常用于获取某一个元素，id名称不要冲突

<html>
    <head>
        <style>
            #mydiv{
                width:200px;
                height:200px;
            }
        </style>
    </head>
    <body>
        <div id="mydiv"></div>
    </body>
 </html>

类选择器

1.给某些标签添加class属性

2.通过.class命名

元素选择器/HTML选择器/标签选择器

直接通过标签名获取元素，获取所有对应标签

<html>
    <head>
        <style>
            li{
                width:200px;
                height:200px;
            }
        </style>
    </head>
<body>
 <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
 </ul>
 </body>
 </html>

后代选择器

群主选择器

css写在那里

写在某个标签的style属性中

<div style="样式名：值">

</div>

写在head标签下的style标签中

<html>
     <head>
         <style>
            选择器{
            样式:值;
            样式:值;
             }
         </style>
     </head>
 </html>

选择器的优先级

内嵌在style标签>id选择器>.class选择器>标签选择器

在选择某个元素时，尽量将其层次关系写清楚

写在一个独立的css文件中

1.新建一个.css文件，在其中编写css样式

*{

margin:0;

padding:0;

}

2.在页面中通过link标签引入

<head>
<link >
</head>

常用样式

尺寸

只有块级元素才能设置尺寸

如果要对某个行内元素设置尺寸，需要先将其转换为块级元素

相关样式名	值	举例
width	px/百分比/vw	width:100px/50%/30vw;
height	px/百分比/vw	height:100px/50%/30vw;

背景background

样式名	作用	值
background-color	背景色	颜色的单词，十进制rgb
background-image	背景色	url（图片路径）
background-size	背景图片尺寸	cover覆盖。百分比 cover会完全将区域覆盖，100%会完整显示图片
background-position	背景图片位置	10px表示同时向下和向右移动10px
background-repeat	背景图片是否重复	默认不重复 no-repeat不重复 repeat-x表示x轴重复 repeat-y表示y轴重复
background attachment	背景图片固定	fixed表示将背景图片固定，不随滚动条滚动
background	背景样式简写	可以同时设置以上多个参数，如 background:#f00 url(图片地址) no-repeat center 表示图片能加载则显示图片，不能加载显示背景色，背景图不重复，居中显示

背景渐变

background: linear-gradient(to 方向, 颜色1, 颜色2，颜色3...)

方向：left right top bottom

background: linear-gradient(to right, #fdeff9, #ec38bc)

边框border

边框会套在元素外层，元素原本大小不变，最终说占页面区域大小为元素大小+边框宽度

边框相关样式	作用	值
border-style	边框线条样式	solid、double、dashed、dotted
border-width	边框宽度	px
border-color	边框颜色	颜色的三种写法
border	同时设置所有边框线条、宽度和颜色	border:1px solid red
border-方向-样式	某方向的style或width或color，方向为left、right、top、botton	breder-left-color：red
border-方向	同时设置某边框线条、宽度和颜色	border-top:1px dotted blue;
border-上下方向-左右方向-radius	设置某个方向的边框为圆角
border-radius	同时设置四个角为圆角，如果正方形，值为边长的一半，则为圆形
outline	轮廓，input文本框默认获得焦点时，会显示一个轮廓，通常设置为none去掉轮廓
border-collapse	合并相邻边框，通常用于合并表格中的td的边框	表格{border-collapse:collapse}

字体

样式名	作用	值
font-size	字体大小	像素，默认16px，最小12px
font-family	字体字形	默认微软雅黑
font-weight	字体粗细	lighter细，bolder粗

文本

样式名	作用	值
color	文本颜色	颜色的三种写法
text-decoration	文本修饰	underline下划线，line-through删除线，overline上划线通常给页面中的所有a标签设置text-decoration：none去掉a标签默认的下划线
text-align	文本对其方式	默认left左对齐，right右对齐，center居中
line-height	行高	设置为与文字相同大小时，行间距为0，垂直居中时，将行高设置为容器高度
text-indent	首行缩进	根据文字大小设置缩进的像素，如默认文字16px，首行缩进2个字符，则设置为32px
text-shadow	文本阴影	颜色水平位置垂直位置模糊程度，如#000 4px 5px 3px表示水平
letter-spacing	字符间距	像素
word-break	英文换行方式	默认break-word以单词为单位换行，不会拆分单词。 break-all以字母为单位换行，会拆分单词。

列表

样式名	作用	值
list-style-type	设置列表li前的标记	通常设置为none去掉标记
list-style-image	设置列表li前的标记为图片	URL（图片地址）
list-style-position	设置列表li前的标记的位置	默认outside，标记位于li之外；inside表示标记位于li之中

鼠标样式

值	效果
pointer	鼠标呈现为指示链接的指针（手）
move	鼠标呈现为某对象可移动的状态（十字箭头）
help	鼠标呈现为带问号的箭头
progress	鼠标呈现为带载入的箭头
crosshair	十字线
text	光标
wait	载入状态

伪类

用来表示某个元素的某种状态

用于对某些元素在不同的状态下呈现不同的效果

如a标签有访问前、悬停时、按下时、访问后对应的四个伪类

a标签的伪类	作用
a:link	未访问时
a:hover	鼠标悬停
a:active	鼠标按下
a:visite	访问后

：hover可以使用与很多标签，如#xx：hover，表示鼠标悬停在id为xx的元素上时

追加内容通过cintext属性编辑追加的内容，同时可以设置其他样式

在某个元素的之前或之后插入内容	说明
：after	之后
：before	之后

<!DOCTYPE html>
 <html>
 <head>
 <style>
 p:after
 {
 content:"追加的内容";
 color:red;
 xx:xx;
 }
 </style>
 </head>
<body>
 <p>My name is Donald</p>
 <p>I live in Ducksburg</p>
 </body>
 </html>

显示方式display

控制元素为块级元素或行内元素或行内块

值	作用
block	将元素设置为块级元素，这样元素就能独占一行，能设置尺寸
inline	将元素设置为行内元素，这样元素就能独占一行，不能
inline-block	将元素设置为行内块，
none	将元素不显示不保留元素位置

浮动float

让某个元素脱离原本的位置，朝某个方向对其

值	作用
left	向左
right	向右
none	清除

float:left和display:inline-block的区别

相同点：都能让多个块级元素称为行内块。

display:inline-block

多个元素最终位于同一行内，可以设置尺寸，元素一下线对其，保留该行位置，保留元素间的缝隙，后续元素为新的一行

float:left

多个元素最终位于同一行内，可以设置尺寸，元素以上线对其，不保留改行位置，不保留元素间的缝隙，后续元素会紧邻

盒子模型

页面中的所有块级元素，都是一个盒子，每个盒子由元素自身、内边距padding、边框border、外边距marjin组成

边框border：元素外圈的一圈

内边距padding：边框与自身之间的距离

外边距marjing：元素a的边框与元素b的边框之间的距离

盒子模型相关样式	作用
padding	内边距。1个参数表示同时设置4个方向。2个参数表示上下左右。3个参数表示上左右下。4个参数表示上右下左顺时针。
margin	外边距。1个参数表示同时设置4个方向。2个参数表示上下左右。3个参数表示上左右下。4个参数表示上右下左顺时针。如果值设置为auto，表示自动将所在的容器剩余距离除以2。
padding-方向	某个方向的内边距，方向可以是left、right、top、bottom
margin-方向	某个方向的外边距

一个元素的所占位置是外边距+边框+内边距+元素自身大小。

如果让某个块级元素居中，使用margin：上下距离 auto；

盒子模型阴影

元素{

box-shadow:#000 4px 4px 4px;

}

溢出overflow

处理元素超出父元素的部分

值	作用
visible0	默认溢出部分显示
hidden	溢出部分隐藏
scroll	溢出部分使用滚动条控制

定位position

	作用	值
left	元素距离页面左边界的左右距离	正值向右，负值向左
top	元素距离页面上边界的上下距离	正值向下，负值向上
right	元素距离页面右边界的左右距离	正值向左，负值向右
bottom	元素距离页面下边界的上下距离	正值向上，负值向下

文档流

页面中的每个元素默认都有自己的位置，这个位置称为文档流

如果某个元素脱离文档流，就会失去他原本所占的位置，后续元素就会顶替其位置

可以通过浮动float、固定定位position：fixed、绝对定位position：absolute让元素脱离文档流

脱离文档流后，通过改变left、right、top和bottom移动其位置

固定定位fixed

让某个元素脱离文档流，默认根据页面的四个边界进行定位

绝对定位absolute

让某个元素脱离文档流，根据已定位的父元素进行定位，如果没有定位的父元素，会根据body定位

相对定位relative

让元素不会脱离文档流，根据他原本的位置进行定位，定位的原点是元素本身的位置，后续元素不会往上顶替的

层叠z-index

对于已定位的元素，可以通过z-index跳转层叠顺序，值是一个数字，越大离眼睛越近

#md1{

position:relative; z-index:10;

}

#md2{

position:relative; z-index:0;

}

不透明度opacity

设置某个元素的不透明度，0-1之间，1完全不透明，完全透明

如果只是定义备用透明度时，使用rgba（red，green，biue，alpha），alpha使用

div{
 /*让div中的所有内容都半透明，如文字*/
 background-color:#000;
 opacity:0.5;

 /*让div背景半透明，其中的内容不受影响*/
 background-color:rgba(0,0,0,0.5);
}

转换transform

改变元素的状态，如旋转、移动、缩放等


rotate（30deg）	顺时针2D旋转30度
rotateX/Y/Z(30deg)	沿X/Y/Z轴3D旋转30度
translateX/Y(50px)	朝X或Y轴平移50像素
translate（10px,30px）	朝右移动像素10px，下移动30相素
scale（1.5）	缩放1.5倍

以上所有效果可以通过transform:效果1 效果2....同时设置

transform：rotate(30deg) translateX(100px) scale(1.2)

过渡transition

设置某个转换效果完成所需的时间等参数

相关样式	作用
transition-duration：3s	转换所需时间
transition-delay：2s	延时生效
transition-timing-function：linear	时间函数，linear表示匀速
transition：4s 1s linear	在1s后，匀速在4s类完成过渡

自定义动画animation

1.定义动画的关键帧

@keyframes 动画名{
 0%{
 /*该阶段的样式*/
    样式名:值;
 }
 25%{}
 50%{}
 75%{}
 100%{}
}

2.给某个元素设置animation样式

#xxx{
     /*指定动画名*/
     animation-name:动画名;
     /*动画执行时间*/
     animation-duration:3s;
     /*延时*/
     animation-delay:3s;
     /*动画执行次数 infinite无限*/
         animation-iteration-count:4;
     /*动画时间函数 linear匀速  ease-in ease-out ease-in-out*/
     animation-timing-function:linear;
 
     /*简写 只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时*/
     animation:动画名 5s 2s infinite linear;
}

animation相关样式	作用
animation-name：动画名	执行指定动画
animation-duration：3s	动画执行时间
animation-delay：3s	动画延迟时间
animation-iteration-count：3	动画执行次数，infiinite表示无限
animation-timing-function:linear	动画执行时间函数，linear表示匀速
animation：动画名 5s 3s	简写，只写一个时间表示用时，写两个时间表示第一个是用时，第二个是延时

m0_70552692

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML、CSS

1.定义动画的关键帧@keyframes 动画名{0%{/*该阶段的样式*/样式名:值;25%{}50%{}75%{}100%{}2.给某个元素设置animation样式#xxx{/*指定动画名*/animation-name:动画名;/*动画执行时间*//*延时*//*动画执行次数 infinite无限*//*动画时间函数 linear匀速 ease-in ease-out ease-in-out*/
复制链接

扫一扫