DoctYpe声明
<!DCTYPE html>必须放在第一行。
<title>
<title> 搜狐</title>
<meta>
<meta charset="UTF-8"/>
<h1></h1>------<h6></h6>
提供了六级标签,所有标题字体加粗。<h1>最大<h6>最小
<p></p>
表示一段文字或者内容。<p>我爱你我爱你</p>
单标签
<br/>
表示强制换行表示,该符比较特殊,没有结束标签,直接使用。
<hr/>
表示一条水平线,该符和<br/>一样,没有结束标签,直接使用。
字体样式标签
<strong><> 让字体加粗
<em></em> 让文字倾斜。
注释和特殊符号
语法<!--注释内容-->
特殊符号 字体实体
空格  
大于号> >
小于号< <
引号“ &quat
版权符号@ ©
常见的图像格式:JPG Gif BMP PNG
图像标签的基本
语法:
<img src="图片地址" alt="图像的代替文字" title="鼠标悬停时显示的文字" width="图片宽度"
hight="图片高度"/>
超链接的标签
语法:
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
href:表示链接地址的路径
target:链接在哪个窗口打开,常用的取值有——self(自身窗口)、——blank(新建窗口)
超链接可以是文本超链接,也可以是图像超链接。
超链接的应用:
1 页面链接
从一个页面链接到另一个页面。
2 锚链接
从A页面甲跳转到本页乙。
语法:
<a name="marker">目标已</a>
3功能性链接
功能性链接比较特殊,当点击链接不是打开某个页面,而是启动本机自带的某个应用程序。如常见的
电子邮箱 QQ MSN等连接
电子邮件的用法是"mailto:电子邮件"
行内元素和块元素
块元素的特征:无论内容多少,该元素独占一行。
行元素的特征:内容撑开宽度,左右都是行内元素的可以排在一行。
<!DCTYPE html>必须放在第一行。
<title>
<title> 搜狐</title>
<meta>
<meta charset="UTF-8"/>
<h1></h1>------<h6></h6>
提供了六级标签,所有标题字体加粗。<h1>最大<h6>最小
<p></p>
表示一段文字或者内容。<p>我爱你我爱你</p>
单标签
<br/>
表示强制换行表示,该符比较特殊,没有结束标签,直接使用。
<hr/>
表示一条水平线,该符和<br/>一样,没有结束标签,直接使用。
字体样式标签
<strong><> 让字体加粗
<em></em> 让文字倾斜。
注释和特殊符号
语法<!--注释内容-->
特殊符号 字体实体
空格  
大于号> >
小于号< <
引号“ &quat
版权符号@ ©
常见的图像格式:JPG Gif BMP PNG
图像标签的基本
语法:
<img src="图片地址" alt="图像的代替文字" title="鼠标悬停时显示的文字" width="图片宽度"
hight="图片高度"/>
超链接的标签
语法:
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
href:表示链接地址的路径
target:链接在哪个窗口打开,常用的取值有——self(自身窗口)、——blank(新建窗口)
超链接可以是文本超链接,也可以是图像超链接。
超链接的应用:
1 页面链接
从一个页面链接到另一个页面。
2 锚链接
从A页面甲跳转到本页乙。
语法:
<a name="marker">目标已</a>
3功能性链接
功能性链接比较特殊,当点击链接不是打开某个页面,而是启动本机自带的某个应用程序。如常见的
电子邮箱 QQ MSN等连接
电子邮件的用法是"mailto:电子邮件"
行内元素和块元素
块元素的特征:无论内容多少,该元素独占一行。
行元素的特征:内容撑开宽度,左右都是行内元素的可以排在一行。
DoctYpe声明
<!DCTYPE html>必须放在第一行。
<title>
<title> 搜狐</title>
<meta>
<meta charset="UTF-8"/>
<h1></h1>------<h6></h6>
提供了六级标签,所有标题字体加粗。<h1>最大<h6>最小
<p></p>
表示一段文字或者内容。<p>我爱你我爱你</p>
<!DCTYPE html>必须放在第一行。
<title>
<title> 搜狐</title>
<meta>
<meta charset="UTF-8"/>
<h1></h1>------<h6></h6>
提供了六级标签,所有标题字体加粗。<h1>最大<h6>最小
<p></p>
表示一段文字或者内容。<p>我爱你我爱你</p>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang="en"> <meta charset="UTF-8"> <title>聚美优品常见问题页面</title> </head> <body> <img src="C:UsershuangzhenPicturesCamera Rollfaq01.jpg"> <br/> <img src="C:UsershuangzhenPicturesCamera Rollfaq03.jpg"> <strong>客服温馨提示</strong> <p>为了减少您可能的等待时间,您不妨先仔细阅读下面的常见问题。 查询物流 状态,退货,退余额等操作均可以登录聚<br/>美优品网站后自助进行,无需联系客服。如果仍无法解决。请您在本页页底联系在线客服,或 拨打聚美客服电话。小美<br/>谢谢您的理解! </p> <hr/> <h2>美订单什么时候发货?大概多长时间可以收到货?</h2> <p>正常情况下您的订单将在6小时内发出(最晚不超过1个工作日)。8月1日的 订单,将在3日内全部发出。发货之后,您<br/>可以在我的订单中可以查看发货状 态。由于快递公司可能无法实时更新信息,因此您看到的发货情况可能有一定延迟。 </p> <h2>为什么后下的订单,先收到了,之前下的订单还没有收到?你们是按什么顺序发货的?</h2> <p>为了单位时间内以最快速度处理尽量多订单,聚美会适当综合按订单里货品配货的情况安排发货 顺序,因此可能会出现<br/>订单发货和下单顺序不完全一致的情况。我们会尽一切努力为您尽快发货。 </p> <h2>订单显示发货了,但快递信息为什么还没有更新?</h2> <p>您在聚美订单页面看到的物流查询信息由快递公司传递提供。由于快递公司信息更新会有一定延迟, 请您多多谅解。<br/>(延迟时间可能从1天到3天不等,EMS快递的物流配送信息可能最多可能有1周左右延迟? </p> <h2>名品折扣产品显示发货了,但是为什么没有快递信息?为什么有时联系快递,快递称没有这个订单?</h2> <p>由于名品折扣产品由品牌商负责发货,品牌商选择的部分快递公司不能及时提供快递物流信息,请您耐心等候。 除非地域偏远,<br/>最晚七日内您应该可以收到货品。 </p> <h2>名品折扣产品收到后,发现漏发了或者错发,应该怎么办?</h2> <p>请您先准备好漏发,错发的相关图片(拍摄图片),再通过在线客服核实,我们需要和品牌商方面进行确认,<br/> 待客服确认后会进行补发或退款。 </p> <h2>如果使用了现金券或红包的订单想退货,怎么办?</h2> <p>对没有付款的订单或者货到付款订单,您可以选择取消订单再重新下单。如果订单已经付款(或货到付款订单已被系统确认), 请您自助登陆聚美优品<br/>网站提交退货申请,待聚美工作人员审批通过后订单就会进入退货状态,同时订单对应红包会变为<br/> “未使用”状态。此时您可以选择在我的订单页面将红包订单进行退款退货。 </p> <img src="C:UsershuangzhenPicturesCamera Rollfaq02.jpg"> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>李清照——清平乐</title> </head> <body> <h1>清平乐</h1> <hr/> <p>年年雪里,长插梅花醉,挼尽梅花无好意,赢得满衣清泪!<br/> 今年海角天涯,潇潇两鬓生华。<br/> 看取晚来风势,故应难看梅花。<br/> </p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>李清照简介</title> </head> <body> <h1>人物简介</h1> <strong>李清照</strong>(<em>1084年3月13日~1155年5月12日</em>),宋代女词人,号易安居<br/> 士,婉约词派代表,有"千古第一才女"之称。早期生活优裕,金兵入<br/>据中原时,流寓南方,境遇孤苦。所 做词,前期多写其悠闲生活,后期<br/>多悲叹身世,情调伤感。形式上善于白描手法,自辟途径,语言 清丽。<br/>论词强调协律,崇尚典雅,提出词"别是一家"之说,反对对作诗文之<br/>法作词,留有诗 集《易安居士文集》,《易安词》等。 <hr/> ©北大青鸟版权所有 </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>京东读书新闻资讯页面</title> </head> <body> <h1>看不见的完美硬币 :细节的负担</h1> <h3>创新公司皮克斯的启示</h3> <hr/> <img src="C:UsershuangzhenPicturesCamera Rollook.jpg"alt="没有"title="书"width="160"height="220"> <p>细节从来都是个好东西,完美的细节往往给我们赢得商业上的胜利。</p> <p>但是,在皮克斯,这一家满是完美主义设计师的企业里,细节竟然成了负担。</p> <p>怎么打造完美的细节?又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</p> <p><strong>看不见的完美硬币:细节的负担</strong></p> <p>在皮克斯,每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品,还是商品,细节都是至关重要的,是决定成败的关键。人们似乎也听 过许多关于细节的胜利的故事,但是在皮克斯,设计师们一个个都是完美主义者,细节显然成了皮克斯的负担。这样的太过于重视细节,往往会 伤害到企业该有的效率,最终伤害企业的根本。在完美细节和企业应有的效率面前,艾德·卡特姆做出了明智的决策。 </p> <p> 皮克斯有一个现象,被我们的制片人叫作“看不见的完美硬币(the perfect coin)”,这个词指代的是皮克斯制作人员对细节的精益求精。有时 候,被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节,也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。 凯瑟琳是《怪兽电力公司》一片的制作人员,影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中,好奇的小布第一次来 到麦克和萨里的公寓,还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她,而她还是一步步走到了两摞高高堆起的CD旁,“别乱动!”麦克大喊起来, 可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张, CD全部倒塌散落在了地板上。麦克抱怨道:“哎,那些CD都是按字母顺序排列好的!”小女孩摇 摇摆摆地走开了。这幕场景前后不到3秒钟,观众们只能够看到几个CD盒而已,但皮克斯的制作人员不仅为每一个CD盒制作了封面,还使用了可计算物体在运动时 渲染效果变化的着色器。“你能看到所有CD盒吗?看不到。”萨拉菲安接着说,“把所有CD盒全部设计一遍,这工作有意思吗?其实挺有意思的。我们还真有几位 工作人员觉得观众能在近镜头里把每张CD都看得一清二楚,所以就任劳任怨地把每张CD都雕琢了一番。也许,这其中的乐趣只有当事人才能体会吧。” </p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>聚美优品菜单列表</title> </head> <body> <h1>帮助中心</h1> <a href="">使用帮助</a> <hr/> <a href="" >账户相关</a> <hr/> <a href="">支付相关</a> <hr/> <a href="">配送相关</a> <hr/> <a href="">售后服务</a> <hr/> <a href="">聚美手机版</a> <hr/> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>仿京东快速购物导航</title> <style> p{ position: fixed; right: 5%; top: 50%; font-size: 40px; } </style> </head> <body> <a name="1"></a> <img src="C:UsershuangzhenPicturesCamera Rollimg1.png"alt="没有"title="嗯嗯" > <a name="2"></a> <img src="C:UsershuangzhenPicturesCamera Rollimg2.png" > <a name="3"></a> <img src="C:UsershuangzhenPicturesCamera Rollimg3.png" > <a name="4"></a> <img src="C:UsershuangzhenPicturesCamera Rollimg4.png" > <a name="5"></a> <img src="C:UsershuangzhenPicturesCamera Rollimg5.png" > <p> <a href="#1">返回首页</a><br/> <a href="#2">F1</a><br/> <a href="#3">F2</a><br/> <a href="#4">F3</a><br/> <a href="#5">F4</a> </p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>滚筒洗衣机排行榜</title> </head> <body> <h1>滚筒洗衣机销售排行榜</h1> <img src="C:UsershuangzhenPicturesCamera Rollwish01.jpg"> <strong>格兰士格兰仕XQG60-A708 ¥1099.00</strong> <hr/> <img src="C:UsershuangzhenPicturesCamera Rollwish02.jpg"> <strong>LGLG WD-N12430D ¥2599.00 </strong> <hr/> <img src="C:UsershuangzhenPicturesCamera Rollwish03.jpg"> <strong>三洋三洋XQG60-F1029 ¥1998.00</strong> <hr/> <img src="C:UsershuangzhenPicturesCamera Rollwish04.jpg"> <strong>三星三星WF1702NCW/XSC ¥2499.00 </strong> <hr/> <img src="C:UsershuangzhenPicturesCamera Rollwish05.jpg"> <strong>西门子西门子XQG60-WS10K2670W ¥3999.00</strong> <hr/> </body> </html>