购物网页html代码（用HTML+CSS和jq写简易购物车代码）

2026-03-05 20:44:30 ：1

本篇文章给大家谈谈购物网页html代码，以及用HTML+CSS和jq写简易购物车代码对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

本文目录

用HTML+CSS和jq写简易购物车代码
有没有大神发一个用HTML5编写的购物网站系统
怎么用html做购物网站
使用HTML完成下图显示页面，求大神给代码
比较购物网站中比较代码如何实现
求html购物车代码，，效果如图显示
html+css+jquery购物网站信息怎样通过发送按钮发送到网站后台
谁知道：广告HTML 代码是什么
如何用html css javascript php制作购物车
用html做一个购物车，能实现简单的产品数量和价格的加减就行最后能计算出提交物品价格的总和

用HTML+CSS和jq写简易购物车代码

以下是一个简易购物车的HTML+CSS和jQuery代码示例：
HTML部分：
《div class="cart-container"》
《h3》购物车《/h3》
《ul class="cart-items"》
《li class="cart-item"》
《img src="item1.jpg" alt="商品1"》
《span class="item-name"》商品1《/span》
《span class="item-price"》100元《/span》
《input type="number" class="item-quantity" value="1"》
《button class="remove-btn"》删除《/button》
《/li》
《li class="cart-item"》
《img src="item2.jpg" alt="商品2"》
《span class="item-name"》商品2《/span》
《span class="item-price"》200元《/span》
《input type="number" class="item-quantity" value="1"》
《button class="remove-btn"》删除《/button》
《/li》
《/ul》
《p class="total-price"》总价：《span》300元《/span》《/p》
《/div》
CSS部分：
.cart-container {
width: 400px;
border: 1px solid #ccc;
padding: 20px;
}
.cart-items {
list-style-type: none;
padding: 0;
margin: 0;
}
.cart-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.cart-item img {
width: 80px;
height: 80px;
margin-right: 10px;
}
.item-name, .item-price {
flex: 1;
}
.item-quantity {
width: 50px;
margin-right: 10px;
}
.remove-btn {
background-color: #ccc;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.total-price {
margin-top: 20px;
text-align: right;
}
jQuery部分：
$(document).ready(function() {
// 计算初始总价
updateTotalPrice();
// 删除商品按钮点击事件
$(’.remove-btn’).click(function() {
$(this).parent().remove();
updateTotalPrice();
});
// 商品数量输入框变化事件
$(’.item-quantity’).change(function() {
updateTotalPrice();
});
// 更新总价函数
function updateTotalPrice() {
var total = 0;
$(’.cart-item’).each(function() {
var price = parseInt($(this).find(’.item-price’).text());
var quantity = parseInt($(this).find(’.item-quantity’).val());
total += price * quantity;
});
$(’.total-price span’).text(total + ’元’);
}
});
该示例中，使用了HTML和CSS来构建购物车的界面，使用jQuery来实现购物车的逻辑。购物车中的每个商品都包含了商品名称、商品图片、商品价格、商品数量和删除按钮，当点击删除按钮时，对应的商品会从购物车中删除并重新计算总价；当商品数量变化时，总价也会自动更新。

有没有大神发一个用HTML5编写的购物网站系统

1.器里边推荐sublime，这是通过自己的简单配置，能够顺手使用的一款，界面炫酷，主题漂亮，体验给力。

2.另外vim,emacs,textmate入门曲线比较陡，不建议使用。

3.另外简单点的：notepad,editplus，选那个区别不大。notepad有黑色主题，editplus启动还是那么快。

4.webstorm,phpstorm,intellijdea，随便选一款，都差不多。分别支持不同的后台语言而已。

而web前端开发乃及其它的相关开发，推荐sublimetext,webstorm(jetbrains公司系列产品)这两个的原因在于，有个技术叫emmet,Emmet，而这两个对他的支持是：

sublimetext是所有器里边支持emmet比较好的的唯一一款。

webstorm是所有器里边唯一内置emmet的一款，并且将emmet的精神往前推动的一款。

然后还是那句话：编程的核心是代码，代码的灵魂是算法或数据结构，所以你懂得，随便选一款得了。

phpstorm，idea包括所有webstorm的功能。只是phpstorm是针对phper的，idea是针对javaer，webstorm针对前端er。

怎么用html做购物网站

只用eclipse就可以了，用jsp可以写一个js监听事件，购买肯定是一个按钮，在上面添加onclick事件，绑定一个函数，显示购物车这个div或者页面(放在当前页面上面)，结算时就是拿商品的价格相加显示出来，比如商品对象放在一个链表里，取出购物车里的，价格相加。

使用HTML完成下图显示页面，求大神给代码

