练习1

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.work1 {border-collapse: collapse;width: 500px;height: 300px;}.work1 th {background-color: aqua;border: 2px solid blue;}.work1 td {border: 2px solid blue;}</style>
</head><body><table class="work1" border="1"><tr><th>ID</th><th>新闻标题</th><th>点击量</th><th>发布时间</th><th>操作</th></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></table>
</body></html>

练习2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 100px;}.work2 {border-collapse: collapse;width: 500px;height: 300px;}.work2 th,.work2 td {border: 2px solid rgb(223, 67, 176);}</style>
</head><body><table class="work2"><tr><th colspan="3">星期一菜谱</th></tr><tr><td rowspan="2">素菜</td><td>青草</td><td>花椒</td></tr><tr><td>小葱</td><td>炒白菜</td></tr><tr><td rowspan="2">荤菜</td><td>油焖</td><td>海参</td></tr><tr><td>红烧肉<img src="./images/i1.jpg" alt=""></td><td>烤全羊</td></tr></table>
</body></html>

练习3

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.work3 th,.work3 td {border: 1px solid blue;}</style>
</head><body><table class="work3"><caption>课程表</caption><tr><th>项目</th><th colspan="5">上课</th><th colspan="2">休息</th></tr><tr><th>星期</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><tr><td rowspan="4">上午</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td rowspan="4">休息</td></tr><tr><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr><tr><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr><tr><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr><tr><td rowspan="2">下午</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td rowspan="2">休息</td></tr><tr><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr></table>
</body></html>

练习4

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 100px;}.work4 {border-collapse: collapse;box-sizing: border-box;}.work4 td {border: 1px solid black;}.work4 img {padding: 3px;}</style>
</head><body><table class="work4"><tr><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td></tr><tr><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td></tr><tr><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td></tr><tr><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td><td><img src="./images/4.jpg" alt=""></td></tr></table>
</body></html>

练习5

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h3>今天你要去哪里呢</h3><ul type="disc"><li><a href="#">新浪</a></li><li><a href="#">搜狐</a></li><li><a href="#">百度</a></li><li><a href="#">腾讯QQ</a></li><li><a href="#">网易</a></li><li><h4>去我自己的页面看看：</h4><ol><li><a href="#">page1</a></li><li><a href="#">page1</a></li><li><a href="#">page1</a></li><li><a href="#">page1</a></li></ol></li></ul>
</body></html>

练习6

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2>定义列表</h2><p style="color: red;">说明：定义列表相当于词条解释说明</p><hr><dl><dt>HTML的概念</dt><dd></dd><dt>CSS层叠样式表</dt><dd></dd><dt>Javascript脚本程序</dt><dd></dd></dl>
</body>
</html>

练习7

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{background-color:seashell;}th {color: rosybrown;font-size: 20px;}button {color: seagreen;font-size: 40px;}</style>
</head><body><form action="#"><center><table border="1"><tr><th colspan="3">1. 会员登录名和密码</th></tr><tr><td>用户名：</td><td><input type="text"></td><td>5-15位，请使用英文(a-z，A-Z)、数字(0-9)</td></tr><tr><td>密码：</td><td><input type="password" name="" id=""></td><td>5-15位，请使用英文(a-z) 、数字(0-9)注意区分大小写;密码不能与登录名相同;易记;难猜</td></tr><tr><td>再次输入密码：</td><td><input type="password" name="" id=""></td><td>两次输入的密码必须一致</td></tr><tr><th colspan="3">2. 姓名和联系方式</th></tr><tr><td>真实姓名：</td><td><input type="text"></td><td><input type="radio" name="gender" id="">先生<input type="radio" name="gender" id="">小姐</td></tr><tr><td>电子邮箱：</td><td><input type="text"></td><td>非常重要！这是客户与您联系的首选方式，请一定填写真实。</td></tr><tr><td>固定电话：</td><td><input type="text"></td><td>区号+电话号码</td></tr><tr><td>公司所在地：</td><td colspan="2"><select><option value="">北京</option></select><select><option value="">东城</option></select></td></tr><tr><td>街道地址：</td><td><input type="text"></td><td>填写县(区)、街道、门牌号</td></tr><tr><td>传真号码：</td><td colspan="2"><input type="text"></td></tr><tr><td>手机号码：</td><td colspan="2"><input type="text"></td></tr><tr><td>邮政编码：</td><td colspan="2"><input type="text"></td></tr><tr><th colspan="3">3. 公司名称和主营业务</th></tr><tr><td>贵公司名称：</td><td><input type="text"></td><td>请填写在工商注册的公司/商号全称;</td></tr><tr><td>你的职位：</td><td><input type="text"></td><td>无商号的个体经营者填写执照上的名字，如:张三（个体经营)</td></tr><tr><td>主营行业：</td><td><select name="" id=""><option value="">电子电工</option></select></td><td>请正确选择</td></tr><tr><td>主营产品/服务：</td><td><input type="text"></td><td>3个主要相关产品名/服务名，最少要填一个。例如:太阳帽，布料，拉链</td></tr><tr><td>公司网址：</td><td><input type="text"></td></tr><th colspan="3"><button type="submit"> 确认提交</button> &emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;<button type="reset">重置</button></th></table></center></form>
</body></html>

