24-Web-CSS布局相关属性

最新推荐文章于 2024-11-07 10:38:40 发布
最新推荐文章于 2024-11-07 10:38:40 发布
阅读量276 收藏
点赞数
文章标签： html 定位 css js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48486897/article/details/107760791
版权

1.标准流布局

<!-- 
1.什么是标准流布局
标签在没有添加布局的样式的时候默认的布局方式就是标准流布局：
块级标签：一个占一行；默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效。（例如：p、h1~h6、ul、ol、dl、li、div等）
行内标签：一行可以显示多个; 默认大小是内容大小；设置宽高无效。(例如：a、span、font)
行内块标签：一行可以显示多个;默认大小是内容大小；设置宽高有效。（例如：img、input输入框）

2.display属性
修改标签样式的display属性，可以修改标签的类型
block  	- 块
inline 	- 行内
inline-block 	- 行内块
none 	-  隐藏标签
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- ====================标签类型======================= -->
		<!-- 1.块级标签 -->
		<h1>1.块级标签</h1>
		<p style="background-color: indianred; width: 200px; height: 50px;">我是段落1</p>
		<p style="background-color: skyblue; width: 120px;">我是段落2</p>
		<div id="">
			我是div1
		</div>
		<div id="" style="background-color: lemonchiffon;">
			我是div2
		</div>
		
		<!-- 2.行内标签 -->
		<h1>2.行内标签</h1>
		<a href="https://www.baidu.com" style="background-color: mistyrose; width: 100px; height: 100px;">百度</a>
		<a href="https://www.jd.com" style="background-color: aquamarine;">京东</a>
		<span style="width: 200px; height: 400;">佛挡杀佛</span>
		<!-- 3.行内块 -->
		<h1>3.行内块</h1>
		<img src="img/luffy.jpg" style="width:150px; height: 150px;">
		<img src="img/luffy.jpg" >
		
		
		<!-- ====================display属性======================= -->
		<!-- 1.block -->
		<h1>4.block</h1>
		<a style="display: block; background-color: sandybrown; width: 120px;" href="#">百度</a>
		<a href="#">爱奇艺</a>
		
		<!-- 2.inline和inline-block -->
		<h1>5.inline和inline-block</h1>
		<div style="background-color: silver; display: inline; width: 100px;">
			div3
		</div>
		<div style="background-color: yellow; display: inline-block; width: 100px;">
			div4
		</div>
		
	</body>
</html>

2.网页布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 行内块的问题：
		多个行内块在显示的时候中间有间隙
		 -->
		<div style="height: 120px; background-color: lavender;">阿萨德</div>
		<div style="background-color: sandybrown; display: inline-block;width: 30%; height: 800px;"></div>
		<div style="background-color: khaki; display: inline-block; width: 50%; height: 800px;"></div>
	</body>
</html>

3.浮动

<!-- 
1.浮动可以让标签脱流：给标签样式的float属性赋值
left  -  左浮动(在屏幕的左边找位置显示标签)
right - 右浮动（在屏幕的右边找位置显示标签）
 -->
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.浮动可以脱流 先从上>左找位置放-->
		<!-- <div style="background-color: khaki; height: 100px; width: 30%; float: left;"></div>
		<div style="background-color: seagreen; height: 100px; width: 70%; float: left;"></div>
		<div style="background-color: moccasin; height: 100px; width: 100px; float: left;"></div>
		<div style="background-color: magenta; height: 100px; width: 100px; float: right;"></div> -->
		
		<!-- 2.浮动的原理 -->
		<!-- <div style="background-color: hotpink; height: 200px; width: 600px;float: left;"></div>
		<div style="background-color: green; height: 250px; width: 300px;"></div>
		<div style="background-color: skyblue; height: 250px; width: 300px; float: right;"></div> -->
		
		<!-- 3. 示例 -->
		<div style="background-color: red; height: 100px; width: 200px;"></div>
		<div style="background-color: green; height: 100px; width: 120px; float: left;"></div>
		<div style="background-color: blue; height: 100px; width: 120px; float: right;"></div>
		<div style="background-color: yellow; height: 200px; width: 120px; float: left;"></div>
		<div style="background-color: deeppink; height: 300px; width: 100%;"></div>
		
	</body>
</html>

4.浮动的应用


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.浮动可以让竖着显示的标签横着显示 -->
		<!-- 2.做文字环绕的效果 -->
		<div style=" background-color: aqua; float: left;">
			<img src="img/luffy4.jpg" >
		</div>
		<div id="">
			<p>=======记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。</p>
		</div>
		
		<hr >
		<div style="width: 200px; height: 300px;">
			
			<div style="float: right; width: 120px; height: 120px; background-color: palevioletred;"></div>
			<div id="">
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
			</div>
			
			
		</div>
		
		
	</body>
</html>

5.清楚浮动

