冬令营Web基础整理——Day1

最新推荐文章于 2024-06-14 14:36:26 发布
最新推荐文章于 2024-06-14 14:36:26 发布
阅读量103 收藏
点赞数
分类专栏： 冬令营Web基础 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45792414/article/details/116033538
版权

文章目录

标题、段落、换行

<head>
		<meta charset="utf-8" />
		<title>标题</title>
	</head>
	<body>
		显示的内容
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		<p>段落标签段落标签段落标签段落标签段落<br />
			标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
		<p>段落标签</p>
		<p>
			窗前明月光<br />
			疑是地上霜<br />
			举头望明月<br />
			低头思故乡<br />
		</p>
	</body>

下面为运行截图：
在这里插入图片描述

加粗、斜体、分割线、空格

<head>
		<meta charset="UTF-8">
		<title>demo1</title>
	</head>
	<body>
		<h3>静夜思</h3>
		<hr />
		<p>
			窗前明月光<br />
			疑是地上霜<br />
			举头望明月<br />
			低头思故乡<br />
		</p>
		<strong>李白</strong>
		<p><em>2020年，我们度过了难忘的一年！</em></p>
		<p>ceshi &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdagg</p>
	</body>

下面为运行结果：
在这里插入图片描述

小练习1：

<head>
		<meta charset="UTF-8">
		<title>腾讯云简介</title>
	</head>
	<body>
		<h1>
			<strong>腾讯云</strong>
		</h1>
		<p><strong>腾讯云</strong>有着深厚的基础架构，并且有着多年对海量互联网服务的经验，
		不管是社交、游戏还是其他领域，都有多年的成熟产品来提供产品服务。
		腾讯在云端完成重要部署，为开发者及企业提供云服务、云数据、
		云运营等整体一站式服务方案.<br />
		具体包括云服务器、云储存、云数据库和弹性web引擎等
		</p>
		<hr />
		&reg; 腾讯云版权所有
	</body>

下面为运行截图：
在这里插入图片描述

图片演示

<head>
		<meta charset="UTF-8">
		<title>图片演示</title>
	</head>
	<body>
		<img src="img/ckkrbEFaamVKRWlmSHl2NEJwTlJUR1Yyc0docmM5MlpCQmtlMEpRUWwrelp6K3Jsd1RUK0RBPT0.jpg"  title="这是书房"/>
	</body>

下面为运行结果：
在这里插入图片描述

超链接、回到顶部

<head>
		<meta charset="UTF-8">
		<title>超链接测试</title>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<br />
		<a href="a2.html" target="_blank">a2</a>
		aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
		aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
		aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
		aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
		aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
		aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
		aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
		aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
		aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
		<a href="#">回到顶部</a>
	</body>

a2:

<head>
		<meta charset="UTF-8">
		<title>a2</title>
</head>
<body>
		阿
</body>

下面为运行结果：
在这里插入图片描述
在这里插入图片描述

定位跳转

<body>
		<p>
			<a href="#1">竞赛</a>
			<a href="#2">人工智能</a>
		</p>
		<p>
			相关著作
		</p>
		<p>
			aaaa<br />aaaaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			<a name="1"/>
			dhgsh1<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			<a name="2"/>
			sdhh2<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
			aaaaa<br />aaaaa<br />aaaaa<br />
	</body>

列表项

<head>
		<meta charset="UTF-8">
		<title>列表与描述</title>
	</head>
	<body>
		<dl>
			<dt>列表项1</dt>
			<dd>描述1</dd>
			<dt>列表项2</dt>
			<dd>描述2</dd>
			<dt>列表项3</dt>
			<dd>描述3</dd>
			<ul>
				<dd>描述1</dd>
				<dd>描述2</dd>
				<dd>描述3</dd>
			</ul>
		</dl>
	</body>

下面为运行结果：
在这里插入图片描述

