web——day02——html

最新推荐文章于 2024-07-11 22:36:37 发布
最新推荐文章于 2024-07-11 22:36:37 发布
阅读量69 收藏
点赞数
分类专栏： Web学习 文章标签： html html5 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45792414/article/details/119190496
版权

html基础

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html</title>
	</head>
	<body>
		<!-- ctrl+shift+/   注释 -->  
		<!-- html用于标记网页，标记是通过标签完成的
		     图片：img    链接：a   文字：p/h1/h6   声音：audio   视频：video
		-->
		<img src="img/移动城堡.jpg" alt="图片加载失败" title="移动城堡"/>
		<!--  图片：单标签 src=>属性  alt=>图片加载失败时显示-->
		<!-- title=>鼠标悬停在图片上显示的解释 -->
		<!-- 平面图形：bmp    动图：pig   高清图片：gif    清晰的图片：jpg    透明图：png-->
		<br />
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a href="img/移动城堡.jpg" target="_blank">打开图片</a>
		<!-- <a href="xx.exe"></a> 点击即运行，容易中病毒
		     <a href="xx.zip"></a> 点击即下载压缩包-->
		<!-- target="_blank"   打开新页面 -->
		<p>这是一个段落，昨天是520，朋友圈里全是情人！</p>
		<!-- ctrl+/   选中注释 -->
		<pre>怎么写就怎么显示</pre>
		<h1>1号标题</h1>
		<h2>2号标题</h2>
		<h3>3号标题</h3>
		<h4>4号标题</h4>
		<h5>5号标题</h5>
		<h6>6号标题</h6>
		<hr /><!-- 水平线 -->
		<u>加下划线</u>
		<i>斜体</i>
		<b>加粗</b>
		<strong>着重</strong>
		<hr />
		<audio src="img/键盘.mp3" controls="controls" autoplay="autoplay"></audio>
		<!-- controls="controls" 加进度条  autoplay="autoplay"  自动播放 -->
		<br />
		<video src="img/排版.mp4" controls="controls" autoplay="autoplay"></video>
		<hr />
		<table border="1" cellspacing="0"><!-- cellspacing="0"去掉单元格空隙 -->
			<tr>
				<td>11</td>
				<td colspan="2">12</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
			</tr>
		</table>
		<hr />
		<ul type="circle"><!-- 无序列表,用它来进行制作导航菜单 -->
			<li>登录</li>
			<li>注册</li>
			<li>个人中心</li>
		</ul>
		<hr />
		<ol type="I"><!-- 有序列表 -->
			<li>登录</li>
			<li>注册</li>
			<li>个人中心</li>
		</ol>
		<hr />
		<form>
			<input type="text" placeholder="邮箱|手机号|账户名" />
			<input type="text" placeholder="请输入密码" />
			<input type="button" value="登录" />
		</form>
	</body>
</html>

代码运行结果：
在这里插入图片描述
在这里插入图片描述

css基础

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css</title>
		<!-- <style>
			/* css标签选择器 可以压缩成一行，减少解释速度
			标签名{样式}*/
			p{
				color: rgba(37, 190, 255,0.5);/* red / rgb(255,0,0) / #FF0000 / #f00 */
				/*rgba()  设置透明度*/
				text-align: center;/*文本水平对齐 left|center|right*/
				font-size: 30px;/*字体大小：px像素*/
			}
			/*类选择器:.类名{}*/
			.myp{
				color: rgba(255,0,0,0.4);
				text-align: right;
			}
			/* id选择器：#id名{} */
			#myid{
				color: aquamarine;
				text-align: left;
			}
			/*选择器的优先级是id>class>标签*/
		</style> -->
		<link rel="stylesheet" href="css/ppp.css" />
		<!-- 结构与样式的分离 -->
	</head>
	<body>
		<!-- css样式:用于修饰网页样式 -->
		<!-- <p style="color: aqua;text-align: center;font-size: 30px;">这是一个段落</p> -->
		<p>这是一个段落</p>
		<p class="myp">这又是一个段落</p>
		<!-- ctrl+shift+i/f12   看网站检查 -->
		<p class="myp">这还是一个段落</p>
		<p class="myp" id="myid">这又双叒叕是一个段落</p>
	</body>
</html>

代码运行结果：
在这里插入图片描述

盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			.d1{
				width: 400px;
				height: 100px;
				background-color: #7FFFD4;
				padding: 10px;/*填充 元素本身与边框间的距离*/
				margin: 20px;/*外边距 元素与其他元素之间的距离*/
				border: 2px double deeppink;
				/*solid 实线  dashed  虚线  dottted 点线  double  双实线*/
				/*边框：粗细 线条样式 边框颜色*/
			}
			.d2{
				width: 400px;
				height: 100px;
				padding: 10px 20px;
				background-color: aqua;
			}
			.d3{
				width: 400px;
				height: 100px;
				padding: 10px 20px 30px;
				background-color: blueviolet;
			}
			.s1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.s2{
				width: 100px;
				height: 100px;
				background-color: darkorange;
			}
			.s3{
				width: 100px;
				height: 100px;
				background-color: darkorchid;
			}
		</style>
	</head>
	<body>
		<!-- 盒子：每一个元素都可以认为是一个方形的盒子 -->
		<!-- html区块标签: div span 
			 div:默认独占一行，可以设置宽高
			 span:默认在同一行显示，大小尺寸由内容决定，直接设置宽高无效
			 
			 块级元素：div p h1-h6 ul ol table
			 行级元素：span a b i strong audio
			 行级的块元素：img input vedio
		-->
		<!-- 盒子模型：由width*height,padding填充|内边距，border边框，margin外边距组成 
			 padding/margin取值：
			 一个值：上下左右的值
			 两个值：上下，左右
			 三个值：上，左右，下
			 四个值：上，右，下，左
		-->
		<!-- div{$}*3+Tab   输入3个div -->
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
		<hr />
		<p class="s1">段落</p>
		<!-- ctrl+光标 可以同时输入 -->
		<span class="s1">1</span>
		<span class="s2">2</span>
		<span class="s3">3</span>
	</body>
</html>

代码运行结果：
在这里插入图片描述