HTML和CSS总结

Html：
超文本标签语言
常用的标签：
i 倾斜
b：加粗
u:下划线
p:段落
br:换行
hr：分割线
hx：1~6级标题
div 行标签 span行内标签
a:超链接（路径） img:图片 video：视频 audio：音频
列表标签： ul无序 ol有序（li列表中选项）
table:表格
tr：行
td：列
th:表头
rowspan合并行 colspan合并列
form表单：
input：输入框
常见类型: type
text 文本
password 密码
radio 单选
checkbox 复选
file 文件
image 图片
number 数字
email 邮件
button 按钮
submit 提交
reset 重置
hidden 隐藏域
其他属性: readonly 只读但是会随表单提交
disable 禁用不会提交
required 必填
placeholder 阴影提示
textarea：文本域
select:下拉框
option
表单提交：是以name属性为key 输入值为value提交
提交的方式：
get：所有参数会拼接在url后面大小限制
url?key=值&key=值
post：
参数不会拼接在url后面
css：
选择器：
1.所有元素
*{}
2.标签选择器
标签名{}
3.类选择器
.类名{}
4.id选择器
#id名称{}
引入方式:
1.行内样式写在标签中使用style属性定义当前标签
2.页面样式写在head标签内部使用选择器整个页面
3.外部引用在head中引用引用的地方生效
样式就近原则

javaweb实训第一天作业练习相关推荐

javaweb实训第一天下午——JavaScript
目录 1.课程介绍 2.JavaScript简介 3.JavaScript三种写法 3.1.行内JS 3.2.内部JS 3.3.外部JS 4.JavaScript变量 4.1.语法 4.2.示例代码 ...
javaweb实训第一天上午——HTML和CSS
目录 1.课程介绍 1.Html认识: 2.Html简单使用: 3.Html常用标签: 4.Css认识 5.Css使用 6.Css选择器 7.Css属性 2.HTML认识 2.1 什么是HTML 2. ...
[JavaWeb实训Day4]__jsoup爬虫(爬新闻页面)词云的生成( kumo库)
目录一.本次实验分析过程二.Jee连接MySQL数据库三.异步传值及界面设计四.jsoup爬虫爬取新闻网页五.新闻词云的生成( kumo库) 六.存入数据库快速链接:[JavaWeb项目实 ...
中级实训第一天的自学报告
目录[阅读时间:约10分钟] 中级实训第一天的自学报告姓名:隐藏敏感信息学号:隐藏敏感信息一.Vi/Vim 二.Java 三.Ant 四.Junit [附加]五.SonarQube [附加]六. ...
java web开发实训心得,【JavaWeb实训心得体会材料】
JavaWeb实训心得体会材料 <JavaWeb实训心得体会材料.doc>由会员分享,可免费在线阅读全文,更多与<JavaWeb实训心得体会材料>相关文档资源请在帮帮文库(ww ...
项目实训第一周2-学习系统的使用
项目实训第一周2-学习系统的使用 1.代码生成器的使用 2.sql生成器的使用 3.其他组件的使用 1.代码生成器的使用如图,是代码生成器的基本构造可以自行定义选择你要生成代码的注释信息,表信息, ...
JavaWeb实训项目：基于SSM框架的CRM客户关系管理系统（文章最后有源码）
JavaWeb实训项目:基于SSM框架的CRM客户关系管理系统(附部分源码) 一.项目背景项目演示二.项目介绍三.涉及技术总结源码地址一.项目背景 "世上本来没有CRM,大家的生 ...
项目实训第一周（车道线检测）
项目实训我主要负责计算机视觉方面,识别出车道线并据此导航.相关内容也更新在我的个人博客上个人网站相关介绍车道线检测如果用传统方法,识别速度较慢,效果不够好,容易受到多种因素的干扰,因此我们打算开发 ...
JAVA程序设计-头歌实训-------# 第一阶段 Java语言快速入门
第一阶段 Java语言快速入门第1关:Java程序的基本框架:Hello Java World! 任务描述本关的任务是编写你人生中第一个Java程序,从此开启你的Java实训之旅,显示效果如下: ...

javaweb实训第一天作业练习

目录

练习1

练习2

练习3

练习4

练习5

练习6

练习7

HTML和CSS总结

javaweb实训第一天作业练习相关推荐

最新文章

热门文章