Web前端实训两天记录
2024-05-09 08:59:18
文章目录
- Web前端实训两天记录
- 实训前言
- HTML+CSS基础知识
- 第一天内容
- 01.html
- 02.html
- 03.html
- 04.html
- 05.html
- 第二天内容
- 01边框.html
- 02内边框.html
- 03背景.html
- 04背景图.html
- 05表格.html
- 06个人信息小例子.html
- 07表单.html
- 08盒子模型.html
- 09边框圆角.html
- 10阴影效果.html
- 11变换小案例.html
- 12hover练习.html
- 两天实训总结
Web前端实训两天记录
实训前言
之前自学过一段时间的网页设计基础知识，这次学校组织了实训集中学习网页前端的知识，趁这个机会巩固复习和学习了一些内容，顺便把总结一下把写出来，记录一下这两天的成果。使用软件：Sublime Text。
HTML+CSS基础知识
第一天内容
01.html
练习了html基本结构和一些标签：head,body,p,br,pre,em,strong,div,sup,sub等。具体如下代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>my first html</title><meta name="keywords" content="AHNU"><link rel="shortcut icon" type="imag/x-icon" href="imag0.jpg"><style>p{text-align: center;}</style><!-- 这是注释 -->
</head>
<body><h1>hello world!</h1>hello<br><a href="http://www.ahnu.edu.cn">AHNU</a><p>显示<br>缩进<br>一个 空格<br><!-- html实体 --><h1>左右圆括号<br>版权符号©<br>人民币¥</p><p style="width: 300px;border-width: 2px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!-- 保持原格式 --><pre>天王地虎</pre><div><em>斜体</em><br><strong>粗体</strong><br><mark>被选中</mark><br><ruby>拼音<rt>pin xin</rt></ruby><br><sub>下角标</sub><sup>上角标</sup></div>
</body>
</html>注：p中间那段是随机生成的一段文本，用于测试。
02.html
此案例写了列表的基本信息，颜色单位。颜色的表示形式。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>颜色单位 列表</title><style type="text/css">/*优先级id>class>div>**/div{width: 300px;height: 200px;background-color: #c1c1c1;}p{border: 1px solid red;}#item{border: 2px solid green;}#item01{border: 3px solid yellow;}.item04{border: 4px solid green;}div{border: 5px solid blue;}</style>
</head>
<body><p id="item">what do want to do.</p><p>I want you.</p><!-- 无序列表 --><ul class="item1"><li>第一组</li><li>第二组</li><li>第三组</li><ul><li>first</li><li>second</li><li>third</li></ul><li>第四组</li><li>第五组</li></ul><!-- 有序列表 --><ol><li>一</li><li>二</li><ol><li>first</li><li>second</li><li>third</li></ol><li>三</li></ol><div id="item01" class="item02">你好啊。</div>
</body>
</html>
03.html
CSS的一些样式组合。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>组合 群组 后代元素</title><style type="text/css">/*后代元素选择器*/.list li{border: 2px solid blue;}/*子元素选择器*/.list>li{border: 1px solid red;}/*群组选择器*//*或者*/div,p,#item{border: 3px solid yellow;}/*规定一个元素必须要有这几样*//*和*/li.item02{border: 4px solid blue;}</style>
</head>
<body><ul><li>列表</li><li>列表</li><ul class="list"><li>列表</li><li class="item02">列表</li><li>列表</li><li>列表</li></ul><li>列表</li><li>列表</li></ul>
</body>
</html>
04.html
字体的基本属性设置。
<!DOCTYPE html>
<html>
<head><title>字体</title><meta charset="utf-8"><style type="text/css">/*字体家族非衬线字体：黑体，粗细一样衬线字体：宋体，有棱有角*/p{font-family: '黑体'，serif,sans-serif；font-size: 300px;font-weight: bold;font-style: italic;font-variant: small-caps;font: bold italic 12px '宋体';/*size 和 family 写在最后*/}</style>
</head>
<body><p>你看着这个碗又大又圆<br>你看这个面又长又宽<br>I am so happy.</p>
</body>
</html>
05.html
设置了文本的一些属性。
<!DOCTYPE html>
<html>
<head><title>文本</title><style type="text/css">.item{border: 1px solid red;width: 300px;word-wrap: break-word;/*长单词自动换行=overflow-wrap*/text-indent: 2em;/*缩进*/}.item01{border: 2px solid yellow;width: 300px;word-spacing:20px;/*词间距*/ letter-spacing: 3px;/*字符间距*/}.cai{width: 400px;border: 2px solid green;text-align: center;/*对齐*/vertical-align: center;/*垂直对齐*/line-height: 40px;/*行高*/}img{width: 50px;height:50px;vertical-align: middle;/*中线对齐*/}.item02{width: 200px;border: 2px solid green;height: 200px;white-space: pre-wrap;/*格式化输出*/}</style>
</head>
<body><p class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitadddddddddddddddddddddddddddddddtion ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><div class="item01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><div class="cai">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><div class="cai">会唱 会跳 会rap 喜欢篮球 鸡你太美</div><div style="width: 200px"><img src="F:/Pictures/图片/robot.jpg">很nice</div><div class="item02">hello world.你好aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
注：这段时间就cxk和wyf挺火的，没有恶搞的意思。
第二天内容
01边框.html
边框的一些属性。
<!DOCTYPE html>
<html>
<head><title>边框</title><style type="text/css">.item{width: 300px;height: 300px;border-color: #f67;border-style: dotted;border-width: 2px;padding: 10px;padding-top: 1px;padding-right: 1px;padding-left: 1px;padding-bottom: 1px;/*padding: 值; 上下左右padding: 值1 值2； 上下 左右padding: 值1 值2 值3; 上 左右 下padding: 值2 值2 值3 值4； 上 右 下 左*/}</style>
</head>
<body><div class="item"></div>
</body>
</html>
02内边框.html
内边框的设置。
<!DOCTYPE html>
<html>
<head><title>内边距</title><style type="">div{width: 300px;height: 300px;border: 2px solid #f67;padding: 10px;/*内边距*/padding-left: 1px;padding-bottom: 1px;padding-right: 1px;padding-top: 1px;/*padding: 值; 上下左右padding: 值1 值2； 上下 左右padding: 值1 值2 值3; 上 左右 下padding: 值2 值2 值3 值4； 上 右 下 左*/}</style>
</head>
<body><div>衣带渐宽终不悔<br>为伊消得人憔悴</div>
</body>
</html>
03背景.html
<!DOCTYPE html>
<html>
<head><title>背景</title><style type="text/css">.item{width: 300px;height: 300px;border: 2px solid #f60;background-color: #ccc;background-image: url('rar.jpg');background-repeat: repeat;background-repeat: no-repeat;/*平铺的设置*/background-position: right top;background-position: center top;background-position: left bottom;background-position: 50px,50px;background-attachment: fixed;/*background: color image repeat postion attachment*/}</style>
</head>
<body><div class="item"></div>
</body>
</html>
04背景图.html
<!DOCTYPE html>
<html>
<head><title>背景图02</title><style type="text/css">.item{width: 500px;height: 600px;border: 2px solid #f60;background-image: url('timg.jpg');background-repeat: no-repeat;background-size:cover;/*不会让原图失真，会对原图进行裁剪 铺满元素*/background-size: contain;background-size: 50% 50%;background: green url('timg.jpg') no-repeat 50px 90px / 50px 50px;}</style>
</head>
<body><div class="item"></div>
</body>
</html>
05表格.html
<!DOCTYPE html>
<html>
<head><title>表格</title><style type="text/css">table{width: 300px;table-layout: fixed;/*固定列宽*/border:1px solid #000;/*border-collapse: collapse;*//*合并单元格*/caption-side: bottom;/*标题位置*/border-spacing: 2px;/*在没有collapse的情况下可以设置缝隙*/empty-cells:hide;/*在没有collapse的情况下设置空单元格的隐藏和显示*/}th,td{border: 3px solid #000;text-align: center;}</style>
</head>
<body><table><caption>基本信息</caption><thead><tr><th>名字</th><th>年龄</th><th>性别</th><th>专业</th></tr></thead><tr><td>Jihome</td><td>21</td><td>男</td><td>计算机</td></tr><tr><td colspan="2">Monkey</td><td>男</td><td>计算机</td></tr><tr><td>Black</td><td>21</td><td>男</td><td>计算机</td></tr><tr><td colspan="4">总计：3人</td></tr></table>
</body>
</html>
06个人信息小例子.html
用表单的知识设计出的一个小表格形式。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>个人信息</title><style type="text/css">table{width: 600px;table-layout: fixed;/*固定列宽*/border-collapse: collapse;/*合并单元格*/}th,td{border: 1px solid #000;padding: 2px;text-align: center;}table tr {height: 30px;}</style>
</head>
<body><table><caption>个人信息</caption><tr><td>姓名</td><td></td><td>年龄</td><td></td></tr><tr><td>性别</td><td></td><td>饭量</td><td></td></tr><tr><td>自我介绍</td><td colspan="3"></td></tr><tr><td colspan="2" rowspan="6">工作经历</td><td colspan="2"></td></tr><tr><td colspan="2"> </td></tr><tr><td colspan="2"></td></tr><tr><td colspan="2"></td></tr><tr><td colspan="2"></td></tr><tr><td colspan="2"></td></tr></table>
</body>
</html>
演示效果如下：
07表单.html
这部分内容很多，涉及表单的信息和input中的一些属性值。
<!DOCTYPE html>
<html>
<head><title>表单</title>
</head>
<body><!-- name用于给后端提交数据用的 --><!-- name 的值是个标识，用于给后端取数据用 -->用户名：<input type="text" name="user" placeholder="请输入你的名字"><br>密码：<input type="password" name="pwd" placeholder="请输入密码"><br><!-- 单选按钮 --><input type="radio" name="sex" value="" checked>男 <br><input type="radio" name="sex" value="">女 <br><!-- 复选框 --><input type="checkbox" name="hobby" value="" checked> 学习 <br><input type="checkbox" name="hobby" value="" > 篮球<br><input type="checkbox" name="hobby" value="" > 游戏 <br><input type="checkbox" name="hobby" value="" > 吃睡 <br><hr><!-- 文本选择 --><input type="file" name="avator" multiple><br>邮箱：<input type="email" name="" placeholder="请输入邮箱"><!-- 用test也行 --><hr><!-- 数字 --><input type="number"name="score"max="1000"min="0"step="1"placeholder="请输入数字" ><hr><input type="color" name=""><hr><!--日期--><input type="date" name="date"><!--月份--><input type="month" name="month"><!--星期--><input type="week" name="week"><!--时间--><input type="time" name="time"><!--时间日期--><input type="datetime-local" name="dt"><!-- 多行文本 --><textarea name="" rows="5" cols="5"></textarea><form action ="1.php" style="width: 400px"><!--定义围绕表单中元素的边框--><fieldset><!--定义标签主题--><!--没啥语义--><legend>注册</legend><!--autocomplete 不会自动保存-->username: <input type="text" name="username" autocomplete="off"><br>password: <input type="password" name="pwd"><br><button>提交</button></fieldset></form></body>
</html>
08盒子模型.html
简单来说就是深入理解各个属性的布局。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>盒子模型</title><style type="text/css">.item{display: inline-block;/*不换行*/width: 200px;height: 200px;border: 2px dashed red;padding: 10px;margin-left: 50px;/*外边距*/margin:20px;vertical-align: middle;}</style>
</head>
<body><div class="item">大家好，我是蔡徐坤。</div><div class="item"></div>
</body>
</html>
09边框圆角.html
给边框设置角度。
<!DOCTYPE html>
<html>
<head><title>边框圆角</title><style type="text/css">.item{width: 200px;height: 200px;border: 2px solid red;border-radius: 80px;}</style>
</head>
<body><div class="item"></div>
</body>
</html>
10阴影效果.html
加阴影效果和偏移量。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>阴影小案例</title><style type="text/css">.item{display: inline-block;width: 150px;height: 150px;border: 2px solid red;margin: }/*box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色; 偏移可以负值*/.item1{box-shadow: 5px 10px;/*阴影 右正下正*/}.item2{box-shadow: 5px 10px #ccc;}.item3{box-shadow: 5px 10px 6px #ccc;}.item4{box-shadow: 5px 10px 6px 10px #ccc;}</style>
</head>
<body><div class="item1 item"></div><div class="item2 item"></div><div class="item3 item"></div><div class="item4 item"></div>
</body>
</html>
11变换小案例.html
对图形进行旋转和变换。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>变换小案例</title><style type="text/css">.box{width: 400px;height: 400px;border: 2px solid red;}.item{width: 200px;height: 200px;border: 2px solid green;transform: translate(20px,20px); /*偏移*/transform: rotate(10deg); /*旋转*/} .item{}</style>
</head>
<body><div class="box"><div class="item item01"></div></div>
</body>
</html>
12hover练习.html
改变鼠标悬停在模块上面时候的效果。
<!DOCTYPE html>
<html>
<head><title>hover练习</title><style type="text/css">.item{width: 200px;height: 200px;border: 2px solid red;background-color: red;transition-duration: 3s;/*过渡时间*/transition-property: background-color;/*只有颜色慢慢变*/}/*鼠标悬停在上面时候的效果*/.item:hover{background-color: green;border: 10px solid blue;}</style>
</head>
<body><div class="item"></div>
</body>
</html>
两天实训总结
经过两天的实训，对HTML和CSS有了更深入的了解，虽然基本都是之前学过的内容，但是还是有学到新的开发小技巧和一些小坑，总之还是有很大收获的。
Web前端实训两天记录相关推荐
- web前端实训作业 html+css+javascript 水果网页设计实例 企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...
- web前端实训大作业：餐饮网站设计——美食城(7个页面) HTML+CSS+JavaScript
web前端实训大作业:餐饮网站设计--美食城(5个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要 ...
- web前端实训作业 html+css+javascript 水果超市网页设计实例 企业网站制作
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- 学生信息管理系统-web项目实训（基于JAVA）
学生信息管理系统-web项目实训(基于JAVA) //登陆 package rjgc;import java.awt.*; import java.awt.event.*; import javax. ...
- 前端实训-----摆弄形状、浮动，高度塌陷等
1.摆弄形状代码 HTML文件 <html><head><title>摆弄形状</title><!-- 我们应该在此<head>标记中 ...
- java web开发实训心得,【JavaWeb实训心得体会材料】
JavaWeb实训心得体会材料 <JavaWeb实训心得体会材料.doc>由会员分享,可免费在线阅读全文,更多与<JavaWeb实训心得体会材料>相关文档资源请在帮帮文库(ww ...
- 实训第二天记录-sql注入实战：教务系统模拟注入+sqli-labs less1-5
一.模拟注入教务系统 用火狐访问教师搭建好的教务系统靶场 SQLi漏洞利用 判断是否为动态网站,动态网站即可根据不同情况动态变更的网站,例如上图中点击查看详情,每个查看详情链接返回的结果都不同,说明是 ...
- 小学期前端实训笔记（2）-css【菜狗级】
CSS css基本语法 选择器{属性:值属性:值 } 选择器:选中页面中的标签. 属性:设置标签的特性,特征. 值:与属性相对应的值. 三种形式 行内样式 在HTML标签上,使用style的属性设置c ...
- 网络工程实训eNSP学习记录
参考视频b站众元助教元元-电源老师 目录 1.同网段主机与网关通信 2.基本VLAN划分 3.跨交换机VLAN划分 4.交换机间的链路聚合 5.单臂路由 8.动态路由协议 9.DHCP动态主机配置协 ...
最新文章
- Python 上下文管理器和 with 语句
- 人工智能技术在内容行业的应用：AI对中长尾内容平台还是奢侈品
- [android] Serializable 和 Parcelable 区别
- 【每周CV论文推荐】 掌握残差网络必读的10多篇文章
- 技术人员应该如何培养
- 基于C#实现的简易绘图工具设计
- EasyUI美化界面项目系统（整合EasyUI_Insdep皮肤）
- 毕业设计基于linux下http,Linux下HTTP服务器设计-毕业设计.doc
- 日常生活小技巧 -- Beyond Compare之PC与UNIX文件比较
- (01) Apache Felix 入门 - 01
- 如何使用开源工具「DataEase」制作一个高质量的仪表板
- 神经网络芯片概念股,图神经网络预测股票
- DEJA_VU3D - Cesium功能集 之 078-对象材质：图片轨迹线
- 十进制与8421码、5421码、2421码、余3码之间的转换
- Hugegraph合集(一):图数据库技术调研
- 爬虫小小实战——豆瓣电影top250
- 天涯人脉通讯录2010 - 导入模板格式说明
- matlab unwrap angle,matlab之unwrap函数
- 什么是数据中心代理以及它们如何运作？
- JPS Command Not Found