<!-- 
	清除浮动指的是清除因为浮动而产生的高度塌陷的问题
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		1. 高度塌陷：如果父标签没有设置高度，子标签有浮动，那么这个父标签的高度就会塌陷（相对后面的标签
		2. 清除浮动
		1）空盒子法 - 在高度会塌陷那个标签中的最后添加一个空的div，并且设置空的div的clear样式属性的值为both
		2）设置overflow属性 - 设置高度会塌陷的标签的overflow样式属性为hidden
		3) 万能清除法 - 
		 -->
		 <!--====== 1.高度塌陷 ======-->
		<div style="background-color: red; height: 120px;"></div>
		<div style="background-color: blue;">
			<div style="background-color: slateblue; height: 120px; width: 300px; float: left;"></div>
			<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
		</div>
		<div style="background-color: thistle; height: 120px;"></div>
		
		<!-- ====2.空盒子法清除浮动 =====-->
		<!-- <div style="background-color: salmon; height: 120px;"></div>
		<div style="background-color: blue;">
			<div style="background-color: slateblue; height: 1020px; width: 300px; float: left;"></div>
			<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
			<div style="clear: both;"></div>
		</div>
		<div style="background-color: thistle; height: 120px;"></div> -->
		
		<!-- ======3.设置overflow清除浮动!!!!最常用！！！======= -->
		<!-- <style type="text/css">
			.clear-float{
				overflow: hidden;
			}
		</style>
		<div style="background-color: salmon; height: 120px;"></div>
		<div class="clear-float" style="background-color: blue;">
			<div style="background-color: slateblue; height: 120px; width: 300px; float: left;"></div>
			<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
		</div>
		<div style="background-color: thistle; height: 120px;"></div> -->
		
		
		<!--====== 4.万能清除法，不常用！！！ ======-->
		<!-- <style type="text/css">
			#div2:after{
				display: block;
				clear: both;
				content: '';
				visibility: hidden;
				height: 0;
			}
			#div2{
				zoom: 1;
			}
		</style>
		<div style="background-color: salmon; height: 120px;"></div>
		<div id="div2" style="background-color: blue;">
			<div style="background-color: slateblue; height: 120px; width: 300px; float: left;"></div>
			<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
		</div>
		<div style="background-color: thistle; height: 120px;"></div> -->
		
	</body>
</html>

6.定位

<!--
 1.定位属性：top、bottom、left、right
 top  - 当前标签的顶部到另外一个标签顶部的距离
 bottom - 当前标签的底部到另外一个标签底部的距离
 left - 当前标签的左边到另外一个标签左边的距离
 right - 当前标签的右边到另外一个标签右边的距离
 
 2.设置定位的参考对象：position
 initial/static  -  默认值，不定位(body标签的position属性不是initial/static)
 absolute  - 绝对定位；相对第一个非initial/static的父标签进行定位
 relative  - 相对定位；相对当前标签在标准流中的位置进行定位。
            （注意：relative一般用在父标签中，让它的子标签能够将这个标签作为absolute的参考对象）
 fixed   -  相对浏览器定位
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- =====1.不定位=========== -->
		<h1>1.不定位</h1>
		<style type="text/css">
			#div1{
				left: 200px;
			}
		</style>
		<div id="div1" style="width: 100px; height: 100px; background-color: bisque;"></div>
		
		<!-- =====2.绝对定位=========== -->
		<h1>2.绝对定位</h1>
		<style type="text/css">
			#div2{
				right: 0px;
				bottom: 10px;
				position: absolute;
			}
		</style>
		<div style="background-color: red; width: 500px; height: 500px;">
			<div style="background-color: yellow; width: 350px; height: 350px; position: relative;">
				<div style="background-color: yellowgreen; width: 200px; height: 200px; ">
					<div id="div2" style="background-color: hotpink; width: 100px; height: 100px;">
						
					</div>
				</div>
			</div>
		</div>
		
		<!-- =====3.相对定位=========== -->
		<h1>3.相对定位(相对标准流，一般不用)</h1>
		<style type="text/css">
			#div3{
				top: 20px;
				left: 50px;
				position: relative;
			}
		</style>
		<div id="div3" style="width: 100px; height: 100px; background-color: cornflowerblue;"></div>
		
		<!-- =====4.相对浏览器定位=========== -->
		<h1>4.相对浏览器定位</h1>
		<style type="text/css">
			#div4{
				right: 10px;
				bottom: 50px;
				position: fixed;
			}
			
			#div5{
				top: 0;
				position: fixed;
			}
		</style>
		<div id="div4" style="width: 100px; height: 45px; background-color: antiquewhite;">
			回到顶部
		</div>
		<div id="div5" style="width: 100%; height: 100px; background-color: rgba(20, 120, 130, 0.3);">
		</div>
		
	</body>
</html>

