目录
JavaWeb前端介绍
HTML:超文本标记语言 定义页面结构
CSS:层叠样式表 页面显示的样式 BootStrap
JS: JavaScript 界面交互(动态交互) JQuery
全栈开发工程师:前端和后端都精通的工程师
样例代码:
使用软件:HBuilder
标签介绍:
<title></title> 网页标题名
<h1>一级标题</h1> 如代码所表示代表六级的标题
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>王老师是Java讲师,朱老师是Java讲师</p> 新段落
<img src="img/bd_logo1.png"/> 导入照片
<br /> <!-- 换行 -->
<a href="http://www.baidu.com" target="_blank">超链接跳转到Baidu</a> 超链接
<hr /> <!-- 水平线 -->
<!-- 无序列表 ul=unordered list
li=list item
-->
<!-- ol=ordered list --> 有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello Html!!!!</title>
</head>
<body>
<!-- 标题 headline -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- p=paragraph -->
<p>京东(股票代码:JD),中国自营式电商企业,创始人刘强东担任京东集团董事局主席兼首席执行官 [1] 。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。</p>
<p>王老师是Java讲师,朱老师是Java讲师</p>
<img src="img/bd_logo1.png"/>
<img src="img/bd_logo1.png" width="100px" height="100px"></img>
<img src="img/bd_logo1.png" width="100px" height="100px"/>
<br /> <!-- 换行 -->
<!-- a 超链接
target="_blank" 在新窗口打开
-->
<a href="http://www.baidu.com" target="_blank">超链接跳转到Baidu</a>
<hr /> <!-- 水平线 -->
<!-- 无序列表 ul=unordered list
li=list item
-->
<ul>
<li>北京</li>
<li>深圳</li>
<li>上海</li>
<li>广州</li>
</ul>
<!-- ol=ordered list -->
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ol>
<!-- 无序列表和有序列表可以嵌套 -->
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>
山东
<ol>
<li>青岛</li>
<li>济南</li>
<li>烟台</li>
</ol>
</li>
</ul>
</body>
</html>
网页举例:
div division :
div里面所有的元素都在div区域里面
代码:
<html>
<head>
<meta charset="UTF-8">
<title>京东百科</title>
</head>
<body>
<div align="center">
<div>
<img src="img/bd_logo1.png" width="200px" height="200px"/>
</div>
<div style="color: red;width: 1000px;">
京东是中国的综合网络零售商,是中国电子商务领域受消费者欢迎和具有影响力的电子商务网站之一,在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等12大类数万个品牌百万种优质商品。京东在2012年的中国自营B2C市场占据49%的份额,凭借全供应链继续扩大在中国电子商务市场的优势。京东已经建立华北、华东、华南、西南、华中、东北六大物流中心,同时在全国超过360座城市建立核心城市配送站。2012年8月14日,京东与苏宁开打"史上最惨烈价格战" 。2013年3月30日19点整正式切换了域名,并且更换新的logo [1] 。
2018年1月11日,刘强东发出内部邮件,宣布京东商城将组建大快消事业群、电子文娱事业群和时尚生活事业群,并分别任命王笑松、闫小兵、胡胜利为三大事业群总裁并升任京东集团高级副总裁。 [2-3]
2018年3月,北京市消协官网显示,北京市消协2017年在京东商城购买74种比较试验样品,其中有33种不达标,不达标率为44.6%。
</div>
<div style="color: blue;width: 1000px;">
互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话:4006561155
Copyright © 2004 - 2019 京东JD.com 版权所有|消费者维权热线:4006067733经营证照|(京)网械平台备字(2018)第00003号|营业执照
</div>
</div>
</body>
</html>
网页:
空格折叠现象
<div>
<!-- 空格折叠现象
普通的空格在html里面如果连续出现多个会被当成一个空格,
如果想显示多个连续的空格就需要使用特殊的符号
Non-breaking Space
-->
锄禾日当 午<br/>
汗滴禾下 土<br/>
谁知盘中 餐<br/>
粒粒皆辛 苦<br/>
</div>
其他:
< less than <
> great than >
© ©
<h1> 在html页面输出: <h1>
span
span:功能类似于div,但是不能独占一行
块级元素:单独成为一行。h、ul、ol、div
行内元素:不能独占一行。img、a、span、input
u(underline):下划线
i(italic):斜体
b(bold):粗体
例:
<span><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></span>
表格
th:table head
tr:table row
td:table data 单元格
代码:
1.
<body>
<!--border:边框 cellspacing:单元格间隙-->
<table border="1" cellspacing="0" width="400px">
<tr>
<th>讲师名称</th>
<th>所教班级</th>
</tr>
<tr>
<td>朱老师</td>
<td>Java1812</td>
</tr>
<tr>
<td>鞠老师</td>
<td>H51812</td>
</tr>
<tr>
<td>秦老师</td>
<td>UI1812</td>
</tr>
</table>
</body>
2.
<table border="1" cellspacing="0" width="400px">
<tr>
<th>讲师名称</th>
<th>所教班级</th>
</tr>
<tr>
<td rowspan="2">朱老师</td>
<td>Java1812</td>
</tr>
<tr>
<!--<td>鞠老师</td>-->
<td>H51812</td>
</tr>
<tr>
<td>秦老师</td>
<td>UI1812</td>
</tr>
</table>
3.
<table border="1" cellspacing="0" width="400px">
<tr>
<th>讲师名称</th>
<th>所教班级</th>
</tr>
<tr>
<td colspan="2">朱老师</td>
<!--<td>Java1812</td>-->
</tr>
<tr>
<td>鞠老师</td>
<td>H51812</td>
</tr>
<tr>
<td>秦老师</td>
<td>UI1812</td>
</tr>
</table>
form表单
form表单相关的标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" >
<table border="1" cellspacing="0" cellpadding="">
<tr>
<th>用户名: </th>
<td>
<input type="text" name="" id="" value="张三" />
</td>
</tr>
<tr>
<th>密码 </th>
<td>
<input type="password" name="" id="" value="" />
</td>
</tr>
<tr>
<th>性别 </th>
<td>
<input type="radio" name="gender" id="" value="" />男
<input type="radio" name="gender" id="" value="" checked="true"/>女
<input type="radio" name="gender" id="" value="" />未知
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="">
<option value="">---请选择---</option>
<option value="">---青岛---</option>
<option value="">---济南---</option>
<option value="">---烟台---</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好</td>
<td>
<input type="checkbox" namebox="" id="" value="" />音乐<br/>
<input type="checkbox" namebox="" id="" value="" />看书<br/>
<input type="checkbox" namebox="" id="" value="" />爬山<br/>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea rows="" cols="">我嫩爹</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" name="" id="" value="" />同意该协议
</td>
</tr>
<tr>
<td>
<input type="submit" name="" id="" value="提交" />
</td>
<td>
<input type="reset" name="" id="" value="重置" />
</td>
</tr>
</table>
<!-- 用户名:<input type="text" name="" id="" value="" />
<br/>
密码:<input type="password" name="" id="" value="" /> -->
</form>
</body>
</html>
练习:
作业:
1、完成如下效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>统一建模语言理论考试</h1>
<h3>考试科目:统一建模语言</h3>
<h3>时间:100分钟</h3>
<h3>得分:</h3>
<table >
<tr>
<th>班级(必填):</th>
<td>
<input type="text" name="" id="" value="" />
</td>
</tr>
<tr>
<th>学号(必填):</th>
<td>
<input type="text" name="" id="" value="" />
</td>
</tr>
<tr>
<th>姓名(必填):</th>
<td>
<input type="text" name="" id="" value="" />
</td>
</tr>
</table>
<h3>一、填空题(每空五分,共20分)</h3>
<tr>
<td>
1.UML的中文全称是:
</td>
<br/>
<td>
<input type="text" name="" id="" value="" />
</td>
</tr>
<br/>
<tr>
<td>
2.对象的突出特征是:
</td>
<br/>
<td>
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
</td>
</tr>
<h3>二、选择题(每空10分,共20分)</h3>
<tr>
<td>1.UML与软件工程的关系是:</td>
<br/>
<td>
<input type="radio" name="t1" id="" value="" />(A)UML就是软件工程 <br>
<input type="radio" name="t1" id="" value="" />(B)UML参与到软件工程中软件开发的几个阶段<br>
<input type="radio" name="t1" id="" value="" />(C)UML与软件工程无关<br>
<input type="radio" name="t1" id="" value="" />(D)UML是软件工程中的一部分<br>
</td>
</tr>
<tr>
<td>2.Java语言支持:</td>
<br/>
<td>
<input type="radio" name="t1" id="" value="" />(A)单继承 <br>
<input type="radio" name="t1" id="" value="" />(B)多继承<br>
<input type="radio" name="t1" id="" value="" />(C)单继承和多继承都支持 <br>
<input type="radio" name="t1" id="" value="" />(D)单继承和多继承都不支持<br>
</td>
</tr>
<h3>三、多项选择题(每空10分,共20分)</h3>
<tr>
<td>1.用例的粒度分为以下哪三种:</td>
<br/>
<td>
<input type="checkbox" name="" id="" value="" />(A)概述级<br>
<input type="checkbox" name="" id="" value="" />(B)需求级<br>
<input type="checkbox" name="" id="" value="" />(C)用户目标级<br>
<input type="checkbox" name="" id="" value="" />(D)子功能级<br>
</td>
</tr>
<tr>
<td>2.类图由以下哪三部分组成:</td>
<br/>
<td>
<input type="checkbox" name="" id="" value="" />(A)名称( Name )<br>
<input type="checkbox" name="" id="" value="" />(B)属性( Attribute )<br>
<input type="checkbox" name="" id="" value="" />(C)操作( OPration )<br>
<input type="checkbox" name="" id="" value="" />(D)方法( Function )<br>
</td>
</tr>
<h3>四、判断题(每空10分,共20分)</h3>
<tr>
<td>1.用例图只是用于和客户交流和共同的,用于确定需求。</td>
<input type="radio" name="t1" id="" value="" />true
<input type="radio" name="t1" id="" value="" />false
</tr>
<h3>五、简答题(每空10分,共20分)</h3>
<tr>
<td>1.简述什么是模型以及模型的表现形式?</td>
<td><textarea rows="" cols=""></textarea></td>
</tr>
<br/>
<br/>
<!-- <button type="button">计算成绩</button> -->
<tr>
<td>
<input type="submit" name="" id="" value="计算成绩" />
</td>
</tr>
</body>
</html>
2、完成如下效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="">
<tr>
<th rowspan="2">缴费项目</th><th rowspan="2">社保基数</th>
<th colspan="2">个人缴纳</th><th colspan="2">企业缴纳</th>
</tr>
<tr>
<th>缴纳比例</th><th>缴纳金额</th><th>缴纳比例</th><th>缴纳金额</th>
</tr>
<tr>
<td>养老保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
</tr>
<tr>
<td>失业保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
</tr>
<tr>
<td>工伤保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
</tr>
<tr>
<td>生育保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
</tr>
<tr>
<td>医疗保险</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
</tr>
<tr>
<td>公积金</td><td>2561</td><td>8%</td><td>206</td><td>10%</td><td>402</td>
</tr>
<tr>
<td></td><td></td><td>个人共缴纳</td><td>527.53</td><td>企业共缴纳</td><td>527.53</td>
</tr>
</table>
</body>
</html>