《!DOCTYPE》
《html lang="en"》
《head》
《meta charset="UTF-8"》
《title》Document《/title》
《style type="text/css"》
#box{
width: 600px;
height: auto;
}
h1{
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
background: blue;
font-size: 50px;
margin: 0;
color: white;
}
p{
background: #9f9285;
font-family: "Microsoft YaHei";
font-size: 16px;
line-height: 30px;
text-indent: 2em;
text-align: justify;
border-top: 6px solid orange;
margin: 0;
padding: 10px;
}
span{
font-size: 20px;
color: blue;
text-decoration: underline;
}
《/style》
《/head》
《body》
《div id="box"》
《h1》网络鞋城经营模式简介《/h1》
《p》《span》互联网《/span》提供了无限延伸的展示空间，可以容纳无限的商品及内容。在网络鞋城，消费者无论是购物还是查询，都不受时间和地域的任何限制。在消费者享受《span》“鼠标轻轻一点，精品尽在眼前”《/span》的背后，是网络鞋城耗时5年修建的物流体系，全国库房面积达到5万平方米，提供货到付款服务的城市超过《span》350《/span》个，并为联营上午开通货到付款服务《/p》
《/div》
《/body》
《/html》

请采纳，谢谢

比较购物网站中比较代码如何实现

1.建立一个compare.html内含js脚本，以实现与php程序通信，代码如下：（附：手机对比脚本一例)
《html》
《head》
《title》手机对比功能《/title》
《script language="JavaScript"》
lastScrollY = 0;
function heartBeat() {
diffY = document.body.scrollTop;
percent =.1*(diffY-lastScrollY);
if(percent》0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
document.all.float.style.pixelTop+= percent;
lastScrollY = lastScrollY+percent;
}
window.setInterval("heartBeat()",1);
《/script》

《script》
var strCookies = document.cookie;
// document.write (strCookies);
var cookieName = ’JsItem’ + "=";
var cookieName2 = ’Jscount’ + "=";
var valueBegin, valueEnd, value;
valueBegin = strCookies.indexOf(cookieName);
// document.write (valueBegin);
var item=;
var item2=;
if(valueBegin == -1){
var itemtotal=0;
}else{
valueEnd = strCookies.indexOf(cookieName2);
value = strCookies.substring(valueBegin+cookieName.length,valueEnd-2);
// document.write (value);
var item = value.split(’,’);
// document.write (value.length);
value = strCookies.substr(valueEnd + cookieName2.length,1);
// document.write (value);
var itemtotal= value;
}

function redraw() {
floatstr = "《table height=100% width=100% bgcolor=#000000》《form method=’get’ action=’/compare2005.php’ name=’compare’ target=’_blank’》《tr bgcolor=#cc9900》《td》《center》《input type=’button’ value=’开始对比’ name=’submits’ onclick=’comparecheck();’ style=’cursor:hand;’》《br》";
i=1;
for(var m=0;m《item.length;m++) {
if(item){
pid = m;
names = item;
ft = "《font color=red size=1》|《/font》《br》《input type=button name=pid"+i+" value=’"+names+"’ onclick=\"del(’"+pid+"’)\" style=’border:1px solid;border-color:red ;background-color:white;height:24;width:120;cursor:hand;color:’black’;’》《input type=’hidden’ name=’pid"+i+"’’ value=’"+pid+"’》《br》";
floatstr = floatstr+ft;
i++;
}
}
floatstr = floatstr + "《/center》《/td》《/tr》《/form》《/table》";
floater.innerHTML = floatstr;
}
function comparecheck() {
mark=0
if(document.compare.pid1) mark++;
if(document.compare.pid2) mark++;
if(document.compare.pid3) mark++;
if(document.compare.pid4) mark++;
if(document.compare.pid5) mark++;
if(mark《2) {
alert (’请至少选择两款机型进行对比!’);
}else {
document.compare.submit();
}
}
function add(pid,names) {
if(!item) {
if(itemtotal 《 5) {
itemtotal++;
item = names;
redraw();
}else {
alert(’抱歉，最多只能有5款机型进行对比!’);
}
}else {
alert(’您已经选择了’+names+’!’);
}
}
function del(pid) {
item2=;
for(key in item) {
if(key!=pid) item2;
}
item = item2;
itemtotal=itemtotal-1;
redraw();
}
《/script》
《script language="JavaScript"》
function SaveItem(){
if(item.length 》 0){
var strcookie = ’JsItem’ + "=" + item ;
document.cookie = strcookie;
var strcookie1 = ’Jscount’ + "=" + itemtotal;
document.cookie = strcookie1;
}
}
《/script》
《meta http-equiv="Pragma" content="no-cache" 》
《meta http-equiv="Content-Type" content="text/html; charset=gb2312" 》
《style type="text/css"》
《!--
body{font-size=9pt}
TH{FONT-SIZE: 9pt}
TD{ FONT-SIZE: 9pt}
#floater {
position: absolute;
right: 0px;
top: 600;
width: 125;
visibility: visible;
z-index: 10;
left: 5px;
}
--》
《/style》
《/head》
《body onLoad="redraw();" onUnload="SaveItem();"》
《script LANGUAGE="JavaScript"》
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
《!-- STALKER CODE --》
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent 》 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent 》 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}
}
《!-- /STALKER CODE --》
《!-- DRAG DROP CODE --》
function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x 》 stalkerx && x 《 (stalkerx+stalkerwidth)) && (y 》 stalkery && y 《 (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop 《 document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft 《 document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft 》 document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop 》 document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left 《 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top 《 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) 》= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) 》= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}
《!-- DRAG DROP CODE --》
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
《/script》
《div id=’floater’ style=’position:absolute;right:1px;top:51px;filter:alpha(opacity=70);z-index:99;width:140;’ align=center》
《form method=’get’ action=’/compare2005.php’ name=’compare’ target=’_blank’》
《table height=100% width=100% bgcolor=#000000》《tr bgcolor=#cc9900》《td》《center》《input type=’button’ value=’开始对比’ name=’submits’ onclick=’comparecheck();’ style=’cursor:hand;’》《br》
《/td》《/tr》《/form》《/table》
《/div》
《table width="768" border="1" align="center" cellpadding="2" cellspacing="0" bordercolorlight="#cccccc" bordercolordark="#ffffff"》
《tbody》
《tr align="center" bgcolor="#E0E0E0"》
《td》手机型号《/td》
《td》网络类型《/td》
《td》上市日期《/td》
《td》网店价格《/td》
《td》手机论坛《/td》
《td》对比功能《/td》
《/tr》
《tr align="center"》
《td height="25"》《a href="/product/1859.html" target="_blank"》三星 SGH-X138《/a》《/td》
《td》GSM900/1800MHz/GPRS《/td》《td》05年05月《/td》
《td》《a href="/price2005.php?cid=7&pid=1859" target="_blank"》《font color=red》￥1350《/font》《/a》《/td》《td》《a href="http://bbs.imobile.com.cn/forumdisplay.php?fid=2859" target="_blank"》手机论坛《/a》《/td》
《td》《input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" onclick="add(’1859’,’ SGH-X138’);" type=button value=对比篮 /》《/td》
《/tr》
《/tr》《tr align="center"》《td height="25"》《a href="/product/1817.html" target="_blank"》三星 SCH-M309《/a》《/td》《td》CDMA 1X《/td》《td》05年03月《/td》《td》《a href="/price2005.php?cid=7&pid=1817" target="_blank"》《font color=red》￥4800 - ￥6875《/font》《/a》《/td》《td》《a href="http://bbs.imobile.com.cn/forumdisplay.php?fid=2817" target="_blank"》手机论坛《/a》《/td》《td》《input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" onclick="add(’1817’,’ SCH-M309’);" type=button value=对比篮 /》《/td》《/tr》《tr align="center"》《td height="25"》《a href="/product/1821.html" target="_blank"》三星 SGH-E618《/a》《/td》《td》GSM900/1800/1900MHz/GPRS《/td》《td》05年02月《/td》《td》《a href="/price2005.php?cid=7&pid=1821" target="_blank"》《font color=red》￥2920 - ￥3980《/font》《/a》《/td》《td》《a href="http://bbs.imobile.com.cn/forumdisplay.php?fid=2821" target="_blank"》手机论坛《/a》《/td》《td》《input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" onclick="add(’1821’,’ SGH-E618’);" type=button value=对比篮 /》《/td》《/tr》《tr align="center"》《td height="25"》《a href="/product/1735.html" target="_blank"》三星 SCH-M339《/a》《/td》《td》CDMA 1X《/td》《td》05年02月《/td》《td》《a href="/price2005.php?cid=7&pid=1735" target="_blank"》《font color=red》￥7399 - ￥8660《/font》《/a》《/td》《td》《a href="http://bbs.imobile.com.cn/forumdisplay.php?fid=2735" target="_blank"》手机论坛《/a》《/td》《td》《input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" onclick="add(’1735’,’ SCH-M339’);" type=button value=对比篮》《/td》《/tr》
《/table》
《/body》
《/html》
2.建立一个MySQL的数据库及对比商品的数据表，使用php与js通信得到的参数为准，从MySQL取库，显示到页面即可！
3.说简单其实很简单，思路就是这样！你可以看看《手机之家》的对比栏功能，就大概知道一些了！
记得给分啊！