7.盒子模型

<!--
 1.盒子模型
 每一个可见标签其实都是一个盒子模型，由4个部分组成：内容、padding、border、margin
 1）内容  -  设置标签的width和height，其实就是在设置内容部分的大小; 子标签和标签内容都是显示在内容部分上的；背景也会作用于内容上
 2）padding - 内边距；有4个方向;背景也会作用于内边距上(可见)
 3）border - 边框; 有4个方向；背景不会作用于内边距上， 可见
 4）margin - 外边距;有4个方向; 不可见
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<style type="text/css">
			#div1{
				/* ======1.控制内容====== */
				width: 100px;
				height: 100px;
				/* =====2.内边距=======*/
				/* 一起设置 */
				/* padding: 40px; */
				padding-left: 20px;
				padding-top: 40px;
				
				/* =====3.边框====== */
				/* 一起设置 
				border:类型 宽度 颜色
				类型 - solid(实现)  dotted(点划线)  dashed(虚线) double(双线)
				*/
				/* border:solid 2px red; */
				border-left: solid 5px red;
				border-top: dotted 5px yellow;
				
				/* =====4.外边距====== */
				/* margin: 20px; */
				margin-bottom: 60px;
				margin-right: 20px;
				/* float: left; */
				
			}
		</style>
		<div style="width: 100px;height: 100px;background-color: #FF0000;"></div>
		<div id="div1" style="background-color: yellowgreen;">
			我是div1
		</div>
		<input type="text" name="" style="padding-left: 20px;"/>
		
		<h1>自动布局</h1>
		<hr>
		<style type="text/css">
			.c1{
				width: 120px;
				height: 120px;
				background-color: seagreen;
				float: left;
				margin-left: 20px;
				margin-top: 20px;
			}
		</style>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
	</body>
</html>

8.居中布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.水平方向居中 
		1)设置需要居中的标签的margin-left和margin-right为auto(一个标签居中有效)。或者标签不设置
		宽度，左右外边距为一个固定值，
		2)设置父标签或者自己的标签的text-algin属性为center(针对文字和文字标签有效)
		-->
		
		<h1>示例1</h1>
		<style type="text/css">
			#div2{
				margin-left: auto;
				margin-right: auto;
			}
			#div4{
				margin-left: 140px;
				margin-right: 140px;
			}
		</style>
		<div id="div1" style="background-color: yellow; width: 100%; height: 200px;">
			<div id="div2" style="background-color: red; width: 100px; height: 100px;"></div>
			<div id="div4" style="background-color: aqua; height: 60px;"></div>
		</div>
		
		
		
		<h1>示例2</h1>
		<style type="text/css">
			#p1{
				text-align: center;
			}
			
			#div3{
				text-align: center;
			}
		</style>
		<p id="p1" style="background-color: sandybrown;">我是段落1</p>
		<div id="div3" style="background-color: skyblue;">
			<a href="">超链接1</a>
			<a href="">超链接2</a>
			<a href="">超链接3</a>
			<a href="">超链接4</a>
			<a href="">超链接5</a>
		</div>
		
		<!-- 2.垂直方向居中 
			1)
		-->
		<style type="text/css">
			#div5{
				width: 80px;
				height: 80px;
				background-color: red;
				
				/* 垂直居中 设置top为50%，margin-top为本标签高度的一半*/
				position: absolute;
				top: 50%;
				margin-top: -40px;
			}
		</style>
		<div style="background-color: steelblue;height: 200px; position: relative;">
			<div id="div5"></div>
		</div>
		
		
	</body>
