阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS

一、阿里巴巴企业黄页HTML
二、HTML标签介绍
三、frameset框架、iframe框架
- frameset、iframe框架实例
四、HTML5标签
- h5 canvas画布标签、拖放
- HTML5 input类型
五、CSS
相关资料

一、阿里巴巴企业黄页HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>阿里巴巴（中国）网络技术有限公司</title><style type="text/css">.certification{background-color: orange;width:80px;height: 22px;color:white;font-size:12px;text-align: center;text-decoration: none;display: inline-block;border:none;}.name{width:600px;height:23px;margin-left:100px;}.nowfunction{width:300px;heigth:23px;position: absolute;top:20px;right:0px;}.nowfunction a{float:left;margin-right:15px;text-decoration:none;}.mainInfo{width:1225px;height:100px;margin-left: 100px;margin-top:20px;background-color:#F2F9FC;}.InfoMeau{width: 1070px;height:44px;position:absolute;margin-left: 100px;margin-top:50px;}.InfoOpt{width:150px;float:left;text-align: center;border: 0.5px solid #eee;background-color: #eeeeee;}.InfoOpt a{text-decoration:none;}.InfoOpt h2{font-size:16px;color: #000;display: inline-block;}.InfoOpt span{font-size: 12px;color: #999;font-weight: normal;}.foundInfo{width:1070px;margin-left: 100px;margin-top:120px;}.ntable{width: 100%;margin: 0 auto;margin-bottom: 20px;}.ntable td{padding: 10px 10px 11px 10px;border: #E4EEF6 1px solid;word-break: break-all;font-size: 14px;line-height: 1.6;color: #222;word-wrap: break-word;}.ntable .tb{background: #F2F9FC;}.SHInfo{width:1070px;margin-left:100px;margin-top:50px;}.SHInfo a{text-decoration:none;position: relative;top: -40px;left: 1030px;}.SHInfo span{font-size: 14px;color: #999;font-weight: normal;}.SHdetail{width:1070px;height: 600px;margin-left: 100px;}.SHdetail div{width: 500px;height: 500px;border:1px solid #eeeeee;float:left;margin-left: 20px;}.shareholder{width:1070px;margin-left: 100px;}.shareholder span{font-size: 14px;color: #999;font-weight: normal;}</style>
</head>
<body><div class="header-panel"><divstyle="float:left;"><img src="${ctxPath}\images\aliLogo.png"></div><div class="name"><h3style="width:500px;">阿里巴巴（中国）网络技术有限公司&nbsp;<button class="certification">√ 我要认证</button></h3></div><div class="nowfunction"><a href="#">风险监控</a><a href="#">递名片</a><a href="#">笔记</a><a href="#">对比</a><a href="#">关注</a></div><div class="mainInfo"><astyle="position: relative;top: 10px;left: 5px;">电话：0571-8502****<a href="#"style="position: relative;top: 10px;left: 10px;text-decoration:none;">更多号码</a><a href="#"style="position: relative;top: 10px;left: 10px;text-decoration:none;">编辑</a></a><a href="https://www.alibabagroup.com/cn/global/home"style="position: relative;top: 10px;left: 100px;text-decoration:none;">官网：https://www.alibabagroup.com/cn/global/h...<a href="#"style="position: relative;top: 10px;left: 110px;text-decoration:none;">认证</a></a><a href="#"style="position:absolute;top:72px;right:40px;text-decoration:none;color:orange;">编辑企业信息</a><astyle="position: relative;top: 37px;left: -625px;">邮箱：***@alibaba-inc.com</a><astyle="position: relative;top: 37px;left: -467px;">地址： 浙江省杭州市滨江区网商路699号<a href="#"style="position: relative;top: 37px;left: -457px;text-decoration:none;">附近企业</a></a><astyle="position: relative;top: 64px;margin-left: -1175px;">简介：阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立，他...<a href="#"style="position: relative;top: 64px;margin-left: 10px;text-decoration:none;">详情</a></a></div><div class="InfoMeau"><div class="InfoOpt"style="background-color: white;"><a href="#"><h2style="color: #128bed;">基本信息</h2><span>282</span></a></div><div class="InfoOpt"><a href="#"><h2>法律诉讼</h2><span>539</span></a></div><div class="InfoOpt"><a href="#"><h2>经营状况</h2><span>999+</span></a></div><div class="InfoOpt"><a href="#"><h2>经营风险</h2><span>27</span></a></div><div class="InfoOpt"><a href="#"><h2>企业发展</h2><span>52</span></a></div><div class="InfoOpt"><a href="#"><h2>知识产权</h2><span>159</span></a></div><div class="InfoOpt"><a href="#"><h2>历史信息</h2><span>88</span></a></div></div></div><div class="container"><div class="foundInfo"><table class="ntable"><tr><td width="20%" class="tb">注册资本</td><td width="30%" class="">512233万美元</td><td width="20%" class="tb">实缴资本</td><td width="30%" class="">59690万美元</td></tr><tr><td class="tb">经营状态</td><td class="">存续</td><td class="tb" width="18%">成立日期</td><td class="">1999-09-09</td></tr><tr><td class="tb">统一社会信用代码</td><td class="">91330100716105852F</td><td class="tb">纳税人识别号</td><td class="">91330100716105852F</td></tr><tr><td class="tb">注册号</td><td class="">330100400015575</td><td class="tb" width="15%">组织机构代码</td><td class="">71610585-2</td></tr><tr><td class="tb">企业类型</td><td class="">有限责任公司(台港澳与境内合资)</td><td class="tb">所属行业</td><td class="">信息传输、软件和信息技术服务业</td></tr><tr><td class="tb">核准日期</td><td class=""style="max-width:301px;">2019-04-08</td><td class="tb">登记机关</td><td class="">杭州市高新区（滨江）市场监督管理局</td></tr><tr><td class="tb">所属地区</td><td class=""style="max-width:301px;">浙江省</td><td class="tb">英文名</td><td class="">Alibaba (China) Technology Co., Ltd.</td></tr><tr><td class="tb">曾用名</td><td class=""><span>阿里巴巴（杭州）网络技术发展有限公司&nbsp;&nbsp;</span><span>阿里巴巴(中国)网络有限公司&nbsp;&nbsp;</span></td><td class="tb">参保人数</td><td class="">759</td></tr><tr><td class="tb">人员规模</td><td class="">1000人以上</td><td class="tb">营业期限</td><td class="">1999-09-09 至 2040-09-08</td></tr><tr><td class="tb">企业地址</td><td class="" colspan="3">浙江省杭州市滨江区网商路699号<a href="#" class="m-l text-primary"style="text-decoration:none;"> 查看地图</a><a data-toggle="modal" data-target="#loginModal" href="#" class="m-l text-primary"style="text-decoration:none;"> 附近企业</a></td></tr><tr><td class="tb">经营范围</td><td class="" colspan="3">开发、销售计算机网络应用软件;设计、制作、加工计算机网络产品并提供相关技术服务和咨询服务;服务:自有物业租赁,翻译,成年人的非证书劳动职业技能培训(涉及许可证的除外)。(依法须经批准的项目,经相关部门批准后方可开展经营活动)</td></tr></table></div><div class="SHInfo"><h3>股东信息统计分析</h3><a href="#"><span>↑收起</span></a></div><div class="SHdetail"><div><astyle="position: relative;top:10px;left: 10px;">股东持股比例（%）</a></div><div><astyle="position: relative;top:10px;left: 10px;">股东认缴出资额（万美元）</a></div></div><div class="shareholder"><h3>股东信息<astyle="color:#128bed;">3</a></h3><span>(查看更多1条<spanstyle="color:orange;">历史股东</span>)</span></div></div>
</body>
</html>

二、HTML标签介绍

三、frameset框架、iframe框架

frameset、iframe框架实例

1.frameset.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>frameset框架</title>
</head>
<frameset cols="25%,50%,*" boder="5"><frame src="http://www.baidu.com" scrolling="no"></frame><frameset rows="50%,*" boder="5"><frame src="http://www.qq.com" scrolling="no"></frame><frame src="http://www.weibo.com"></frame></frameset><frame src="http://www.sina.com"></frame>
</frameset>
</html>

运行结果：

2.iframe.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iframe框架</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="百度" frameborder="3"
width="100%" height="400"scrolling="yes"></iframe>
<iframe src="http://www.qq.com" name="qq" frameborder="3" scrolling="yes"
width="50%" height="400"
></iframe>
<iframe src="http://www.sina.com" name="新浪" frameborder="3" scrolling="yes"></iframe>
</body>
</html>

运行结果如下：

3.iframe套iframe
iframe1.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iframe框架</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="百度" frameborder="3"
width="100%" height="400"scrolling="yes"></iframe>
<iframe src="iframe2.html" name="_parent" frameborder="3" scrolling="yes"
width="50%" height="400"
></iframe>
<iframe src="http://www.sina.com" name="新浪" frameborder="3" scrolling="yes"></iframe>
</body>
</html>

iframe2.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iframe框架</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="百度" frameborder="3"
width="100%" height="400"scrolling="yes"></iframe>
<p><a href="http://www.baidu.com" target="_parent">百度</a><a href="http://www.sina.com">新浪</a>
</p>
<iframe src="http://www.sina.com" name="新浪" frameborder="3" scrolling="yes"></iframe>
</body>
</html>

*其中 target="_parent 将子页面上的链接点击后返回到父页面。不写这行代码即在子页面跳转。

运行结果：

四、HTML5标签

h5 canvas画布标签、拖放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html5特特标签</title>
</head>
<body>
<h1>html5 canvas画页标签</h1>
<canvas id="myCanvas" width="200" height="150"style="border: 1px solid #000000"></canvas>
<br>
<h1>html5 拖放（drag 和 drop）</h1><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"style="width: 200px;height:200px; border: 1px solid #000000;"></div>
<br>
<img id="drag1" src="girl.gif" draggable="true" ondragstart="drag(event)"> <!--设置图片为可拖放--></body>
</html>
<script>/**
* canvas画图
*/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px Arial";  //设置字体大小，字体
ctx.fillText("Hello World", 10,50);  //在canvas上给制实心的文本
ctx.strokeText("Hello World", 10,100);  //在canvas上给制空心的文本/**
* html5拖放
*/
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}//通过调用ondragoverg事件规定拖放元素放在何处
function allowDrop(ev){ev.preventDefault();
}
//放置被拖动数据时，会发生drop事件
function drop(ev)
{ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));
}</script>