求html购物车代码，，效果如图显示

《html xmlns="http://www.w3.org/1999/xhtml"》
《head》
《meta http-equiv="Content-Type" content="text/html; charset=gb2312" /》
《title》修改订单《/title》
《style type="text/css"》
body{
font-size:13px;
line-height:25px;
}
table{
border-top: 1px solid #333;
border-left: 1px solid #333;
width:400px;
}
td{
border-right: 1px solid #333;
border-bottom: 1px solid #333;
text-align:center;
}
.title{

font-weight:bold;
background-color: #cccccc;
}
input text{
width:100px;
}

《/style》
《script type="text/javascript"》
function addRow(){
//行的长度
var rowlength=document.getElementById("order").rows.length;
//得到整个表格对象
var order = document.getElementById("order").insertRow(rowlength-1);
order.id=rowlength-1;
//插入列
var cel1=order.insertCell(0).innerHTML="游戏光盘";
var cel2=order.insertCell(1).innerHTML="34";
var cel3=order.insertCell(2).innerHTML="¥58.40";
var cel4=order.insertCell(3).innerHTML="《input type=\"button\"value=\"删除\" onclick=\"delRow(’"+(rowlength-1)+"’)\"/》"+ "《input type=\"button\"value=\"修改\" onclick=\"editRow(’"+(rowlength-1)+"’)\"/》"
}
function delRow(qwe){
var ewq=document.getElementById(qwe).rowIndex;
document.getElementById("order").deleteRow(ewq);
}
function editRow(rowID){
var row=document.getElementById(rowID);
var cel=row.cells;
var text=cel.innerHTML;
cel.innerHTML="《input type=’text’ value=’"+text+"’ style=’width:40px;’》"
cel.lastChild.value="确定";
cel.lastChild.setAttribute("onclick","update(’"+rowID+"’)");
}