</html>
qq_48486897
关注
【web前端(九)】html_行高设置
LED_of_Java的博客
08-05 7378
我们先来看一下行高的概念： 我们可以用前面的调试工具来调试行高（按上下键来更改行高大小）： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行高设置</title> <style> ...
web表格在css中属性,css Table布局-display:table
weixin_27729671的博客
08-04 516
使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。尽管反对的理由看起来证据很充分，但是大多数开发者除了谴责基于表格的布局，都无法提供完善的使用场景。“表格不好。”从早期反对HTML Table(标签)开始这种势头就非常强劲。几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。诚然，我也是避免使用表格布局的开发者之一，即使是显示表格数据。我甚至曾经斥责我的...
CSS Flex 布局的 flex-direction 属性讲解
汪子熙的专家技术分享
12-25 1125
设置了主轴，从而定义了弹性项目放置在弹性容器中的方向。Flexbox 是一种单向布局概念，可将弹性项目视为主要以水平行或垂直列布局。
CSS中的writing-mode属性：解锁文本布局新维度
艾恩小灰灰的博客
05-21 586
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
html css data-,HTML+CSS入门 HTML自定义data属性详解
weixin_36115023的博客
07-18 1074
本篇教程介绍了HTML+CSS入门 HTML自定义data属性详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<可以在HTML标签上添加任意以"data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。例子：testdata如何读取自定义data属性数据呢？jquery已经有现成的方法：varmyData=$(".m...
Web-前端html+css从入门到精通 170. 布局扩展之等高布局.zip
05-23
2. **Grid布局**：CSS Grid布局是另一种现代的二维布局系统，适合创建复杂的网格布局。通过设置`display: grid;`和`grid-template-rows: auto;`，可以确保每一行的高度一致，从而实现等高效果。 3. **Table布局模拟...
Web-前端html+css从入门到精通 164. column分栏布局.zip
05-23
3. **Flexbox（弹性盒模型）**：这是现代CSS布局的一个强大工具。通过设置`display:flex`，我们可以轻松地创建多栏布局，调整元素的顺序、对齐方式和分配空间。例如： ```css .container { display: flex; flex-...
web前端：CSS---布局+属性
Dr.Pandora's Box
09-26 180
CSS盒子模型 网页布局前把数据封装到一块一块的区域内 1.边框 border-top border-bottom border-left border-right 2.内边距 padding: top bottom left right 3.外边距 margin ：auto / length CSS定位属性 ...
Web-前端html+css从入门到精通 232. CSS新特性之自定义属性.zip
05-23
在Web前端开发中，HTML和CSS是构建网页布局与样式的两大基础技术。随着Web技术的不断发展，CSS也持续更新，引入了许多新的特性和功能，让开发者能够创建更灵活、更具表现力的网页。本教程重点讲解的是CSS新特性中的...
CSS布局属性
qingqingzijinxin的专栏
06-11 356
CSS布局属性
Web-前端html+css从入门到精通 206. 移动端rem布局实战流程.zip
05-23
3. **使用rem定义元素尺寸**：在CSS中，为各种元素（如容器、按钮、图片等）的宽度、高度、内边距、外边距等属性使用rem单位，确保元素尺寸与根元素的字体大小成比例。 4. **媒体查询**：利用CSS的媒体查询（@media...
CSS的布局属性
bboyjoe的博客
07-13 776
1）定位： position:static——默认值，元素为普通布局； position:relative——元素位置相对于普通位置定位； position:absolute——元素相对于position值不为static的第一位祖先元素来定位； position:fixed——元素相对于浏览器窗口来定位； left、right、top、bottom——为定位元素设置偏移量； z-in
HTML 标签属性——＜a＞、＜img＞、＜form＞、＜input＞、＜table＞ 标签属性详解
Allen-
11-02 736
HTML元素除了可以使用全局属性外，还有许多特定于某些元素的属性。这些特定属性能够极大地增强元素的功能性和用户体验。
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-04 698
本文将主要展示如何将AI相关功能添加到HTML编辑控件并调整其UI获得最佳用户体验，欢迎下载最新版组件体验！
html第一个网页
Qhumaing的博客
11-06 618
创建你的第一个HTML网页是一个激动人心的步骤。
HTML 表单设计与验证
jht_520的博客
11-02 203
在提交表单时，使用 JavaScript 进行了三个验证检查：确保名称字段不为空、电子邮件字段不为空，并且密码字段长度至少为 8 个字符。如果任何一个验证条件失败，表单将不会提交，并显示相应的错误消息。在验证逻辑中，你可以使用各种条件语句和正则表达式来检查用户输入。例如，你可以使用正则表达式验证电子邮件格式，使用条件语句验证密码的长度等。如果验证成功，你可以允许表单提交到指定的目标 URL。属性，用于指定输入框的类型，例如文本框、密码框、电子邮件输入框等。属性，用于指定选项的值，还有一个可选的。
一七五、HTML 不同类型的事件及其说明和示例
最新发布
梅某某
11-07 693
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
前端八股文(一)HTML 持续更新中。。。
DogEgg_001的博客
11-06 506
src：用于js脚本，img、iframe、script等标签加载时会阻塞主线程，将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内href：用于链接a、link等标签href指向外部资源所在的位置，和当前元素位置建立链接，将其下载的时候不会阻止其他资源的加载解析。
HTML 块级元素和内联（行内）元素详解
Allen-
11-03 252
块级元素是页面中的结构元素，它们独占一行，通常用于搭建页面的主要框架，如段落、容器、标题等。它们无论其内容多少，都会占据父元素的整个宽度。这种特性使得块级元素特别适合用于页面的整体布局和内容的分区组织。内联元素是页面中用于**修饰或嵌入小块内容的元素，它们不会独占一行，可以与其他内联元素或文本同行显示，因此也叫行内元素
HTML 标签属性——id、class、style 等全局属性详解
Allen-
11-02 361
HTML全局属性是一组可以应用于几乎所有HTML元素的特殊属性。这些属性提供了额外的功能和信息，使得网页开发者能够更好地控制元素的行为、样式和可访问性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值