<head>
		<meta charset="UTF-8">
		<title>有序列表</title>
	</head>
	<body>
			<ol type="circle">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
			<li>列表项5</li>
		</ol>
	</body>

下面为运行结果：
在这里插入图片描述

<head>
		<meta charset="UTF-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul>
			<ul type="circle">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
			<li>列表项5</li>
		</ul>
	</body>

下面为运行结果：
在这里插入图片描述

小练习2：

<head>
		<meta charset="UTF-8">
		<title>图书列表</title>
	</head>
	<body>
		<ol type="1">
			<li><img src="../img/111.jpg" width="120" height="120" /><br />   111</li>
			<li><img src="../img/111.jpg" width="120" height="120" /><br />   222</li>
			<li><img src="../img/111.jpg" width="120" height="120" /><br />   333</li>
		</ol>
	</body>

下面是运行结果：
在这里插入图片描述

表单

<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<body>
		<form action="提交地址">
			文本框：<input type="text" placeholder="请输入用户名"/>
			<br />
			密码框：<input type="password" placeholder="请输入密码"/>
			<br />
			单选框/选择框（可双选）：
			<input type="radio" /> 男
			<input type="radio" /> 女
			<br />
			单选框/选择框(不可复选)：
			<input type="radio" name="gender" /> 男
			<input type="radio" name="gender" /> 女
			<br />
			单选框/选择框(不可复选,男默认被选中)：
			<input type="radio" name="gr" checked="checked"/> 男
			<input type="radio" name="gr"/> 女
			<br />
			复选框：
			<input type="checkbox" name="ckb"/> 1
			<input type="checkbox" name="ckb"/> 2
			<input type="checkbox" name="ckb"/> 3
			<br />
			下拉框（默认值为上海）：
			<select>
				<option>黑龙江</option>
				<option>北京</option>
				<option selected="selected">上海</option>
				<option>广州</option>
			</select>
			<br />
			文本域(5行20列)：
			<textarea cols="20" rows="5"></textarea>
			<br />
			上传(不是真上传，只能看本地的文件,想上传需要本地服务器)：
			<input type="file"/>
			普通按钮：
			<input type="button" value="普通按钮"/>
			<br />
			提交按钮(提交至服务器)：
			<input type="submit" value="提交按钮"/>
			<br />
			重置按钮：
			<input type="reset" value="重置"/>
		</form>
	</body>

下面是运行结果：
在这里插入图片描述

表格

<head>
		<meta charset="UTF-8">
		<title>表格</title>
	</head>
	<body>
		<table border="1px" width="300px">
			<tr>
				<th>姓名</th><th>性别</th><th>年龄</th>
			</tr>
			<tr>
				<th>张三</th><th>男</th><th>21</th>
			</tr>
			<tr>
				<th>李四</th><th>男</th><th>22</th>
			</tr>
			<tr>
				<th>王五</th><th>女</th><th>23</th>
			</tr>
			<tr>
				<th>周六</th><th>女</th><th>24</th>
			</tr>
		</table>
	</body>

下面为运行结果：
在这里插入图片描述

合并表格

<head>
		<meta charset="UTF-8">
		<title>学生名单分组表</title>
	</head>
	<body>
		<table border="1px" width="400px">
			<tr>
				<th rowspan="2">组名</th>
				<th rowspan="2">学号</th>
				<th rowspan="2">姓名</th>
				<th rowspan="2">年龄</th>
				<th colspan="2">联系方式</th>
			</tr>
			<tr>
				<th>QQ号</td><th>手机号</th>
			</tr>
			<tr>
				<td rowspan="2">第一组</td>
				<td>10001</td><td>麻冥旭</td><td>16</td>
				<td>234345345</td><td>1386666666</td>
			</tr>
			<tr>
				<td>10002</td><td>赵月</td><td>16</td>
				<td>234345345</td><td>1386666666</td>
			</tr>
			<tr>
				<td>第二组</td><td>10003</td><td>练衡</td>
				<td>16</td><td colspan="2">234345345</td>
			</tr>
		</table>
	</body>