function update(qwe){
var row=document.getElementById(qwe);
var cel=row.cells;
var text=cel.lastChild.value;
cel.innerHTML=text;
cel.lastChild.value="修改";
cel.lastChild.setAttribute("onclick","editRow(’"+qwe+"’)");
}
/*

function add(){
var a = document.getElementById("order").rows.length;
var b = document.getElementById("order").insertRow(a-1);
var one1 = b.insertCell(0).innerHTML="123";
}
*/
《/script》
《/head》
《body》
《table border="0" cellspacing="0" cellpadding="0" id="order"》
《tr class="title"》
   《td》商品名称《/td》
   《td》数量《/td》
   《td》价格《/td》
   《td》操作《/td》
《/tr》
《tr id="1"》
   《td》防滑真皮休闲鞋《/td》
   《td》12《/td》
   《td》¥568.50《/td》
   《td》《input name="rowdel" type="button" value="删除" onclick=’delRow("1")’ /》
   《input id="edit1" type="button" value="修改" onclick=’editRow("1")’ /》《/td》
《/tr》
《tr》
   《td colspan="4" style="height:30px;"》
   《input name="addOrder" type="button" value="增加订单" onclick="addRow()" /》《/td》
《/tr》
《/table》
《/body》
《/html》

这个是我原来上学的时候练习的代码，练习的是基础的jsDOM操作，不过建议以后用Jquery 比较方便有什么不懂得可以问我

html+css+jquery购物网站信息怎样通过发送按钮发送到网站后台

要将购物网站信息通过发送按钮发送到网站后台，可以使用AJAX（Asynchronous JavaScript and XML）技术。AJAX能够在不刷新整个页面的情况下，向后台发送请求并获取响应。

以下是大致的步骤：

在HTML中添加一个表单，包含需要提交的信息。
在JavaScript中编写一个事件处理程序，当用户点击发送按钮时，使用AJAX向后台发送表单数据。
在后台，使用服务器端脚本（如PHP）来接收提交的表单数据，并处理数据。
根据需要，可以在后台将处理后的数据保存到数据库中。

以下是一个示例代码，演示如何使用jQuery和AJAX将表单数据发送到后台：

HTML代码：

《form id="myForm"》《label for="name"》姓名：《/label》《input type="text" id="name" name="name"》《br》《br》《label for="email"》电子邮件：《/label》《input type="email" id="email" name="email"》《br》《br》《label for="message"》留言：《/label》《textarea id="message" name="message"》《/textarea》《br》《br》《input type="submit" value="发送"》《/form

JavaScript代码：

