语法手册，入门学习可以参看w3school:https://www.w3school.com.cn/#
参考菜鸟教程:https://www.runoob.com/
HTMl的几个demo
用div布局之星巴克
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<!--link 单标签，主要的的属性，
rel:必需。定义当前文档与被链接文档之间的关系。
type:规定被链接文档的 MIME 类型。（下载文件的时候，有些浏览器解析不了的文件(与mime有关)就会被下载下来）
href:定义被链接文档的位置。（相对项目的地址）-->
<!--<link rel="shortcut icon" href="">-->
<meta charset="utf-8" />
<title>星巴克网站</title>
+ </head>
<body>
<div class="wrap">
<header class="top-header">
<img class="starbucks-logo" src="img/logo.png" />
<nav class="top-menu">
<ul>
<!--ol有序队列，序列的样式也可以设置(type=1,a,A,i，I等)
ul无序队列-->
<!--常用的样式：把块标签改成内连标签，常用于header的导航栏的菜单项-->
<li class="selected" ><a href="#" title="星巴克首页">首页</a></li>
<li><a href="#">咖啡与文化</a></li>
<li><a href="#">饮品与美食</a></li>
<li><a href="#">星巴克俱乐部</a></li>
<li><a href="form.html" title="在线订购" >在线订购</a></li>
</ul>
<!--<div class="clear"></div>-->
</nav>
</header>
<aside class="left-aside">
<section class="news">
<h3>星巴克饮品</h3>
<p>星享卡会员光顾星巴克时可累积星星，兑换好礼！ 每累积消费50元可获赠一颗星星。
星星越多，好礼越多哦！ 点击这里开启您的星享惊喜之旅！</p>
</section>
<section class="drinks">
<figure>
<img src="img/caffe-1.jpg" />
<figcaption>美式咖啡</figcaption>
</figure>
<figure class="figures-r">
<img src="img/caffe-2.jpg" />
<figcaption>拿铁</figcaption>
</figure>
<figure >
<img src="img/caffe-3.jpg" />
<figcaption>啤酒</figcaption>
</figure >
<figure class="figures-r">
<img src="img/caffe-4.jpg" />
<figcaption>冰激凌</figcaption>
</figure>
<figure>
<img src="img/caffe-2.jpg" />
<figcaption>美式咖啡</figcaption>
</figure>
<figure class="figures-r">
<img src="img/caffe-1.jpg" />
<figcaption>美式咖啡</figcaption>
</figure>
<figure>
<img src="img/caffe-1.jpg" />
<figcaption>美式咖啡</figcaption>
</figure>
<figure class="figures-r">
<img src="img/caffe-1.jpg" />
<figcaption>美式咖啡</figcaption>
</figure>
<figure>
<img src="img/caffe-1.jpg" />
<figcaption>美式咖啡</figcaption>
</figure>
<figure class="figures-r">
<img src="img/caffe-1.jpg" />
<figcaption>美式咖啡</figcaption>
</figure>
<div class="clear"></div>
</section>
</aside>
<main>
<article>
<header>
<h3>TweepSip 咖啡杯</h3>
<time datetime="2017-10-31">2017年10月31号</time>
</header>
<p>
大家好，我是星巴克咖啡的CEO。我们刚刚成功地开发了新的TweetSip咖啡杯。
这是一种创造性的新技术：喝一口咖啡，你在Twitter上的状态就会更新。
我刚刚做了一个视频来演示这个过程。
</p>
<figure>
<video controls width="520" height="294">
<source src="video/tweetsip.webm">
<source src="video/tweetsip.mp4">
</video>
<!--video视频标签，基本属性:controls控制键，width，height
source 资源标签，src：资源的地址-->
<footer>
<span>阅读量(2000)</span>
<span>评论(5)</span>
</footer>
</figure>
</article>
<article>
<header>
<h3>家庭咖啡作坊帮助孩子们上大学</h3>
<time datetime="2017-10-31">2017年10月31号</time>
</header>
<p>
坎得利亚•塔拉兹是哥斯达黎加的一所家庭合作社，
由哥斯达黎加最早成立的“微型作坊”发展而来， 其目的是为了控制其出产的咖啡豆品质。
</p>
<p>
他们获得了成功并最终得到了星巴克的垂青， 这不仅改善了桑切斯一家的生活质量，
而且他们现在已经有能力为让子女上大学，接受更好的教育。
</p>
<footer>
<span>阅读数（1294）</span>
<span>评论（20）</span>
</footer>
</article>
<article>
<header>
<h3>部落与商业文化的有机融合有助社区发展</h3>
<time datetime="2017-10-31">2017年10月31号</time>
</header>
<p>
</p>
<p>
2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方，
如今却已经成为国际知名的咖啡生产地，
因其出产的咖啡品质优异， 继而成为了星巴克的供应商。
</p>
<p>
在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会
</p>
<p>
该地出产的咖啡：<b>浓缩烘焙</b>，<b>祥龙咖啡豆</b>
</p>
<footer>
<span>阅读数（1294）</span>
<span>评论（20）</span>
</footer>
</article>
<article>
<header>
<h3>咖啡为这个新国家的种植户带来发展的希望</h3>
</header>
<p>
东帝汶，既是世界上最晚建立国家之一，亦是最贫穷的国家之一。
然而其出产独特咖啡为成千上万依靠单一经济作物生活的农户带来了新希望。
一个拥有17,000名成员的农户协作社正在和星巴克合作，
为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的医疗服务。
</p>
<p>
该地出产的咖啡： <b>TimorLorosa'e</b> <small>核心咖啡只在澳大利亚销售）</small>
</p>
<footer>
<span>阅读数（1294）</span>
<span>评论（20）</span>
</footer>
</header>
</main>
</div>
</body>
</html>
<!--总结：1.html 的标签从结构上分可以分为单标签(img.link)，双标签，从功能上分可以分为让块标签与内连标签(a,img,input,textarea，select，label)
3.src（图片，音频，视频）用于替换当前元素，href（链接，引用加载资源js或是css）用于在当前文档和引用资源-->
4. <!--video视频标签，基本属性:controls控制键，width，height
source 资源标签，src：资源的地址-->
5. <!--ol有序队列，序列的样式也可以设置(type=1,a,A,i，I等)
ul无序队列-->
<!--常用的样式：把块标签改成内连标签，常用于header的导航栏的菜单项-->
6．<!--link 单标签，主要的的属性，
rel:必需。定义当前文档与被链接文档之间的关系。
type:规定被链接文档的 MIME 类型。（下载文件的时候，有些浏览器解析不了的文件(与mime有关)就会被下载下来）
href:定义被链接文档的位置。（相对项目的地址）-->
<!--<link rel="shortcut icon" href="">-->
7.
<script type=”javaScript”></script>
<stype type=”html/css”></stype>
订单页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>在线订购</title>
</head>
<body>
<div class="wrap">
<header class="top-header">
<img class="starbucks-logo" src="img/logo.png" />
<nav class="top-menu">
<ul>
<li class="selected" ><a href="#" title="星巴克首页">首页</a></li>
<li><a href="#">咖啡与文化</a></li>
<!--块标签中可以有内连标签，也可以有块标签，，但是内联标签中不能有块标签-->
<li><a href="#">饮品与美食</a></li>
<li><a href="#">星巴克俱乐部</a></li>
<li><a href="form.html" title="在线订购" >在线订购</a></li>
</ul>
<!--<div class="clear"></div>-->
</nav>
</header>
<main class="form">
<h3>订购星巴克咖啡豆</h3>
<form action="success.html" method="post">
<div class="row">
<div class="cell"><label for="beans">你喜欢的咖啡豆品种</label></div>
<div class="cell">
<input type="text" id="beans" list="bean-list" />
<datalist>
<!-test中的设置默认值提供选择-->
<option value="首选咖啡">
<option value="肯雅咖啡">
<option value="危地马拉有机咖啡">
</datalist><!--下拉列表-->
</div>
</div>
<div class="row">
<div class="cell">类型</div>
<div class="cell">
<input type="radio" id="type1" name="type" value="1" checked>
<label for="type1">咖啡豆</label> <br /><!--常用于内联标签之间的换行-->
<!--type=radio与label常常一起用，传到后台时或是传到js代码中，name表示键，value表示值，label中的值只是用于用户看的-->
<input type="radio" id="type2" name="type" value="2" checked>
<label for="type2">咖啡粉</label>
<!--当点击<label for="radio">时，光标焦点会定位到id="cb_add_favorite"为的输入框上。这样方便用户操作！在与text一起用的时候效果可以看出来-->
</div>
<div class="row">
<div class="cell"><label for="bags">数量（袋）</label></div>
<div class="cell">
<input type="number" name="bags" min="1" max="10" />
</div><!--下拉选项-->
</div>
<div class="row">
<div class="cell">
<label for="date">希望送货日期</label>
</div>
<div class="cell">
<input type="date" name="date" id="date" /><!--当type=date是可以自由选择时间-->
</div>
</div>
<div class="row">
<div class="cell">附加服务</div>
<div class="cell">
<input type="checkbox" name="extrasl" id="extrasl" value="1>" />
<label for="extras1">礼品包装</label><!--如何并排的-->
<input type="checkbox" name="extras2" id="extras2" value="2>" />
<label for="extras1">商品目录</label>
</div>
</div>
<div class="row">
<div class="cell-header">邮寄地址</div>
<div class="cell">
</div>
</div>
<div class="row">
<div class="cell">
<label for="name">姓名</label>
</div>
<div class="cell">
<input type="text" id="name" name placeholder="请输入收货人姓名" /><!--如何在框中出现提示信息-->
</div>
</div>
<div class="row">
<div class="cell">
<label for="name">详细地址：</label>
</div>
<div class="cell">
<input type="text" id="name" name placeholder="请输入收货地址" />
</div>
</div>
<div class="row">
<div class="cell">
<label for="name">邮箱</label>
</div>
<div class="cell">
<input type="text" id="name" placeholder="请输入您的邮箱" />
</div>
</div>
<div class="row">
<div class="cell">
<label for="name">联系电话</label>
</div>
<div class="cell">
<input type="text" id="name" placeholder="请输入您的联系电话" />
</div>
<div class="row">
<div class="cell">
<label for="name">留言</label>
</div>
<div class="cell">
<!--class 的取值可以重复-->
<textarea id="comments" name="comments" maxlength="50"></textarea>
<!--长输入框-->
</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">
<input type="submit" value="现在订购" />
</div>
</div>
</div>
</form>
</main>
</div>
<footer class="page-footer">
@2015 Starbucks Corporation.All right reserbed.
</footer>
</body>
</html>总结：
1.input的类型有text(placeholder),textarea(maxlength),date,radio,number
2.类似这样得 最好用表格布局
3. 当点击<label for="radio">时，光标焦点会定位到id="cb_add_favorite"为的输入框上。这样方便用户操作！在与text一起用的时候效果可以看出来-->
4. type=radio与label常常一起用，传到后台时或是传到js代码中，name表示键，value表示值，label中的值只是用于用户看的
表格布局之黑马商城
<!DOCTYPE html>
<!--//它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令 上面的是HTML5的版本，其他版本要加dtd（文档约束）-->
<!--注意：不是标签，是一个指令，一定要写在文档的最前面，DOCTYPE 不区分大小写-->
<html lang="en">
<!--这是一个W3C的标准；
lang代表语言，en是英语；改成zh-cn指简体中文-->
<!--没什么实际的意义只是一种规范，告诉搜索引擎是中文站还是英文网站-->
<head>
<meta charset="UTF-8">
<!--编码格式 告诉给浏览器用什么方式来编译这页代码-->
<!--不写这个可能会乱码-->
<title>梁粉做的一个静态网页</title>
</head>
<body>
<table align="center" cellpadding="0px" cellspacing="0px" width="1300px">
<!--table常设置的属性align表格的居中，cellpadding单元格的空隙,cellspacing单元格之间的空隙，width宽度-->
<tr>
<td>
<table border="1px" width="100%">
<tr height="50px">
<td height="47px">
<img src="image/logo2.png " />
</td>
<td >
<img src="image/header.png " />
</td>
<!--<td width="33%">
<a href="http://baibu.com">登录</a>
<a http="http:taobao.com">注册</a>
<a http="http:aiyiqi.com">购物车</a>
</td>-->
</tr>
</table>
</td>
</tr>
<tr height="50px">
<td bgcolor="black">
<!-- 常用于调整内联标签的空隙-->
<a href="#">
<font color="aliceblue" size="5">首页</font>
</a>
<a href="#">
<font color="aliceblue">手机数码</font>
</a>
<a href="#">
<font color="aliceblue">电脑办公</font>
</a>
<a href="#">
<font color="aliceblue">生活用品</font>
</a>
</td>
</tr>
<tr>
<td>
<img src="image/1.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr height="50px">
<td colspan="7">
<font size="7" color="black">最新商品</font>
∇
<img src="image/title2.jpg" />
</td>
</tr>
<tr>
<td rowspan="2" width="190px" height="500px">
<img src="image/big01.jpg" width="100%" height="100%" / >
</td>
<td colspan="3" width="550px" heigth="250px">
<img src="image/middle01.jpg" width="100%" height="100%"/>
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td><td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
</tr>
<tr>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="image/footer.jpg" width="100%" />
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr height="50px">
<td colspan="7">
<font size="7" color="black">最新商品</font>
∇
<img src="image/title2.jpg" />
</td>
</tr>
<tr>
<td rowspan="2" width="190px" height="500px">
<img src="image/big01.jpg" width="100%" height="100%" / >
</td>
<td colspan="3" width="550px" heigth="250px">
<img src="image/middle01.jpg" width="100%" height="100%"/>
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td><td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
</tr>
<tr>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
</td>
<td width="185px" height="250px">
<img src="image/small03.jpg" width="100%" height="100%" />
<!-- img 标签常用的属性src先对本页面文件夹的相对路径， /表示下一级，../表示上一级，也可以写绝对路径>width ,height 可以用像素也可以用比例相对再用父标签的比例（图片在表格中经常用这个>-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="80%">
<img src="image/ad.jpg" />
</td>
</tr>
<tr>
<td align="center">
<a href="#">关于我们</a>
<!--a标签的主要属性href 链接的地址（往往是绝对路径），# 表示有链接的样式，但是不会跳转，-->
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br />
<p>
©版权所有，盗者必究
</p>
</td>
</tr>
</table>
</body>
</html>总结：
1.在table的地方确定宽度，在tr确定高度， 在td的地方确定每个单元格的宽度和高度（当td处没有设置宽高度的时候，由里面的内容决定大小）
2.width=%多少是指占父类看宽度或高度的比例，td里没有th面有图片width或height 修饰的时候就默认用图片本身的大小
3.a标签中不能设置字体的大小和颜色，所以里面要包含一个子类的font标签-->
4. 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令 上面的是HTML5的版本，其他版本要加dtd（文档约束）
<!--注意：不是标签，是一个指令，一定要写在文档的最前面，DOCTYPE 不区分大小写-->
5. 这是一个W3C的标准；
lang代表语言，en是英语；改成zh-cn指简体中文
没什么实际的意义只是一种规范，告诉搜索引擎是中文站还是英文网站
6. <meta charset="UTF-8">
编码格式 告诉给浏览器用什么方式来都这页代码
不写这个可能会乱码-
7. table常设置的属性align表格的居中，cellpadding单元格的空隙,cellspacing单元格之间的空隙，width宽度
计算：1.看容器中的宽度和高度，父容器的宽度或高度要减去padding，
同时需要考虑个同级容器的margin和border。如果比较复杂就画出图来
8. 常用于调整内联标签的空隙
9. img 标签常用的属性src先对本页面文件夹的先对路径， /表示下一级，../表示上一级，也可以写绝对路径>width ,height 可以用像素也可以用比例相对再用父标签的比例（图片在表格中经常用这个
10.a标签的主要属性href 链接的地址（往往是绝对路径），# 表示有链接的样式，但是不会跳转，
11.大容器的宽可以先确定，但是高不用设置（子容器会把大容器给撑起来）浮动
或是定位的div除外
12.<a href="javascript:void(0);"> </a>//把连接的任务交给js来处理
1845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