下面是运行结果：
在这里插入图片描述

作业1：

<head>
		<meta charset="UTF-8">
		<title>经典语录</title>
	</head>
	<body>
		<h2><strong>励志语录</strong></h2>
		<hr />
		<p>不管在什么时候，都绝不允许随便舍弃性命，</p>
		<p>无论是在小动物还是人的全球里，适者生存是很当然的事，</p>
		<p>为了更好地生存，最强者务必要觅食弱小，弱小则务必要避开最强者，</p>
		<p>生存是一种本能反应。</p>
		<p>不管在任何时刻，都决不会应当舍弃生命，它是对生命的重视。</p>
		<hr />
		<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdpic.tiankong.com%2F16%2F18%2FQJ8724199534.jpg&refer=http%3A%2F%2Fdpic.tiankong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613895289&t=d77ca10650a37d41166dce12fcab59f3" width="500" height="300"/>
	</body>

下面为运行结果：
在这里插入图片描述

作业2：

<head>
		<meta charset="UTF-8">
		<title>商品列表</title>
	</head>
	<body>
		<h2><strong>商品列表</strong></h2>
		<ul type="disc">
			<li>女装/内衣/家居</li>
			<li>女鞋/男鞋/箱包</li>
			<li>母婴/童装/玩具</li>
			<li>男装/运动户外</li>
			<li>美妆/彩妆/个护</li>
			<li>手机/数码/企业</li>
			<li>大家电/生活电器</li>
			<li>零食/生鲜/茶酒</li>
			<li>厨具/收纳/清洁</li>
			<li>家纺/家饰/鲜花</li>
			<li>图书音像/文具</li>
			<li>医药保健/进口</li>
			<li>汽车/二手车/用品</li>
			<li>房产/装修家具/建材</li>
			<li>手表/眼镜/珠宝首饰</li>
		</ul>
	</body>

下面为运行结果：
在这里插入图片描述
——The End