$(document).ready(function() { $(’#myForm’).submit(function(event) { // 防止表单默认的提交行为 event.preventDefault(); // 获取表单数据 var formData = $(this).serialize(); // 发送AJAX请求 $.ajax({ type: ’POST’, url: ’backend.php’, // 替换为后台处理脚本的URL data: formData, success: function(response) { // 在成功接收响应时执行的代码 console.log(response); }, error: function(jqXHR, textStatus, errorThrown) { // 在请求失败时执行的代码 console.log(textStatus, errorThrown); } }); });});

在上面的示例代码中，我们使用jQuery来获取表单数据并使用AJAX向后台发送请求。在成功接收响应时，我们将响应输出到控制台，以供调试使用。在请求失败时，我们也将错误信息输出到控制台。

请注意，上述代码中的URL应该替换为实际的后台处理脚本的URL。此外，还应该在后台对提交的数据进行验证和清理，以避免安全问题。

谁知道：广告HTML 代码是什么

如果你正在学习网页制作，就一定会跟HTML打交道。虽然有很多工具可以简化操作，避开复杂的网页代码，但是想要成为一名真正的网页设计师，学好HTML、看懂网页代码才是迈向成功的第一步。
HTML，中文译为超文本标记语言。简单理解为某些字句加上标志的语言，从而实现预期的特定效果。网页正是由这种HTML语言所编写出来的。作为一套标记语言，基本上只要明白各种标记的用法就算学会了HTML。
　　HTML的语法格式分为嵌套与非嵌套两类，嵌套格式为＜标记＞...＜/标记＞，非嵌套只为＜标记＞。此外，根据标记的不同，有的标记附带有属性参数，则表示为＜标记属性="参数值"＞，根据个人需要，可添加或去掉相应的属性标记。
　　一、基本框架
　　如同人一样，网页也包括了“头部”和“身体”，
　　＜head＞标记内包含着诸如网页标题、语言编码、网页描述等基本信息，而平时我们真正见到的网页内容均放在＜body＞标记内。现在先介绍一下＜head＞里的基本信息。
　　网页标题(标记格式为＜title＞＜/title＞)
　　创建网页标题文字：＜title＞标题＜/title＞ //此处书写的文字会显示在IE的标题栏上。
　　网页文档信息(标记格式为＜meta＞)
　　描述网页内容类型：＜meta

如何用html css javascript php制作购物车

《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
《title》《/title》
《link rel="stylesheet" href="---.css"》
《script src="---.js"》《/script》
《/head》
《body》
《div class="container"》
《div class="shop"》
《div class="header"》
《input type="checkbox" class="shop-checkbox"》
《span class="shop-icon"》《/span》
《span class="shop-name"》---《/span》
《span class="wangwang-icon"》《/span》
《/div》
《div class="items"》
《div class="item"》
《div》《input class="item-checkbox" type="checkbox" name="" id=""》《/div》
《div》
《span class="item-img"》《/span》
《/div》
《div class="item-name"》
《div》----《/div》
《div class="promotion-icons"》《span》《/span》《span》《/span》《span》《/span》《/div》
《/div》
《div class="sku"》---《/div》
《div class="price"》
《div class="price-1"》---《/div》
《div class="price-2" data-price="---"》----《/div》
《/div》
《div class="num-control"》
《span class="num-minus"》-《/span》
《input class="num" type="text" value="1"》
《span class="num-plus"》+《/span》
《/div》
《div class="item-price-total"》
《span》￥50.13《/span》
《/div》
《div class="operation"》
《div》---《/div》
《div》---《/div》
《/div》
《/div》
《/div》
《/div》
《div class="shop"》
《div class="header"》
《input type="checkbox" class="shop-checkbox"》
《span class="shop-icon"》《/span》
《span class="shop-name"》---《/span》
《span class="wangwang-icon"》《/span》
《/div》
《div class="items"》
《div class="item"》
《div》《input class="item-checkbox" type="checkbox" name="" id=""》《/div》
《div》
《span class="item-img"》《/span》
《/div》
《div class="item-name"》
《div》----《/div》
《div class="promotion-icons"》《span》《/span》《span》《/span》《span》《/span》《/div》
《/div》
《div class="sku"》---《/div》
《div class="price"》
《div class="price-1"》---《/div》
《div class="price-2" data-price="---"》---《/div》
《/div》
《div class="num-control"》
《span class="num-minus"》-《/span》
《input class="num" type="text" value="1"》
《span class="num-plus"》+《/span》
《/div》
《div class="item-price-total"》
《span》￥9.90《/span》
《/div》
《div class="operation"》
《div》移入收藏夹《/div》
《div》删除《/div》
《/div》
《/div》
《div class="item"》
《div》《input class="item-checkbox" type="checkbox" name="" id=""》《/div》
《div》
《span class="item-img"》《/span》
《/div》
《div class="item-name"》
《div》---《/div》
《div class="promotion-icons"》《span》《/span》《span》《/span》《span》《/span》《/div》
《/div》
《div class="sku"》---《/div》
《div class="price"》
《div class="price-1"》---《/div》
《div class="price-2" data-price="---"》---《/div》
《/div》
《div class="num-control"》
《span class="num-minus"》-《/span》
《input class="num" type="text" value="1"》
《span class="num-plus"》+《/span》
《/div》
《div class="item-price-total"》
《span》￥19.9《/span》
《/div》
《div class="operation"》
《div》移入收藏夹《/div》
《div》删除《/div》
《/div》
《/div》
《/div》
《/body》
《/html》
.container{
width: 1000px;
margin-left: auto;
margin-right: auto;
color: #444444;
}
.header{
margin: 8px;
}
.shop-icon, .wangwang-icon, .promotion-icons span{
display:inline-block;
width: 15px;
height: 15px;
background-color: rgb(117,192,241);
}
.promotion-icons span{
margin-right: 4px;
}
.items{
border: 1px solid #ebe9e9;
}
.item{
display: flex;
margin: 8px;
}
.item-img{
width:100px;
height: 100px;
display: inline-block;
background-color: aquamarine;
margin-left: 6px;
margin-right: 6px;
}
.item-name
{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sku, .price,.item-price-total,.operation,.num-control{
margin-left: 18px;
}
.num{
width: 18px;
height: 15px;
}
.num-control{
display: flex;
align-items: baseline;
}
.num-minus,.num-plus{
width: 18px;
height: 22px;
display: inline-block;
background-color: #ebe9e9;
}
.checkout{
display: flex;
justify-content: space-between;
}
.shop{
margin-bottom: 20px;
margin-top: 30px;
}
.goods,.freight,.checkout-button{
margin-left: 15px;
}
.price-1{
text-decoration: line-through;
color: gray;
}
.check-num ,.total-price{
font-size: large;
color: red;
margin-left: 3px;
margin-right: 3px;
}
.checkout-button{
height: 30px;
width: 50px;
background-color: beige;
}
.checkout{
margin-top: 15px;
}
.item-name{
width: 25%;
}
.item-price-total{
width: 5%;
}
.sku{
width: 20%;
}
function updatePrice(){
let items = document.querySelectorAll(’.item’);
let totalNum = 0;
let totalPrice = 0;
items.forEach(function(item){
if(item.querySelector(’.item-checkbox’).checked){
let num = item.querySelector(’.num’).value;
totalNum = totalNum + parseInt(num);
let price = item.querySelector(’.price-2’).getAttribute(’data-price’);
totalPrice = totalPrice + parseFloat(price) * num;
}
});
document.querySelector(’.check-num’).innerText= totalNum;
document.querySelector(’.total-price’).innerText = totalPrice;
}
window.onload=function(){
let itemCheckboxes = document.querySelectorAll(’.item-checkbox’);
itemCheckboxes.forEach(function(itemCheckbox){
itemCheckbox.onchange = function(){
updatePrice();
}
});
let minuses = document.querySelectorAll(’.num-minus’);
minuses.forEach(function(minus){
minus.onclick = function(event){
let num=minus.parentElement.querySelector(’.num’).value;
if(parseInt(num)》1)
{
minus.parentElement.querySelector(’.num’).value=parseInt(num)-1;
updatePrice();
}
};
});
let pluses = document.querySelectorAll(’.num-plus’);
pluses.forEach(function(plus){
plus.onclick = function(event){
let num=plus.parentElement.querySelector(’.num’).value;
plus.parentElement.querySelector(’.num’).value=parseInt(num)+1;
updatePrice();
}
});
}

用html做一个购物车，能实现简单的产品数量和价格的加减就行最后能计算出提交物品价格的总和

html中的购物车的增减不能直接传送到后台，可以通过ajax，在js中发送ajax

纯前端的话可以参考下面的

《!DOCTYPE html》
《html lang="en"》
《head》
《meta charset="UTF-8"》
《title》cart《/title》
《style type="text/css"》
    body,p,a,input{
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.container{
    width: 100%;
}
.main{
    width: 1000px;
    height: 500px;
    margin:100px auto;
}
.main .cart-container table{
    width: 100%;
}
.main .cart-container table tr{
    text-align: center;
}
.main .cart-container table tr:hover{
    background: rgba(128, 128, 128, 0.2);
}
.main .cart-container table .table-header{
    height: 30px;
    background: #d9d9d9;
    font-size: 1.2em;
}
.main .cart-container table .table-header td:first-child{
    border-left: solid 4px red;
    box-sizing: border-box;
}
.main .cart-container table tr td:nth-child(1),
.main .cart-container table tr td:nth-child(2){
    text-align: left;
}
.main .cart-container table tr td:nth-child(2){
    width: 52%;
}
.main .cart-container table tr td:nth-child(3){
    width: 12%;
}
.main .cart-container table tr td:nth-child(4){
    width: 12%;
}
.main .cart-container table tr td:nth-child(5){
    width: 12%;
}
.main .cart-container table tr td:last-child{
    width: 10%;
}
.cart-good{
    height: 60px;
}
.cart-good img{
    float: left;
    margin: 10px;
    width: 60px;
}
.cart-good td p{
    margin: 10px 0px;
}
/*加、减按钮*/
.cart-good td input{
     width: 20px;
     height: 20px;
     background: #00f300;
     outline: none;
     border: none;
}
.cart-good td input:disabled{
    background: grey;
}
.cart-good td input:first-child{
   margin-right: -4px;
}
.cart-good td input:last-child{
    margin-left: -4px;
}
.cart-good td input{
    width: 30px;
    height: 20px;
    outline: none;
    border: none;
    text-align: center;
}
.table-footer{
    display: flex;
    justify-content: space-between;
    line-height: 40px;
}
.table-footer div{
    font-size: 1.2em;
}
.table-footer div button{
    background: red;
    width: 120px;
    height: 40px;
    color: white;
}
《/style》
《/head》
《body》
《div class="container"》
《header》《/header》
《section class="main"》
《div class="cart-container"》
《table cellspacing="0"》
《tr class="table-header"》
《td》《input type="checkbox" id="chk_alla"》《/td》
《td》聚美优品发货《/td》
《td》聚美价《/td》
《td》数量《/td》
《td》小计《/td》
《td》操作《/td》
《/tr》
《!--《tr class="cart-good"》--》
《!--《td》《input type="checkbox" id="001"》《/td》--》
《!--《td》--》
《!--《img src="https://p2.jmstatic.com/product/001/293/1293263_std/1293263_60_60.jpg" alt=""》--》
《!--《p》PITTA MASK 口罩3枚入《/p》--》
《!--《p》型号：新版防晒款  容量：3枚入《/p》--》
《!--《/td》--》
《!--《td》89.00《/td》--》
《!--《td》--》
《!--《input type="button" value="-"》--》
《!--《input type="text" value="1"》--》
《!--《input type="button" value="+"》--》
《!--《/td》--》
《!--《td》89.00《/td》--》
《!--《td》《a href="#"》删除《/a》《/td》--》
《!--《/tr》--》
《/table》
《div class="table-footer"》
《div》
《input type="checkbox" id="chk_allb"》《label for="chk_allb"》全选《/label》
《span style="margin-left: 20px"》继续购物 | 清空选中商品《/span》
《/div》
《div》
共《span id="good_count"》5《/span》件商品    商品应付总额：《span id="goods_total"》¥229.00《/span》
《button class="btn_menu"》去结算《/button》
《/div》
《/div》
《/div》
《/section》
《/div》
《script》
(function () {
    var skin_products= [
        {
            "id":"002",
            "title": "Estee Lauder 多效智妍精华霜15ml",
            "img_url": "http://p0.jmstatic.com/product/003/565/3565880_std/3565880_350_350.jpg",
            "price": 249.0,
            "number":6,
            "acount": "520",
            "ischecked":true
        },
        {
            "id":"004",
            "title": "EsteeLauder 肌透修护洁面乳30ml",
            "img_url": "http://p4.jmstatic.com/product/003/155/3155764_std/3155764_350_350.jpg",
            "price": 49.9,
            "number":1,
            "acount": "5911",
            "ischecked":false
        },
        {
            "id":"008",
            "title": "雅诗兰黛无痕持妆粉底液",
            "img_url": "http://p3.jmstatic.com/product/003/662/3662318_std/3662318_350_350.jpg",
            "price": 69.9,
            "number":2,
            "acount": "3972",
            "ischecked":true
        },
        {
            "id":"0012",
            "title": "Estee Lauder 肌初赋活原生液30ml",
            "img_url": "http://p4.jmstatic.com/product/003/565/3565914_std/3565914_350_350.jpg",
            "price": 159.0,
            "number":1,
            "acount": "2338"
        },
        {
            "id":"001",
            "title": "雅诗兰黛无痕持妆粉底液30ml",
            "img_url": "http://p2.jmstatic.com/product/001/648/1648502_std/1648502_350_350.jpg",
            "price": 298.0,
            "number":4,
            "acount": "5071",
            "ischecked":false
        },
        {
            "id":"009",
            "title": "雅诗兰黛眼部精华霜15ml",
            "img_url": "http://p1.jmstatic.com/product/001/049/1049746_std/1049746_350_350.jpg",
            "price": 399.0,
            "number":1,
            "acount": "4022",
            "ischecked":false
        }
    ]
//    添加商品
    function load() {
        var tbody=document.querySelector(’.cart-container table tbody’);
        for(let good of skin_products){
            tbody.innerHTML+=` 《tr class="cart-good" id="${good.id}"》
                            《td》《input type="checkbox" class="good-check" ${good.ischecked?"checked":’’}》《/td》
                            《td》
                                《img src="${good.img_url}" alt=""》
                                《p》PITTA MASK 口罩3枚入《/p》
                                《p》型号：新版防晒款  容量：3枚入《/p》
                            《/td》
                            《td》${good.price}《/td》
                            《td》
                                《input type="button" value="-"  ${good.number《=1?"disabled":’’}》
                                《input type="text" value="${good.number}"》
                                《input type="button" value="+"》
                            《/td》
                            《td》${good.price*good.number}《/td》
                            《td》《a href="#"》删除《/a》《/td》
                        《/tr》`
        }
        totalAcount();
    }
    load();
//    end all..........
    // 1. 为table注册单击事件
    var table01=document.querySelector(’.cart-container table’);
    table01.onclick=function (event) {
        var node=event.target
        if(node.getAttribute(’type’)==’button’){
            // alert(event.target.value);
            changeNumber(event);
            subtotal(event);
            checkedRow(event);
            checkedAllRows();
        }else if(node.className==’good-check’){
            checkedAllRows();
        }else if(node.id==’chk_alla’){
            var f=event.target.checked;
            var chks=document.querySelectorAll(’.good-check’);
            for(var ck of chks){
                ck.checked=f;
            }
            for(var good of skin_products){
                good.ischecked=f;
            }
        }else if(node.nodeName.toLowerCase()==’a’){
            var tr=event.target.parentNode.parentNode;
            for(var i=0;i《skin_products.length;i++){
                if(skin_products.id==tr.id){
                    skin_products.splice(i,1);
                    console.log(skin_products);
                }
            }
            tr.parentNode.removeChild(tr);
        }
        totalAcount();
    };
    //单击增加或减少按钮的方法
    function changeNumber(event) {
        var node=event && event.target;
        var v=0;
        if(node.value && node.value==’+’){
            // node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;
            node.previousElementSibling.value++;
            v=node.previousElementSibling.value;
            node.previousElementSibling.previousElementSibling.disabled=false;
        }else{
            // if(node.value && node.value==’+’)
            if(node.nextElementSibling.value》1){
                node.nextElementSibling.value--;
                v=node.nextElementSibling.value;
                if(v==1){
                    node.disabled=true;
                }
            }
        }
    //    存储商品数量
        var id=node.parentNode.parentNode.id;
        for(var good of skin_products){
            if(id==good.id){
                good.number=v;
            }
        }
    }

//    每个商品小计的方法

    function subtotal(event) {
        var node=event && event.target;
        // var id=node.parentNode.parentNode.id;
        // for(var g of skin_products){
        //     if(g.id==id){
        //         alert(g.price);
        //     }
        // }
        // var price=；
        var price=node.parentNode.previousElementSibling.innerText;
        var num=node.parentNode.children.value;
        node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);
    }
//    检验该商品是否选中
    function checkedRow(event) {
        event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;
        // event.target.parentNode.parentNode.cells.firstElementChild.checked=true;
        // var tbody=event.target.parentNode.parentNode.parentNode;
        // event.target.parentNode.parentNode.parentNode.rows.firstElementChild.checked=true;
    }
//   检查是否全选
    function checkedAllRows() {
        var chks=document.querySelectorAll(’.good-check’);
        var flag=true;
        for(var ck of chks){
            if(!ck.checked){
                flag=false;
                break;
            }
        }
        document.querySelector(’#chk_alla’).checked=flag;
    }
//    统计商品总量和总价格
    function totalAcount() {
        var total=0;
        var total_price=0;
        var chks=document.querySelectorAll(’.good-check’);
        for(var ck of chks){
            if(ck.checked){
                id=ck.parentNode.parentNode.id;
                for(var good of skin_products){
                    if(id==good.id){
                        total+=~~good.number;
                        total_price=total_price+(good.number*good.price);
                        good.ischecked=true;
                    }
                }
            }
        }
        document.querySelector(’#good_count’).innerText=total;
        document.querySelector(’#goods_total’).innerText=total_price;
    }
})();
《/script》
《/body》
《/html》