浮动与清除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动与清除浮动</title>
		<style>
			div{width: 400px;height: 100px;}
			.d1{background-color: #00FFFF;float: left;}
			.d2{background-color: #8A2BE2;clear: left;}
			.d3{background-color: #FF0000;}
			.d4{background-color: gold;}
			.d5{background-color: forestgreen;float: right;}
		</style>
	</head>
	<body>
		<!-- div.d$*5 + Tab 创建class逐次增加的div-->
		<!-- 浮动：
			 float：right/left
			 浮动元素会脱离文档流
			 文档流：html页面从上到下，从左到右的顺序成为正常的文档流
			 
			 清除浮动：
			 clear:left/right/both
		-->
		<div class="d1"></div>
		<div class="d2"></div>
		<div class="d3"></div>
		<div class="d4"></div>
		<div class="d5"></div>
	</body>
</html>

代码运行结果：
在这里插入图片描述

——The End

子曰礼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web——day09——栅格布局
weixin_45792414的博客
08-01 263
栅格布局栅格布局Test——栅格布局栅格布局——表格栅格布局——嵌套 栅格布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> <style> .mycolor{
Web——Day1——单色进度条
weixin_45792414的博客
04-21 96
Web基础单色进度条 网络默认文件 Index.html 网络的默认文件 .eg. http://www.baidu.com/index.html = http://www.baidu.com 百度网页的默认文件 .md 文件=>快速显示网页=>一般用于学习网站中列出知识点的位置 index文件中的基本html < !DOCTYPE html> --声明当前文档类型，告诉浏览器使用什么方式对当前>文档进行解读–> < html> --根目录标签–
SpringMVC——day02
weixin_62993347的博客
11-13 238
SpringMVC——day02：SSM整合；统一结果封装；统一异常处理；前后台协议联调；拦截器；扩展——数据验证
HTML学习总结——day01
黑夜里的地狱战神的博客
03-20 48
前端学习总结
WEB——html基础知识总结＋案例实战
weixin_51525416的博客
07-07 5064
WEB——html基础知识总结＋案例实战
JavaWeb（上）——day02.zip
08-23
在"JavaWeb（上）——day02.zip"这个压缩包中，我们很可能会看到一个初步的JavaWeb项目结构，用于教学或实践目的。下面将详细介绍这些关键知识点： 1. **MyEclipse**：MyEclipse是一款强大的集成开发环境（IDE），...
毕业设计——基于监督学习的web入侵检测系统（0day收集器）.zip
03-15
【标题】：“毕业设计——基于监督学习的web入侵检测系统（0day收集器）.zip” 这个毕业设计项目聚焦于构建一个基于监督学习的Web入侵检测系统，特别强调了0day攻击的检测能力。0day攻击是指那些还未被公开或未知的...
标准盒模型和怪异盒子模型的区别
karlaofsky的博客
07-08 298
盒模型描述了一个 HTML 元素所占用的空间，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
一文清晰了解HTML——简单实例
weixin_73074505的博客
07-08 245
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
vue学习day02-Vue指令-v-html、v-show与v-if、v-else与v-else-if、v-on、v-bind、v-for、v-model
2301_76648183的博客
07-07 657
当表达式值为true时，无显著区别，当值为false时，v-show通过控制css的display：none来控制显示与隐藏。如果不加key，v-for的默认行为会尝试原地修改元素（就地复用）提供一个地址，这里是百度的地址，通过v-html渲染。作用：设置元素的innerHTML。语法：v-html=“表达式”提供一个布尔值和两个盒子。点击“切换显示与隐藏”
HTML 基础
最新发布
2302_77179144的博客
07-11 596
文章目录HTML 结构认识 HTML 标签HTML 文件基本结构快速生成代码框架HTML 常见标签注释标签标题标签: h1-h6段落标签: p换行标签: br格式化标签图片标签: img超链接标签: a表格标签列表标签表单标签form 标签input 标签label 标签select 标签textarea 标签无语义标签: div & span综合案例: 填写简历信息Emmet 快捷键HTML 特殊字符 HTML: 页面有哪些元素组成 CSS:这些元素的样式、布局、排版等 JS:这些元素之间如何交
html js 3d z轴移动 实现星空
从事厨房信息化行业，万能对接所有点餐系统，kds，智能控菜，酒店协调软件
07-11 76
用chatgpt还有kimi 让实现动画效果的星空，都太垃圾了。我要z轴移动，他们就是搞不出来，不是y轴移动，就是x轴移动，ai写代码还有很长的路。
springmvc前端jsp与html
paulwang040的博客
07-08 357
在实际的项目中，JSP和HTML往往不是非此即彼的关系，而是可以结合使用的。例如，可以使用HTML来构建页面的基本结构和静态内容，对于需要动态展示的数据，则可以通过Ajax技术从服务器端获取JSON格式的数据，然后在前端使用JavaScript和DOM操作来动态更新页面内容。动态内容生成：如果需要在HTML页面中展示动态内容，通常需要通过JavaScript（Ajax等）技术从服务器端获取数据后，再通过DOM操作来动态更新页面，这增加了前端开发的复杂度。轻量级：HTML页面加载速度快，对服务器压力小。
HTML集成优雅的实时输入清除功能
你羡慕的生活都是你没熬过的苦。
07-11 274
通过上述步骤，我们可以轻松地在网页表单中实现一个实用且美观的实时输入清除功能。这不仅提高了用户交互的便利性，也增强了整体的用户体验。希望这篇文章能帮助你优化自己的网站或应用程序的用户界面设计。
HTML(27)——渐变
m0_74386799的博客
07-08 395
渐变是多个颜色逐渐变化的效果，一般用于设置盒子模型。
【HTML入门】第四课 - 换行、分割横线和html的注释
xingyu_qie的专栏
07-08 398
这一小节，我们继续说HTML的入门知识，包括换行、横线分割以及注释（html的注释）。
HTML 标签列表（功能排序）
07-07 369
HTML（超文本标记语言）是构建网页的标准语言，它定义了网页的结构和内容。HTML包含众多标签，每个标签都有其特定的功能和用途。本文将按照功能对HTML标签进行分类和排序，以帮助您更好地理解和使用这些标签。
html——常用标签
jiuyuexixi的博客
07-09 522
html——常用标签
html高级篇
qq_48257021的博客
07-04 857
translform:translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）transform:translate3d（x，y，）：其中x、y、z分别指要移动的轴的方向的距离。translform:translateX（100px）：仅仅是在x轴上移动。translform:translateY（100px）：仅仅是在Y轴上移动。·z轴：垂直屏幕注意：往外面是正值，往里面是负值。·x轴：水平向右注意：X右边是正值，左边是负值。
jQuery插件之——简单日历
05-23
html += '<td>' + day + '</td>'; day++; } } html += '</tr>'; if (day > daysInMonth) { break; } } html += '</table>'; var selector = '#calendar'; $(selector).html(html); } ``` 在这里，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值