子曰礼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
冬令营Web基础整理——Day2
weixin_45792414的博客
04-29 82
文章目录重置、去电小数点、链接无下划线和变黑字体大小、字体颜色小练习1：选择器div小练习2：div叠加列表:填充小练习3：作业1：作业2： 重置、去电小数点、链接无下划线和变黑 <head> <meta charset="UTF-8"> <title></title> <style> *{ /*重置*/ margin: 0; padding: 0; font-size: 12px; } u
2022信安冬令营day1——WordPress-Mailpress远程代码执行漏洞
m0_54628962的博客
02-16 2525
wordpress 由IP地址进入网页 利用wpscan软件扫描该IP地址发现漏洞为Mailpress插件远程代码执行漏洞 Mailpress插件远程代码执行漏洞复现 利用火狐中hackbar插件 F12进入 web控制台，把URL写入hackbar中，选中Post data键，传入post值，运行 URL： http://IP地址：端口/wp-content/plugins/mailpress/mp-includes/action.php POST：action=autosave&id=0&
学术新秀采访－陆品燕~How To Get Your SIGGRAPH Paper Rejected
weixin_33859504的博客
08-07 226
from http://cbir.spaces.live.com1.学术新秀采访－陆品燕2.计算机系2007学术新秀朱军专访3.How To Get Your SIGGRAPH Paper Rejected 学术新秀采访－陆品燕精瘦的身形，爽朗的笑容，初见陆品燕，他给我们留下了这样的印象。今年的学术新秀陆品燕，创造一个了不起的奇迹：2007年前半年，7篇计算机理论方向沉甸甸的国际会议论文，其中两...
2020年俱乐部五年级正式试题-冬令营.pdf
06-17
2020年数学希望杯俱乐部五年级正式试题-冬令营，“希望杯”邀请赛自1990年以来，已经连续举行了二十八届。27年来，主办单位始终坚持比赛面向多数学校、多数学生，从命题、评奖到组织工作的每个环节，都围绕着一个...
冬令营 2015 讲课资料
02-06
冬令营 2015 讲课资料 拟阵选讲.pdf 计算几何讨论.pptx 计数.pdf 构造.pptx 动态图.pdf slides.pdf...
2013NOI冬令营试卷
03-27
想被全国的神犇一起虐爆吗？请看NOI2013冬令营试卷
冬令营论文演示文稿.ppt
09-17
冬令营论文演示文稿.ppt
2014NOI冬令营讲者PPT
02-16
NOIP 2014NOI冬令营讲者PPT ACM/ICPC
HTML跨年烟花
热门推荐
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 550
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
Html_Css问答集(3)
最新发布
白话魔法师
06-14 597
html与css学习中的一些疑问，问答中轻松获取知识。
js之简单轮播图
weixin_58462329的博客
06-11 764
今天给大家封装一个简单的轮播图,可以点击下一张上一张以及自动轮播。如上图所示的效果,需要修改下样式更好看。
HTML (总结黑马的)
SKL4399的博客
06-01 1672
img src="./cat.jpg" alt="替换文本" title="提示文本"> 替换文本是图片没有显示的时候显示对应的文字；定义列表： 标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情 类似于苹果官网最下面的那个效果。 女。
js轮播图有，移入移出事件，左右滑动事件功能
tianxianghuiwei的博客
06-14 140
具体的轮播可以根据需求进行调整；
HTML 区块
xyq2024的博客
06-11 389
HTML（超文本标记语言）是构建网页的标准语言，它定义了网页的结构和内容。在HTML中，区块元素是用来组织页面内容的重要工具。这些元素通常用于创建如段落、列表、头部、底部、导航栏等较大的内容块。本文将详细介绍HTML中的区块元素，包括它们的用途、属性以及如何在网页设计中有效地使用它们。
下载使用nginx发布html自定义页面
2302_80643218的博客
06-11 381
修改nginx发布内容，vi/vim进入普通文件后可以使用gg来到首行首字符，再结合使用dG就可以将普通文件内的所有内容删除干净。选择自己所使用系统对应的信息后点击（我用的是CentOS，所以需要点击RHEL and derivatives）可在web页面内自定义展示文字，默认为“我爱你”在浏览器搜索nginx.org，然后点击。保存退出后下载nginx。
30-unittest生成测试报告（HTMLTestRunner插件）
学习&记录
06-08 967
批量执行完测试用例后，为了更好的展示测试报告，最好是生成HTML格式的。本文使用第三方HTMLTestRunner插件生成测试报告。
JavaScript html css 字符串对象
ndjziskwkhdh的博客
06-08 469
返回指定内容在原字符串的位置，如果找不到就返回 -1，开始的位置是 index 索引号。replaceAll替换所有的,chrome85开始支持replaceAll。字符串截取：从start位置开始（索引号），length 取的个数。字符串截取：从start位置开始，截取到end位置。字符串截取：从start位置开始，截取到end位置。返回指定位置的字符（index 字符串的索引号）字符串所有的方法，都不会修改字符串本身（replace和replaceAll方法。），操作完成会返回一个新的字符串。
增加对于 时区 夏令时 冬令时的处理 当前时间格式 #夏令时偏差 冬令时偏差如 "yyyy-MM-DD hh:mm:ss#2 2"对应的测试应该如何写
04-08
为了增加对于时区、夏令时和冬令时的处理，可以在当前时间格式中加入时区信息。比如，在时间格式中加入时区偏移量，例如UTC+8表示东八区，或者加入时区名称，例如Asia/Shanghai表示上海时区。这样，在不同的时区下，可以根据这些信息来进行时间的转换和处理。同时，需要考虑夏令时和冬令时的转换，可以在程序中设定相应的规则，根据不同的地区和时间来进行处理。这样可以避免时间的混乱和错误，提高程序的可靠性和稳定性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值