运行结果：

鼠标拖动图片到框内：

HTML5 input类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html5 input类型</title>
</head>
<body>
<input type="email" name="user_email" />
<input type="url" name="user_url" />
<input type="nymber" name="points" min="1" max="10" />
<input type="date" name="user_date" />
</body>
</html>

结果如下：

五、CSS

css样式分为：行内样式、内部样式表、外部样式表

HTML中选择样式时以最靠近的样式为准

css写法：选择器、属性、属性值

外部css引用方法：

    <link href="外部CSS文件的URL路径" rel="stylesheet" type="text/css" />

内部css：

    <style>xxx</style>

class选择器：

.xxx，.xxx{xxx:xxx;
}

id选择器:

.name>#divId{color:#00B83F;
}

标签选择器：

a,table{font-family:"宋体"；
}html{background-color:#ffffff;text-align:center;maragin:auto;
}

通用选择器：

通用属性
*{font-family:"宋体"；
}

级联选择器

.name>h3>span{color:#00B83F;
}

7.18 阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS

阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS

一、阿里巴巴企业黄页HTML

二、HTML标签介绍

三、frameset框架、iframe框架

frameset、iframe框架实例

四、HTML5标签

h5 canvas画布标签、拖放

HTML5 input类型

五、CSS

相关资料

7.18 阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS相关推荐

最新文章

热门文章